Created using
htm2chm 3.0

Download it NOW!


WDstudio. Все для Веб. Обзоры по Дизайну в Web. В помощь Вебмастеру -->>Каскадные таблицы стилей (CSS) в HTML 4.0

Клуб друзей

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

В данном разделе рассмотрим объект STYLE и основные группы его атрибутов, которые используются для визуального представления информации в HTML-документах. Данные атрибуты могут быть подразделены на две группы: форматирования и позиционирования.

Шрифтовые атрибуты
Текстовые атрибуты
Атрибуты цвета и фона
Атрибуты обрамления
Атрибуты позиционирования
Шрифтовые атрибуты

Данные атрибуты используются для задания различных характеристик шрифта.

Атрибут | Описание | Принимаемые значения
font-family | Задает семейство, к которому принадлежит фонт | Наименование (Arial, Courier и т.п.)
font-style | Стиль шрифта | normal, italic, oblique
font-variant | Внешний вид шрифта | normal, small-caps
font-weight | "Вес" шрифта | normal, bold, bolder, lighter, числовые значения 100 - 900
font-size | Размер шрифта | Абсолютные или относительные величины
font | Возможность устанавливать все атрибуты шрифта | Все перечисленные выше

Чтобы задать атрибуты шрифта, например к параграфу применим размер 24pt:
<p style= "font-size : 20pt; font-style : italic;">
Этот параграф размер- 24pt, italic.
</p>

Этот параграф размером - 20pt, italic.

При указании семейства, к которому принадлежит шрифт, можно указывать несколько названий, разделенных запятой. Браузер сам выберет то семейство, которое присутствует на компьютере посетителя. Должен сказать, что указывать семейство шрифта, я считаю, да и не только я, нежелательно. Собственно не понимаю - с какой целью вообще атрибут font-family. Я его даже для примеров не стану использовать.

В начало

Текстовые атрибуты

Данные атрибуты используются для задания различных характеристик текста:

Атрибут | Описание | Возможные значения
word-spacing | Расстояние между словами | Числовое значение
letter-spacing | Расстояние между буквами | Числовое значение
text-decoration | Специальное отображение текста | underline, overline, strikethrogh
vertical-align | Вертикальное позиционирование элемента в строке | baseline, sub, super, top, text-top, middle, bottom, text-bottom или в процентах
text-transform | Изменение текста | capitalize, uppercase, lowercase, none
text-align | Выравнивание текста | left, center, right, justify
text-indent | Отступ текста | Числовое или процентное значения
line-height | Высота строки | Числовое или процентное значения
Применим для параграфа отступ 30, межбуквенное расстояние, например равное 6:
<p style= "text-indent : 30; letter-spacing : 6">
Этот параграф с отступом 30, межбуквенным расстоянием в 6 символов (пробелов)
</p>

Этот параграф с отступом 30, межбуквенным расстоянием в 6 символов (пробелов - в netscape не работает межбуквенное)

В начало

Атрибуты цвета и фона

Атрибут | Описание | Значения
color | Цвет элемента | Цветовая константа или #rrggbb
background | Цвет фона элемента | Числовое значение, местоположение в формате URL, число повторов, значение скроллирования, позиция.
Пример использования атрибутов:
<p style= "color : #FF0000; background : #00FFFF">
Цвет данного параграфа задан как #FF0000 и цветом фона #00FFFF
</p>

Цвет данного параграфа задан как #FF0000 и цветом фона #00FFFF

Применим атрибут background для изображения текста параграфа на фоне рисунка, в данном примере анимированного. Причем, если рисунок превышает размеры объекта - он усекается снизу или справа, если меньше - размноживается. В NN почему-то черный фон вместо прозрачного.

<p style= "background : url(cat.gif); font-size : 16pt; color : #FF0000">
В данном примере текст параграфа изображается на фоне рисунка, размером 16pt, цветом #FF0000.
</p>

В данном примере текст параграфа изображается на фоне рисунка, размером 16pt, цветом #FF0000

В начало

Атрибуты обрамления
 Атрибуты используются для задания рамок вокруг элементов, а также для задания им стилей.
Атрибут | Описание | Значения
border-top | Элемент рамки сверху | Наличие, стиль, ширина
border-right | Элемент рамки справа | Наличие, стиль, ширина
border-left | Элемент рамки слева | Наличие, стиль, ширина
border-bottom | Элемент рамки снизу | Наличие, стиль, ширина
border | Рамка | Наличие, ширина
color | Цвет рамки | Цветовая константа или цвет в формате #rrggbb
width | Ширина рамки | Числовое значение
style | Стиль рамки | thin, medium, thick
Пример использования атрибутов:
<p style= "color : #FF0000; background : #00FFFF; border : 4px outset #0000FF">
Данный параграф взят в рамку шириной=4 пикселя, цветом #0000FF
</p>

Данный параграф взят в рамку шириной=4 пикселя, цветом #0000FF

При указании неполной рамки рамки, например только с верхним и нижним элементом, нужно описать каждый элемент. В NN не работает:
<p style= "color : #FFFF00; background-color : #804000;
border-left : 4px none #0000FF;
border-right : 4px none #0000FF;
border-top : 4px outset #0000FF;
border-bottom : 4px outset #0000FF">
Этот параграф желтого цвета на коричневом фоне заключен в неполную рамку синего цвета, шириной в 4 пикселя.
</p>

Этот параграф желтого цвета на коричневом фоне заключен в неполную рамку синего цвета, шириной в 4 пикселя.

Однако, атрибуты отображения не с любыми тэгами работают:
Напишем подстроку <i style= "color : #FF0000; background : #00FFFF; border : 4px outset #0000FF"> курсивом</i> красного цвета на голубом фоне с обрамлением.
Напишем подстроку курсивом красного цвета на голубом фоне с обрамлением.

Как видно из примера атрибут border : 4px outset #0000FF не сработал, в NN, странно, но работает. Для подобных объектов можно использовать контейнеры типа <DIV>.
Напишем подстроку <div style= "color : #FF0000; background : #00FFFF; border : 4px outset #0000FF; width : 40"><I>курсивом</I></div> красного цвета на голубом фоне с обрамлением.
Напишем подстроку
курсивом
красного цвета на голубом фоне с обрамлением.

В начало

Атрибуты позиционирования
Большинству элементов языка HTML с помощью атрибута STYLE можно задать точное местоположение на странице.

Атрибут | Описание | Значения
margin-top | Верхний отступ элемента | auto, числовое значение, значение в процентах
margin-right | Правый отступ элемента | auto, числовое значение, значение в процентах
margin-left | Левый отступ элемента | auto, числовое значение, значение в процентах
margin-bottom | Нижний отступ элемента | auto, числовое значение, значение в процентах
margin | Отступ элемента | auto, числовое значение, значение в процентах
padding-top | Расстояние между элементом и рамкой сверху | auto, числовое значение, значение в процентах
padding-right | Расстояние между элементом и рамкой справа | auto, числовое значение, значение в процентах
padding-left | Расстояние между элементом и рамкой слева | auto, числовое значение, значение в процентах
padding-bottom | Расстояние между элементом и рамкой снизу | auto, числовое значение, значение в процентах
padding | Расстояние между элементом и рамкой | auto, числовое значение, значение в процентах
float | Обтекание текста | left, right, none
clear | Очистка текста | left, right, none, both
width | Горизонтальный размер элемента | auto, числовое значение, значение в процентах
height | Вертикальный размер элемента | auto, числовое значение, значение в процентах
visibility | Видимость элемента | visible, hidden
overflow | Отображение элемента | none, clip, scroll
В дополнение к этим атрибутам поддерживаются также атрибуты местоположения элементов и их место в иерархии по отношению к пользователю.

Атрибут | Описание | Значения
position | Указывает, как должны интерпретироваться атрибуты top и left | relative, absolute, static
left | Местоположение элемента относительно контейнера | Числовое значение
top | Местоположение элемента относительно контейнера | Числовое значение
z-index | Местоположение элемента относительно других элементов | Числовое значение

Пример использования атрибутов:

<P>
Пишем обычным текстом
</P>
<div style="background : #FF8000;
position : absolute;
left : 75;
top : 100;
width : 150;
z-index : -2;
text-align : center">
<h3>
Элемент ј1
</h3>
</div>

<div style="background : #FF0080;
position : absolute;
left : 145;
top : 130;
width : 150;
z-index : 0;
height : 100
text-align : center">
<h3>
Элемент ј2
</h3>
</div>

<div style="background : #0000FF;
position : absolute;
left : 200;
top : 115;
width : 150;
z-index : -1;
height : 110;
text-align : center">
<h3>
Элемент ј3
</h3>
<img src="_picture.gif">
</div>
Кликнув сюда, можно увидеть результат использования данных атрибутов. Если вы в NN версии ниже 3 - ничего интересного не будет.
Кстати, для совместимости атрибутов с Netscape, в большинстве случаев атрибуты, которые пишутся через дефис писать слитно. Итак, например: для <P style= "font-size : 20pt; font-style : italic; "> для совместимости с Netscape следует писать <P style= "font-size : 20pt; font-style : italic; fontsize : 20pt; fontstyle : italic;">. В этом случае неприемлемая часть для конкретного браузера будет проигнорирована.

[<<Назад] [В начало]

WDstudio © 2000г.