Три типа 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> и с другими тегами.
|
