Переопределение в каскадных таблицах стилей

2008-01-13 / Рубрика: переопределение

В случаях, когда есть конфликт в стилях, то есть когда одно и то же правило встречается несколько раз, переопределение играет важную роль. В подобных случаях правило, которое стоит последним, имеет наибольший приоритет. Это относится не только к внешним таблицам, но и всем другим способам применения стилей.

Рассмотрим кусок кода из внешней таблицы стилей:

p {color: red;}
p {color: blue;}

Второе правило заменяет первое в порядке переопределения, поэтому <p> будет синий.

Рассмотрим другой пример. В внешней таблице стилей разместим p {color: red;}, а во вложенной таблице стилей определим p (color: blue;}. Текст в <p> снова будет синий: правило во вложенной таблице стилей ближе к элементу в HTML, и поэтому переписывает первое (внешнее) правило.

Если вы напишете <p style="color: green;"> (инлайн стиль), то текст в <p> будет зелёным, потому что встроенный стил переопределит правила заданные ранее. Правила, заданные через атрибут style переопределяют правила заданные в таблице стилей.

Это относится и к мультиклассам.

Пример:

.red {color: red; font-weight: bold;} 
.blue {color: blue;}

<p class="red blue">this text will be blue and bold</p>

Первый класс «red» делает текст красным и полужирным, более поздний класс «blue» делает текст синим и «побеждает» в определении цвета, но текст всё ещё полужирный, потому что правило «blue» не переопределяет атрибут font-weight.

Примечание. В статье имена классов «red» и «blue» взяты для наглядности примера и ваших кодах могут быть другими.

Оригинал на английском