Подключение CSS к HTML документу онлайн урок.



Рассмотрим вопрос о том, как подключить стили к разметке веб-документа. Существует три способа это сделать.

1) Наиболее оптимальный способ - создать отдельный файл и подключить его в теге верхнего уровня <head> веб-документа. В этом случае стилевой файл будет кеширован и браузер будет брать его из своего локального кеша при последующих загрузках, что ускорит загрузку самих веб-документов в окне браузера.

Стилевые файлы имеют расширение css и представляют собой текстовый файл. В этом файле описываются стилевые свойства согласно синтаксису CSS. Далее, этот файл подключается в теге <head> при помощи тега <link>.

<head>
  <link href='style.css' rel='stylesheet' type='text/css'>
</head>


Тут в теге <link> указаны дополнительные атрибуты для определения пути файла (href) и его типа (rel, type). Путь к стилевому файлу может быть либо относительным, либо абсолютным.

2) Стили можно подключать без дополнительного файла используя тег <style> - прямо внутри веб-документа. Внутрь этого тега помещается все то же самое, что и в стилевой файл. Недостаток этого способа в том, что стили в данном случае не кешируются.



3) Также можно интегрировать конкретный стиль в конкретный тег при помощи атрибута style конкретного тега . В этом атрибуте указываются стилевые свойства без селектора. Они будут применены конкретно к тому тегу, в котором указаны. В нашем примере это будет выглядеть следующим образом:



Необходимо также добавить, что концепция web 2.0 требует четкого разделения содержимого веб-страницы и ее оформления. Т.е. наиболее правильным методом является подключение отдельных файлов .css, как показано в пункте 1).

Тем не менее, разные методы объявления стилей могут быть совмещены в одном документе. При этом, могут возникать конфликты. Рассмотрим пример:



В данном случае в силу вступают правила приоритета и текст станет голубым, т.к. внутренние стили более приоритетные чем подключаемые. Приоритет можно обойти, если в подключаемом стиле добавить атрибут !important

 { 
  color: red !important;
}


CSS файлы или шрифты также можно включать в другие CSS файлы. Для этого используется конструкция import:

/* For css files  */
@import url("styles/another_style.css");

/* For google font */
@import url("https://fonts.googleapis.com/css?family=Slabo+27px");


Проверьте свои знания
Создать пустой файл index.html. В нем создать теги верхнего уровня в качестве основной структуры разметки. Создать пустой файл style.css и поместить его в каталог css в корне проекта. Подключить стилевой файл в теге <head> документа index.html