Внутренние и внешние листы стилей

Ранее мы рассмотрели простейший способ стилевого форматирования с помощью вве­дения встроенных стилей для элементов HTML. Однако встроенные стили имеют существенный недостаток -они не позволяют отделить средства форматирования документа от его содержания. Кроме того, объявления встроенного стиля приходится повторять для каждого формати­руемого элемента на протяжении всего документа. От этих недостатков свободен другой способ введения стилей - это размещение листа стилей в заголовочной части документа (в элементе HEAD). Согласно этому способу, называемому заголовочным стилем, можно единым образом управлять представлением всего документа. Для изменения отображения одинаково оформленных элементов (абза­цев, заголовков, рисунков и т.д.) достаточно один раз изменить соответствующие свой­ства в листе стилей. Встроенные и заголовочные стили относятся согласно специ­фикации CSS к внутренним листам стилей. Это название ука­зывает на то, что определение стилей выполняется в рамках одного документа. В то же время возможно задание стилей в отдельном файле с расширениями .сss или .jss. Такой способ оп­ределения называется внешним листом стилей.

Введение заголовочного стиля (элемент STYLE) Как отмечалось выше, CSS представляет собой язык описания информации о стиле фор­матирования элементов HTML-документа. Поэтому по отношению к HTML-документу листы стилей CSS являются инородными элементами. Для размещения информации о стиле применяется специальный контейнер <STYLE></STYLE>, который вставляется в заголовочную часть документа и имеет вид:

<STYLE type="text/сss">

<!-- Описание листа стилей -->

</STYLE>

В этом коде значение text /сss атрибута type сообщает браузеру, что в текущем файле применен текст на языке CSS. Все формальные описания стилей, представляющие собой CSS-правила, помещаются в элемент STYLE..

Стилевые свойства

Основой соз­дания листов стилей является определение стилевых свойств и назначение их селекто­рам.

Значения свойств. Различают числовые и символьные значения свойств. Числовые значения применяются для задания размеров, например, ширины и высоты блока, размера шрифта, толщины рамки, межстрочных интервалов и т.д. Значение выражается десятичным числом, за которым обычно следует размерность. Размер­ность записываются после числа без дополнительного пробела, например, 8pt, lcm, 2.5in, 130%. В случае отрицательного значения перед числом ставится знак минус (например -15рх). Числовые значения могут выражаться в абсолютных или относительных единицах (Табл. 4.1): абсолютные значения задают точный размер элемента и приводятся в стандартных единицах измерения длины, например, в дюймах, сантиметрах или миллиметрах; относительные значения определяют размер элемента относительно другого элемента. Например, ширина изображения может выражаться в процентах относительно ширины блока, в который вложен рисунок, или относительно размера окна браузера. Межсимвольный интервал часто задается в единицах em ширины символа основного шрифта (буквы «т»).

Табл. 4.1. Единицы измерения значений свойств

Условное обозначение	Наименование единицы измерения	Пример
Абсолютные единицы
in	дюйм	width:.25in
cm	сантиметр	height:1.5cm
mm	миллиметр	margin-left:12mm
Pt	пункт (lpt= l/72in)	font-size:16pt
pc	пик (lpc= 12pt)	line-height:1.2pc
Относительные единицы
px	пиксел	left:200px
em	ширина буквы «т»	letter-spacing:0.3em
ex	высота буквы «х»	font-size:2ex
%	процент	Wid th:150%

Свойства шрифтов В CSS предусмотрено множество свойств для управления шрифтами (задание гарниту­ры, размера, начертания и т.д.). Рассмотрим кратко только свойства шрифтов.

• font-family ~ задает гарнитуру шрифта, которая будет использована для вывода текста. Значением этого свойства может быть название конкретного шрифта (напри­мер, Arial) либо название семейства шрифтов. В спецификации CSS предусмотрены следующие семейства: serif (например, Times New Roman, Bodoni) и т д.

