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