How To или как сделать CSS стили уроки для начинающих академия
❮ Назад Дальше ❯
Когда обозреватель читает таблицу стилей, он форматирует HTML-документ в соответствии с информацией в таблице стилей.
Три способа вставки CSS
Существует три способа вставки таблицы стилей:
- Внешняя таблица стилей
- Внутренняя таблица стилей
- Встроенный стиль
Внешняя таблица стилей
С помощью Внешняя таблица стилей, вы можете изменить внешний вид всего веб-сайта, изменив только один файл!
Каждая страница должна содержать ссылку на внешний файл таблицы стилей внутри элемента <Link>. Элемент <Link> попадает внутрь <head> раздела:
Пример
<head>
<link rel=»stylesheet» type=»text/css»
href=»mystyle.css»>
</head>
Внешняя таблица стилей может быть написана в любом текстовом редакторе. Файл не должен содержать HTML-тегов.
Файл таблицы стилей должен быть сохранен с расширением.
CSS.
Вот как выглядит «myStyle. CSS»:
background-color: lightblue;
}
h2 {
color: navy;
margin-left: 20px;
}
Примечание: Не добавляйте пробел между значением свойства и единицей измерения (например, margin-left: 20 px; ). Правильный путь:margin-left: 20px;
Внутренняя таблица стилей
Внутренняя таблица стилей может использоваться, если одна отдельная страница имеет уникальный стиль.
Внутренние стили определяются в элементе <Style> внутри <head> раздела HTML-страницы:
Пример
<head>
<style>
body {
background-color: linen;
}
h2 {
color: maroon;
}
</style>
</head>
Встроенные стили
Встроенный стиль может использоваться для применения уникального стиля для одного элемента.
Чтобы использовать встроенные стили, добавьте атрибут style к соответствующему элементу. Teh атрибут style может содержать любое свойство CSS.
В приведенном ниже примере показано, как изменить цвет и левое поле элемента <h2>:
Пример
<h2>This is a heading</h2>
Совет: Встроенный стиль теряет многие преимущества таблицы стилей (путем смешивания контент с презентацией). Используйте этот метод экономно.
Несколько таблиц стилей
Если некоторые свойства были определены для одного и того же селектора (элемента) в разных таблицах стилей, будет использовано значение из последней таблицы стилей чтения.
Примере
Предположим, что внешняя таблица стилей имеет следующий стиль для элемента <h2>:
h2
{
color: navy;
}
Затем предположим, что внутренняя таблица стилей также имеет следующий стиль для элемента <h2>:
h2
{
color: orange;
}
Если внутренний стиль определен после ссылки на внешнюю таблицу стилей, элементы <h2> будут «оранжевым»:
Пример
<link rel=»stylesheet» type=»text/css» href=»mystyle.
css»><style>
h2 {
color: orange;
}
</style>
</head>
Однако если внутренний стиль определен перед ссылкой на внешнюю таблицу стилей, элементы <h2> будут «navy»:
Пример
<head>
<style>
h2 {
color: orange;
}
</style>
<link rel=»stylesheet» type=»text/css» href=»mystyle.css»>
</head>
Каскадный порядок
Какой стиль будет использоваться при наличии более одного стиля, заданного для элемента HTML?
Вообще говоря, мы можем сказать, что все стили будут «Каскад» в новый «виртуальный» стиль лист по следующим правилам, где номер один имеет наивысший приоритет:
- Встроенный стиль (внутри элемента HTML)
- Внешние и внутренние таблицы стилей (в разделе head)
- Браузер по умолчанию
Таким образом, встроенный стиль (внутри определенного элемента HTML) имеет наивысший приоритет, что означает, что он будет переопределять стиль, определенный внутри тега <head>, или в
Внешняя таблица стилей или значение по умолчанию обозревателя.
❮ Назад Дальше ❯
Внешние таблицы стилей — Xiper
Третья статья из цикла «подключение CSS» посвящена внешним таблицам стилей. Использование внешних таблиц — самый гибкий, мощный, удобный и правильный способ соединить HTML и CSS.
Суть способа в том, что CSS выноситься в отдельный файл (или файлы). А в HTML указывается, какие именно CSS-файлы к нему нужно применить.
Представляем внешнюю таблицу
Внешняя таблица стилей — это обычный текстовый файл с расширением css. Вообще говоря, это расширение не обязательное, но очень рекомендуемое, дабы избежать проблем с некоторыми особо старыми браузерами.
Файл с таблицей стилей должен содержать только правила и комментарии CSS. Наличие во внешней таблице стилей, например, HTML-разметки может привести к тому, что некоторые ее части или вообще вся таблица будут проигнорированы.
Тег link для внешних таблиц стилей
Для подключения внешнего CSS используется тег link.
Знакомься, тег link:
- устанавливает связь с внешними документами, чаще всего с таблицами стилей;
- должен располагаться в секции head;
- в одном документе может быть несколько тегов link.
Примеры подключения CSS
<link rel="stylesheet" type="text/css" href="css/main.css" />
Как правило, используются три атрибута:
- rel — отвечает за установку взаимосвязи и в данном случае имеет значение «stylesheet»;
- type — MIME-тип подключаемого объекта. У нас это таблица стилей — значит тип «text/сss»;
- href — абсолютный или относительный путь к самому CSS-файлу.
Также есть возможность подключать индивидуальные CSS в зависимости от устройства отображения. Для этого служит атрибут media. Подробнее с его значениями можно ознакомиться в нашем справочнике.
Пример подключения дополнительной таблицы стилей для устройств печати:
<link rel="stylesheet" type="text/css" href="css/main.css" /> <!--Основной CSS--> <link rel="stylesheet" type="text/css" href="css/print.css" media="print" /> <!--Дополнительный CSS подключается автоматически, если страница выводится на устройство печати-->
Пример подключения CSS с использованием условных комментариев (ie6.
<link rel="stylesheet" type="text/css" href="css/main.css" /> <!--[if IE 6]> <link rel="stylesheet" type="text/css" href="css/ie6.css"/> <![endif]-->
Достоинства внешних CSS
Кроме того, что все правила четко погруппированы в отдельном файле и их легко находить и, при необходимости, править, у внешних таблиц есть ряд существенных плюсов, по сравнению с вложенными. Например:
- Один и тот же CSS-файл может «обслуживать» сколько угодно HTML-страниц. Объем HTML уменьшится, вносить изменения, общие для всех страниц сайта, значительно проще.
- Можно разделить правила на логические блоки (общие стили, стили для конкретных разделов сайта), расположить их в нескольких разных CSS-файлах и, для отдельных страниц, подключать только нужные. Только учти, что тут палка о двух концах — с одной стороны получаем меньший размер подключенного CSS (ненужные файлы стилей не грузятся), с другой стороны — больше мелких файлов со стилями — это больше обращений к серверу, что, понятно, не очень хорошо скажется на быстродействии.
- Можно выделять стили для конкретных браузеров и подключать их с помощью условных комментариев. Это используется для укрощения особо упрямых браузеров. Правда, с помощью условных комментариев так же можно подключить и вложенную таблицу, но выглядеть такая конструкция будет реально громоздко.
Резюме
Использование внешних таблиц стилей — самый удобный и грамотный способ связать воедино HTML и CSS. Надеюсь, вывод ясен. В реальных проектах используй именно внешние таблицы стилей.
Комментарии CSS
❮ Предыдущий Далее ❯
CSS-комментарии не отображаются в браузере, но могут помогите задокументировать исходный код.
Комментарии CSS
Комментарии используются для объяснения кода и могут помочь при редактировании исходного кода позднее.
Комментарии игнорируются браузерами.
Комментарий CSS помещается внутри элемента
Мой Заголовок
Здравствуйте! Мир!
Этот абзац оформлен с помощью CSS.
Комментарии CSS не отображается в выходных данных.