Здравствуйте, уважаемые читатели сайта Uspei.com. На данный момент мы с вами успели создать структуру HTML документа. Это так называемый фундамент. Теперь наша задача подключить к данному документу таблицу стилей css (или по другому каскадные таблицы стилей), что бы придать нашей HTML странице дизайн или какие-нибудь атрибуты.
В области HEAD мы пропишем с вами специальный тег и укажем, что мы хотим подключить файл style.css. Это и есть таблица стилей, которые всегда имеют расширение .css. Браузер, дойдя до этой строки, начинает искать файл с расширением .css по тому пути, который мы укажем.
В таблице стилей css указываются стили, которые говорят браузеру как отражать тот или иной элемент. Например, в стилях может быть прописано, что все заголовки будут красного цвета или необходимо на фон текста вставить изображение (как это сделать тут), и многое многое другое. То есть, в HTML документе мы создаем “что”, а в стилях CSS прописываем “как”.
Создание и расположение файлов .css
Заходим в наш любимый Notepad++, создаем новый документ, и сохраняем его как “style.css”. При этом все файлы с лучше поместить в отдельную папку “css”. В документе HTML в области HEAD мы создаем одинарный тег <link> и прописываем ему уже знакомый атрибут “href”, указывающий путь к нашему файлу “style.css”. Далее мы прописываем атрибут “type”, который говорит о типе подключаемого документа, в нашем случае это “text/css”. Кроме этого также укажем атрибут “rel”, значение которого будет равно “stylesheet”.
<link href= "css/style.css" type= "text/css" rel="stylesheet">
Все это будет говорить, что подключается “таблица стилей” в виде текстового файла по такому-то адресу.
К одному HTML документу можно подключить несколько таблиц стилей css, соответственно к одной таблице стилей можно подключить несколько HTML документов.
Селекторы и свойства таблицы стилей .css
Теперь пришло время заполнить таблицу стилей css. Каждый стиль состоит из двух элементов, это “селектор” и его “свойства” со значениями.
– Селектор p
Селектор это те теги, с которыми мы в данный момент работаем, то, что именно мы изменяем. Например, картинки, шрифт, фон, абзацы, блок <div> и т.д. Давайте разберем 3 самых популярных селектора, которые активно используются. К примеру мы хотим изменить цвет всех абзацев на серый, для этого укажем так:
Где #404040 (серый) это способ отражения цвета в стилях css, который мы разберем чуть позже, а “p” это тег абзаца. Естественно запоминать их не нужно, позже я познакомлю вас с программой, с помощью которой вы будите оперировать ими с легкостью.
После этого в браузере мы увидим, что все абзацы получили серый цвет.
– Селектор # (id)
Второй пример, мы хотим сделать красным наш главный заголовок, для этого воспользуемся “id” нашего заголовка H1, который у нас имеет значение “header”.
Далее в таблице стилей css мы прописываем, что у id=”header” будет красный цвет. Для обозначения “id” в стилях css применяется #.
В браузере мы увидим, что наш заголовок окрасился в красный цвет.
– Селектор “class”
Это был второй распространенный вид селектора по “id”. Третьим видом селектора является “class”, присваиваеваемый всем элементам, которые мы хотим изменить. Конечно, можно было бы присвоить каждому элементу свой “id”, но использование селектора “class” намного удобней. Создадим его для начала в “таблице стилей”, а уж потом пропишем в html код. Для обозначения данного селектора в css используется точка.
Теперь пропишем данный класс трем любым элементам, которые мы хотим изменить.
Обновляем браузер и видим, что наши выделенные элементы приобрели синеватый оттенок.
Это последний из трех видов селекторов, которые используются в 90% случаев. Если будите знать их, то 90% знаний стилей css у вас в кармане))))).