Когда браузер читает таблицу стилей, он форматирует HTML документ в соответствии с информацией в таблице стилей.
Как подключить стиль CSS?
Существует три способа усновки каскадной таблицы стилей CSS:
- Внешний стиль CSS
- Внутренний стиль CSS
- Встроенный стиль CSS
Внешний стиль CSS
С помощью внешней таблицы стилей вы можете изменить внешний вид всего веб сайта, изменив только один файл!
Каждая HTML страница должна содержать ссылку на внешний файл таблицы стилей внутри элемента <link> в разделе <head>.
Внешние стили определяются в элементе <link>, внутри раздела <head> HTML страницы:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>Это заголовок</h1>
<p>Это параграф.</p>
</body>
</html>
Попробуйте сами »
Внешняя таблица стилей может быть написана в любом текстовом редакторе и должна быть сохранена с расширением .css.
Внешний файл .css не должен содержать никаких HTML тегов.
Вот этот файл "mystyle.css" и выглядит он, вот так:
"mystyle.css"
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Внимание: Не добавляйте пробел между значением свойства и единицей измерения (например,
margin-left: 20 px;).
Правильно будет так: margin-left: 20px;
Внутренний стиль CSS
Внутренняя таблица стилей может использоваться, если одна HTML страница имеет уникальный стиль.
Внутренний стиль определяется внутри элемента <style>, внутри секции <head>.
Внутренние стили определяются в элементе <style>, внутри раздела <head> HTML страницы:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>Это заголовок</h1>
<p>Это параграф.</p>
</body>
</html>
Попробуйте сами »
Встроенный стиль CSS
Встроенный стиль может быть использован для применения уникального стиля для одного элемента.
Чтобы использовать встроенные стили, добавьте атрибут "style" к соответствующему элементу, атрибут стиля может содержать любое свойство CSS.
Встроенные стили определяются в атрибуте "style" соответствующего элемента:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">Это заголовок</h1>
<p style="color:red;">Это параграф.</p>
</body>
</html>
Попробуйте сами »
Совет: Встроенный стиль теряет многие преимущества таблицы стилей (смешивая контент с презентацией). Использовать этот метод экономно.
Несколько стилей CSS
Если некоторые свойства были определены для одного и того же селектора (элемента) в разных таблицах стилей, то будет использовано значение из последней прочитанной таблицы стилей.
Предположим, что внешняя таблица стилей имеет следующий стиль для элемента <h1>:
h1
{
color: navy;
}Затем предположим, что внутренняя таблица стилей также имеет следующий стиль для элемента <h1>:
h1
{
color: orange;
}Если внутренний стиль определен после ссылки на внешнюю таблицу стилей, элементы <h1> будут "orange":
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
Попробуйте сами »
Однако, если внутренний стиль определен перед ссылкой на внешнюю таблицу стилей, элементы <h1> будут иметь "navy":
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Попробуйте сами »
Порядок каскадного стиля CSS
Какой стиль будет использоваться, если для HTML элемента задано более одного стиля?
Все стили на странице будут "каскадировать" в новую "виртуальную" таблицу стилей по следующим правилам, где номер один имеет наивысший приоритет:
- Встроенный стиль (внутри HTML элемента)
- Внешние и внутренние таблицы стилей (в разделе head)
- Браузер по умолчанию
Таким образом, встроенный стиль имеет наивысший приоритет и будет переопределять внешние и внутренние стили и настройки браузера по умолчанию.