Приоритеты в Каскадных Таблицах Стилей CSS
15 марта 2011 в 1:32 в категории Статьи о CSS 4 комментарияДля меня, как для (не побоюсь этого слова) web-мастера, стал обыденным коддинг на связке html+CSS. Но я никогда не задумывался что у css есть такое понятие как приоритет.
Итак, как вы уже поняли речь пойдет о приоритетах в css.
Как мы можем задать стиль для блока к примеру?
1. Через атрибут «style» у элемента:
<div style="color: green;">Зеленый текст</div>
2. Через атрибут «class» у элемента:
<html> <head> <style type=”text/css”> .test{color: Red;} </style> </head> <body> <div class=”test”>Красный текст</div> </body> </html>
3. Через атрибут «id» у элемента:
<html> <head> <style type=”text/css”> #test{color: Red;} </style> </head> <body> <div id=”test”>Красный текст</div> </body> </html>
4. И собственно всем элементам типа.
<html> <head> <style type=”text/css”> div {color: Blue;} </style> </head> <body> <div>Синий текст</div> </body> </html>
Но каков приоритет у этих свойств? Что будет если мы пропишем сразу всеми способами разные цвета тексту? Какого цвета будет текст?
<html> <head> <style type=”text/css”> #test{color:red;} .test{color:green;} div {color:black;} </style> </head> <body> <div style="color:blue;" class=”test” id=”test”>Не смотря на все стили, прописанные в "head", текст синий, как и установлено у элемента div в атрибуте "style"</div> </body> </html>
И что вы думаете будет?
Не знаете? Смотрите: css-priority
!Important
Итак, Даже если мы добавим свойство !important к любому стилю в css, то все равно текст останется синим. Посмотрите исходный код страницы! 🙂
Играет роль в том случае, когда пользователи подключают свою собственную таблицу стилей. Если возникает противоречие, когда стиль автора страницы и пользователя для одного и того же элемента не совпадает, то !important позволяет повысить приоритет стиля.
При использовании пользовательской таблицы стилей или одновременном применении разного стиля автора и пользователя к одному и тому же селектору, браузер руководствуется следующим алгоритмом.
- !important добавлен в авторский стиль — будет применяться стиль автора.
- !important добавлен в пользовательский стиль — будет применяться стиль пользователя.
- !important нет как в авторском стиле, так и стиле пользователя — будет применяться стиль автора.
- !important содержится в авторском стиле и стиле пользователя — будет применяться стиль пользователя.
Из htmlbook.ru
Итак, собственно приоритет:
Просто элемент (p, div, span): | 1 |
Элемент с классом (.test, .class): | 10 |
Через ID (индентификатор) (#test, #id): | 100 |
Строчный стиль (style=”color:green”): | 1000 |
Измеряется приоритет каскадных таблиц стилей в «поинтах» (points).
то есть, если мы напишем такой стиль в css:
div.text_class {color: Red;}
То у него будет рейтинг 1+10=11 (points);
Как вы наверное уже догадались, то стиль с самым высоким приоритетом и будет выводиться на монитор, а вот те стили, что ниже приоритетом просто будут игнорироваться.
4 комментария
Никита забыл упомянуть в приоритетах про !important. Про взаимосвзяь пользовательского !important и авторского и что кого перекроет.
Статья не полная)
Спасибо за отзыв. Я дополнил статью.
Я ответил на твой вопрос?
I’m not esaliy impressed. . . but that’s impressing me! 🙂
Good to see a tleant at work. I cant match that.