Синтаксис CSS

Рассмотрим синтаксис CSS. В стилях задается набор правил отображения в парах «свойство – значение», и то, к каким элементам их применять (селектор):

Селектор

{

свойство1: значение1;

свойство2: значение2;

свойство3: значение3 значение4;

}

 

Правила записываются внутри фигурных скобок и отделяются друг от друга точкой с запятой. Между свойствами и их значениями ставится двоеточие.

CSS, как и HTML, игнорирует пробелы. Можно добавлять комментарии, заключая их между /* и */.

Селекторы

Селектор определяет, к каким элементам (тегам) страницы будут применяться правила, заданные парами «свойство – значение».

 

В качестве селектора можно использовать:

1. Название тега – тогда стиль применится ко всем таким тегам.

Пример:

A {font-size: 12pt; text-decoration: none}

TABLE {border: black solid 1px}

Первая строчка этого CSS-кода задает всем ссылкам 12-й размер шрифта и убирает подчеркивание. На второй строчке указывается, что у всех таблиц граница будет черного цвета, сплошной (solid) и шириной 1 пиксель.

1. Несколько тегов через запятую – тогда стиль применится для всех перечисленных тегов.

Пример:

H1, H2, H3, H4, H5, H6 {color: red} /* делаем все заголовки красными */

1. Несколько тегов через пробел:

TABLE A {font-size: 120%}

Правило относится ко всем тегам A, вложенным в тег TABLE. Размер шрифта увеличится на 20% от базового.

1. ID элемента. В стилях уникальный идентификатор указывается после знака # – правила применятся к тегу с атрибутом id="идентификатор".
   Пример:

CSS

#supersize {font-size: 200%}

HTML

<a href="http://htmlbook.ru" id="supersize">Справочник

HTML и CSS</a>;

Нельзя вносить в документ несколько элементов с одинаковым id!

1. Символ * – правила применятся ко всем элементам документа.
2. Классы

Классы

Часто нужно, чтобы стиль применялся не ко всем тегам на странице, а только к некоторым элементам (например, не ко всем ссылкам на странице, а только к тем, которые расположены в меню сайта). Для этого используются классы: ТЕГ.имя_класса { … }

Правила, указанные после такого селектора, будут действовать только на теги с атрибутом class="имя_класса": <ТЕГ class="имя_класса"> … </ТЕГ>;

Можно не указывать имя тега, тогда правила будут применятся ко всем тегам с подходящим значением атрибута class.

Рассмотрим пример:

Для всех тегов с атрибутом class="class1" добавим подчеркивание текста

и уменьшим размер шрифта, а для тега <B> уберем подчеркивание.

 

.class1 {text-decoration: underline; font-size: 80%}

A.class1 {text-decoration: none;}

В HTML-коде укажем для тегов имя класса:

<h1 class="class1">Мои любимые сайты</h1>;

<a href="http://yandex.ru" class="class1">;

Яндекс</a><br>;

<a href="http://google.com" class="class1">;

Google</a><br>;

<a href="http://redut.ru" class="class1">Redut.ru</a>;