Веб-заметки и Веб-подсказки

В следующем списке приведены методы задания стилей с приоритетом по убыванию:

1) !important — флаг, который применяется к стилю и имеет всегда самый высокий приоритет. С помощью !important можно переопределить даже стиль, заданный непосредственно в элементе с помощью атрибута style.
Примет:

<style type="text/css">
span {color: red;}
span {color: green !important;}
span {color: blue;}
</style>
<span>мой текст</span>
Результат: мой текст

Примечание: !important не советуется использовать в разработке. Он используется только в исключительных случаях для быстрых фиксов.

2) Стили заданные непосредственно в элементе с помощью атрибута style.
Примет:

<span style="color: blue;">мой текст</span>
Результат: мой текст

3) Стили, примененные к уникальному идентификатору (атрибут id) элемента.
Примет:

<style type="text/css">
#element_id {color: orange;}
</style>
<span id="element_id">мой текст</span>
Результат: мой текст

4) Стили, примененные к классу (атрибут class) элемента.
Примет:

<style type="text/css">
.element_class {color: red;}
</style>
<span>мой текст</span>
Результат: мой текст

5) Стили, примененные к HTML-тэгу.
Примет:

<style type="text/css">
span {color: yellow;}
</style>
<span>мой текст</span>
Результат: мой текст

Примечание: Если заданы разные значения одного стиля в разных местах и они имеют одинаковый приоритет, то будет применен самый последний стиль.

Общий пример:

<style type="text/css">
div {color: gray !important;}
span {color: black;}
#element_id {color: green;}
.element_class {color: blue;}
span {color: orange;}
</style>
<div>просто div</div>
<div style="color: red;">div c атрибутом style</div>
<span>Просто span</span><br />
<span>span с заданным классом</span><br />
<span id="element_id">span с заданным классом и идентификатором</span><br />
<span style="color: red;">span с заданным классом и атрибутом style</span><br />

Результат:

просто span
span с заданным классом
span с заданным классом и идентификатором
span с заданным классом и атрибутом style