Синтаксис CSS

Все объявления CSS (официально они называются "селекторы") записываются в фигурных скобках:

ТЕГ:псевдокласс.класс { характеристика1: значение1; характеристика2: значение2}

Описание каждого класса делается при помощи конструкции, подобной этой:

.small { font-size: 9pt; }

Сначала указывается имя класса - оно может быть произвольным, но желательно все-таки давать осмысленное название. Далее, в фигурных скобках {} перечисляются все необходимые параметры для данного класса. Параметры отделяются друг от друга точкой с запятой. Вот еще один пример, в котором используется более длинное описание:

.small { font-size: 9pt; color: #eeeeee; text-align: center; }

Универсальный класс - может быть применен к любому тегу, имя класса начинается с точки.

Пример:

<p class=small>Накладываем стиль на этот текст</p>

<td class=small>Накладываем стиль на этот текст</td>

Теговые классы - может быть применен к конкретному тегу, имя класса начинается с указания тега, после точки записывается имя класса.

Пример:

p.small { font-size: 9pt; }

Класс, определенный таким образом, сработает только в том теге, для которого он предназначен, а для всех остальных будет проигнорирован:

<p class=small>Этот текст будет выведен стилем small</p>

<td class=small>А этот останется неизменным</td>

Мы можем определять параметры не только для одного тега, но и сразу для нескольких. Для этого в определении стиля достаточно перечислить их через запятую:

P, TD, LI { font-size: 9pt; color:green;}

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


Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями:  



double arrow
Сейчас читают про: