Когда браузер читает таблицу стилей, он будет форматирование HTML-документа в соответствии с информацией в таблице стилей.
Три способа вставить CSS
Есть три способа вставки таблицы стилей:
Внешний лист Стиль
С помощью внешней таблицы стилей, вы можете изменить внешний вид всего веб-сайта, изменив только один файл!
Каждая страница должна содержать ссылку на внешний файл таблицы стилей внутри <link> элемента. <link> элемент проходит внутри <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> Попробуй сам " Встроенные стили
Встроенного стиля может быть использован для применения уникального стиля для одного элемента.
Чтобы использовать встроенные стили, добавьте атрибут стиля к соответствующему элементу. Атрибут стиля может содержать любое свойство CSS.
В приведенном ниже примере показано , как изменить цвет и левое поле в <h1> элемента:
| Встроенный стиль теряет многие из преимуществ таблицы стилей (путем смешивания содержимого с помощью презентации). Используйте этот метод экономно! |
|---|
Несколько таблицы стилей
Если некоторые свойства определены для одного селектора (элемента) в различных таблиц стилей, будет использовано значение из последней таблицы стилей для чтения.
пример
Предположим , что внешний таблица стилей имеет следующий стиль для <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" - "navy" :
пример
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head> Попробуй сам " каскадные Заказать
Какой стиль будет использоваться, когда задано более одного стиля для HTML элемента?
Вообще говоря, мы можем сказать, что все стили будут "Каскад" в новый "виртуальный" таблицы стилей по следующим правилам, где номер один имеет наивысший приоритет:
- Встроенный стиль (внутри элемента HTML)
- Внешние и внутренние таблицы стилей (в головной части)
- Браузер по умолчанию
Таким образом, встроенный стиль (внутри конкретного HTML - элемента) имеет наивысший приоритет, что означает , что она будет переопределить стиль , определенный внутри <head> тег, или во внешнем таблицы стилей, или значение по умолчанию браузер.
Проверьте себя с упражнениями!
Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4»