Web-технологии в ДО



	Листы стилей

Типы листов стилей

Существует три способа применения листов стилей в документах HTML.

Встраивание (Inline), при котором дескрипторы фрагментов документа дополняются короткими объявлениями формата. Встраивание предоставляет полный контроль над фрагментом, к которому оно применяется. Присовокупите атрибут style="x" к дескриптору абзаца, и браузер будет выводить этот абзац с применением параметров формата соответствующего стиля.
Внедрение (Embed), обеспечивающее контроль над страницей HTML. Использование дескриптора <Style> в пределах раздела <Head> страницы позволяет детально описать атрибуты применяемого ко всей странице стиля.
Связывание (Link), известное также как применение внешнего (external) листа стилей. В этом случае связанный документ использует эталонный лист стилей, применяемый для всего узла и хранящийся в файле с расширением .css.

Встраивание стиля

Описания стиля можно встроить в различные дескрипторы HTML, для которых стиль имеет смысл, например в предназначенные для объявления абзацев, заголовков, горизонтальных полос, якорей и ячеек таблицы. В следующем примере демонстрируется дескриптор объявления абзаца с добавлением к нему атрибута STYLE для получения требуемого эффекта.

<P style="font: 13pt verdana"> Для вывода текста текущего абзаца применяется встроенный стиль. Гарнитура шрифта – Verdana, высота символов 13 пунктов.</P>

Внедрение стиля

Для внедрения стиля применяется уже знакомый нам дескриптор STYLE. Он располагается в пределах раздела <HEAD> документа.

<HTML>
<HEAD>
<TITLE>Пример внедрения стиля</TITLE>
<STYLE>

</STYLE>
</HEAD>
<BODY>
<H1>Здесь разместить какой-нибудь заголовок</H1>
<P>Здесь разместить какой-нибудь текст.</P>
</BODY>
</HTML>

Посмотреть на результат применения внедренного стиля.

Интересный аспект внедренного стиля – объявление разных шрифтов и цвета для заголовка и обычного текста.

Связывание стиля

Связанные стили, называемые также внешними, являются развитием внедренных стилей. При этом используется тот же дескриптор STYLE, что и ранее, но все описания хранятся в отдельном файле (обычно с расширением .css; например "style.css"). Сам файл либо должен располагаться в корневом каталоге узла, либо вы должны корректно определить связь с ним в HTML-документах.

Пример листа стиля (style.css), предназначенного для связывания

BODY{
color: #000000;
font-size: 13pt;
background : #FFFFEF;
}
CAPTION {
font-style : italic;
}
TABLE {
width: 100%;
border-width: 2px;
border-style: solid;
border-color: #888888;
border-collapse:collapse;
font-size: 13pt;
}
TH {
border-width: 2px;
border-style: solid;
border-color: #888888;
background-color : #EEEBDD;
padding: 1px
}
TD {
border-width: 1px;
border-style: solid;
border-color: #CCCCCC;
padding: 1px
}

Процесс связывания файла с эталонным стилем и файла Web-страницы, использующей его с помощью связывания, предлагается ниже.

<HTML>
<HEAD>
<TITLE>Пример связывания стиля</TITLE>
<link rel=stylesheet href="style.css" type="text/css">
</HEAD>
<BODY>
<H1>Здесь разместить какой-нибудь заголовок</H1>
<P>Здесь разместить какой-нибудь текст</P>
</BODY>
</HTML>

А теперь представьте, что ваш узел содержит тысячу страниц HTML. Неожиданно возникает необходимость изменить их внешний вид, и… и вы вносите изменения в единственный файл. style.css.

Комбинированное применение встроенного, внедренного и связанного стилей

Одно из достоинств листов стилей состоит в том, что вы можете комбинировать все указанные методы, получая широкие возможности управления форматированием страницы, Представим, что вашим большим узлом управляет единичный файл с расширением .css. Но одной из Web-страниц требуется необычное оформление. Никаких проблем – в нее тут же внедряется индивидуальный лист стилей. Дело в том, что вначале браузер находит внедренные стили и использует именно их. Для тех же фрагментов, которые не охвачены внедренными стилями, браузер просматривает связанный лист стилей.

Оба указанных стиля можно отменить, использовав встроенный стиль. Стандартная последовательность применения стилей такова: вначале встроенный стиль, при его отсутствии – внедренный и только при отсутствии обоих – связанный.

Синтаксис листов стилей

Запись элементов языка HTML весьма напоминает математическую – в том смысле, что она должна подчиняться строгим правилам, или синтаксису, игнорируя которые вы рискуете получить неверный результат.

Независимо от того, какой из способов применения листов стилей использован, синтаксис их схож. Он состоит из трех частей.

Селектора (selector), обладающего свойствами, которые, в свою очередь, имеют значения. Селектор обычно представляет собой стандартный элемент HTML-страницы, такой как заголовок (H1) или абзац (P).
Свойств (property) селектора. Например, к свойствам абзаца (P) относятся поля (margin), шрифты (font), цвет фона (background).
Значений (value) свойств селектора. Например, для определения шрифта заголовка первого уровня (H1) используется свойство type-family. Конкретный шрифт, указанный вами, и представляет собой значение этого свойства.

