Применение правил CSS к Web-странице


Начните с чистой страницы в редакторе Notepad (Блокнот), вашем любимом текстовом редакторе или другой программе для разработки Web-страниц, такой как Adobe Dreamweaver или Microsoft Expression.
Вставьте следующий HTML-код между тегами body и сохраните файл с именем cookbook.html:
<html>
<head>
<title>CSS Cookbook</title>
</head>
<body>
<hl> Title of page</hl>
<p>This is a sample paragraph with a <a href="http://csscookbook.com">link</a>.</p>
</body>
</html>
Внесите в код следующие изменения (помеченные жирным шрифтом), чтобы переопределить стиль ссылок, маркированных списков и заголовков. Результат показан на рис. 2.4.
html>
<head>
<title>CSS Cookbook</title>
<style type="text/css">
<! . . . body {
font-family: verdana, arial, sans-serif;
\
font-size: 120%; text-decoration: none; p {
font-size: 90%;
</style>
</head>
<body>
<hl> Title of page</hl>
<p>This is a sample paragraph with a <a href="http: //csscookbook-.com" >link</a>.</p>
</body>
</html>
CSS содержит правила, состоящие из двух элементов: селекторов и свойств.
Селектор определяет, какой части вашей Web-страницы назначается стилевое оформление. В состав селектора входит одно или несколько свойств и их значения.
Свойство сообщает Web-обозревйтелю о том, что изменить, а значение позволяет ему узнать, каким должно быть это изменение.
В приведенном далее примере блока объявления селектор сообщает обозревателю об увеличении на Web-странице размера содержимого элемента hi до 120% по сравнению с размером по умолчанию:
hi {
font-size: 120%
}
В таблице приведены селекторы, свойства и значения, использованные в реализации данного примера. В столбце "Результат” объясняется, что произойдет, когда к селектору будет применено свойство с соответствующим значением.

Селектор Свойство Значение Результат
hi font-size 120% Размер текста больше стандартного размера
Р font-size 90% Размер текста меньше стандартного размера

Стандартная синтаксическая запись CSS включает селектор (обычно тег, который вы хотите выделить), за которым следуют свойства и значения, заключенные в фигурные скобки:
селектор { свойство: значение; }
Для большей наглядности многие разработчики используют следующий формат записи:
селектор { свойство: значение;
}
Добавление пробельной зоны и переносов строк облегчают чтение CSS-кода. Оба способа записи CSS верны. Применяйте тот, который более удобен вам.
Технология CSS также позволяет селекторам использовать несколько свойств одновременно для создания более сложных стилевых оформлений. При назначении одному селектору нескольких свойств используйте точку с запятой для отделения одного свойства от другого, как показано в следующем примере кода. Обратите внимание на точку с запятой после последнего свойства, за которым нет других свойств. Такой синтаксис позволит нам быстро добавлять новые свойства и снизит вероятность дополнительной ошибки из-за забытого разделителя.
селектор { свойство: значение;
свойство: значение, значение, значение; свойство: значение, значение, значение, значение;
}
селектор, селектор { свойство: значение;
}