Связь HTML-документа с таблицей CSS
Каскадные таблицы стилей (CSS) содержит наборы стилевых параметров (правил форматирования).
Каскадная таблица стилей связывается с HTML-документом
следующими способами:
-
Вставка непосредственно в HTML-документ.
Таблица стилей заключается в контейнерный тэг <style>, который помещается в контейнер <head>.
Пример:
<style>
h1 {color:blue; font-size: 12pt}
p {font-style: italic}
</style>
-
Вставка в элемент.
Набор параметров стиля присваивается элементу с помощью атрибута style
Пример:
<h1 style="color:blue; font-size: 12pt">
-
Импорт.
Вставка таблицы стилей из внешнего файла с помощью команды:
@import url(URL-адрес фаила таблицы стилей)
Оператор @import используется перед другими правилами таблицы стилей в контейнере <style>
Пример:
<style>
@import url(http://myserver.ru/mystile.css);
body {color: black;}
</style>
-
Связывание с таблицей стилей в файле.
Используется ссылка на файл таблицы стилей с помощью тэга <link>, помещенного в контейнер <head>.
<link rel=stylesheet type=text/css href="URL-адрес фаила таблицы стилей">
Пример:
<link rel=stylesheet type=text/css href="http://myserver.ru/mystile.css">
Пример HTML кода:
<![CDATA[
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<title>Связь HTML-документа с таблицей CSS</title>
<style>
H1 {
font-size: 130%;
font-family: Verdana, Arial, sans-serif;
color: green;
}
</style>
</head>
<body>
<h1 style="font-size:32px; font-family:Times,serif; color:red">
Заголовок 1</h1>
<h1>Заголовок 2</h1>
</body>
</html>
]]>
Результат:
Заголовок 1
Заголовок 2
