<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://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 для новичков и теперь уже обладаете довольно внушительным багажом знаний для того, чтобы самостоятельно продолжить освоение этого замечательного языка. В принципе, тех познаний, которыми вы обладаете уже достаточно, чтобы делать хорошие сайты. Но ведь нет предела совершенству, правда? В общем, удачи вам, вебмастеры, в вашем труде, терпения и творческого вдохновения! :)

Вернуться в урок