Подключение CSS к HTML

Цикл статей «CSS учебник».

Следующая статья — «Синтаксис CSS».
Предыдущая статья — «Введение в CSS».

Для  изучения способов подключения CSS к HTML-странице будем использовать вот такой простенький CSS, который окрашивает фон в блекло-оранжевый цвет:

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

Способ 1: Подключение через атрибут style (Внутренний стиль)

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

В этом способе используется атрибут style , в котором перечисляются CSS-свойства элемента, к которому применён атрибут style  и всех вложенных элементов.

Пример:

Посмотреть результат. Обратите внимание на цвет фона.

Способ 2: Глобальный стиль для документа

Можно указать стили CSS в теге <style>...</style> секции <head>...</head>. В этом случае стили будут применяться ко всему документу с учётом селекторов (опишу в следующей статье).

Пример:

Посмотреть результат. В примере выше атрибут media="screen" указывает на то, что стиль нужно использовать при отображении на экране. Можно также использовать значения "all" , "print"  и некоторые другие.

Способ 3: подключение внешнего CSS-файла со стилями

Этот способ рекомендуется к использованию, так как он полностью отделяет описание структуры и содержания документа от его визуального оформления, что позволяет менять оформление с минимальными затратами.

Для этого способа нам нужно создать отдельный текстовый файл с расширением «.css». Обычно для файлов со стилями создают отдельный подкаталог, например «css». Пусть в у нас будет файл со стилями «extfile.css», расположенный в подкаталоге «css»,  и HTML-документ «extfile.html».

Структура файлов:

 

Пример их содержимого:

css/extfile.css:

extfile.html:

Посмотреть результат. Обратите внимание на строку <link rel="stylesheet" type="text/css" media="screen" href="css/extfile.css" />. Здесь атрибут media="screen" указывает на то, что стиль нужно использовать при отображении на экране. Можно также использовать значения "all" , "print"  и некоторые другие. Путь к внешнему файлу со стилями указывается в атрибуте href="путь_к_css-файлу".

Импорт CSS

Можно импортировать в  глобальную таблицу стилей или в таблицу стилей файла содержимое другого CSS-файла с помощью @import url("mypath.css");.

Пример для глобальных стилей:

Пример содержимого файла «css/import.css»:

Этот пример делает фон абзацев серым.

Посмотреть результат.

То же самое можно сделать для внешнего файла стилей. В этом случае @import добавляется в CSS-файл:

css/extfileimport.css:

extfileimport.html:

Посмотреть результат.

Приоритет стилей уменьшается в последовательности:

  1. Внутренний стиль через атрибут style.
  2. Глобальный стиль
  3. Стиль во внешнем файле

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

Цикл статей «CSS учебник».

Следующая статья — «Синтаксис CSS».
Предыдущая статья — «Введение в CSS».


Поделиться:
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

Добавить комментарий

Ваш e-mail не будет опубликован.

*