Приоритеты в Каскадных Таблицах Стилей CSS
в категории Статьи о 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);
Как вы наверное уже догадались, то стиль с самым высоким приоритетом и будет выводиться на монитор, а вот те стили, что ниже приоритетом просто будут игнорироваться.
Есть вопрос? Что-то не понятно в статье? Хочешь отблагодарить? Пиши комментарий!
Если тебе понравилась статья, а тем более если еще и помогла - поставь +1 и нажми "Мне нравится"!
(173 оценок, среднее: 4,60 из 5)
4 комментария
Никита забыл упомянуть в приоритетах про !important. Про взаимосвзяь пользовательского !important и авторского и что кого перекроет.
Статья не полная)
Спасибо за отзыв. Я дополнил статью.
Я ответил на твой вопрос?
I’m not esaliy impressed. . . but that’s impressing me! 🙂
Good to see a tleant at work. I cant match that.