В этом уроке мы рассмотрим технологию CSS и разберем, как вообще это все работает. Ранее мы научились создавать html страницу , которая внутри содержит ряд html тегов. Теперь задача - подключить к этой странице таблицу стилей.
Делается это следующим образом. В области <head> </head> прописывается специальный тег, который укажет, что мы подключаем файл style.css, в котором находятся стили для нашей страницы. Все файлы со стилями должны обязательно иметь расширение .сss.
Браузер, когда доходит до нашего тега, где указан файл с таблицами стилей CSS, начинает искать именно указанный файл с указанным именем и по тому пути, который указывается в атрибуте href="".
<link rel="stylesheet" href="css/style.css" >
После того как браузер нашел файл со стилями, он его подгружает к html документy. В этом файле содержатся стили, которые указывает браузеру, как отображать тот или иной элемент на странице. Например, в стилях могут быть прописаны любые правила, например: все заголовки отображать красного цвета, а всем параграфам делать отступ слева. Таким образом, когда браузер дойдет до первого заголовка, он примет правило, что он должен быть красного цвета и применит это правило. Браузер начнет обрабатывать страницу дальше, после чего натолкнется на параграф, где в файле стилей, указанно что у параграфа нужно установить отступ с лева.
Итак браузер обработает все элементы на странице для которых установлены определенные правила (стили). Другими словами HTML страница говорит браузеру ЧТО ОТОБРАЗИТЬ (параграф, заголовок, картинку), а CSS файл указывает браузеру КАК ЭТО ОТОБРАЗИТЬ (Отступ слева, Красный цвет, спозиционировать по центру).
Вот, - это основные понятия того, как работает таблица стилей совместно с HTML страницей. Дальше, на примерах, все станет более понятно и наглядней, а в следующем уроке мы уже рассмотрим, как подключается файл с css (стилям) и как создаются условия (стили) для элементов на странице.
CSS