Несколько таблиц стилей
Если один и тот же селектор задан более чем в одной таблице стилей, побеждает значение из той таблицы стилей, которую браузер прочитал последней.
Предположим, внешняя таблица стилей задаёт для <h1> цвет navy, а внутренняя таблица стилей задаёт для того же <h1> цвет orange. Результат зависит от того, какая из них прочитана последней.
Внутренний стиль после внешнего
Внутренний стиль размещён после ссылки на внешнюю таблицу стилей, поэтому элементы <h1> оранжевые.
<style> после неё.
В head сначала разместите <link> на mystyle.css, затем блок <style>, задающий h1 цвет orange. Поскольку внутренний стиль идёт последним, заголовок должен быть оранжевым. Включите <h1> в body.
Output: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The internal style is read last, so the heading is orange.</p>
</body>
</html>
Внутренний стиль до внешнего
Внутренний стиль размещён до ссылки на внешнюю таблицу стилей, поэтому элементы <h1> тёмно-синие (navy).
<style>, а затем подключает внешнюю таблицу стилей (mystyle.css) после него.
В head сначала разместите блок <style>, задающий h1 цвет orange, затем <link> на mystyle.css (который задаёт h1 цвет navy). Поскольку внешний стиль читается последним, заголовок должен быть цвета navy. Включите <h1> в body.
Output: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>The external style is read last, so the heading is navy.</p>
</body>
</html>
Внешний стиль
Стиль для <h1> во внешней таблице стилей.
h1 {
color: navy;
}
Внутренний стиль
Стиль для <h1> во внутренней таблице стилей.
h1 {
color: orange;
}
Порядок каскадирования
Когда для одного и того же элемента задано несколько стилей, какой из них используется?
Все стили страницы объединяются (каскадируются) в одну виртуальную таблицу стилей. Порядок приоритета, от высшего к низшему:
- Встроенный стиль (внутри HTML-элемента).
- Внешние и внутренние таблицы стилей (в разделе head).
- Стиль браузера по умолчанию.
Таким образом, встроенный стиль имеет наивысший приоритет и переопределяет внешние стили, внутренние стили и стили браузера по умолчанию.
Встроенный стиль побеждает
Внутренний стиль задаёт заголовку цвет navy, но встроенный стиль задаёт ему цвет orange. Побеждает встроенный стиль.
<style>, который делает h1 цвета navy. Затем задайте одному <h1> встроенный стиль, устанавливающий цвет orange. Встроенный стиль имеет наивысший приоритет, поэтому заголовок должен отображаться оранжевым.
Output: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
color: navy;
}
</style>
</head>
<body>
<h1 style="color:orange;">This is a heading</h1>
<p>The inline style overrides the internal style sheet, so the heading is orange.</p>
</body>
</html>