В предыдущем уроке мы немного познакомились с HTML, с чем его едят и зачем он нужен. Но все, наверное, заметили, что красоты в наборе текста и символов мало, страницы выглядит не так нарядно, как большинство продающих, ультра-современных сайтов. Что же придает привычный внешний вид странице сайта?
Поговорим о каскадной таблице стилей, проще говоря, о CSS. Это, так называемый, язык для придания привычного внешнего вида сверстанной HTML-странице. Все внешние изыски, красивые кнопки, блоки, таблицы, даже анимация и эффекты, все создается с помощью CSS3. Это настоящая магия, простор для фантазии. Подключение шрифтов, размеры, цвета, градиенты, переходы, всем управляет великий и могучий CSS. Не станем растекаться мыслью по древу, перейдем к практической части.
Стили можно прописывать инлайн, иначе говоря прямо в теле html-документа, но это дурной тон и желательно все стили выносить в отдельный, внешний файл с расширением .css, затем его подключать. Исключением могут быть случаи, когда некоторые стили присваиваются динамически, с помощью скрипта или в ряде необходимых, нестандартных ситуаций.
Подключение файлов CSS
Внешний файл стилей подключается элементарной конструкцией в голове документа, т.е. между тегами head.
<link href="style.css" rel="stylesheet">
Для ускорения отображения страницы рекомендуется выносить подключение стилей из head, но чаще это не делают, ведь на секунду пользователь увидит поломанную страницу, с набором текста, это смотрится удручающе. Поэтому лучшим вариантом станет, если у вам очень много стилей, разбить их на пару файлов, наиболее важный подключать в башке, подключение остальных вынести перед закрывающимся тегом body. Но этим способом я пользуюсь редко, хотя может быть полезно в некоторых случаях.
Как уже понятно, href - это ссылка на файл стилей, соответствующий путь к документу, атрибут rel со значением stylesheet указывает, что подключаем мы именно стили.
Структура файла стилей
Как же организован сам файл стилей? Для каждого селектора (это то над чем мы совершаем стилистические изменения) соответствует свой набор свойств и их значение. Селектор по тегу p в примере ниже определяет цвет текста, размер шрифта и отступ снизу. Цвет, размер шрифта и отступ снизу - это свойства селектора p, а справа от них через двоеточие их значения.
p {
color: #ccc;
font-size: 14px;
margin-bottom: 10px;
}Таким образом файл стилей состоит из набора селекторов с их свойствами. В данном случае свойства применяются для всех абзацей, чтобы разнообразить внешний вид документа, используют другие селекторы, классы и id.
Что такое классы в CSS
Самым простым и рациональным способом добавления разных стилей для одинаковых тегов, становится добавление классов. Например, мы имеем два абзаца, хотим, чтобы размер шрифта одного был 14px, а другого 12px. В данном случае в код html добавляем атрибут class с уникальными значениями first и second.
<p class="first">...</p>
<p class="second">...</p>
В качестве селектора используем не тег, а вышеперечисленные классы. Синтаксис следующий, сначала идет символ точки, затем название класса. Тогда содержимое css-файла будет:
.first {font-size: 14px;}
.second {font-size: 12px;}Такое устройство css дает широкие возможности для организации стилистики документа. Классы можно присваивать хоть всем тегам, если это требуется в рамках верстки.