<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Результат - Приоритеты стилей</title>
<style type="text/css">
#content {color: green; } /* строка 1 */
p { color: black; } /* строка 2 */
#par em { color: red; } /* строка 3 */
#content .par em { color: blue; } /* строка 4 */
.par .em { color: yellow; } /* строка 5 */
.par b { color: orange; } /* строка 6 */
em.em { color: gray !important; } /* строка 7 */
</style>
</head>
<body>
<div id="content">
<p id="par" class="par">Параграф1 <em>текст в EM1</em></p>
<p class="par">Параграф2 <b>текст в B</b></p>
<p>Параграф3 <em class="em">текст в EM2</em></p>
<p class="par">Параграф4 <em class="em">текст в EM3</em></p>
</div>
</body>
</html>Так, ну давайте разбираться. Зеленого текста (строка 1) на странице нет, так как внутри блока <DIV> нет ни одного элемента, цвет текста которого бы НЕ переопределялся последующими селекторами. Вот если бы непосредственно внутри самого блока присутствовал какой-то текст, тогда бы он был зеленый.
На сами параграфы влияет только один стиль, из строки два, поэтому цвет текста внутри них черный. А не будь этой сроки — цвет параграфов был бы зеленый, то есть наследовался бы от родительского блока.
На первый тег <EM> влияют стили из строк 3, 4 и 5. Селектор из 4-й строки имеет самый большой вес, поэтому цвет текста синий.
На тег <B> влияет только один стиль, из строки 6, поэтому цвет оранжевый.
На второй <EM> воздействует только стиль 7-й строки, поэтому цвет серый.
Ну и, наконец, на третий <EM> воздействуют стили из строк 5 и 7. Селектор пятой строки имеет больший вес, но в 7-й присутствует !important, поэтому цвет тоже серый.
Ну что, ребята, вас наверное можно поздравить! Вы прошли изучение учебника по CSS для новичков и теперь уже обладаете довольно внушительным багажом знаний для того, чтобы самостоятельно продолжить освоение этого замечательного языка. В принципе, тех познаний, которыми вы обладаете уже достаточно, чтобы делать хорошие сайты. Но ведь нет предела совершенству, правда? В общем, удачи вам, вебмастеры, в вашем труде, терпения и творческого вдохновения! :)
| Вернуться в урок |