Здравствуй, уважаемый друг!

Кажется, ты используешь AdBlock. Этот проект развивается и существует за счет доходов от рекламы.
Добавь, пожалуйста, нас в исключения.

Спасибо за понимание.

Теперь мы команда!

Приоритеты в Каскадных Таблицах Стилей 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);
Как вы наверное уже догадались, то стиль с самым высоким приоритетом и будет выводиться на монитор, а вот те стили, что ниже приоритетом просто будут игнорироваться.

4 комментария

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Вверх!

Меню блога

Категории блога

Облако тегов