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