Правила CSS
Следующий из наших уроков css. Рассмотрим еще несколько важных правил CSS, которые нам необходимо будет знать.
Первый момент - это ситуация, когда нам нужно прописать двум разным тегам один и тот же стиль. Предположим, у нас возникла ситуация, когда текст абзаца и заголовок (заголовок, именно, второго уровня) должны выглядеть одинаково (один и тот же шрифт, цвет шрифта, его величина). К тому же тег <h> должен присутствовать.
Самое простое решение, которое приходит нам в голову, это прописать тегу <h2> такой же стиль как у абзаца
Пример:
p {
color:#424242;
font-size:16px;
font-family:Verdana, Tahoma;
}
h2 {
color:#424242;
font-size:16px;
font-family:Verdana, Tahoma;
}
Но это не лучший способ. Во первых это добавит лишний код, а во вторых есть способ попроще. Для этого в код к тегу p через запятую добавить и тег h.
Пример:
p, h2 {
color:#424242;
font-size:16px;
font-family:Verdana, Tahoma;
}
Эта запись сообщит браузеру о том, что прописанными стилями нужно отображать не только все абзацы, но и все заголовки второго уровня. Проверим нашу запись в браузере - заголовок отображается таким же стилем как и текст абзаца. Но все заголовки по умолчанию отображаются жирным шрифтом. Это легко исправляется добавив еще одно правило в код
Пример:
p, h2 {
color:#424242;
font-size:16px;
font-family:Verdana, Tahoma;
font-weight:normal;
}
После добавления этого правила заголовок будет отображаться таким же шрифтом как и текст.
Следующий момент, который мы изучим, это вложенность правил. Допустим, у нас внутри абзацев есть слова, выделенные жирным шрифтом (внутри тега <strong>). Нам необходимо поменять цвет этих слов. Вот в этом случае используются вложенные правила
Пример:
p strong {
color:#0000cc;
}
Текст внутри тега <strong>, который расположен внутри абзаца <p> стал синего цвета. А все слова в теге
<strong>, вне абзаца <p> останутся черного цвета.
И еще один момент - правило состояний. Изучим правило состояний на примере состояния ссылок. Состояние ссылки может быть:
ссылка не посещалась;
ссылка при наведении на нее курсора мыши;
ссылка в момент клика по ней;
ссылка, которая уже посещалась;
Вот пример написания правил состояния ссылок:
Пример:
a:link {color:000000; text-decoration:underline;} - ссылка не посещалась;
a:hover {color:orange; text-decoration:underline;} - ссылка при наведении на нее курсора мыши;
a:active {color:00cc00; text-decoration:overline;} - ссылка в момент клика по ней;
a:visited {color:cc0000; text-decoration:none;} - ссылка, которая уже посещалась;
color:000000; text-decoration:underline; - цвет ссылки черный, подчеркивание снизу.
color:orange; text-decoration:underline; - цвет ссылки оранжевый, подчеркивание снизу.
color:00cc00; text-decoration:overline; - цвет ссылки зеленый, подчеркивание сверху.
color:cc0000; text-decoration:none; - цвет ссылки красный, подчеркивания нет.
Вот так применяются правила состояния для ссылок.
|