Свойства и значения образуют объявление (declaration). Селектор и объявление образуют правило (rule) со следующим порядком записи:

H1 {
type-family: garamond, times, serif;
}

Обратите внимание на то, что объявление взято в фигурные скобки. Данное правило распространяется только на внедренные и связанные стили. При объявлении встроенного стиля используются кавычки. Кроме того, в этом случае не используются селекторы, так как стиль применяется только к дескриптору, в котором он определен:

Стиль этого абзаца определен соответствующим объявлением.

Составные объявления разделяются точкой с запятой (;). В случае единичного объявления в точке с запятой нет необходимости.

Классы и группирование

Классом называется разбиение одного правила стиля на несколько частей. Если есть необходимость оформить один фрагмент текста иначе, чем другой, можно создать несколько наборов на базе HTML-дескриптора. Каждый набор вновь созданных стилей со специальными возможностями оформления называется классом стиля (class style). Пример использования классов стиля приведен ниже.

Пример использования классов

<html>
<head>
<title>Факторы размещения промышленного производства</title>
<link rel=stylesheet href="style.css" type="text/css">
<STYLE>

</STYLE>
</head>
<body>
<TABLE style="font-size: 10pt">
<caption><BIG>Факторы размещения промышленного производства</BIG></caption>
<TR>
<TH>Отрасли <BR>промыш-<BR>ленности</TH>
<TH>Сы-<BR>рье</TH>
<TH>Топ-<BR>ливо</TH>
<TH>Элект-<BR>роэнер-<BR>гети-<BR>ческий</TH>
<TH>Вод-<BR>ный</TH>
<TH>Тру-<BR>до-<BR>вой</TH>
<TH>Транс-<BR>порт-<BR>ный</TH>
<TH>Потре-<BR>битель-<BR>ский</TH>
<TH>Специализации, <BR>кооперирования,
<BR>комбинирования</TH>
<TH>При-<BR>род. <BR>усло-<BR>вия</TH>
<TH>Эколо<BR>гичес-<BR>кий</TH>
<TH>Науч-<BR>ный</TH>
<TH>Военно-<BR>стра-<BR>теги-<BR>ческий</TH></TR>
<TR> <TD>Нефтедо-<BR>бывающая</TD>
<TD class=1>1</TD> <TD class=3>3</TD> <TD class=4>4</TD>
<TD class=3>3</TD> <TD class=3>3</TD> <TD class=4>4</TD>
<TD class=3>3</TD> <TD class=3>3</TD> <TD class=4>4</TD>
<TD class=2>2</TD> <TD class=3>3</TD> <TD class=3>3</TD></TR>
<TR> <TD>Нефтеперера-<BR>батывающая</TD>
<TD class=4>4</TD> <TD class=3>3</TD> <TD class=2>2</TD>
<TD class=3>3</TD> <TD class=3>3</TD> <TD class=4>4</TD> <TD class=2>2</TD> <TD class=4>4</TD> <TD class=4>4</TD>
<TD class=2>2</TD> <TD class=4>4</TD> <TD class=2>2</TD></TR>
<TR> <TD>Газовая</TD>
<TD class=1>1</TD> <TD class=3>3</TD> <TD class=3>3</TD>
<TD class=3>3</TD> <TD class=3>3</TD> <TD class=1>1</TD>
<TD class=3>3</TD> <TD class=4>4</TD> <TD class=3>3</TD> <TD class=2>2</TD> <TD class=3>3</TD> <TD class=3>3</TD></TR>
</TABLE><BR>
<P>Легенда. Значение факторов:
<TABLE style="width: 35%">
<TR>
<TD class=1 align=center width=20%>1</TD>
<TD style="text-indent: 10px;">Решающее</TD></TR>
<TR>
<TD class=2 align=center>2</TD>
<TD style="text-indent: 10px;">Большое</TD></TR>
<TR> <TD class=3 align=center>3</TD> <TD style="text-indent: 10px;">Незначительное</TD></TR> <TR>
<TD class=4 align=center>4</TD>
<TD style="text-indent: 10px;">Малое</TD></TR>

</TABLE>
</body>
</html>

В качестве связанного стиля используется style.css, приведенный в листинге выше.

Результат этого форматирования будет выглядеть таким образом.

Пример использования группирования

При группировании стилей вы можете:

группировать разные селекторы;
группировать свойства и значения.

Допустим, возникла необходимость одинаково оформить заголовки разных уровней. Первый способ выполнить эту работу – присвоить всем заголовкам одинаковые атрибуты, как показано в следующем примере:

А вот решение с использованием группирования:

Процедура группирования свойств и значений выполняется точно так же. Без группирования пример свойств и значений при дескрипторе <BODY> выглядит так:

BODY {
font-family: arial, sans-serif;
font-size: 13pt;
line-height: 14pt;
font-weight: bold;
font-style: normal;
}

Применить группирование можно только к атрибуту font:, к которому добавляются аргументы, как показано ниже:

BODY {
font: bold normal 13pt/14pt arial sans-serif;
}

Еще раз следует напомнить о важности порядка следования аргументов при группировании, а именно: насыщенность шрифта ⇒ наклон шрифта ⇒ размер символов ⇒ косая черта ⇒ высота строки текста ⇒ дополнительные сведения.