• font-size- определяет размер шрифта. Значение размера может быть заданов абсолютных единицах (например, lOpt, 8mm, 2in), в процентах от основного шриф­та (например, 130%), а также с помощью размерных выражений. К таким выражени­ям относятся: хх-small (сверхмелкий), х-small (очень мелкий), small (мел­кий), medium (средний), large (крупный), х-large (очень крупный), хх-large (сверхкрупный), larger (крупнее), smaller (мельче);

• font-style - задает стиль вывода символов. Возможны следующие значения этого свойства: normal (обычный), italic (курсив) и oblique (наклонный);

• font-weight - назначает вес или степень «жирности» шрифта. Для этого исполь­зуются целые числа из диапазона от 100 до 900 с шагом 100 единиц. Однако чаще применяют ключевые слова: bold (жирный), bolder (более жирный) и lighter (более тонкий);

• font-variant - указывают вариант начертания текущего шрифта. Для этого свойства браузеры поддерживают только два значения: small-caps (отображение малыми прописными буквами) и normal (не влияет на отображение). Приведем примеры задания свойств шрифта:

Р {font-family: helvetica, arial} STRONG {font-size: 150%} DIV.mono{font-

family: monospace;font-zise: larger; font-variant: small-caps}

Наименования свойств не чувствительны к регистру символов. На­пример, записи font-style и Font-STYLE будут интерпретированы браузером одинаково как свойство шрифта. Однако обычно исполь­зуют строчные символы, как принято в спецификации CSS.

