Способы добавления стилей на страницу

Для добавления стилей на веб-страницу существует несколько способов, которые различаются своими возможностями и назначением. Далее рассмотрим их подробнее.

Связанные стили

При использовании связанных стилей описание селекторов и их значений располагается в отдельном файле, как правило, с расширением css, а для связывания документа с этим файлом применяется тег . Данный тег помещается в контейнер , как показано в примере 3.1.

Пример 3.1. Подключение связанных стилей

HTML5 CSS 2.1 IE Cr Op Sa Fx

Значение атрибута тега — rel остаётся неизменным независимо от кода, как приведено в данном примере. Значение href задаёт путь к CSS-файлу, он может быть задан как относительно, так и абсолютно. Заметьте, что таким образом можно подключать таблицу стилей, которая находится на другом сайте.

Содержимое файла mysite.css подключаемого посредством тега приведено в примере 3.2.

Как видно из данного примера, файл со стилем не хранит никаких данных, кроме синтаксиса CSS. В свою очередь и HTML-документ содержит только ссылку на файл со стилем, т. е. таким способом в полной мере реализуется принцип разделения кода и оформления сайта. Поэтому использование связанных стилей является наиболее универсальным и удобным методом добавления стиля на сайт. Ведь стили хранятся в одном файле, а в HTML-документах указывается только ссылка на него.

Глобальные стили

При использовании глобальных стилей свойства CSS описываются в самом документе и располагаются в заголовке веб-страницы. По своей гибкости и возможностям этот способ добавления стиля уступает предыдущему, но также позволяет хранить стили в одном месте, в данном случае прямо на той же странице с помощью контейнера , как показано в примере 3.3.

Пример 3.3. Использование глобального стиля

HTML5 CSS 2.1 IE Cr Op Sa Fx

     H1 
Hello, world!
  

В данном примере задан стиль тега , который затем можно повсеместно использовать на данной веб-странице (рис. 3.1).

Рис. 3.1. Вид заголовка, оформленного с помощью стилей

Внутренние стили

Внутренний или встроенный стиль является по существу расширением для одиночного тега используемого на текущей веб-странице. Для определения стиля используется атрибут style , а его значением выступает набор стилевых правил (пример 3.4).

Пример 3.4. Использование внутреннего стиля

HTML5 CSS 2.1 IE Cr Op Sa Fx

      
Пример текста
  

В данном примере стиль тега

задаётся с помощью атрибута style , в котором через точку с запятой перечисляются стилевые свойства (рис. 3.2).

Рис. 3.2. Использование внутренних стилей для изменения вида текста

Внутренние стили рекомендуется применять на сайте ограниченно или вообще отказаться от их использования. Дело в том, что добавление таких стилей увеличивает общий объём файлов, что ведет к повышению времени их загрузки в браузере, и усложняет редактирование документов для разработчиков.

Все описанные методы использования CSS могут применяться как самостоятельно, так и в сочетании друг с другом. В этом случае необходимо помнить об их иерархии. Первым имеет приоритет внутренний стиль, затем глобальный стиль и в последнюю очередь связанный стиль. В примере 3.5 применяется сразу два метода добавления стиля в документ.

Пример 3.5. Сочетание разных методов

HTML5 CSS 2.1 IE Cr Op Sa Fx

     H1 
Заголовок 1
 
Заголовок 2
  

В данном примере первый заголовок задаётся красным цветом размером 36 пикселов с помощью внутреннего стиля, а следующий — зелёным цветом через таблицу глобальных стилей (рис. 3.3).

Рис. 3.3. Результат применения стилей

Импорт CSS

В текущую стилевую таблицу можно импортировать содержимое CSS-файла с помощью команды @import . Этот метод допускается использовать совместно со связанными или глобальными стилями, но никак не с внутренними стилями. Общий синтаксис следующий.

@import url("имя файла") типы носителей; @import "имя файла" типы носителей;

После ключевого слова @import указывается путь к стилевому файлу одним из двух приведенных способов — с помощью url или без него. В примере 3.6 показано, как можно импортировать стиль из внешнего файла в таблицу глобальных стилей.

HTML5 CSS 2.1 IE Cr Op Sa Fx

     @import url("style/header.css"); H1 
Заголовок 1
 
Заголовок 2
  

В данном примере показано подключение файла header.css , который расположен в папке style.

Аналогично происходит импорт и в файле со стилем, который затем подключается к документу (пример 3.7).

Пример 3.7. Импорт в таблице связанных стилей

@import "/style/print.css"; @import "/style/palm.css"; BODY

В данном примере показано содержимое файла mysite.css , который добавляется к нужным документам способом, показанным в примере 3.1, а именно с помощью тега .

Вопросы для проверки

1. Сайт имеет более ста HTML-документов, имеющих одинаковое стилевое оформление. Какой способ подключения CSS подходит лучше всего?

1. Связанные стили.
2. Глобальные стили.
3. Блочные стили.
4. Внутренние стили.
5. Экспорт стиля.

2. В данном примере, какой цвет будет у текста на веб-странице?

     HTML < color: black; >BODY < color: red; >P 
Текст
  

3. Какой HTML-код применяется для подключения внешнего CSS-файла?

4. Какой атрибут используется для определения внутреннего стиля?

Источник

Как подключить несколько css файлов в html

Существует несколько способов добавить CSS на страницу HTML:

• инлайн запись с помощью тега атрибута style у любого тега в HTML-разметке
• использование тега , который обычно указывается внутри секции в HTML-разметке
• использование отдельного CSS-файла

 lang="ru">  charset="UTF-8"> Основной файл index.html  rel="stylesheet" href="../css/main.css">  rel="stylesheet" href="../css/reset.css">  rel="stylesheet" href="../css/fonts.css">   

       
Для просмотра подробной информации пройдите по ссылке: Основы CSS 3
   

       Основы CSS 3   

font-size: 20px; font-weight: bold;