На этой странице

Приоритет применения стилей 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;
p   {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 имеющий наивысший приоритет .

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

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