Каскадные таблицы стилей в HTML

Таблицы стилей (CSS) позволяют отделить содержание документа от его форматирования и отображения. HTML-документы могут содержать внедренные стили непосредственно внутри документа или импортировать стили из связанных таблиц стилей, находящихся в файлах с расширением CSS. Элемент META указывает тип документа в виде:

<META http-equiv="Content-Style-Type" content="text/css">

При использовании внедренных стилей для установки стиля отдельного элемента HTML в этом элементе используется атрибут style. В следующем примере устанавливаются цвет и размер шрифта для отдельного параграфа и заголовка:

<P style="font-size: 12pt; color: fuchsia">

Размер шрифта 12 пикселей </P>

<H1 style="text-decoration:underline">

Текст с подчеркиванием </H1>

<H2 style="color: red">

Текст заголовка красным цветом</H2>

Объявление значений свойств имеет вид "name: value".

Для того чтобы стили относились к нескольким элементам документа, например к одному или всем Pэлементам, H1элементам, гиперссылкам, используется блок STYLE. Блок STYLE размещается в секции HEAD документа. Следующий стиль обводит границы вокруг каждого H1элемента и центрирует его на странице. Кроме этого, устанавливается стиль параграфа и гиперссылки.

<!–пример # 19: стиль–>

<HEAD>

<STYLE type="text/css">

H1 {border-width: 1; border: solid; text-align: center}

P { color: blue}

a: hover {color: red; text-decoration: overline}

</STYLE></HEAD>

Для гиперссылок устанавливаются следующие значения стилей:

a:hover стиль меняется при наведении курсора;

a:active стиль меняется при щелчке левой кнопкой мыши;

a:visited стиль меняется после посещения;

a:link непосещенная ссылка.

Данные о стиле размещаются в фигурных скобках.

В следующем примере стиль относится к определенным H1элементам. Чтобы скрыть таблицы стилей от старых программ просмотра, их помещают внутрь HTML-комментария:

<!–пример # 20: стиль в комментарии–>

<HEAD><STYLE type="text/css">

<!—маскируем

H1.myclass {border-width: 1; border: solid; text-align: center} –>

</STYLE></HEAD>

<BODY>

<H1 class="myclass">H1 is affected by our style</H1>

<H1> This one is not affected by our style </H1>

</BODY>

Два тега – DIV и SPAN, играющие роль скобок, используются, чтобы применить стили к ограниченному фрагменту документа. В следующем примере элемент SPAN используется, чтобы вывести несколько слов параграфа прописными буквами и установить стили для других параграфов.

<!–пример # 21: применение тегов DEV и SPAN–>

<HEAD><STYLE type="text/css">

SPAN.sc-ex { font-variant: small-caps }

</STYLE></HEAD><BODY>

<P><SPAN class="sc-ex">The first</SPAN> few words are in small-caps.</P>

<P>Это<SPAN style="font-style:italic"> курсив</SPAN></p>

<P>Это<SPAN style="text-transform-style:uppercase">верхний регистр </SPAN> </p>

</BODY>

В следующем примере используется DIV и атрибут class, чтобы установить правила для двух параграфов.

<!–пример # 22: стиль для фрагментов–>

<HEAD><STYLE type="text/css">

DIV.Abstract { text-align: justify }

</STYLE></HEAD><BODY>

<DIV class="Abstract">

<P>The Chieftain product range is our market winner for the coming year. This report sets out how to position Chieftain against competing products.

<P>Chieftain replaces the Commander range, which will

remain on the price list until further notice.

</DIV>

<P style="position:absolute"; top:125px; left:200px > Простой текст для позиционирования, на который накладывается изображение </p>

<DIV style="position:absolute"; top:125px; left:200px >

<img src="fract.gif"> </DIV>

</BODY>

Для третьего параграфа в примере, в котором на текст накладывается изображение, установлено позиционирование: position:absolute – точка отсчета: левый угол окна; top – вертикальное, left горизонтальное смещение от точки отсчета.

Внешние таблицы стилей позволяют установить стили для нескольких документов, сохранить в файле .css и затем изменять их без модификации документа. При этом используются следующие атрибуты элемента LINK:

Значение ref устанавливается на URL файла стилей. Значение атрибута type определяет тип таблицы стилей. Атрибут rel устанавливается в таблицу стилей stylesheet. Например:

<LINK href="mystyle.css" rel="stylesheet" type="text/css">

В следующем примере таблица, помещенная в файл special.css, устанавливает цвет текста в параграфе зеленым, а границу – красным:

P.special {

color: green;

border: solid red;

}

Эту таблицу стилей можно связать с HTML-документом с помощью элемента LINK:

<!–пример # 23: установка стиля для HTML-документа–>

<HTML><HEAD>

<LINK href="special.css" rel="stylesheet" type="text/css">

</HEAD><BODY>

<P class="special">paragraph should have green text.

</BODY></HTML>

В контексте использования Java-технологий можно отметить три возможности использования HTML:

1. Использование тегов <applet> </applet> для включения java-аппле-тов в HTML-документ.

2. Использование форм HTML и методов GET и POST для пересылки запросов и информации из форм серверу для обработки сервлетами.

3. Ответы клиенту, пересылаемые серверу на основании выполнения сервлетов и JSP, также конвертируются в HTML-документ и отображаются на стороне клиента.

Вы можете следить за любыми ответами на эту запись через RSS 2.0 ленту. Вы можете оставить ответ, или trackback с вашего собственного сайта.

Оставьте отзыв

XHTML: Вы можете использовать следующие теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

 
Rambler's Top100