Правила 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; - цвет ссылки красный, подчеркивания нет.


Вот так применяются правила состояния для ссылок.