CSS How To или как сделать. Стили CSS
Когда обозреватель читает таблицу стилей, он форматирует HTML-документ в соответствии с информацией в таблице стилей.
Три способа вставки CSS
Существует три способа вставки таблицы стилей:
Внешняя таблица стилей
С помощью Внешняя таблица стилей, вы можете изменить внешний вид всего веб-сайта, изменив только один файл!
Каждая страница должна содержать ссылку на внешний файл таблицы стилей внутри элемента <Link>. Элемент <Link> попадает внутрь <head> раздела:
Пример
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head>
Внешняя таблица стилей может быть написана в любом текстовом редакторе. Файл не должен содержать HTML-тегов. Файл таблицы стилей должен быть сохранен с расширением. CSS.
Вот как выглядит "myStyle. CSS":
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Примечание: Не добавляйте пробел между значением свойства и единицей измерения (например, margin-left: 20 px; ). Правильный путь:margin-left: 20px;
Внутренняя таблица стилей
Внутренняя таблица стилей может использоваться, если одна отдельная страница имеет уникальный стиль.
Внутренние стили определяются в элементе <Style> внутри <head> раздела HTML-страницы:
Пример
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
Встроенные стили
Встроенный стиль может использоваться для применения уникального стиля для одного элемента.
Чтобы использовать встроенные стили, добавьте атрибут style к соответствующему элементу. Teh атрибут style может содержать любое свойство CSS.
В приведенном ниже примере показано, как изменить цвет и левое поле элемента <H1>:
Пример
<h1 style="color:blue;margin-left:30px;">This is a heading</h1>
Совет: Встроенный стиль теряет многие преимущества таблицы стилей (путем смешивания контент с презентацией). Используйте этот метод экономно.
Несколько таблиц стилей
Если некоторые свойства были определены для одного и того же селектора (элемента) в разных таблицах стилей, будет использовано значение из последней таблицы стилей чтения.
Примере
Предположим, что внешняя таблица стилей имеет следующий стиль для элемента <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> будут "navy":
Пример
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Каскадный порядок
Какой стиль будет использоваться при наличии более одного стиля, заданного для элемента HTML?
Вообще говоря, мы можем сказать, что все стили будут "Каскад" в новый "виртуальный" стиль лист по следующим правилам, где номер один имеет наивысший приоритет:
- Встроенный стиль (внутри элемента HTML)
- Внешние и внутренние таблицы стилей (в разделе head)
- Браузер по умолчанию
Таким образом, встроенный стиль (внутри определенного элемента HTML) имеет наивысший приоритет, что означает, что он будет переопределять стиль, определенный внутри тега <head>, или в Внешняя таблица стилей или значение по умолчанию обозревателя.