 |
АвтоАвтоматизацияАрхитектураАстрономияАудитБиологияБухгалтерияВоенное делоГенетикаГеографияГеологияГосударствоДомДругоеЖурналистика и СМИИзобретательствоИностранные языкиИнформатикаИскусствоИсторияКомпьютерыКулинарияКультураЛексикологияЛитератураЛогикаМаркетингМатематикаМашиностроениеМедицинаМенеджментМеталлы и СваркаМеханикаМузыкаНаселениеОбразованиеОхрана безопасности жизниОхрана ТрудаПедагогикаПолитикаПравоПриборостроениеПрограммированиеПроизводствоПромышленностьПсихологияРадиоРегилияСвязьСоциологияСпортСтандартизацияСтроительствоТехнологииТорговляТуризмФизикаФизиологияФилософияФинансыХимияХозяйствоЦеннообразованиеЧерчениеЭкологияЭконометрикаЭкономикаЭлектроникаЮриспунденкция
Каскадные таблицы стилей
Таблицы стилей (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-документ и отображаются на стороне клиента.
JAVASCRIPT
Язык сценариев JavaScript создал сотрудник компании Netscape Communication Брендан Эйх для разработки Web-приложений на качественно новом уровне. JavaScript принес на клиентскую Web-страницу динамику и интер-
активность и заменил Java-апплеты на клиентской странице. Синтаксис языка JavaScript очень похож на синтаксис языка Java, однако это полностью самостоятельный язык скиптов. Язык JavaScript используется совместно с HTML, XML
и может использовать объекты языка Java.
Поиск по сайту: