Цикл статей «CSS учебник».
Следующая статья — «Синтаксис CSS».
Предыдущая статья — «Введение в CSS».
Для изучения способов подключения CSS к HTML-странице будем использовать вот такой простенький CSS, который окрашивает фон в блекло-оранжевый цвет:
|
1 2 3 |
body { background-color:#d9caad; } |
Можете пока не обращать внимание на сам синтаксис, он будет разобран в следующей статье. В этой статье рассмотрим способы подключения этого CSS к нашему HTML-документу.
Способ 1: Подключение через атрибут style (Внутренний стиль)
С виду может показаться самым простым способом, но в реальной жизни он не рекомендуется к использованию, так как очень сильно загромождает HTML-документ и усложняет последующие внесения правок.
В этом способе используется атрибут style , в котором перечисляются CSS-свойства элемента, к которому применён атрибут style и всех вложенных элементов.
Пример:
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <head> <title>CSS style example</title> </head> <body style="background-color:#d9caad;"> <p> Simple text. </p> </body> </html> |
Посмотреть результат. Обратите внимание на цвет фона.
Способ 2: Глобальный стиль для документа
Можно указать стили CSS в теге <style>...</style> секции <head>...</head>. В этом случае стили будут применяться ко всему документу с учётом селекторов (опишу в следующей статье).
Пример:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <head> <title>CSS global import add example</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > <style media="screen"> body { background-color:#d9caad; } </style> </head> <body> <p> Simple text. </p> <a href="https://urvanov.ru/2016/02/09/подключение-css-к-html/#global">Статья с описанием способов подключения CSS к HTML-странице</a> </body> </html> |
Посмотреть результат. В примере выше атрибут media="screen" указывает на то, что стиль нужно использовать при отображении на экране. Можно также использовать значения "all" , "print" и некоторые другие.
Способ 3: подключение внешнего CSS-файла со стилями
Этот способ рекомендуется к использованию, так как он полностью отделяет описание структуры и содержания документа от его визуального оформления, что позволяет менять оформление с минимальными затратами.
Для этого способа нам нужно создать отдельный текстовый файл с расширением «.css». Обычно для файлов со стилями создают отдельный подкаталог, например «css». Пусть в у нас будет файл со стилями «extfile.css», расположенный в подкаталоге «css», и HTML-документ «extfile.html».
Структура файлов:
|
1 2 3 4 |
Рабочий каталог - css/ - extfile.css - extfile.html |
Пример их содержимого:
css/extfile.css:
|
1 2 3 |
body { background-color:#d9caad; } |
extfile.html:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <title>CSS extfile add example</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > <link rel="stylesheet" type="text/css" media="screen" href="css/extfile.css" /> </head> <body> <p> Simple text. </p> <a href="https://urvanov.ru/2016/02/09/подключение-css-к-html/#extfile">Статья с описанием способов подключения CSS к HTML-странице</a> </body> </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");.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <title>CSS globalimport add example</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > <style media="screen"> @import url("css/import.css") screen; body { background-color:#d9caad; } </style> </head> <body> <p> Simple text. </p> <a href="https://urvanov.ru/2016/02/09/подключение-css-к-html/#globalimport">Статья с описанием способов подключения CSS к HTML-странице</a> </body> </html> |
Пример содержимого файла «css/import.css»:
|
1 2 3 |
p { background-color:#f0f0f0; } |
Этот пример делает фон абзацев серым.
То же самое можно сделать для внешнего файла стилей. В этом случае @import добавляется в CSS-файл:
css/extfileimport.css:
|
1 2 3 4 |
@import url("import.css") screen; body { background-color:#d9caad; } |
extfileimport.html:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <title>CSS extfileimport add example</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > <link rel="stylesheet" type="text/css" media="screen" href="css/extfileimport.css" /> </head> <body> <p> Simple text. </p> <a href="https://urvanov.ru/2016/02/09/подключение-css-к-html/#extfileimport">Статья с описанием способов подключения CSS к HTML-странице</a> </body> </html> |
Приоритет стилей уменьшается в последовательности:
- Внутренний стиль через атрибут style.
- Глобальный стиль
- Стиль во внешнем файле
Это значит, что если во внешнем файле указан зелёный фон, в глобальном стиле указан жёлтый, а во внутреннем синий, то будет применяться синий фон.
Цикл статей «CSS учебник».
Следующая статья — «Синтаксис CSS».
Предыдущая статья — «Введение в CSS».