CSS Приоритет стилей

В основном HTML – Страницы сайта имеют одну или несколько таблицей стилей, которые размещены в отдельной папке.

Как мы уже рассматривали подключить таблицы стилей можно с помощью отдельного файла style.css, либо с помощью тега - style или при помощи атрибута - style.

Главный приоритет является, если стили прописаны с помощью атрибута – style:

<p style="color: green">

Все остальные стили будут отменены, то есть содержимое файла style.css будет проигнорировано, также будет и отменены стили прописанные с помощью тега - style :

<style type"text/css">
    p {color: blue };
</style>

Содержимое файла ctyle.css

p   {color: red };

Содержимое файла index.html

<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Приоритет применения стилей</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
@media screen and (max-width: 767px) {
body {
    max-width: 767px;
    height auto;
   {color:  blue };
</style>
</head>
<body>
<p style"color: green">
<span style="color: yellow">Текст 1</span>
</p>
<p style="color: green">Текст 2</p>
</body>
</html>

Открыть пример в новом окне

Иными словами, наименьший приоритет имеет стиль, описанный в отдельном файле, а самый высокий – стиль, указанный последним, то есть указанный с помощью атрибута style:

<p style="color: green">Текст 2</p>

Кроме того, следует помнить, что стиль заданный через идентификатор, будет иметь более высокий приоритет, чем стиль заданный через класс.

Стиль заданный через идентификатор

<style type="text/css">
#id1 { color: red }
cls1 { color: blue }
</style>
...
<p id="id1" class="cls1">Текст</p>

В этом примере текст абзаца будет красного цвета, а не синего.

С помощью свойства !important можно изменить приоритет, если в файле style.css добавить строку:

p { color: red !important }

То абзац со словом Текст 2 будет иметь красный цвет, а не зеленый, хотя он прописан с помощью атрибута style имеющий наивысший приоритет.

Рекомендуемые материалы:

Спецификации: