A. Гончаров. WEB-ДИЗАЙН. HTML, JavaScript и CSS. Карманный справочник3.2. Элементы для создания стилей

3.2. Элементы для создания стилей

Нестандартные классы элемента гиперссылки A

Использование класса hover в меню

При создании меню на основе текстовых гиперссылок можно использовать нестандартные классы. Например, можно задать два различных вида надписей:
<STYLE type="text/css">
.menu1 {text-decoration: none; color: #60605C0; font-weight: bold}
.menu1:hover{color: red; }
.menu2 {text-decoration: none; color: # 80801F; font-weight: bold}
.menu2:hover{color: red; }
</STYLE>
В данном случае целесообразно задавать полужирное начертание букв. Теперь в меню можно использовать текст двух цветов. Для примера показана таблица с тремя пунктами меню:
<TABLE border=1 cellspacing=0 cellpadding=1>
<TR>
<TD align="center"> 
<A class="menu1" href="файл1.htm" >Первый пункт меню</A>
 </TD>
<TD align="center"> 
<A class="menu1" href="файл2.htm">Второй пункт меню</A>
 </TD>
<TD align="center"> 
<A class="menu2" href="файл3.htm ">Третий пункт меню</A>
 </TD>
</TR>
</TABLE>
В данном случае пункт меню подсвечивается после наведения указателя мыши, но атрибуты событий не используются.

Нестандартные классы элемента BODY

Для решения задач дизайна были разработаны нестандартные классы для изменения цвета полосы прокрутки в окне броузера. Данные свойства CSS предназначены для элемента BODY (см. рис. 3.1):
scrollbar-face-color — поверхности бегунка и кнопок;
scrollbar-3dlight-color — верхний и левый край бегунка и кнопки;
scrollbar-highlight-color — внутренние линии для верхнего и левого краев бегунка и кнопки;
scrollbar-darkshadow-color — правый и нижний край бегунка и кнопки;
scrollbar-shadow-color — внутренние линии для правого и нижнего краев бегунка и кнопки;
scrollbar-arrow-color — изображения стрелок;
scrollbar-track-color — фон полосы прокрутки;
По традиции иллюзия объемности элементов управления создается при помощи линий двух оттенков. При этом считается, что свет падает слева и сверху, поэтому соответствующие линии делаются более светлыми.

Рис. 3.1. Задание новых цветов для деталей полосы прокрутки

<LINK>

При большом количестве страниц сайта целесообразно хранить параметры стилей в одном файле и подключать его к Web-страницам. Такой файл имеет обычный текстовый формат и тип css. Многие гипертекстовые редакторы позволяют работать с такими файлами, но для его создания можно использовать даже программу Блокнот.
Возможна ситуация, когда часть стилей определена в css-файле, часть — с помощью элемента STYLE, а часть с помощью атрибутов style. Если определения стилей не противоречат друг другу, настройки элементов будут объединяться. Если появятся взаимоисключающие определения (например, различные указания цвета), то характеристики элемента будут выбираться в следующем порядке:
1. Значения из атрибута style текущего элемента;
2. Значения из элемента STYLE текущей Web-страницы;
3. Значения из присоединенного css-файла.
Для подключения к странице файл с таблицами стилей, надо использовать элемент LINK в секции HEAD:
<LINK href="имя_файла.css" rel="stylesheet" type="text/css">
В этом случае стили используются так же, как и в предыдущих примерах. Например, css-файл может содержать следующие определения:
P.s1 {color : maroon ;font-variant: small-caps;
letter-spacing: 2pt; background: #D0B0A0}
P.s2 {color : maroon;font-style: italic;}
P.s3 {color : maroon;font-style: italic;
letter-spacing: 2pt;}
.color2 {color : maroon;}
TABLE {
border-top-color: #F4B46E;
border-right-color: #B84634;
border-bottom-color: #B84634;
border-top-color: #F4B46E;
}

<DIV> </DIV> и <SPAN> </SPAN>

Существуют два элемента, которые специально предназначены для применения стилей. Особенностью элемента DIV является то, что он предназначен для использования в качестве контейнера элементов, то есть его собственный стиль должен влиять на стили элементов, находящихся внутри. Часто его используют для позиционирования некоторого объекта. Пример использования элемента DIV:
<HTML>
<HEAD>
<TITLE>Тестовая страница</TITLE>
<META http-equiv="Content-Type" content="text/html;
charset=windows-1251">
</HEAD>
<BODY>
<DIV style="z-index:-1; position: absolute; top: 24; left:2;
width: 200px; height:150px; background-color: red;">
<IMG src="pict1.gif" width=190 height=140>
</DIV>
<P> </P>
<P> </P>
<P> </P>
<H2> Текст заголовка H2</H2>
</BODY>
</HTML>
В данном примере для элемента DIV определено положение в слое под основным слоем Web-страницы при помощи свойства z-index. Заданы отступы на 24 пиксела от верхнего края области просмотра и на 2 пиксела от левого края. Вертикальное положение элемента H2 задано с помощью нескольких пустых абзацев, и этот заголовок находится над элементом DIV (рис. 3.2).
Внутри элемента DIV находится рисунок, но, поскольку размер рисунка меньше заданного размера элемента DIV, видимой оказывается часть фона (цвет которого задан при помощи свойства background-color). По умолчанию рисунок IMG позиционируется в верхний правый угол элемента DIV.

Рис. 3.2. Элемент DIV

Элемент SPAN, наоборот, предназначен для включения в состав других элементов. Пример, показанный ниже, иллюстрирует возможность изменения части текста абзаца.
<HTML>
<HEAD>
<TITLE>Тестовая страница</TITLE>
<META http-equiv="Content-Type" content="text/html;
charset=windows-1251">
<STYLE type="text/css">
SPAN.sp1 { cвойство: значение; ... }
</STYLE>
</HEAD>
<BODY>
<H1> Заголовок </H1>
<P><SPAN class="sp1">Текст 1</SPAN> Текст 2 </P>
</BODY>
</HTML>

Свойства стилей CSS2

Данные свойства, которые можно использовать в таблицах стилей. Этот перечень определяется как CSS2 — каскадные таблицы стилей второго уровня. Жирным курсивным шрифтом выделены имена свойств и значения свойств, принимаемые по умолчанию. Все свойства, кроме перечисленных значений, могут иметь стандартное значение inherit — унаследованный. Оно позволяет использовать аналогичное свойство родительского элемента.

Форматирование текста

font-family
Шрифты, которые могут быть использованы на Web-странице.
Пример 1. Определение стиля:
BODY {font-family: "Times New Roman", Verdana, Tahoma}
Пример 2. Использование атрибута style:
<BODY style="font-family: Verdana, cerif">
Иногда использование конкретных названий шрифтов вызывает проблемы. Если у разработчика в этом шрифте есть русские буквы, и он все надписи видит и может почитать, то у зрителя может просто не оказаться на компьютере такого шрифта, а если он и будет, то в нем может оказаться кириллицы. Учитывая это, опытные разработчики стараются делать страницы так, чтобы с наибольшей вероятностью были прочитаны посетителем сайта.

font-style
Задание курсива.
Значения:
normal — обычный шрифт;
italic, oblique — курсив.

font-variant
Задания стиля шрифта «малые прописные».
Значения:
normal — обычный;
small-caps — малые прописные.
Пример:
H1, H2 {font-variant: small-caps}

font-weight
Степени «жирности» шрифта.
Значения:
normal — обычный (400);
bold — полужирный (600 или 700);
bolder — более жирный, нежели в родительском элементе;
lighter — менее жирный, нежели в родительском элементе;
100, 200, 300, 400, 500, 600, 700, 800, 900 — допустимые числовые значения.

font-size
Размер шрифта.
Значения:
xx-small, x-small, small, medium, large, x-large, xx-large — абсолютные значения;
Npt — значение, выраженное в пунктах;
N% — значение, выраженное в процентах;
Nem — значение по отношению к родительскому элементу;
larger, smaller — относительные значения.
Пример:
<P style="font-size: 16pt ">
Ниже в таблице приведены соответствие размеров шрифтов, полученных при помощи разных конструкций.

Параметр CSS	xx-small	x-small	small	medium	large	x-large	xx-large
Элементы заголовков	H6		H5	H4	H3	H2	H1
Атрибут size элемента FONT	1		2	3	4	5	6	7

Свойства боксов и блоков

Боксом (box) считается некоторый объект, для которого можно определить границы или определить область его расположения. Боксом может быть, к примеру, текстовый абзац или таблица. Как правило, бокс связывают с элементом HTML, для которого задаются рамки, поля или отступы. Ряд свойств определяют параметры боксов.

margin-top, margin-right, margin-bottom, margin-left
Размер пустого пространства с внешней стороны элемента.
Значения:
auto — определяется броузером;
числовое;
процентное.

margin
Величина отступов вокруг элемента.
Значения:
auto — определяется броузером;
числовое;
процентное.
Пример:
P { margin: 10px 10px 10px 10px }

padding-top, padding-right, padding-bottom, padding-left
Величина отступа между указанной границей элемента и его содержимым.
Значения:
auto — определяется броузером;
числовое;
процентное.

padding
Величина отступа между границами элемента и его содержимым.
Значения:
auto — определяется броузером;
числовое;
процентное.
Пример:
OL { padding: 4px 4px 4px 4px }

border-top-width, border-right-width, border-bottom-width, border-left-width
Ширина элементов рамки.
Значения:
thin — тонкая;
medium — средняя;
thick — широкая;
числовое.

border-width
Толщина рамки.
Значения: thin, medium, thick, числовое.

border-top-color, border-right-color, border-bottom-color, border-left-color
Цвет сторон рамки.
Значения:
числовое;
transparent — прозрачная линия.

border-color
Цвет рамки.
Значения:
числовое;
transparent — прозрачная рамка.

border-top-style, border-right-style, border-bottom-style, border-left-style
Вид линий рамки.
Значения:
none или hidden — рамка не показана;
dotted — рамка из точек;
dashed — пунктирная рамка;
solid — сплошная рамка;
double — двойная рамка;
groove — двугранная рамка;
ridge — такая же, как groove, но светлая и темная грани расположены иначе;
inset — одна грань, наклоненная внутрь;
outset — такая же, как inset, но свет падает по-другому.

border-style
Вид рамки.
Значения такие же, как и у предыдущих свойств.

border-top
Одновременное задание значений свойств border-top-width, border-top-style и border-top-color.
Пример:
H1 { border-top: thin solid green }

border-bottom
Одновременное задание значений свойств border-bottom-width, border-bottom-style и border-bottom-color.

border-left
Одновременное задание значений свойств border-left-width, border-left-style и border-left-color.

border-right
Одновременное задание значений свойств border-right-width, border-right-style и border-right-color.

border
Одновременное задание значений свойств border-width, border-style и border-color.
Пример:
P { border: thin dashed red }

position
Способ вычисления координат границ элемента.
Значения:
normal — положение объекта определяется броузером;
relative — вначале вычисляется обычное положение элемента, затем рассчитывается смещение относительно этого положения;
absolute — координаты вычисляются относительно границ контейнера, содержащего элемент;
fixed — координаты вычисляются относительно границ контейнера, содержащего элемент, и запрещается прокрутка.

top, bottom, right, left
Координаты верхней, нижней, правой и левой границ элемента. Эти свойства часто используются в комбинации со свойством position.
Значения:
auto — определяется броузером;
числовое;
процентное.

В качестве примера показано использование элемента TT для изменения свойств текста внутри абзаца. Сам элемент обеспечивает применение моноширинного шрифта, а другие свойства определяются стилями. Для определения высоты строки используется относительная величина. Вид текста показан на рис. 3.3.
<HTML>
<HEAD>
<TITLE>Свойства inline-боксов</TITLE>
<STYLE type="text/css">
TT { padding: 2px;
margin: 3px;
border-width: thin;
border-style: dashed;
line-height: 2.4em; }
</STYLE>
</HEAD>
<BODY>
<P>Первое предложение абзаца.
<TT>Выделенное предложение абзаца.</TT>
Третье проедложение абзаца.</P>
</BODY>
</HTML>

Рис. 3.3. использование элемента TT для выделения текста внутри абзаца

float
Способ обтекания элемента другими.
Значения:
none — обтекания нет;
left — слева;
right — справа.
Пример:
IMG { float: left }

clear
Способ расположения элементов, следующих за элементом, выровненным по левому или правому краю.
Значения: none, left, right, both .

z-index
Способ перекрытия объектов другими (расположение объектов в слоях). Объект, имеющий большее значение индекса, располагается выше.
Значения:
auto — «нулевой уровень», задаваемый по умолчанию;
отрицательное числовое — объект располагается «ниже» нулевого уровня;
положительное числовое — объект располагается «выше» нулевого уровня.

Спецификация CSS2 рассматривает информацию Web-страницы как набор блоков (block) и боксов. Чаще всего блоком является некоторый элемент. Бокс — более мелкий объект по сравнению с блоком. Бокс может создаваться при помощи элемента, но возможны боксы, не созданные с помощью элемента. В коде, приведенном ниже, имеются три бокса, которые можно условно назвать «Элемент DIV», «Текст 1», «Элемент P»:
<DIV>
Текст 1
<P>Текст 2</P>
</DIV>
В данном случае объект «Текст 1» имеет статус inline, т.е. он находится на одном уровне вложения с элементом P.

display
Придание элементу свойств блока.
Значения:
block — элемент уровня блока;
inline — бокс уровня inline;
list-item — элемент списка;
none — элемент не создает бокс;
run-in и compact — бокс может получать статус блока или inline, в зависимости от содержимого.

Свойства списков

list-style-type
Определение вида маркеров в списке.
Значения:
none — без маркеров;
disc — кружки;
circle — окружности;
square — квадратики;
decimal — арабские цифры;
lower-roman — римские цифры на основе строчных латинских букв (i, v, x...);
upper-roman — римские цифры на основе заглавных латинских букв (I, V, X...);
lower-alpha — строчные латинские буквы (a, b, c...);
upper-alpha — заглавные латинские буквы (A, B, C...).
Пример:
LI {list-style-type: circle}

list-style-image
Определение рисунка, который будет использоваться в качестве маркера.
Значения:
none — рисунок не используется;
адрес (URL) графического файла.
Пример:
UL {list-style-image: url(marker.gif)}

list-style-position
Положение маркера относительно списка.
Значения:
inside — маркер внутри списка (компактная форма);
outside — маркер вне списка.

list-style
Определяет вид маркеров. В качестве значения может использоваться несколько величин свойств list-style-type, list-style-position, list-style-image (перечисленных выше).
Пример:
UL {list-style: circle outside}

Свойства таблиц

Форматирование элементов

width
Ширина объекта.
Значения:
auto — определяется броузером;
числовое;
процентное.

min-width и max-width
Минимально возможная и максимально допустимая ширина объекта.
Значения такие же, как и у свойства width.

height
Высота объекта.
Значения:
auto — определяется броузером;
числовое;
процентное.

min-height и max-height
Минимально возможная и максимально допустимая высота объекта.
Значения такие же, как и у свойства height.

vertical-align
Способ вертикального выравнивания.
Значения:
baseline — по основной строке элемента;
top — по верхнему краю элемента;
middle — по середине элемента;
bottom — по нижнему краю элемента;
sub — имитация нижнего индекса по отношению к основной строке;
super — имитация верхнего индекса по отношению к основной строке;
text-top — по верхнему краю вложенного в элемент текста;
text-bottom — по нижнему краю вложенного в элемент текста;
процентное;
в абсолютных величинах.

overflow
Способ изменения размеров объекта, если его содержимое не может быть показано целиком.
Значения:
auto — определяется броузером;
visible — размер границ устанавливается так, чтобы содержимое было видимым;
hidden — размеры границ не устанавливаются в зависимости от размеров содержимого и могут быть уменьшены;
scroll — включается режим прокрутки.
В качестве примера можно привести код Web-страницы с тремя элементами:
<HTML>
<HEAD>
<TITLE>Свойство </TITLE>
<STYLE type="text/css">
DIV { width : 60px; height: 60px; border: thin solid red;}
P { width : 120px; height: 60px; margin-top: 10px;
margin-left: 100px; border: thin dashed black; overflow: visible;}
CITE { display: block; text-align : right; border: none }
</STYLE>
</HEAD>
<BODY>
<DIV>Элемент DIV <P>Текст абзаца.
<CITE>Текст элемента CITE</CITE></P></DIV>
</BODY>
</HTML>
Свойства элемента P находятся в противоречии со свойствами элемента DIV, и броузер в разных случаях по-разному разрешает это противоречие. На рис. 3.4,а показано расположение элементов для свойства overflow: visible, а на рис. 3.4,б — для свойства overflow: scroll.

Рис. 3.4. Взаимное расположение элементов: а — обычный бокс; б — бокс с прокруткой

clip
Определение видимой части объекта.
Значения:
auto — определяется броузером;
прямоугольник, «вырезающий» часть объекта.
Пример:
P { clip: rect(25px, 120px, 120px, 25px); }

visibility
Видимость или невидимость объекта.
Значения:
visible — видимый;
hidden — невидимый;
collapse — то же, что и hidden (если не применяется к таблицам).

Свойства фона и цвет

color
Цвет элемента или его содержимого.
Примеры:
CITE { color: blue}
P { color: rgb(140,110,90) }

background-color
Цвет фона.
Значения:
transparent — прозрачный фон;
значение цвета в стандартном формате.
Пример:
H1 { background-color: #9AC080}

background-image
Фоновый рисунок.
Значения:
none — без рисунка;
ссылка на файл.
Пример:
TABLE { background-image: url(fon001.gif) }

background-repeat
Свойство, определяющее, надо ли повторять фоновый рисунок для заполнения пространства элемента.
Значения:
repeat — заполнять все пространство элемента;
repeat-x — заполнить только первый горизонтальный ряд;
repeat-y — заполнить только первый вертикальный столбец;
no-repeat — не заполнять.
Пример:
BODY { background-image: url(fon002.gif); background-repeat: repeat-y; }

background-attachment
Свойство, определяющее, будет ли фон прокручиваться вместе с содержимым документа.
Значения:
scroll — прокрутка разрешена;
fixed — прокрутка запрещена.

background-position
Начальное положение фонового рисунка.
Значениями свойства являются две величины, в численном (или процентном) выражении, а также символьные коды:
0% 0% — значение по умолчанию;
top left или left top — значение 0% 0%;
top, top center или center top — значение 50% 0%;
right top или top right —100% 0%;
left, left center или center left — значение 0% 50%;
center или center center —50% 50%;
right, right center или center right —100% 50%;
bottom left или left bottom —0% 100%;
bottom, bottom center или center bottom — значение 50% 100%;
bottom right или right bottom — значение 100% 100%.
Если указана одна величина, она интерпретируется как значение отступа по горизонтали, а значение по вертикали принимается равным 50%.
Пример:
BODY { background-image: url(fon004.gif); background-position: top center }

background
Фон элемента. Одновременное задание свойств background-color, background-image, background-repeat, background-attachment и background-position.
Примеры:
TD { background: url(http://адрес.com/fon005.jpg) }
P { background: url(fon006.gif) gray 50% repeat fixed }

Свойства страниц

Свойства страниц используются, когда необходимо разделение всех данных на страницы, например, при печати. Для указания свойств используется так называемое правило @page. Не все броузеры поддерживают эту конструкцию. Для примера показано задание размеров страницы и полей:
@page name1 { size 21cm 29.7cm; margin: 2cm }
Существуют также стандартные псевдоклассы first, left и right для определения свойств первой страницы, всех левых страниц и всех правых страниц. Например, можно задать разные размеры полей:
@page :first {
margin-top: 8cm
}
@page :left {
margin-left: 3cm;
margin-right: 2cm;
}
@page :right {
margin-left: 2cm;
margin-right: 3cm;
}

size
Размер страницы.
Значения:
числовое;
auto — определяется по умолчанию;
landscape — альбомная ориентация;
portrait — портретная (книжная) ориентация.

page-break-before, page-break-after, page-break-inside
Управление разрывами страниц до, после и внутри страничного блока.
Значения:
auto — автоматическая расстановка разрывов страниц;
always — обязательное использование разрывов страниц;
avoid — запрет на использование разрыва страниц в данном месте;
left — установка разрывов страниц так, чтобы следующая страница была левой;
right — установка разрывов страниц так, чтобы следующая страница была правой.

orphans
Минимальное значение строк абзаца, которые могут быть оставлены внизу страницы (т.н. висячие строки). Значением является целое число.

widows
Минимальное значение строк абзаца, которые могут быть расположены вверху страницы (случай, когда абзац располагается на двух страницах). Значением является целое число.

page
Использование свойств из правила @page.
Значением является идентификатор набора свойств.
Пример назначения таблице свойств страницы:
@page ident1 {size: landscape}
TABLE {page: ident1; margin-top: 4cm }

Свойства мультимедийных объектов

Пользовательский интерфейс

cursor
Вид указателя мыши, расположенного над текущим элементом.
Значения:
auto — вид курсора определяется броузером;
default — вид курсора определяется операционной системой;
crosshair — крестик;
pointer — указующий перст;
move — четырехглавая стрелка;
e-, ne-, nw-, n-, se-, sw-, s-, w-resize — стрелки для перемещения границ. Приставки обозначены по аналогии с частями света (sw — юго-запад);
text — текстовый курсор;
wait — песочные часы;
progress — индикатор завершения текущего процесса (например, копирования);
help — стандартный указатель со знаком вопроса;
ссылка на нестандартный курсор (URL).
Пример. Создание нестандартного указателя мыши. Его изображение должно храниться в файле типа cur. Затем надо создать стиль, который будет ссылаться на этот файл. Например, создадим стиль cur1 для элемента A (гиперссылки) должен выглядеть так:
A.cur1 { cursor : url(ukazatel.cur);}
В гиперссылке необходимо использовать атрибут class для указания стиля:
<A href="page1.htm" class="cur1">Текст ссылки</A>

color, background-color
Существует возможность задания цвета элемента (color) и его фона (background-color) таким, каким обладает соответствующий элемент окна или элемент управления.
Значения:
activeborder — рамка активного окна;
activecaption — заголовок активного окна;
appworkspace — цвет фона документа;
background — фон рабочего стола;
buttonface — цвет кнопки;
buttonhighlight — светлый участок кнопки (боковая грань);
buttontext — текст кнопки;
captiontext — цвет текста в строке заголовка;
graytext — недоступный текст (команда);
highlight — выбранный элемент управления;
highlighttext — выделенный текст;
inactiveborder — рамка не выбранного окна;
inactivecaption — заголовок не выбранного окна;
inactivecaptiontext — текст в заголовке не выбранного окна;
infobackground — фон элемента управления;
infotext — текст элемента управления;
menu — фон меню;
menutext — текст меню;
scrollbar — полоса прокрутки;
threeddarkshadow — тень трехмерного элемента;
threedface — поверхность трехмерного элемента;
threedhighlight — выбранный трехмерный элемент;
threedlightshadow — край трехмерного элемента;
threedshadow — тень трехмерного элемента;
window — фон окна;
windowframe — рамка окна;
windowtext — текст окна.
Пример:
P { color: windowtext; background-color: window }

Пример: простое текстовое меню

При помощи стилей можно создать несложное меню (рис. 3.5) без использования таблиц и рисунков! Такое меню можно использовать, к примеру внутри текста. При наведении мыши изменяется цвет текста ссылки и цвет фона.
Код Web-страницы:
<HTML>
<HEAD>
<STYLE type="text/css">
A {text-decoration: underline + overline; color:blue;}
A:hover{text-decoration: underline + overline;
color:red; background-color: gold}
</STYLE>
</HEAD>
<BODY>
<FONT color="blue" size=+1>
|<A href="page1.htm"> Страница 1 </A>|
|<A href="page2.htm"> Страница 2 </A>|
|<A href="page3.htm"> Страница 3 </A>|
</FONT>
</BODY>
</HTML>

Рис. 3.5. Простое текстовое меню

Предыдущий раздел | Следующий раздел