Cascading Style Sheets
Свойства элементов, управляемых с помощью CSS
Откроем наш любимый Web-редактор Notepad и создадим файл с будущим названием style.css
(название файла может быть любым). Опишем в этом файле стиль параграфа <P>,
который будет использоваться на всех страничках нашего сайта:
P {
font-family: Times New Roman, serif;
color: #000000;
margin-left: 15%;
margin-right: 15%;
margin-top: 1pt;
margin-bottom: 1pt;
text-indent: 1cm;
text-align: justify;
}
Внутри описания стиля для удобства форматирования вы можете использовать любое количество
пробелов и переносов строк – при чтении стиля броузер просто отбросит все лишние пробелы.
В этом стиле мы задали, что параграфы P на всех страничках, которые используют это описание,
будут отображаться шрифтом Times New Roman или в случае, если этот шрифт на машине не установлен,
другим шрифтом, но из этого семейства (serif). Цвет шрифта мы установили черный, выравнивание –
полное (по обеим сторонам).
Также мы установили для параграфа ряд значений отступов. Это было сделано со следующей целью:
по умолчанию параграф в HTML отображается равным практически 95 % страницы и с интервалами между
параграфами, равными 180 % межстрочного интервала. Читать такие параграфы не очень удобно,
так как интервалы между ними слишком велики, а ширина параграфа слишком большая. Посмотрите на журнал,
который вы сейчас держите в руках: текст сверстан в колонки для того, чтобы его было удобнее читать.
В стиле параграфа, который мы создали, установлены боковые отступы в 15 % ширины окна и вертикальные
отступы в 1 пункт – так текст статьи будет гораздо читабельнее.
Давайте так же создадим стиль для заголовков статей:
H2 {
font-family: Verdana, Arial Cyr, Arial;
font-weight: bold;
font-size: 14pt;
color: black;
margin-left: 20%;
margin-top: 1cm;
text-align: left;
}
Все заголовки наших страниц, оформленные тегом H2, будут отображаться жирным шрифтом Verdana или,
если этот шрифт не установлен, шрифтом Arial. Размер заголовка мы установим равным 14 пунктам, цвет черный,
отступ слева равен 20 % ширины страницы, а отступ сверху – 1 см. Заголовок будет выравниваться относительно
левого края страницы.
Благодаря тому, что боковые отступы заголовка и параграфа установлены нами в процентах от ширины окна
броузера, при просмотре наших страничек на компьютерах с разным разрешением дисплея пропорции и
расположение заголовка, основного текста и отступов будут сохранены.
Для того чтобы «привязать» созданные нами стили к нашим страничкам, во все html-файлы в разделе
HEAD мы должны поместить строку со ссылкой на файл стилей и с указанием об использовании CSS:
<link rel="stylesheet" type="text/css" href="style.css"/>
Поскольку файл со стилями будет находиться в том же каталоге сервера, что и остальные странички,
параметр HREF="URL" в нашем случае будет просто именем нашего файла стилей (style.css).