Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
ТРПС.doc
Скачиваний:
67
Добавлен:
19.11.2018
Размер:
2.78 Mб
Скачать
      1. Каскадные таблицы стилей

Вернемся к предыдущему примеру. Как правило, заголовки лучше выглядят, когда их выравнивают по центру. Это можно сделать двумя способами: либо указать для каждого из них выравнивание по центру, либо поместить оба в единый блок. Для первого случая добавим в начало документа «index.html» (в часть HEAD) следующий текст:

<STYLE TYPE="text/css">

Н1,Н2 {text-align: center;}

</ STYLE >

Если просмотреть этот документ снова, то можно увидеть, что заголовки теперь выровнены по центру. Чтобы применить выравнивание сразу на несколько блоков, определим выравнивание при помощи элемента DIV. Для этого, вместо определения стилей для HI и Н2, определим стиль для DIV:

DIV {text-align: center;}

Затем вложим оба заголовка в контейнер DIV. В результате должен получиться примерно такой документ:

<HTML>

<HEAD>

<TITLE> Главная страница </TITLE>

<STYLE TYPE="text/css">

DIV {text-align: center;}

</ STYLE >

</HEAD>

<BODY>

<DIV>

<Н1>Приветствую вас на своей страничке!</Н1>

<Н2>Это – главная страница. </Н2>

А вот мое <А HREF="hello/hello.html">приветствие </A>. Больше пока ничего нет.

</BODY>

</HTML>

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

Рассмотрим данный аспект более внимательно. Для этого возьмем последний вариант файла «index.html» и добавим к открывающему тегу <Н2> атрибут STYLE, в котором укажем, что выравнивание элемента надо проводить по правому краю:

<Н2 STYLE="text-align:right">Это – главная страница </Н2>

Теперь, если открыть этот документ в браузере, то строка «Это – главная страница» будет выровнена не по центру, а по правому краю. Таким образом, мы убедились, что встроенные при помощи атрибута STYLE таблицы стилей имеют наибольший приоритет, ведь получается, что стиль определен внутри тега – ближе некуда!

Ранее было отмечено, что действие каскадных таблиц стилей может распространяться на несколько документов сразу. Для этого их выносят в отдельный CSS-файл, а затем ссылаются на него из других документов. Например, создадим файл «mystyle1.css» такого содержания:

Н1,Н2 {color: red;}

Затем добавим в часть HEAD файла «index.html» строку:

<LINK REL=STYLESHEET HREF="mystyle1.CSS" TYPE="text/CSS">

Теперь заголовки стали красного цвета. И любой документ, имеющий ссылку на «mystyle1.css», будет иметь заголовки HI и Н2 красного цвета, если только в самом документе значение цвета для этих тегов не будет переопределено. Т.е. если в файле «index.html» мы в определении STYLE добавим

H1 {color: blue;}

то строка «Приветствую Вас на своей страничке!» будет написана синим цветом.

Помимо применения общего для всех одноименных тегов определения стиля, можно создавать классы элементов. Например, если мы хотим, чтобы в одном и том же документе одни абзацы выравнивались по центру, а другие – по обоим краям (по ширине), то можно создать соответствующие классы для элемента Р. Делается это так:

<STYLE TYPE="text/CSS">

P.Center {text-align: center;}

P.Both {text-align: justify;}

</STYLE>

. . .

<P CLASS="Center"> ...некоторый текст, который надо разместить по центру... </Р>

<Р CLASS="Both"> ...некоторый текст, который должен быть выровнен по обоим краям... </Р>

Здесь в определении стиля мы создали два класса для тега Р: Center и Both. Для первого указано, что текст форматировать надо по центру, а для второго – по обоим краям (или, как это еще называют, по ширине окна). Для того чтобы указать, к какому именно классу принадлежит конкретный тег, используется атрибут CLASS. Если атрибут CLASS не указан, то будет применено форматирование, принятое по умолчанию (в случае с абзацем – выравнивание по левому краю).

Кроме задания классов элементов, можно ссылаться на конкретный элемент, заданный уникальным идентификатором – ID. Это делается при помощи определения стиля, явно не привязанного ни к одному из элементов:

# somename1 {color: green}

. . .

<Р ID="somename1"> этот текст должен быть зеленым! </Р>

Стиль, определенный как «somename1», будет применен к одноименному элементу, вне зависимости от того, чем этот элемент является. Важно только знать, что идентификатор (ID) элемента должен быть уникальным, т.е. на странице не должно быть более одного элемента с ID, равным, например «somename1».

Примеры с таблицами стилей к этой главе расположены в каталоге «Samples/Part_l/w_styles».

Следует учитывать, что классы и идентификаторы могут быть как общими (как в примере с ID), так и привязанными к типу элемента (как в примере с классами для Р). Например, если задать класс, определенный для Р, иному элементу (например, H1), то такая запись не сработает. Поэтому если вам надо создать класс, который может использоваться с любыми элементами, то используйте следующий синтаксис:

.Center {text-align: center;}

Более подробно правила определения классов и идентификаторов CSS рассмотрены ниже в главе «Таблицы стилей».

Когда требуется указать числовое значение, необходимо также указать и его тип – проценты, пиксели, сантиметры и т.д. В таблице 3.1 приведены типы значений, которые можно указывать в CSS1 и CSS2.

Таблица 3.10

Типы значений CSS1 и CSS2

Обозначение

Тип

Описание

em

высота/ширина

Размер относительно высоты текущего шрифта

px

высота/ширина

Размер в пикселях относительно текущего устройства

in

высота/ширина

Абсолютный размер в дюймах (1in=2,54cm)

cm

высота/ширина

Абсолютный размер в сантиметрах

mm

высота/ширина

Абсолютный размер в миллиметрах

pt

высота/ширина

Абсолютный размер в поинтах (1pt=1/72in)

pc

высота/ширина

Абсолютный размер в пиках (1pc=12pt)

%

высота/ширина

Размер в процентах относительно текущего

deg

углы

Угол в градусах

rad

углы

Угол в радианах

s, ms

время

Секунды и миллисекунды, для звуковых устройств

Hz

частоты

Частота звука в герцах, для звуковых устройств

kHz

частоты

Частота в килогерцах, для звуковых устройств

В HTML 4.0 атрибуты STYLE, CLASS и ID предусмотрены практически для всех элементов. Единственное исключение – тег BR, для которого не существует атрибутов CLASS и STYLE, и действие таблиц стилей на него не распространяется.