В предыдущей главе вы узнали для чего применяются каскадные таблицы стилей и как это работает; теперь пришло время изучить, что из себя представляет файл CSS.
Из чего состоит файл CSS?
CSS - это самый обычный текстовый файл, который можно открыть в большинстве текстовых редакторах; однако для удобства работы с ним, как правило, применяется Notepad++, который ориентирован именно на работу с файлами для сайтов.
В этом файле содержатся правила и комментарии к ним.
Для удобства дальнейшего изучения рекомендуется открыть такой файл в выше указанном редакторе, что бы наглядно видеть о чём идёт речь.
41 Скачать образец файла CSS вы можете 
3
* Загрузка возможна только для зарегистрированных пользователей!
Комментарии
Для удобства чтения и понимания содержимого таблицы разработчики вставляют в текст комментарии, которые игнорируются системой, но позволяют легко и быстро во всём разобраться. Комментарии оформляются в тексте так:
/* комментарий */
или
/**
* комментарий
* комментарий
* комментарий
*/
При использовании тестового редактора Notepad++ комментарии выделяются оливковым цветом.
В начале таблицы так же может находиться текст, оформленный как комментарии и содержащий общую информацию о файле (@copyright, @license и т.д.).
Правила
Правила, расположенные в таблице стилей, описывают большое количество разнообразных параметров, применяемых для установления местоположения элемента (объекта), указания его размеров, цветового оформления и т.п. Выглядит это так:
Каждое правило состоит из селектора (может быть несколько) и блока объявлений (рис.194, 2), помещаемого в фигурные скобки { }. Несколько селекторов в одном правиле прописываются через запятую.
Блок объявлений состоит из объявлений (рис.194, 1), которые отделяются друг друга точкой с запятой ( ; ), а каждое объявление в свою очередь состоит из свойства и значения. Свойство отделяется от значения знаком двоеточия ( : ):
Селекторы и их назначение
Прежде, чем изучать типы существующих селекторов, необходимо понять как это всё работает, понять как они применяются браузером. Что бы это понять, начать нужно с кода на HTML.
В HTML существует несколько основных понятий, которые нужно обязательно знать, иначе у вас просто не получится редактировать таблицы CSS, а значит, вы не сможете настроить внешний вид своего сайта по своему желанию. HTML и CSS слишком сильно связаны друг с другом, поэтому не разобравшись должным образом в одном, вы не сможете работать с другим.
Тег. Основной элемент языка разметки гипертекста, т.е. HTML; это слово в данном случае можно перевести как "метка". Собственно, тег это и есть метка для навигации. С помощью тегов определяются все объекты, расположенные на сайте, и не только объекты. Более подробно о языке HTML вы можете узнать в разделе Программирование > HTML, а пока вполне достаточно знать, что с помощью тегов определяются все объекты на сайте. Выглядит это, например, так:
1 <div> код </div>
где <div> это открывающий тег, а </div> - закрывающий.
В данном примере при помощи тега <div> на странице создаётся какой-то блочный элемент, а вот какой именно будет определено кодом. Что это за тег читайте в указанном выше разделе.
Для тегов применяется свой селектор вида
div,
где div - это имя тега, т.е. правило будет выглядеть так:
1 div {
2 свойство: значение;
3 свойство: значение;
4 }
Класс. Понятие класса применяют для определения стиля для какого-либо объекта или группы объектов. Класс не является элементом (объектом) страницы - в принципе, это просто набор свойств с указанными значениями, которому присвоили индивидуальное имя. Работает это так: в коде страницы, написанном на HTML, для элемента указывается класс, который вставляется в открывающий тег:
1 <div class="logo"> код </div>
В правилах CSS для любого класса применяется селектор вида
.class,
где вместо "class" вписывается имя класса; т.е. для приведённого примера правило будет записано так:
1 .logo {
2 свойство: значение;
3 свойство: значение;
4 }
Когда браузер, выполняя полученный код страницы, будет создавать данный элемент, он обратиться к таблице стилей и при помощи данного селектора получит все необходимые для его размещения и оформления правила.
Идентификатор. Стиль для тега может так же определяться через идентификатор (id). В коде странице это выглядит так:
1 <div id="clr"> код </div>
О том, какая разница между идентификатором и классом вы можете узнать из раздела Программирование > HTML, а пока достаточно понять, что для CSS эти элементы кода почти не имеют разницы, т.е. в CSS для идентификаторов, так же как и для классов, указываются точно такие же правила. Разница состоит лишь в том, что в правилах для идентификаторов селектор выглядит по-другому:
#идентификатор,
где вместо слова "идентификатор" подставляется соответствующее значение.
Селектор атрибутов. Атрибуты в тегах предназначены для расширения их возможностей. В коде HTML атрибуты выглядят так:
1 <div align="left"> код </div>
Данный код выравнивает текст по левому краю.
Для каждого атрибута может быть назначено правило CSS; в таблицах это прописывается так:
1 [align] {
2 свойство: значение;
3 свойство: значение;
4 }
Это правило будет применено ко всем тегам, имеющим указанный атрибут.
1 [align=left] {
2 свойство: значение;
3 свойство: значение;
4 }
Данное правило будет применено ко всем тегам, имеющим указанный атрибут с таким значением.
1 div [align] {
2 свойство: значение;
3 свойство: значение;
4 }
Данное правило будет применено к тегам <div>, имеющим указанный атрибут с таким значением.
Селектор псевдоклассов. Псевдоклассы применяются для определения динамического (т.е. меняющегося) состояния элемента, например, при наведении курсора на ссылку; в этом случае псевдокласс определяет изменения цвета текста. Правила для псевдоклассов записываются так:
1 a:active {
2 свойство: значение;
3 свойство: значение;
4 }
Селектор псевдоэлементов. Псевдоэлементы создают дополнительное оформление для отдельных частей текста, например, изменение цвета первой строки, изменение внешнего вида первой буквы, а так же позволяют вставлять что-то дополнительно, чего нет в коде HTML, например, дополнительный текст. Об этом подробно читайте в разделах Программирование > HTML и Программирование > CSS > Псевдоэлементы. В таблицах CSS селектор псевдоэлементов имеет такой вид:
1 p:after {
2 свойство: значение;
3 }
где :after - это один из псевдоэлементов.
Селектор дочерних элементов. С понятием "родитель" и "дочерний элемент" вы уже знакомились в предыдущих статьях; в HTML так же применяются эти понятия. Здесь дочерним элементом называется элемент, который находится внутри родительского, т.е. является вложенным в него. В коде это выглядит так:
1 <div>
2 <p> код </p>
3 </div>
В данном примере тег <p> вложен в тег <div> ... </div>, который в этом случае является контейнером для <p>.
Селектор для дочерних элементов записывается так: Селектор "родителя" > Селектор дочернего элемента:
1 div > p {
2 свойство: значение;
3 свойство: значение;
4 }
Важно то, что данное правило будет работать только для тега <p>, когда он является дочерним элементом <div>.
Контекстный селектор (селектор потомков). Принцип действия такого селектора очень похож на действие селектора дочерних элементов, но есть некоторая разница. Например, если в селекторе дочерних элементов может применяться только два элемента при условии, что один вложен в другой, то в случае с контекстным селектором могут быть применены сразу несколько элементов (тегов) подряд, так же вложенных в друг друга; при этом правило будет применено только при условии полного совпадения. Синтаксис кода в этом случае такой:
1 div p i {
2 свойство: значение;
3 свойство: значение;
4 }
Универсальный селектор. Данный селектор применяется ко всем тегам сразу. Записывается этот селектор так:
1 * {
2 свойство: значение;
3 свойство: значение;
4 }
Итак, вы изучили основы построения таблиц CSS. Теперь пора перейти к практической работе.