^{Свойства текста} Понятно, что задать шрифт - еще не значит определить внешний вид всего текста. Необ­ходимо также указать свойства, отвечающие за межстрочный интервал, расстояние между словами и буквами и т.д. Эти свойства, называемые свойствами текста, определяются для абзацев и даже для всего документа, то есть задаются на уровне блоков (Р, DIV, BODY). Но можно их задавать и для отдельных слов или нескольких букв, то есть на уров­не строковых элементов (SPAN, STRONG и др. Перечислим свойства текста, предусмотренные спецификацией CSS:

• letter-spacing - устанавливает расстояние между буквами (межсимвольный ин­ тервал). По умолчанию этому свойству присваивается значение normal. Разработчик может указать расстояние в любых абсолютных единицах (см.. Табл. 4..1);

• word-spacing - устанавливает расстояние между словами. Аналогично letter-spacing значением этого свойства по умолчанию считается normal. Иные значе­ния могут быть заданы в абсолютных единицах (например, 10рх, 2mm);

• text-indent - задает отступ первой строки абзаца («красную строку»). Это свой­ство применяется к блокам, и его значение выражается в абсолютных единицах (на­пример, 4mm, lcm, 20pt и т.д.) либо в процентах от ширины блока (например, 5% или 10%). По умолчанию значение свойства text-indent равно нулю. Если этому свойству присвоить отрицательное значение, то вместо абзацного отступа получим выступ первой строки;

• text-align - задает горизонтальное выравнивание для текста, размещенного внутри элемента (например, Р или DIV). Это свойство принимает значения: center (по центру), left (влево), right (вправо) и justify (по ширине). По умолчанию текст выравнивается по левому краю. Эффект выравнивания особенно заметен при большом размере шрифта и малой ширине окна браузера;

• vertical-align - устанавливает расположение текста и рисунков по вертикалиотносительно базовой линии. Свойство может принимать, например, следующие зна­чения: baseline (выравнивание по базовой линии, принимается по умолчанию), sub (выравнивание по линии нижнего индекса), super (выравнивание по линии верхнего индекса);

• line-height - определяет межстрочный интервал. Значение этого свойства мож­но

задавать в абсолютных единицах (например, 16pt, 3mm), в процентах (130%), а также количеством строк (например, 1.7 или 3).

Свойства цвета и фона Эти свойства позволяют легко задавать различные цвета шрифтов, а также создавать в документе области с различными цветами фона и фоновыми изображениями.

• color - устанавливает цвет шрифта. Простым примером задания красного цвета шрифта для абзаца является тег _{<Р style="color:red">}

• background-color - задает цвет фона, на котором выводится элемент. По умолчанию это свойство имеет значение nоnе. Часто свойство background-color используется совместно со свойством color, определяющим цвет текста. Следующие два тега задают цвет olive для фона всего документа и цвет yellow для первого абзацного блока: <BODY styles"background-color:olive">

• <P style="color:yellow">

• background-image - определяет вставку фонового изображения. Значением этого свойства является URL рисунка, например, следующее CSS-правило:

.роg {background-image: url(myfig.jpg)}; задает для элементов класс а роg фоновый рисунок, хранящийся в файле myfig. jpg. Если изображение прозрачное, то через него будут видны нижние объ­екты страницы. Чтобы этого не происходило, совместно с рассматриваемым свойст­вом задается цвет фона (например, white);

• background-repeat - назначает повтор фонового рисунка. Это свойство приме­няется, если размер рисунка меньше видимой области элемента. Если вы хотите, что­бы рисунок повторялся по горизонтали и по вертикали, задавать свойство background-repeat не требуется (оно по умолчанию имеет значение repeat). Для повторения рисунка только по горизонтали выбирается значение repeat-х, только по вертикали - repeat-у, а для отключения повторения - значение nо-repeat.

Свойства блока Текстовые HTML-элементы можно представить в виде прямоугольных блоков. К таким элементам относятся Р, DIV и даже тело документа BODY. Для них в CSS предусмотрена специальная группа свойств, которая позволяет задавать поля, границы, отступы, разме­ры блока. Рассмотрим по отдельности каждое из свойств блока:

• margin - это ключевое слово обозначает набор свойств, определяющих каждое из четырех полей вокруг блока. В набор входят свойства margin-top (верхнее поле), margin-right (правое поле), margin-bottom (нижнее поле), margin-left (левое поле). К свойствам поля относится также и margin, позволяющее одной строкой задать значения всех четырех полей. Значения полей выражаются в абсолютных числах (например, 50pt, 10em) или в процентах от ширины блока (например, 70%). Возможно значение auto, при котором браузер сам подбирает оптимальное поле, пример (margin-top:10pt);

• border - обозначает набор свойств отображения границы элемента. Различают свойства border-style (управление выводом границы), border-width (шири­на границы) можно задавать как в абсолютных единицах (например, Зрх), так и с помощью ключевых слов: thin (тонкая), medium (средняя) и thick (толстая), border-color (цвет границы) определяется символьным названием цве­та, шестнадцатеричным кодом #RRGGBB, в десятичном формате (например, г gb (56,28,18)) или процентном формате (например, rgb (25%,30%,70%));. Свойства границ могут применяться не только к блочным элементам, но и к строчным элементам (например, SPAN). При этом строчный элемент автоматически превращается в блок, отделенный от осталь­ного текста пустыми строками. Значениями свойства border-style являются dotted (граница из точек), dashed (пунктирная граница), solid (обычная сплошная граница) и т.д. примеры (border-style: dotted; border-width:3px);

• padding - определяет просвет между содержимым блока и границей. Для каждой границы имеется свое свойство: padding-top, padding-right, padding-bottom и padding-left. Значение свойства задается в абсолютных единицах (на­пример, lcm, 5mm, 10pt);

• width и height - задают соответственно ширину и высоту блока без учета отсту­пов, границ и полей. Эти свойства указываются в абсолютных единицах (mm, cm, pt и т.д.), а ширину можно задавать также в процентах. Когда речь идет о текстовом блоке, высоту можно вообще не определять, при этом свойству height присваива­ется значение по умолчанию - auto. Если при абсолютной единице отсутствует раз­мерность (например, weight: 100), то считается, что размер указан в пикселах. От­метим, что свойства width и height наиболее естественно использовать для форматирования изображений;

• float - определяет размещение текущего элемента по горизонтали по отношению к внешнему элементу. Например, если это свойство задано для рисунка IMG, за кото­рым следует текстовый блок, то float будет задавать обтекание рисунка текстом. Свойство float принимает значения left (размещение элемента слева), right (размещение элемента справа) и попе (отсутствие обтекания при размещении эле­мента вдоль левой границы документа);

• clear - отменяет действие свойства float. Если, например, было задано разме­щение рисунка вдоль левой границы с обтеканием текстом, то значение clear: left отключит это обтекание. Аналогично применяется значение clear: right для элемента, размещенного вдоль правой границы. Отключить обте­кание по обеим сторонам можно значением both.

Внешние листы стилей

Внешние листы стилей записываются в отдельных файлах и применяются для оформле­ния набора HTML-документов. Использование внешних листов стилей позволяет еди­ным образом оформлять множество Web-страниц и даже сайтов. Удобство внешних сти­лей заключается также в том, что автор Web-страниц может изменять стили, не затраги­вая содержания документов.

CSS-файлы В рассматриваемой технологии собственно описание стилей хранится в отдельном фай­ле, который имеет расширение .css (для стилей CSS) или jss (для стилей JSSS -JavaScript Style Sheet, разработанных компанией Netscape). Такой файл является обыч­ным ASCII-файлом (как и HTML-файл). Для обращения к файлу внешних стилей ему присваивается имя, например, firmstyle.css.

Содержательная часть CSS-файла состоит только из листа стилей. Для пояснений в эти файлы могут включаться комментарии. Количество правил, описываемых в файле сти­лей, может быть любым.Пример CSS-файла:

P.red {font-weight:bold; color:red}

SPAN {font-style:italic; font-size:14pt}

.yellowbg {background-color:yellow; font-family:arial}

Как видим, CSS-файл не содержит каких-либо заголовков или конечных элементов.

Обращение к внешнему листу стилей (элемент LINK)

Основным инструментом подключения к HTML-документу внешних листов стилей является одиночный тег <LINK>. Этот тег располагается в заголовочной части HEAD. В состав тега <LINK> входит ряд атрибутов, из которых три являются обяза­тельными - это:

• type=" text /ess" - указывает браузеру, что применяется текст формата CSS.

• href - задает URL файла внешнего листа стилей. Если CSS-файл располагается в том же каталоге, что и текущий документ, то указывается только имя файла, например, firmstyle.css.

• • rel="stylesheet" - определяет отношение между текущим документом и объ­ектом ссылки href. Значение stylesheet указывает на то, что элемент LINK ус­танавливает связь с внешним листом стилей.

Один элемент link устанавливает связь только с одним CSS-файлом. Для обращения, например, к трем файлам, содержащим листы стилей, в HTML-документ необходимо ввести три элемента link.

^{Псевдоклассы и псевдоэлементы}

В CSS принята модель форматирования элементов с учетом их позиции в структуре до­кумента. Но такая модель не позволяет достичь некоторых специальных эффектов, на­пример, задать определенный стиль для первой строки в текстовом блоке. Для формати­рования фрагментов документа, которые не описываются специальными тегами, в CSS вводятся псевдоэлементы и псевдоклассы. Их введение расширяет возможности листов стилей.

Стили ссылок

С помощью псевдоклассов можно легко назначать стиль гиперссылок. В этом случае стилевые правила применяются к элементу привязки А. В спецификации CSS преду­смотрены следующие псевдоклассы ссылок.

• link - применяется для отображения ссылок, которые не посещались. Например, правило

A:link{color:blue} устанавливает синий цвет для таких ссылок.

• ^{visited - выделяет посещенные ссылки. К примеру, правило}

A: visited{color:yellow}

назначает желтый цвет для ссылок, активизировавшихся при данном посещении страницы.

Отличительным признаком псевдокласса является двоеточие, при­меняемое как разделитель после обозначения типа элемента. При записи псевдоклассов ссылок допускается опускать название элемента а. Если в HTML-документе имеется лист стилей с псевдоклассами ссылок, то все ссылки документа будут отображаться по заданным правилам.

Псевдоэлементы применяются для назначения стилей определенным фрагментам в за­висимости от их позиции в структуре документа. В CSS введено два псевдоэлемента.

• first-line - предназначен для задания стилевого правила первой строки текста. Этот псевдоэлемент применяется только к блокам ;

• first-letter - применяется для задания стиля первого символа (например, в строке). Этот псевдоэлемент позволяет воссоздать на Web-странице типографский прием буквицы.