Существует четыре способа связывания стилей с вашим HTML-документом. Наиболее часто используемые методы - это встроенный CSS и внешний CSS.
Встроенный CSS - элемент style
Вы можете поместить свои правила CSS в HTML-документ, используя элемент style. Этот тег помещается внутри тегов head ... /head. Правила, определенные с использованием этого синтаксиса, будут применяться ко всем элементам, доступным в документе. Ниже приведен пример внедрения CSS на основе вышеприведенного синтаксиса -
<!DOCTYPE html>
<html>
<head>
<style type = "text/css" media = "all">
body {
background-color: linen;
}
h1 {
color: mar00n;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>Это заголовок.</h1>
<p>Это параграф.</p>
</body>
</html>
Атрибуты
Атрибуты, связанные с элементами style, - это -
| Атрибут | Значение | Описание |
|---|---|---|
| type | text/css | Указывает язык таблицы стилей как тип содержимого (тип MIME). Это обязательный атрибут. |
| media | screen, tty, tv, projection, handheld, print, braille, aural, all | Указывает устройство, на котором будет отображаться документ. Значение по умолчанию - все. Это необязательный атрибут. |
Inline CSS - Атрибут стиля
Вы можете использовать стиль атрибут любого HTML - элемента , чтобы определить правила стиля. Эти правила будут применяться только к этому элементу. Вот общий синтаксис -
<element style = " ... правила стиля .... " >
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| Style | правила стиля | Значение атрибута style представляет собой комбинацию деклараций стиля, разделенных точкой с запятой (;). |
Ниже приведен пример встроенного CSS на основе приведенного выше синтаксиса -
<html>
<head>
</head>
<body>
<h1 style = "color:#36C;"> This is inline CSS </h1>
</body>
</html>
Внешний CSS - элемент link
Элемент link может использоваться для включения внешнего файла таблицы стилей в ваш HTML-документ.
Внешняя таблица стилей представляет собой отдельный текстовый файл с расширением .css . Вы определяете все правила стиля в этом текстовом файле, а затем можете включать этот файл в любой документ HTML с помощью элемента link.
<head>
<link type = "text/css" href = "..." media = "..." />
</head>
Атрибуты
Атрибуты, связанные с элементами style, - это -
| Атрибут | Значение | Описание |
|---|---|---|
| type | text/css | Указывает язык таблицы стилей как тип содержимого (тип MIME). Этот атрибут требуется. |
| href | URL | Задает адрес или путь к файлу таблицы стилей с правилами стиля. Этот атрибут является обязательным. |
| media | screen, tty, tv, projection, handheld, print, braille, aural, all | Указывает устройство, на котором будет отображаться документ. Значение по умолчанию - все. Это необязательный атрибут. |
Рассмотрим простой файл таблицы стилей с именем mystyle.css, имеющим следующие правила -
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
Теперь вы можете включить этот файл mystyle.css в любой HTML-документ следующим образом:
<head>
<link type = "text / css" href = "mystyle.css" media = "all" />
</head>
Импортированное правило CSS - @import
@import используется для импорта внешней таблицы стилей способом, аналогичным элементу link. Ниже приведен общий синтаксис правила @import.
<head>
<@import "URL";
</head>
Здесь URL - это URL-адрес файла таблицы стилей с правилами стиля. Вы также можете использовать другой синтаксис -
<head>
<@import url("URL");
</head>
Ниже приведен пример, показывающий, как импортировать файл таблицы стилей в документ HTML -
<head>
@import "mystyle.css";
</head>
Правила CSS - Переопределение
Мы обсудили четыре способа включения правил таблицы стилей в HTML-документ. Вот правило, чтобы переопределить любое правило таблицы стилей.
- Любая встроенная таблица стилей имеет наивысший приоритет. Таким образом, он переопределит любое правило, определенное в тегах или правилах стиля
style ... /style, определенных в любом внешнем файле таблицы стилей. - Любое правило, определенное в тегах
style ... /style, переопределяет правила, определенные в любом файле таблицы стилей. - Любое правило, определенное во внешнем файле таблицы стилей, имеет наименьший приоритет, а правила, определенные в этом файле, будут применяться только тогда, когда не применяются два правила.
Обработка старых браузеров
Есть еще много старых браузеров, которые не поддерживают CSS. Поэтому мы должны позаботиться о написании нашего встроенного CSS в HTML-документе. Следующий фрагмент показывает, как можно использовать теги комментариев, чтобы скрыть CSS из старых браузеров -
<style type="text/css">
body, td {
color: blue;
}
</style>
Комментарии к CSS
Много раз вам может потребоваться добавить дополнительные комментарии в свои блоки таблиц стилей. Таким образом, очень легко прокомментировать любую часть таблицы стилей. Вы можете просто поместить свои комментарии в /*.....это комментарий в таблице стилей ..... */.
Вы можете использовать /* .... */, чтобы комментировать многострочные блоки так же, как и на языках программирования C и C++.
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is a multi-line comment */
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
