АвтоАвтоматизацияАрхитектураАстрономияАудитБиологияБухгалтерияВоенное делоГенетикаГеографияГеологияГосударствоДомДругоеЖурналистика и СМИИзобретательствоИностранные языкиИнформатикаИскусствоИсторияКомпьютерыКулинарияКультураЛексикологияЛитератураЛогикаМаркетингМатематикаМашиностроениеМедицинаМенеджментМеталлы и СваркаМеханикаМузыкаНаселениеОбразованиеОхрана безопасности жизниОхрана ТрудаПедагогикаПолитикаПравоПриборостроениеПрограммированиеПроизводствоПромышленностьПсихологияРадиоРегилияСвязьСоциологияСпортСтандартизацияСтроительствоТехнологииТорговляТуризмФизикаФизиологияФилософияФинансыХимияХозяйствоЦеннообразованиеЧерчениеЭкологияЭконометрикаЭкономикаЭлектроникаЮриспунденкция

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

Читайте также:
  1. III. Статистические таблицы
  2. Активный запрос на создание таблицы
  3. Алгоритм 2.1. Построение выходной таблицы, столбиковой диаграммы и кумуляты
  4. Анализ оптимальной симплекс-таблицы
  5. Анализ таблицы видов деятельности (на следующей сессии)
  6. Анализ таблицы сложения. Ознакомление дошкольников с арифметическими действиями и вычислительными приемами.
  7. Безработица является неотъемлемой чертой общества с рыночной экономикой, что наглядно видно по данным таблицы 3.1.
  8. Булева алгебра. Таблицы истинности. Основные законы.
  9. Ввод данных в таблицы. Редактирование записей данных
  10. Вспомогательные таблицы
  11. Вычисляемые таблицы.
  12. ГЛАВА IV. СТАТИСТИЧЕСКИЕ ТАБЛИЦЫ.

Таблицы стилей (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-документ и отображаются на стороне клиента.

 
Приложение 2

JAVASCRIPT

Язык сценариев JavaScript создал сотрудник компании Netscape Communication Брендан Эйх для разработки Web-приложений на качественно новом уровне. JavaScript принес на клиентскую Web-страницу динамику и интер-
активность и заменил Java-апплеты на клиентской странице. Синтаксис языка JavaScript очень похож на синтаксис языка Java, однако это полностью самостоятельный язык скиптов. Язык JavaScript используется совместно с HTML, XML
и может использовать объекты языка Java.


1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 |

Поиск по сайту:



Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Студалл.Орг (0.005 сек.)