Как добавить CSS
Когда браузер читает таблицу стилей, он форматирует HTML-документ в соответствии с информацией в таблице стилей.
Три способа вставки CSS
Существует три способа вставки таблицы стилей:
- Внешний CSS
- Внутренний CSS
- Встроенный 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>
</body>
</html>
Внешняя таблица стилей может быть написана в любом текстовом редакторе и должна быть сохранена с расширением .css.
Внешний файл .css не должен содержать тегов HTML.
Вот как выглядит файл «mystyle.css»:
"мой стиль.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>This is a
heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Встроенный CSS
Встроенный стиль может использоваться для применения уникального стиля к одному элементу.
Чтобы использовать встроенные стили, добавьте атрибут стиля к соответствующему элементу. Атрибут стиля может содержать любое свойство CSS.
Пример
Встроенные стили определяются в атрибуте «стиль» соответствующего элемента:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This
is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
Совет: встроенный стиль теряет многие преимущества таблицы стилей (из-за смешивания содержимого с представлением). Используйте этот метод экономно.
Несколько таблиц стилей
Если некоторые свойства были определены для одного и того же селектора (элемента) в разных таблицах стилей, будет использовано значение из последней прочитанной таблицы стилей.
Предположим, что внешняя таблица стилей имеет следующий стиль для элемента <h1>:
h1
{
color: navy;
}Затем предположим, что внутренняя таблица стилей также имеет следующий стиль для элемента <h1>:
h1
{
color: orange;
}Пример
Если внутренний стиль определен после ссылки на внешнюю таблицу стилей, элементы <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)
- Внешние и внутренние таблицы стилей (в разделе head)
- Браузер по умолчанию
Таким образом, встроенный стиль имеет наивысший приоритет и переопределяет внешние и внутренние стили и настройки браузера по умолчанию.
Вы когда- нибудь слышали о W3Schools Spaces ? Здесь вы можете бесплатно создать свой собственный веб-сайт или сохранить фрагменты кода для последующего использования.
Начните бесплатно ❯* кредитная карта не требуется