Использование внешних таблиц стилей css. Добавление стилей на веб-страницу
10.04.2019
Существует четыре способа подключения стилей
к вашему HTML-документу. Наиболее часто используемые методы - это встроенные CSS и внешние CSS.
Встроенный CSS в HTML - элемент
Ниже приведен пример внедрения CSS на основе вышеприведенного синтаксиса:
Заголовок
Абзац.
Получим следующий результат:
Атрибуты
Встроенный CSS - атрибут стиля
Вы можете использовать атрибут для любого HTML-элемента для определения правил стиля. Эти правила будут применяться только к данному элементу. Вот общий синтаксис:
<элемент style = "...правила стиля...">
Атрибуты
Пример
Ниже приведен пример встроенного CSS на основе приведенного выше синтаксиса:
Встроенный CSS
Получим следующий результат:
Внешний CSS стили - элемент
Элемент может использоваться для подключения внешних CSS файлов в ваш HTML-документ.
Внешняя таблица стилей CSS представляет собой отдельный текстовый файл с расширением .css
. Вы определяете все правила стиля в этом текстовом файле, а затем можете подключить CSS файл в любой HTML-документ с помощью элемента .
Атрибуты ассоциируются с элементами или правилах, определенных в любом внешнем файле таблицы стилей.
Любое правило, определенное в тегах , переопределяет правила, определенные в любом внешнем CSS-файле.
Любое правило, определенное во внешнем файле таблицы стилей, имеет наименьший приоритет в CSS, а правила, определенные в этом файле, будут применяться только тогда, когда не применяются два предшествующих правила.
Обработка старыми браузерами
Существует множество старых браузеров, которые не поддерживают CSS. Поэтому мы должны позаботиться о написании встроенного CSS в нашем HTML-документе. Следующий фрагмент кода показывает, как можно использовать теги комментариев, чтобы скрыть CSS из старых браузеров:
Оглавление документа
Для добавления стилей на веб-страницу существует несколько способов, которые различаются своими возможностями и назначением. Далее рассмотрены способы подключения CSS.
Таблица связанных стилей
При использовании таблицы связанных стилей описание селекторов и их свойств располагается в отдельном файле, как правило, с расширением css, а для связывания документа с этим файлом применяется тег . Данный тег помещается в контейнер , как показано в примере 1.
Пример 1. Подключение таблицы связанных стилей
Стили
"http://www.htmlbook.ru/main.css"
>
Заголовок
Текст
Значения параметров тега - rel и type остаются неизменными, как приведено в данном примере. Параметр href задает путь к CSS-файлу, он может быть задан как относительно, так и абсолютно. Заметьте, что таким образом можно подключать таблицу стилей, которая находится на другом сайте.
Содержимое файла mysite.css подключаемого посредством тега приведено в примере 2.
Пример 2. Файл со стилем
H1
{
color:
navy
;
font-size:
200
%
;
font-family:
Arial, Verdana,
sans-serif
;
text-align:
center
;
}
P
{
padding-left:
20
px
;
}
Как видно из данного примера, файл со стилем не хранит никаких данных, кроме синтаксиса CSS. В свою очередь и HTML-документ содержит только ссылку на файл со стилем, т.е. таким способом в полной мере реализуется принцип разделения содержимого и оформления сайта. Поэтому использование таблицы связанных стилей является наиболее универсальным и удобным методом добавления стиля на сайт. Ведь стили хранятся в одном файле, а в HTML-документах указывается только ссылка на него.
Таблица глобальных стилей
При использовании таблицы глобальных стилей свойства CSS описываются в самом документе и обычно располагаются в заголовке веб-страницы. По своей гибкости и возможностям этот способ добавления стиля уступает предыдущему, но также позволяет размещать все стили в одном месте. В данном случае, прямо в теле документа, с помощью контейнера