1. Связывание (linking). HTML-документ с помощью тега
<head>
<link rel="stylesheet" type="text/css" href=" style.css ">
<link rel="stylesheet" type="text/css" href="http://www.htmlbook.ru/main.css">
</head>
Связывается с внешним файлом, содержащим таблицу стилей и имеющим расширение .css (например style.css).
Можно создать в любом текстовом редакторе.
Style.css
.test1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: normal;
color: #F3F4BA;
text-align: justify;
text-indent: 10pt;
padding: 8px;
line-height: 20px;
padding-right: 10px;
padding-left: 10px;
}
.t_akv {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 15px;
color: #33CCCC;
text-indent: 15px;
line-height: 20px;
padding-right: 60px;
padding-left: 60px;
font-weight: bold;
text-align: justify;
}
<head>
<style>
H1 {font-size: 24px; border: 1px black solid}
H1.kr {color: red}
.d1 {text-decoration: none; font: bold 12px; color:blue}
</style>
</head>
3. Вложение (Inline). Определение стиля для конкретного элемента (в разделе <body>) с помощью параметра style, размещаемого внутри тега элемента.
<div style =”набор деклараций”>элемент</div>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<style type="text/css">
@import url("style.css");/*Стили отображения главной таблицы*/
</style>
Основные понятия
RULE правило
h1 { font-size: 24px; color: red}
селектор свойство значение
Декларация
Синтаксис
Комментарий располагается между парами символов /* и */
Правила располагаются в произвольном порядке друг за другом
Декларации заключаются в фигурные скобки и разделяются символом «;»,
Символ-разделитель между свойством и значением является «:».
Регистр записи произвольный (кроме названий файлов).
Значение м.б. указано вместе с единицей измерения. В этом случае единица измерения располагается вплотную к значению, без пробела.