Иллюстрированный самоучитель по WEB-графике

       

Стили


Существует еще один прием позиционирования элементов и достижения внешних эффектов, которые могут украсить страницу и привлечь к ней внимание читателей. Этот прием основан на определении пользовательских стилей и задании таблицы стилей. Таблица стилей — это просто некоторая структура описания свойств элемента. Не ищите здесь какой-нибудь прямоугольной сетки. Если таблица стилей задана, то различные документы могут просто ссылаться на эту таблицу и не содержать большое количество атрибутов в тэгах форматирования типа <Н1>, <FACE> и т. п. Каскадные таблицы стилей (CSS, Cascading Style Sheets) содержат описание формата части или всего текста, координаты расположения элементов и другие параметры. Задание стиля обеспечивается с помощью как тэга <STYLE>, так и атрибута STYLE. Используя стили, можно позиционировать элементы страницы (например, тексты и графику), указав координаты их положения. И это, пожалуй, самое важное, что дают стили. Кроме того, таблицы стилей часто применяются при создании динамических страниц.

Далее способ изложения несколько изменится по сравнению с тем, который мы применяли ранее. Теперь мы будем больше рассказывать об идеях, иллюстрируя их примерами, и меньше уделять внимание строгости и полноте определений. При этом все примеры программ будут, как и прежде, работоспособными. Даже если вы не в полной мере разберетесь в теории вопроса, то все равно сможете использовать приведенные примеры в своих разработках. Для этого следует просто скопировать тексты или отдельные их фрагменты в ваш собственный HTML-документ и адаптировать к своей конкретной задаче путем коррекции отдельных параметров.

Тэги <STYLE> и </STYLE> используются внутри тэгов заголовка файла <HEAD> и </HEAD>, а атрибут STYLE — в тэге заголовка раздела (<Н1>, <Н2>,..., <H6>), а также в тэге <BODY>, в тэге выделения фрагмента <DIV> и многих других.

Применение тэга <STYLE>:

<HEAD>

<STYLE>

Тэг {свойство 1:значение 1; свойство2: значение; ...;



свойство N: значение N}

</STYLE>

</HEAD>

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

В следующем примере определяются стили заголовков первого и второго уровней путем использования тэга <STYLE>.

<HTML>

<HEAD>

<STYLE>



HI {Font-size:48pt;Color:RED}

Н2 {Font-size:20pt;Color:BLUE}

</STYLE>

</HEAD>

<BODY>

<Н1>Это стиль H1. Цвет - красный</Н1>

<Н2>Это стиль Н2. Цвет - синий</Н2>

Это - обычный стиль по умолчанию

</BODY>

</HTML>

Мы изменили стили Н1 и Н2, принятые по умолчанию: назначили размеры (48 и 30 пунктов) и цвета (красный и синий) для всех текстов, которые окажутся внутри этих тэгов. Существуют и другие свойства. Например, свойство FONT-FAMILY: HELVETICA задает гарнитуру шрифта HELVETICA.

Обратите внимание на то, что внутри тэга <STYLE> указываются определения стилей тегов, которые записываются без угловых скобок.



Рис. 664. Стили заголовков первого и второго уровней заданы атрибутами тэга <STYLE>

Можно определить стиль для тэга BODY. Тогда весь текст, находящийся между тэгами <BODY> и </BODY>, будет автоматически отформатирован в соответствии с перечисленными свойствами.

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

<HTML>

<HEAD>

<STYLE>

HI, H2 (Font-size:48pt;Color:RED}

</STYLE>

</HEAD>

<BODY>

<Н1>Это стиль HI. Цвет - красный</Н1>

<Н2>Это стиль Н2, такой же, как и HI. Цвет - красный</Н2>

Это - обычный стиль по умолчанию



</BODY>

</HTML>

Мы можем создать таблицу стилей, закрепив за ней имя. Это имя задается как обычное имя, но с точкой в качестве первого символа. Тогда в тэгах мы можем обращаться к этой таблице по ее имени, используя атрибут СLASS=имя_стиля, где имя стиля употребляется уже без точки.

Например, можно задать стиль так:

<STYLE>

mystyle (color:black;font-family:Aria1}

</STYLE>

А стиль заголовка второго уровня можно задать где-нибудь в тексте программы так:

<Н2 CLASS=mystyle>

Рассмотрим пример, создающий эффект, который без задания стиля был бы достижим только с помощью графики. Мы накладываем тексты друг на друга. Эта возможность далее будет использована для создания эффекта объемного текста (так называемого ЗD-эффекта). Кроме того, возможность наложения (частичного перекрытия) фрагментов страницы часто используется в дизайне реальных страниц. Вданном примере применяется тэг <DIV> для выделения фрагмента HTML-документа. Обратите внимание, как внутри определения стиля тэга BODY определяются другие стили с именами тень, основа, слой 1 и слой2. Это и есть то, что понимается под каскадной таблицей стилей.

<HTML>

<HEAD>

<TITLE>Пример CSS</TITLE>

<STILE> BODY {color: black; font-size:16px; font-family: Arial}

.тень {color: #DBDBDB; text-align:right; weight: medium; margin-top: ЗОрх;

font-size:27Opx;1ine-height: 270px;

font-family: Times)

.основа (color: red; weight: 900; margin-top: —230px; font-size:220px;

line-height: 250px; font-family: Times)

. слой1(color: black; margin-top: ~130px; weight: medium; ont-size:65px;

line-height: 65px; font-family: Arial}

.слой2 {color: green; margin-top: ЗОрх; weight: medium; font-size: 35px;

line-height: 45px; font-family: Arial}

</STYLE>

</HEAD>

<BODY>

Пример каскадного стиля <CENTER>

<TABLE WIDTH=500 CELLPADING=0 CELLSPACING=0 BORDER=0> <TR>

<TD ALIGN=CENTER VALIGN=TOP>

<DIV CLASS=Tень>Мы/DIV>



<DIV CLASS=ocHOBa>Мы/DIV>

<DIV CLASS=слой1>сделали это без всякой графики</DIV>

<DIV CLASS=слой2>используя только стили текста</DIV>

</TD> </TR>

</TABLE>

</CENTER>

</BODY>

</HTML>



Рис. 665.

В приведенном примере использованы тэг <DIV> и атрибут CLASS. Тэг <DIV> применяется для задания части страницы (фрагмента документа). Он ничего не форматирует, а лишь помечает фрагмент текста, который рассматривается как единый объект. Атрибут CLASS позволяет сослаться на таблицу стилей и тем самым задать стиль представления текста, расположенного между тэгами <DIV CLASS . . . > и </DlV>. Обратите внимание на то, как в таблице стилей определяется стиль: набору свойств в фигурных скобках присваивается имя, перед которым ставится точка. В дальнейшем идут ссылки на эти имена с помощью атрибута CLASS для применения ранее определенного стиля. Идея проста: сначала определяется что-то, а затем используется это определение путем ссылки на него.

В этом примере тексты определяются как бы в слоях, которые накладываются друг на друга. Так, сначала выводится слой тень, затем на него накладывается слой основа, а потом — слой1 и слой2. Порядок, в котором слои накладываются друг на друга, задается порядком следования фрагментов текста, помеченных тэгом <DIV>. Собственно перекрытие слоев обеспечивается применением отрицательных значений свойства margin-top (отступ сверху).

В рассмотренном выше примере были использованы следующие свойства:

  • margin-top — отступ сверху;


  • color —цвет;


  • font-size — размер шрифта;


  • font-family — семейство шрифтов;


  • weight — степень «жирности» шрифта;


  • line-height — высота строки.


  • Используя отрицательные значения свойства margin-top, можно наложить один текст на другой.

    Кроме рассмотренных выше способов задания стилей, можно применять атрибут STYLE, вставляемый в тэги заголовков, абзаца <Р>, тела <BODY>, <DIV> и <IMG>. В этом случае стиль задается в следующем формате:

    STILE ="описание_свойств_стиля"

    Описание свойств стиля заключается в кавычки и содержит свойства и их значения, перечисленные через точку с запятой, как это делалось при использовании тэга <STYLE>.

    Атрибут STYLE обычно применяется в тех случаях, когда необходимо задать стиль элемента по месту его появления в программе. Вот пример использования атрибута STYLE для форматирования заголовка второго уровня.

    <Н2 STYLE="font-size:48; font-family:Аг1а1">Некоторый текст</Н2>


    Содержание раздела