Три типа CSS правил

И так, давайте уже начнем заполнять нашу таблицу стилей CSS. Для примера поработаем с тегами <p> (абзацами). Наша html-страничка имеет несколько тегов <p> (несколько абзацев).

Первый тип CSS правил позволяет нам прописать в таблице стилей - как будут выглядеть все теги <p> (все абзацы) в html-документе.

Пример:

p {

color:#424242;

font-size:16px;

font-family:Verdana, Tahoma;

}

 

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

color:#424242; - цвет текста - серый.

font-size:16px; - размер шрифта 16px.

font-family:Verdana, Tahoma; - гарнитура шрифта. Мы указали два шрифта. Если в системе не окажется первого - будет применен второй.

Вот так, при помощи таблицы стилей CSS, мы прописываем свойства для всех тегов <p> (абзацев) на html-странице. Так же можно прописывать свойства и для других тегов.

Возникает следующий вопрос: как же тогда из всех этих абзацев в каком то одном прописать другие свойства? Как создать правило для определенного абзаца? Это будет второй тип CSS правил.

Создаем новое правило и прописываем ему свои свойства.


Пример:

p.new {

font-weight:bold;

color:#cc0000;

}


p.new - имя нового правила.

font-weight:bold; - текст написан жирным шрифтом.

color:#cc0000; - цвет текста - красный.

Теперь, как нам прописать данное правило конкретному абзацу? Для этого открываем в блокноте html-код нашей странички и к выбранному тегу <p> с помощью атрибута class прописываем данное правило.


Пример:

<p class="new">Текст абзаца</p>


Данное правило применимо только к тегам <p>. С другими тегами оно работать не будет.

Третий тип CSS правил - это правила которые можно применять к любому тегу. Создаются они через простую точку (точка, имя правила).


Пример:

.rule {

color:#00cc00;

}

Это правило будет работать уже и с тегом <p> и с тегом <h> и с другими тегами.