Параметры описания стилей
Единицы измерения. Многие параметры предусматривают задание численных характеристик. В CSS допустимо использовать различные единицы измерения: линейные (em, ex, px) и абсолютные величины (дюйм, мм (mm), см (cm), пункт (pt), пика (pc)). Мы будем использовать только px – пиксель – минимальная точка устройства; зависит от конкретного устройства отображения.
Параметры шрифта. В описание стиля можно включать только необходимые параметры шрифта, опуская ненужные. Рекомендуется придерживаться такой последовательности:
font: font-style → font-variant → font-weight → font-size → font-color → font-family. Например:
P { font-style: italic; font-weight: bold; font-size: 16px; font-color: #0000FF; font-family: Verdana } или в сокращенной форме, что допускается
P { font: italic bold 16px #0000FF Verdana }.
Рассмотрим описание параметров.
-
font-style: normal или italic или oblique. Определяет прямое или курсивное начертание шрифта; прямое начертание – по умолчанию, т. е. его обычно не указывают;
-
font-variant: normal или small-caps. Прописные буквы строчного размера;
-
font-weight: normal или bold. Изменение жирности шрифта;
-
font-size: изменение размера шрифта;
-
font-color: цвет шрифта.
-
font-family: имя гарнитуры. Название шрифта.
Параметры фона. В CSS можно определить цветовые параметры фона, а также параметры иллюстрации, которая используется в качестве фона страницы:
background: background-color или background-image. Например:
BODY{background: #FFFFA0}
H1{background-color: green; font: bold 26px Tahoma}
Параметры текста. Следующие элементы задают параметры оформления текста:
-
text-align: left или right или center или justify – выравнивание текста;
-
text-decoration: none или underline или blink - нормальный, подчеркнутый или мигающий текст;
-
text-indent: значение – отступ первой строки абзаца;
-
line-height: значение – междустрочный интервал.
Параметры блока. Под блоком понимается элемент, который можно рассматривать как единое целое с точки зрения оформления и расположения его на странице, например текстовый абзац, рисунок, таблица. Для блока можно определять некоторые поля и отступы:
margin: top right bottom left - поля.
padding: top right bottom left - отступы
Создать или отредактировать файл стилей можно в обычных текстовых редакторах. Мы будем использовать Блокнот.
Пример таблицы стилей – файл all.css.
A { color: orange }
BODY { background: #FDFDDF; margin: 0px; padding: 0px }
H1 { font: bold 26px Tahoma; color: #ffae00; text-align: center }
H2 { font: bold 20px Arial; color: #AD7000; text-align: center }
OL, UL { font: 16px Verdana; line-height: 2 }
P { font: 18px Courier; color: #086F0F; text-indent: 1.2cm; text-align: justify;
line-height: 1.6 }
TD, TH { font: 20px Courier; color: #086F0F }
В первой строке устанавливается цвет гиперссылок – оранжевый. Во второй строке определяется цвет фона страницы, а также устанавливаются её поля и отступы равными нулю. В третьей и четвертой строчках задаются стили заголовков первого и второго уровней, в пятой – стиль списков, в шестой и седьмой – стили абзаца и ячейки таблицы соответственно.
Вот как выглядит HTML-код страницы, в которой используется внешняя таблица каскадных стилей:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Домашняя страница</title>
<link rel="stylesheet" type="text/css" href="all.css">
</head>
<body>
<table width=100% cellspacing=0 cellpadding=0>
<tr>
<td><img border="0" src="tractor.jpg" width="200" height="160">
</td>
<td width=100%>
<h1> Агропредприятие "Новая заря" </h1>
<h2>Добро пожаловать!</h2>
</td>
</tr>
</table>
<marquee>Выгодное предложение</marquee>
<hr size=3 color=#888000>
<br>
<table width=100% cellspacing=0 cellpadding=0>
<tr valign=top>
<td width=20%>
<ul>
<li>Главная</li>
<li><a href=partner.htm>Клиенты</a></li>
<li><a href=prod.htm>Продукция</a></li>
</ul>
</td>
<td width=5%> </td>
<td width=60%>
<p>Наше предприятие существует уже более 20 лет. За эти годы
многие заказчики стали нашими постоянными клиентами.
</p>
<p>Сегодня предприятие приобретает современное оборудование, налаживает
новые технологии, приглашает на работу перспективную молодежь.
</p>
</td>
<td width=5%> </td>
</tr>
</table>
<br>
<hr size=3 color=#888000>
</body>
</html>
После применения таблиц стилей код становится более логичным, он лучше читается и воспринимается. При изменении в файле CSS стиля какого-либо элемента это изменение будет учтено везде, где в HTML-коде встретится этот стиль. Одна и та же таблица стилей может использоваться на разных страничках, что значительно облегчает работу и экономит время по дизайну сайта.
Посмотрим результат в обозревателе:
Рисунок 8 Результат связывания файла HTML c таблицей стилей