Справочник предназначается для людей, уже освоивших азы работы с HTML и CSS.

Справочник создан на основе информации, предоставленной на сайте «Справочник Web-языков» www.spravkaweb.ru.

В связи с тем, что данный ресурс постоянно пополняется новой информацией, скачать обновленную версию справочника можно из раздела Download

Дата выхода данной версии справочника: 09:00, 26 марта 2007.

Также на сайте доступны для скачивания справочники по PHP, CSS, Perl, MySQL.

Каскадные таблицы стилей или CSS (Cascading Style Sheets) были революцией, потрясшей WWW. Если до этого Web-дизайнер не знал, как будет выглядеть его творение в разных программах Web-обозревателей, то теперь он может контролировать все: от начертания шрифта до положения картинки на странице.

Предположим, вам нужно изменить цвет текста в HTML-документе с черного на синий. Вы помещаете его в пару тегов <FONT> и </FONT> следующего вида:

<P><FONT color="blue">Это синий текст</FONT></P>

А теперь представим, что вы внесли определение внешнего вида текста в другое место документа:

P.bluetext { color: blue }

Эта строка обозначает, что мы определили для текста, находящегося внутри тега <P> и помеченного стилевым классом bluetext, синий цвет шрифта. Такая конструкция HTML называется определением стиля или просто стилем.

В результате в HTML-тексте у нас остануться только теги логического форматирования текста:

<P class="bluetext">Это синий текст</P>

Здесь мы пометили нужный текст с помощью атрибута class, присвоив ему значение bluetext. Атрибут class задает имя стилевого класса для тега, и его поддерживают все теги.

Вы можете переназначить цвета текста для всех тегов <P>. В этом случае мы не задаем имя стилевого класса:

P { color: blue }

Или вы можете задать форматирование для стилевого класса, не привязанного ни к какому тегу:

.bluetext{ color: blue }

И теперь вы можете присваивать стилевой класс тексту, заключенному в любые теги:

<H1 class="bluetext">Это синий цвет</H1> <CENTER class="bluetext">Это синий цвет</CENTER> Это <B class="bluetext">жирный синий</B> текст

Вы можете дать специальное форматирование тегу только в том случае, если он заключен внутрь другого тега:

H7 B { color: blue }

И теперь:

<H7><B>Этот</B> текст будет синим</H7> <P>А <B>этот</B> - не будет!</P>

Более того, вы можете встроить определение стиля прямо в тег:

<P style="color: blue">Это синий текст</P>

Это достигается при помощи атрибута style, который также поддерживают все теги HTML.

И еще один способ привязать стиль к какому-либо тегу - использовать атрибут id, задающий уникальное имя элемента HTML.

#headerofdocument { font-size: 20pt }

Здесь мы задали размер шрифта 20 пунктов.

<H1 id="headerofdocument">Это заголовок документа</H1>

Вы можете задавать несколько атрибутов в определении стиля. В этом случае они разделяются точкой с запятой:

P { color: blue; fotn-size: 9ptl; text-align: center }

Определение стилей, вынесенные в заголовок HTML-документа, составляют таблицу стилей. Таблица стилей заключается в теги <STYLE> и </STYLE>:

<Style [type="text/css"]> . . . </STYLE>

Тег <STYLE> может содержать необязательный атрибут type, содержащий обязательное значение text/css.

Таблицу стилей можно вынести в отдельный файл и использовать сразу в нескольких документах. В этом случае в заголовке HTML-документа необходимо разместить тег <LINK>, указывающий на эту таблицу стилей:

<LINK rel="stylesheet" href="{Адрес файла таблицы стилей}">

font

Задает параметры шрифта элемента страницы.

Заменяет атрибуты font-family, font-height, font-size, font-style, font-variant и font-weight. Значения этих атрибутов могут располагаться в любом порядке.

font: {font-family} [{font-height}] [{font-size}] [{font-style}] [{font-variant}] [{font-weight}];

Значение по умолчанию - normal normal normal medium normal "Times New Roman".

Альтернативный формат:

font: caption|icon|menu|message-box|small-caption|status-bar;

В этом случае доступны шесть предопределенных значений, задающие один из стандартных шрифтов, используемых в элементах интерфейса Windows:

Поддерживается IE начиная с 4.0

font-family

Указывает имя шрифта или шрифтового семейства, используемого в элементе страницы.

font-family: {Имя шрифта}|serif|san-serif|cursive|fantasy|monospace;

В качестве значения этого атрибута задается либо непосредственно имя нужного шрифта, либо одно из пяти предопределенных значений, задающих имя шрифтового семейства. Можно задавать одновременно несколько шрифтов, разделив их имена запятыми; в этом случае Web-обозреватель сможет выбрать из них тот, который установлен на компьютере клиента. Если имя шрифта содержит пробелы, его следует взять в кавычки.

font-family: "Times New Roman",sans-serif;

Поддерживается IE начиная с 3.02 для текстовых элементов и начиная с 4.0 для нетекстовых.

Поддерживается NN начиная с 4.0

font-weight

Задает "жирность" шрифта, используемого в элементе страницы.

font-weight: normal|bold|bolder|lighter|100..900;

"Жирность" может быть задана тремя способами. Во-первых, предопределенными значениями normal и bold, задающими обычное и жирное начертание соответственно. Во-вторых, относительными значениями bolder и lighter, делающими шрифт элемента страницы жирнее и светлее шрифта родителя. И, в-третьих, одним из девяти значений от 100 до 900; здесь нормальному начертанию соответствует значение 400, а жирному - 700.

Значение по умолчанию normal.

Поддерживается IE начиная с 3.02 для текстовых элементов и начиная с 4.0 для нетекстовых. При этом IE 4.0 и более старые версии распознавали только значения normal и bold этого атрибута.

Поддерживается NN начиная с 4.0

font-size

Задает размер шрифта, используемого в элементе страницы.

font-size: xx-small|x-small|small|medium|large|x-large|xx-large|larger|smaller|{Абсолютный размер}|{Относительный размер}%;

Возможно задание либо абсолютного размера шрифта в одной из поддерживаемых CSS единиц измерения, либо как процент от размера шрифта родителя. Также доступны девять определенных значений.

Поддерживается IE начиная с 3.02 для текстовых элементов и начиная с 4.0 для нетекстовых.

Поддерживается NN начиная с 4.0

font-style

Задает начертание шрифта.

font-style: normal|italic|oblique;

Поддерживается IE начиная с 3.02 для текстовых элементов и начиная с 4.0 для нетекстовых.

Поддерживается NN начиная с 4.0

font-variant

Задает вид малых букв шрифта, используемого в элементе страницы.

font-variant: normal|small-caps;

Поддерживается IE начиная с 4.0

color

Определяет цвет элемента.

color: {Цвет};

Поддерживается IE начиная с 3.02 для текстовых элементов страницы и начиная с 4.0 для нетекстовых.

Поддерживается NN начиная с 4.0

background

Задает все свойства фона элемента страницы в один прием. Заменяет собой атрибуты background-attachment, background-color, background-image, background-position и background-repeat.

background: [{background-color}] [{background-image}] [{background-repeat}] [{background-attachment}] [{background-position}];

Значения этих свойств могут располагаться в любом порядке.

Значение по умолчанию transparent none repeat scroll 0% 0%.

Поддерживается IE начиная с 3.02; задание значений background-position и background-repeat поддерживается начиная с 4.0

background-color

Задает фоновый цвет Web-страницы или ее элемента.

background-color: {Цвет}|transparent;

Предопределенное значение transparent задает "прозрачный" фон. Оно же является значением по умолчанию.

Поддерживается IE начиная с 4.0, в составе атрибута background - с 3.02

Поддерживается NN начиная с 4.0

background-image

Задает фоновый рисунок Web-страницы или ее элемента.

background-image: url({Интернет-адрес файла рисунка})|none;

Предопределенное значение none отключает фоновый рисунок. Оно же является значением по умолчанию.

Поддерживается IE начиная с 4.0, в составе атрибута background - с 3.02

Поддерживается NN начиная с 4.0

background-attachment

Данный атрибут позволяет "зафиксировать" фоновый рисунок, чтобы он не прокручивался вместе с содержимым Web-страницы.

background-attachment: scroll|fixed;

Применяется только для тега <BODY>.

Поддерживается IE начиная с 4.0, в составе атрибута background - с 3.02

background-repeat

Устанавливает порядок повторения фонового рисунка на Web-странице или ее элементе.

Иногда этот атрибут необходим, чтобы занять все свободное пространство, если фоновый рисунок слишком мал, чтобы покрыть пространство без повторения.

background-repeat: repeat|no-repeat|repeat-x|repeat-y;

Поддерживается IE начиная с 4.0

background-position

Задает местонахождение фонового рисунка. Это комбинированный атрибут, заменяющий атрибуты background-position-x и background-position-y.

background-position: [{background-position-x}] [{background-position-y}];

Если задана только одна координата, то она считается горизонтальной, а для вертикальной принимается значение 50%.

Значение по умолчанию 0% 0%.

Поддерживается IE начиная с 4.0

background-position-x

Задает горизонтальную координату фонового рисунка.

background-position-x: {X}|{X}%|left|center|right;

Координата может быть задана целым числом (абсолютная координата), процентом от соответствующего размера фонового рисунка (относительная координата) или предопределенным значением. Доступны три предопределенных значения: left, center, right, которые задают выравнивание фонового рисунка на странице по левому краю, по центру и по правому краю соответственно.

Значение по умолчанию 0%.

Поддерживается IE начиная с 4.0

background-position-y

Задает вертикальную координату фонового рисунка.

background-position-y: {Y}|{Y}%|top|center|bottom;

Координата может быть задана целым числом (абсолютная координата), процентом от соответствующего размера фонового рисунка (относительная координата) или предопределенным значением. Доступны три предопределенных значения: top, center, bottom, которые задают выравнивание фонового рисунка на странице по верху, по центру и по низу страницы соответственно.

Значение по умолчанию 0%.

Поддерживается IE начиная с 4.0

scrollbar-3dlight-color

Задает цвет верхней и левой границ полосы прокрутки, ее бегунка и стрелок.

scrollbar-3dlight-color: {Цвет};

Поддерживается IE начиная с 5.5

scrollbar-arrow-color

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

scrollbar-arrow-color: {Цвет};

Поддерживается IE начиная с 5.5

scrollbar-base-color

Задает цвет бегунка и кнопок-стрелок полосы прокрутки.

scrollbar-base-color: {Цвет};

Поддерживается IE начиная с 5.5

scrollbar-darkshadow-color

Задает цвет "тени", отбрасываемой бегунком и кнопками прокрутки полосы прокрутки (цвет правых и нижних гранией).

scrollbar-darkshadow-color: {Цвет};

Поддерживается IE начиная с 5.5

scrollbar-face-color

Задает цвет бегунка и кнопок прокрутки полосы прокрутки.

scrollbar-face-color: {Цвет};

Поддерживается IE начиная с 5.5

scrollbar-highlight-color

Задает цвет "освещенной" части бегунка и кнопок прокрутки полосы прокрутки (цвет левых и верхних их граней).

scrollbar-highlight-color: {Цвет};

Поддерживается IE начиная с 5.5

scrollbar-shadow-color

Задает цвет "неосвещенной" части бегунка и кнопок прокрутки полосы прокрутки (цвет правых и нижних их граней). Не путать с цветом "тени", задаваемым атрибутом scroll-darkshadow-color.

scrollbar-shadow-color: {Цвет};

Поддерживается IE начиная с 5.5

scrollbar-track-color

Задает цвет рабочей части полосы прокрутки, т.е. той ее части, по которой перемещается бегунок.

scrollbar-track-color: {Цвет};

Поддерживается IE начиная с 5.5

text-decoration

Задает специальное оформление текста: подчеркнутый, зачеркнутый и т.п.

text-decoration: none|underline|overline|line-through|blink;

Поддерживается IE начиная с 3.02 для текстовых элементов страницы и начиная с 4.0 для нетекстовых.

Поддерживается NN начиная с 4.0

text-underline-position

Задает местонахождение линии подчеркивания: выше или ниже текста.

Имеет смысл, если атрибут text-decoration равен underline или overline.

text-underline-position: below|above;

Поддерживается IE начиная с 5.5

text-align

Определяет горизонтальное выравнивание текста.

text-align: left|right|center|justify;

Поддерживается IE начиная с 3.02; значение justify поддерживается начиная с 4.0

Поддерживается NN начиная с 4.0

text-align-last

Задает горизонтальное выравнивание последней строки абзаца.

text-align-last: auto|inherit|left|right|center|justify;

Поддерживается IE начиная с 5.5

text-indent

Устанавливает отступ красной строки.

text-ident: {Отступ}|{Отступ}%;

Отступ может быть задан как абсолютной величиной, так и процентом от ширины родителя. Значение по умолчанию 0.

Поддерживается IE и NN начиная с 4.0

text-height

Интервал между строками текста.

text-height: {Интервал}|{Интервал}%;

Интервал может быть задан как абсолютной величиной, так и процентом от ширины родителя.

Поддерживается IE и NN начиная с 4.0

text-transform

Задает преобразование регистра символов текста.

text-transform: none|capitalize|uppercase|lowercase;

Поддерживается IE и NN начиная с 4.0

clear

Определяет, с какой стороны элемента запрещено его обтекание другими элементами. Если установлено значение параметра float для этого элемента, свойство clear отменяет его действие для указанных сторон.

clear: none|left|right|all;

Атрибут задается для текста, а не для элемента страницы, который он будет "обтекать".

Поддерживается IE и NN начиная с 4.0

word-spacing

Определяет дополнительное расстояние между словами в тексте.

word-spacing: normal|{Величина};

Значение этого атрибута может быть задано либо абсолютной величиной в одной из поддерживаемых CSS единиц измерения, либо предопределенным значением normal, задающим стандартную величину расстояния между символами.

Значение по умолчанию normal.

Поддерживается IE начиная с 4.0

word-wrap

Устанавливает, будет ли строка, выходящая за границы элемента страницы и не содержащая пробелов, переноситься по словам.

word-wrap: normal|break-word;

Поддерживается IE начиная с 5.5

word-mode

Задает направление строк текста: горизонтальное или вертикальное.

word-mode: lr-tb|tb-rl;

Поддерживается IE начиная с 5.5

leter-spacing

Определяет расстояние между символами в тексте.

letter-spacing: normal|{Величина};

Значение этого атрибута может быть задано либо абсолютной величиной в одной из поддерживаемых CSS единиц измерения, либо предопределенным значением normal, задающим стандартную величину расстояния между символами.

Значение по умолчанию normal.

Поддерживается IE начиная с 4.0

line-height

Задает вертикальное расстояние между строками текста.

line-height: normal|{Y}|{Y}%;

Высота может быть задана как абсолютной величиной, так и процентом от высоты родителя. Предопределенное значение normal задает стандартное расстояние.

Значение по умолчанию normal.

Поддерживается IE и NN начиная с 4.0

direction

Задает порядок чтения текста: слева направо или справа налево.

direction: ltr|rtl|inherit;

Для документов, составленных на европейских языках, порядок чтения всегда слева направо (ltr).

Поддерживается IE начиная с 5.0

unicode-bidi

Задает поведение встроенных элементов при изменении направления письма с помощью атрибута direction.

unicode-bidi: normal|embed|bidi-override;

Поддерживается IE начиная с 5.0

accelerator

Позволяет указать, содержит ли текст элемента страницы клавишу-ускоритель.

accelerator: true|false;

Клавиша-ускоритель - это особая клавиша на клавиатуре, при нажатии которой вместе с клавишей <Alt> происходит переход к данному элементу страницы.

Значения по умолчанию не имеет.

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

<LABEL for="txtName"><U style="accelerator: true">И</U>мя</LABEL><INPUT type="text" id="txtName" accesskey="B" value="Имя пользователя">

В этом случае символ "И" в слове "Имя" будет подчеркнут. Если в региональных настройках операционной системы Windows 2000 была выбрана опция Скрыть индикаторы клавиш-ускорителей до нажатия Alt, этот символ не будет подчеркнут, пока пользователь не нажмет клавишу <Alt> на клавиатуре.

Поддерживается IE начиная с 5.0

text-justify

Задает тип текста по ширине. Значение атрибута text-align при этом должно быть равно justify.

text-justify: auto|newspaper|distribute|distribute-all-lines|distribute-center-last|inter-word|inter-ideograph|inter-cluster|kashida;

Поддерживается IE начиная с 5.0

text-autospace

Позволяет установить, будет ли добавлять дополнительное пространство между фрагментами текста, написанными на разных языках.

text-autospace: none|ideograph-alpha|ideograph-numeric|ideograph-parenthesis|ideograph-space;

Поддерживается IE начиная с 5.0

text-kashida-space

Задает процент, на который будут расширяться символы арабского языка при выравнивании текста по ширине.

Можно использовать только, если атрибут text-justify равен auto, distribute, kashida или newspaper.

text-kashida-space: {Расширение}%|inherit;

Величина отступа может быть задана как процент свободного пространства между символами, на которое они могут расширяться. Значение 0% (используется по умолчанию) означает, что расширение символов недопустимо, а вместо них будет расширяться свободное пространство; значение 100% - что допустимо расширение только символов, но не свободного пространства.

Поддерживается IE начиная с 5.5

line-break

Задает правила разрыва строк для текста на японском языке.

line-break: normal|strict;

Поддерживается IE начиная с 5.0

word-break

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

word-break: normal|break-all|keep-all;

Поддерживается IE начиная с 5.0

ime-mode

Задает состояние IME (Input Method Editor - редактор способа ввода), с помощью которого вводятся иероглифические тексты на китайском, корейском и японском языках. Этот атрибут применяется только для полей ввода.

ime-mode: auto|active|inactive|disabled;

Поддерживается IE начиная с 5.0

layout-flow

Задает направление написания текста: по горизонтали или по вертикали.

layout-flow: horizontal|vertical-ideographic;

Поддерживается IE начиная с 5.5. В настоящее время признан устаревшим; вместо него рекомендуется использовать атрибут writing-mode.

layout-grid

Задает параметры разметки элемента страницы, используемой для вывода иероглифических текстов на китайском, корейском и японском языках. Заменяет атрибуты layout-grid-char, layout-grid-line, layout-grid-mode и layout-grid-type.

layout-grid: [{layout-grid-char}] [{layout-grid-line}] [{layout-grid-mode}] [{layout-grid-type}]

Значения этих атрибутов могут располагаться в любом порядке.

Значение по умолчанию - both loose none none.

Поддерживается IE начиная с 5.0

layout-grid-char

Задает шаг горизонтальной разметки элемента страницы, используемой для вывода иероглифических текстов на китайском, корейском и японском языках.

layout-grid-char: none|auto|{Y}{Y}%;

Шаг разметки может быть задан как абсолютной величиной, так и процентом от шага разметки родителя. Предопределенное значение auto заставляет Web-обозреватель устанавливать шаг разметки по максимальному символу текста. Другое предопределенное значение none вообще отключает разметку.

Значение по умолчанию - none.

Поддерживается IE начиная с 5.0

layout-grid-line

Задает шаг вертикальной разметки элемента страницы, используемой для вывода иероглифических текстов на китайском, корейском и японском языках.

layout-grid-line: none|auto|{Y}{Y}%;

Шаг разметки может быть задан как абсолютной величиной, так и процентом от шага разметки родителя. Предопределенное значение auto заставляет Web-обозреватель устанавливать шаг разметки по максимальному символу текста. Другое предопределенное значение none вообще отключает разметку.

Значение по умолчанию - none.

Поддерживается IE начиная с 5.0

layout-grid-mode

Задает тип разметки элемента страницы, используемой для вывода иероглифических текстов на китайском, корейском и японском языках.

layout-grid-mode: both|none|char|line;

Поддерживается IE начиная с 5.0

layout-grid-type

Задает режим форматирования иероглифических текстов на китайском, корейском и японском языках с использованием разметки элемента страницы.

layout-grid-type: loose|strict|fixed;

Поддерживается IE начиная с 5.0

margin

Задает ширины полей между элементами страницы и его соседями.

Заменяет атрибуты margin-top, margin-right, margin-bottom и margin-left.

margin: {margin-top} [{margin-right}] [{margin-bottom}] [{margin-left}];

Может быть задано от одного до четырех значений. Если задано одно значение, оно применяется ко всем четырем полям. Если задано два значения, первое относится к верхнему и нижнему полю, а второе - к левому и правому. Если задано три значения, то первое применяется к верхнему полю, второе - к левому и правому, третье - к нижнему.

Поддерживается IE начиная с 3.02 для текстовых элементов и начиная с 4.0 для нетекстовых.

Поддерживается NN начиная с 4.0

margin-top

Задает верхнее поле между элементом страницы и его соседями сверху.

margin-top: auto|{Y}|{Y}%;

Координата может быть задана как абсолютной величиной, так и процентом от высоты родителя. Предопределенное значение auto заставляет Web-обозреватель устанавливать поле самостоятельно. При этом если задан атрибут margin-bottom, значение верхнего поля устанавливается равным значению нижнего поля. Значение по умолчанию auto.

Поддерживается IE начиная с 3.02 для текстовых элементов и начиная с 4.0 для нетекстовых.

Поддерживается NN начиная с 4.0

margin-right

Задает правое поле между элементом страницы и его соседями справа.

margin-right: auto|{X}|{X}%;

Координата может быть задана как абсолютной величиной, так и процентом от ширины родителя. Предопределенное значение auto заставляет Web-обозреватель устанавливать поле самостоятельно. При этом если задан атрибут margin-left, значение правого поля устанавливается равным значению левого поля. Значение по умолчанию auto.

Поддерживается IE начиная с 3.02 для текстовых элементов и начиная с 4.0 для нетекстовых.

Поддерживается NN начиная с 4.0

margin-bottom

Задает нижнее поле между элементом страницы и его соседями снизу.

margin-bottom: auto|{Y}|{Y}%;

Координата может быть задана как абсолютной величиной, так и процентом от высоты родителя. Предопределенное значение auto заставляет Web-обозреватель устанавливать поле самостоятельно. При этом если задан атрибут margin-top, значение нижнего поля устанавливается равным значению верхнего поля. Значение по умолчанию auto.

Поддерживается IE начиная с 3.02 для текстовых элементов и начиная с 4.0 для нетекстовых.

Поддерживается NN начиная с 4.0

margin-left

Задает левое поле между элементом страницы и его соседями слева.

margin-left: auto|{X}|{X}%;

Координата может быть задана как абсолютной величиной, так и процентом от ширины родителя. Предопределенное значение auto заставляет Web-обозреватель устанавливать поле самостоятельно. При этом если задан атрибут margin-right, значение левого поля устанавливается равным значению правого поля. Значение по умолчанию auto.

Поддерживается IE начиная с 3.02 для текстовых элементов и начиная с 4.0 для нетекстовых.

Поддерживается NN начиная с 4.0

padding-top

Задает расстояние между элементом страницы и верхней границей.

pading-top: {Y}|{Y}%;

Координата может быть задана как абсолютной величиной, так и процентом от высоты родителя.

Значение по умолчанию 0, для тега <TD> 1.

Поддерживается IE и NN начиная с 4.0

padding-right

Задает расстояние между элементом страницы и правой границей.

pading-right: {X}|{X}%;

Координата может быть задана как абсолютной величиной, так и процентом от ширины родителя.

Значение по умолчанию 0, для тега <TD> 1.

Поддерживается IE и NN начиная с 4.0

padding-bottom

Задает отступ между элементом страницы и нижней границей.

pading-bottom: {Y}|{Y}%;

Координата может быть задана как абсолютной величиной, так и процентом от высоты родителя.

Значение по умолчанию 0, для тега <TD> 1.

Поддерживается IE и NN начиная с 4.0

padding-left

Задает расстояние между элементом страницы и левой границей.

pading-left: {X}|{X}%;

Координата может быть задана как абсолютной величиной, так и процентом от ширины родителя.

Значение по умолчанию 0, для тега <TD> 1.

Поддерживается IE и NN начиная с 4.0

width

Задает ширину свободно позиционирования элемента.

width: auto|{X}|{X}%;

Ширина может быть задана как абсолютной величиной, так и процентом от ширины родителя. Предопределенное значение auto заставляет Web-обозреватель устанавливать ширину элемента самостоятельно.

Значение по умолчанию auto.

Поддерживается IE и NN начиная с 4.0

height

Задает высоту свободно позиционированного элемента.

height: auto|{X}|{X}%;

Высота может быть задана как абсолютной величиной, так и процентом от ширины родителя. Предопределенное значение auto заставляет Web-обозреватель устанавливать высоту элемента самостоятельно.

Значение по умолчанию auto.

Поддерживается IE и NN начиная с 4.0

top

Задает вертикальную позицию верхней границы свободно позиционированного элемента относительно родителя.

top: auto|{Y}|{Y}%;

Координата может быть задана как абсолютной величиной, так и процентом от высоты родителя. Предопределенное значение auto заставляет Web-обозреватель позиционировать элемент самостоятельно.

Значение по умолчанию auto.

Поддерживается IE и NN начиная с 4.0

bottom

Задает вертикальную позицию нижней границы свободно позиционированного элемента относительно родителя.

bottom: auto|{Y}|{Y}%;

Координата может быть задана как абсолютной величиной, так и процентом от высоты родителя. Предопределенное значение auto заставляет Web-обозреватель позиционировать элемент самостоятельно.

Значение по умолчанию auto.

Поддерживается IE начиная с 4.0

left

Задает горизонтальную позицию левой границы свободно позиционированного элемента относительно родителя.

left: auto|{X}|{X}%;

Координата может быть задана как абсолютной величиной, так и процентом от ширины родителя. Предопределенное значение auto заставляет Web-обозреватель позиционировать элемент самостоятельно.

Значение по умолчанию auto.

Поддерживается IE и NN начиная с 4.0

right

Задает горизонтальную позицию правой границы свободно позиционированного элемента относительно родителя.

right: auto|{X}|{X}%;

Координата может быть задана как абсолютной величиной, так и процентом от ширины родителя. Предопределенное значение auto заставляет Web-обозреватель позиционировать элемент самостоятельно.

Значение по умолчанию auto.

Поддерживается IE начиная с 4.0

float

Определяет обтекание элемента другими слева или справа вместо помещения под ним.

float: none|left|right;

Поддерживается IE начиная с 4.0 для кнопок и внедренных объектов и начиная с 5.0 - для остальных элементов страницы.

Поддерживается NN начиная с 4.0

vertical-align

Задает вертикальное выравнивание элемента страницы внутри родителя.

vertical-align: auto|baseline|sub|super|top|text-top|middle|bottom|text-bottom;

Поддерживается IE начиная с 4.0

overflow

Задает поведение элемента страницы, если содержимое в нем не помещается.

overflow: visible|scroll|hidden|auto;

Поддерживается IE начиная с 4.0

overflow-x

Задает поведение элемента страницы, если его ширина меньше ширины содержимого.

overflow-x: visible|scroll|hidden|auto;

Поддерживается IE начиная с 4.0

overflow-y

Задает поведение элемента страницы, если его высота меньше высоты его содержимого.

overflow-y: visible|scroll|hidden|auto;

Поддерживается IE начиная с 4.0

zoom

Задает масштаб отображения элемента страницы.

zoom: normal|{Масштаб}|{Масштаб}%;

Масштаб может быть задан как числом с плавающей точкой, обозначающим степень увеличения или уменьшения, так и процентной величиной. Предопределенное значение normal задает масштаб 1.0 или 100%.

Значение по умолчанию normal.

Поддерживается IE начиная с 5.5

table-layout

Позволяет "зафиксировать" значения ширины ячеек таблицы.

table-layout: auto|fixed;

Другими словами, задание значения auto позволит точно "подогнать" значения ширин ячеек, но таблица при этом будет выводиться очень долго. Значение fixed этого атрибута позволит Web-обозревателю вывести таблицу значительно быстрее, но Web-дизайнер должен будет сам задать значения ширин ячеек. Это может сильно ускорить вывод больших таблиц на экран.

Применяется только для тега <TABLE>.

Поддерживается IE начиная с 5.0

border

Задает все свойства границ элемента страницы в один прием.

Заменяет атрибуты border-color, border-style и border-width. Значения этих атрибутов могут располагаться в любом порядке.

border: [{border-color}] [{border-style}] [{border-width}];

Значение по умолчанию medium none.

Поддерживается IE начиная с 4.0

border-color

(IE)

Задает цвет всех границ элемента страницы.

Заменяет атрибуты border-top-color, border-right-color, border-bottom-color и border-left-color.

border-color: {border-top-color} [{border-right-color}] [{border-bottom-color}] [{border-left-color}];

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

Поддерживается IE начиная с 4.0

(NN)

Задает цвет границ элемента страницы.

border-color: none|{Цвет};

Может быть задано либо цветное значение, либо none, обозначающее отсутствие границ.

Поддерживается NN начиная с 4.0

border-top-color

Задает цвет верхней границы элемента страницы.

border-top-color: {Цвет};

Поддерживается IE начиная с 4.0

border-bottom-color

Задает цвет нижней границы элемента страницы.

border-bottom-color: {Цвет};

Поддерживается IE начиная с 4.0

border-left-color

Задает цвет левой границы элемента страницы.

border-left-color: {Цвет};

Поддерживается IE начиная с 4.0

border-right-color

Задает цвет правой границы элемента страницы.

border-right-color: {Цвет};

Поддерживается IE начиная с 4.0

border-style

Задает тип сразу всех границ элемента страницы в один прием.

Заменяет атрибуты border-top-style, border-right-style, border-bottom-style и border-left-style.

border-style: none|dotted|dashed|solid|double|groove|ridge|inset|outset;

Поддерживается IE и NN начиная с 4.0

border-top-style

Задает тип верхней границы элемента страницы.

Поддерживается IE начиная с 4.0

border-bottom-style

Задает тип нижней границы элемента страницы.

border-bottom-style: none|dotted|dashed|solid|double|groove|ridge|inset|outset;

Поддерживается IE начиная с 4.0

border-left-style

Задает тип левой границы элемента страницы.

border-left-style: none|dotted|dashed|solid|double|groove|ridge|inset|outset;

Поддерживается IE начиная с 4.0

border-right-style

Задает тип правой границы элемента страницы.

border-right-style: none|dotted|dashed|solid|double|groove|ridge|inset|outset;

Поддерживается IE начиная с 4.0

border-width

Задает толщину всех границ элемента страницы.

Заменяет атрибуты border-top-width, border-right-width, border-bottom-width и border-left-width.

border-width: {border-top-width} [{border-right-width}] [{border-bottom-width}] [{border-left-width}];

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

Толщина может быть задана числовым значением. Также доступны три предопределенных значения: thin, medium, thick, рисующие тонкую, среднюю и толстую линию соответственно.

Значение по умолчанию medium.

Поддерживается IE и NN начиная с 4.0

border-top-width

Задает толщину верхней границы элемента страницы.

border-top-width: medium|thin|thick|{Толщина};

Толщина может быть задана числовым значением. Также доступны три предопределенных значения: thin, medium, thick, рисующие тонкую, среднюю и толстую линию соответственно.

Значение по умолчанию medium.

Поддерживается IE и NN начиная с 4.0

border-bottom-width

Задает толщину нижней границы элемента страницы.

border-bottom-width: medium|thin|thick|{Толщина};

Толщина может быть задана числовым значением. Также доступны три предопределенных значения: thin, medium, thick, рисующие тонкую, среднюю и толстую линию соответственно.

Значение по умолчанию medium.

Поддерживается IE и NN начиная с 4.0

border-left-width

Задает толщину левой границы элемента страницы.

border-left-width: medium|thin|thick|{Толщина};

Толщина может быть задана числовым значением. Также доступны три предопределенных значения: thin, medium, thick, рисующие тонкую, среднюю и толстую линию соответственно.

Значение по умолчанию medium.

Поддерживается IE и NN начиная с 4.0

border-right-width

Задает толщину правой границы элемента страницы.

border-right-width: medium|thin|thick|{Толщина};

Толщина может быть задана числовым значением. Также доступны три предопределенных значения: thin, medium, thick, рисующие тонкую, среднюю и толстую линию соответственно.

Значение по умолчанию medium.

Поддерживается IE и NN начиная с 4.0

border-top

Задает все свойства верхней границы элемента страницы за один прием.

Заменяет атрибуты border-top-color, border-top-style и border-top-width. Значения этих атрибутов могут располагаться в любом порядке.

border-top: [{border-top-color}] [{border-top-style}] [{border-top-width}];

Значение по умолчанию medium none.

Поддерживается IE начиная с 4.0

border-bottom

Задает все свойства нижней границы элемента страницы за один прием.

Заменяет атрибуты border-bottom-color, border-bottom-style и border-bottom-width. Значения этих атрибутов могут распологаться в любом порядке.

border-bottom: [{border-bottom-color}] [{border-bottom-style}] [{border-bottom-width}];

Значение по умолчанию medium none.

Поддерживается IE начиная с 4.0

border-left

Задает все свойства левой границы элемента страницы за один прием.

Заменяет атрибуты border-left-color, border-left-style и border-left-width. Значения этих атрибутов могут распологаться в любом порядке.

border-left: [{border-left-color}] [{border-left-style}] [{border-left-width}];

Значение по умолчанию medium none.

Поддерживается IE начиная с 4.0

border-right

Задает все свойства правой границы элемента страницы за один прием.

Заменяет атрибуты border-right-color, border-right-style и border-right-width. Значения этих атрибутов могут распологаться в любом порядке.

border-right: [{border-right-color}] [{border-right-style}] [{border-right-width}];

Значение по умолчанию medium none.

Поддерживается IE начиная с 4.0

border-collapse

Задает, будут ли границы ячеек и общая граница таблицы сливаться в одну или нет.

Применяется только для тега <TABLE>.

border-collapse: separate|collapse;

Поддерживается IE начиная с 5.0

display

Определяет, как будет отображаться элемент.

display: inline|block|none|inline-block|list-item|table-header-group|table-footer-group;

Поддерживается IE и NN начиная с 4.0

position

Устанавливает, каким образом вычисляется положение элемента в плоскости экрана.

position: static|absolute|relative;

Поддерживается IE и NN начиная с 4.0

z-index

Задает порядок перекрытия свободно позиционированными объектами друг друга.

z-index: auto|{Порядок перекрытия}|;

Порядок перекрытия задается положительными или отрицательным целым числом. При этом элементы с большим значением этого атрибута будут перекрывать элементы с меньшим значением. Предопределенное значение auto задает порядок перекрытия по умолчанию, когда элементы, определенные в HTML-коде раньше, перекрываются заданными позже.

Значение по умолчанию auto.

Поддерживается IE и NN начиная с 4.0

visibility

Позволяет элементу быть видимым или невидимым на странице.

visibility: inherit|visible|hidden;

Поддерживается IE и NN начиная с 4.0

clip

Задает прямоугольный фрагмент элемента страницы, который будет видим.

clip: auto|rect({Верхняя граница} {Правая граница} {Нижняя граница} {Левая граница});

Предопределенное значение auto задает видимость всего элемента страницы. Оно же является значением по умолчанию. Для того чтобы ограничить видимую часть элемента страницы прямоугольным фрагментом, задаются четыре координаты границ этого прямоугольника, разделенные пробелами.

Поддерживается IE и NN начиная с 4.0

white-space

Задает, будут ли строки текста, содержащегося в элементе страницы, автоматически переноситься, если они не помещаются в нем по ширине.

white-space: normal|nowrap|pre;

Поддерживается IE начиная с 5.5 и NN начиная с 4.0

cursor

Определяет форму курсора мыши, которую он принимает при наведении на элемент страницы.

cursor: auto|crosshair|default|hand|move|*-resize|text|wait|help;

Поддерживается IE начиная с 4.0

list-style

Задает параметры маркера или номера позиции списка.

Заменяет атрибуты list-style-image, list-style-position и list-style-type.

Значения этих атрибутов могут располагаться в любом порядке.

list-style: [{list-style-image}] [{list-style-position}] [{list-style-type}];

Значение по умолчанию disk outside none.

Поддерживается IE начиная с 4.0

list-style-image

Задает графическое изображение, отображаемое в качестве маркера позиции списка. Имеет приоритет над атрибутом list-style-type.

list-style-image: none|url({Интернет-адрес файла изображения});

Если задано предопределенное значение none, то стиль маркера берется из установок атрибута list-style-type, если он задан, или отображается маркер по умолчанию. Если задан интернет-адрес файла изображения, то оно отображается в качестве маркера, перекрывая установки атрибута list-style-type.

Значение по умолчанию none.

Поддерживается IE начиная с 4.0

list-style-position

Задает местонахождение маркера позиции списка: в тексте позиции или вне его.

list-style-position: outside|inside;

Доступны два значения. Значение outside (по умолчанию) задает отображение маркера позиции списка вне текста позиции. Значение же inside заставляет Web-обозреватель отобразить маркер позиции в ее тексте в качестве первого символа.

Поддерживается IE начиная с 4.0

list-style-type

Задает тип маркера или номер позиции списка.

list-style-type: disc|circle|square|decimal|lower|roman|upper-roman|lower-alpha|upper-alpha|none;

Поддерживается IE и NN начиная с 4.0

page-break-after

Устанавливает, будет ли после текущего элемента при печати Web-страницы производиться прогон листа.

page-break-after: auto|always|empty string;

Поддерживается IE начиная с 4.0

page-break-before

Устанавливает, будет ли перед текущего элемента при печати Web-страницы производиться прогон листа.

page-break-before: auto|always|empty string;

Поддерживается IE начиная с 4.0

Псевдостили применяются к гиперссылкам <A>.

active

Применяется к активным гиперссылкам, т.е. гиперссылкам, на которых находится фокус ввода пользователя.

{Задание стиля гиперссылки}:active {Определение стиля};

Аналогичен атрибуту alink тега <BODY>.

Пример:

A:active {color: lime;}

активная гиперссылка будет ярко-зеленой.

По умолчанию в IE активные гиперссылки выделяются красным цветом.

Поддерживается IE начиная с 4.0

hover

Применяется к гиперссылкам, когда пользователь помещает над ними курсор мыши.

{Задание стиля гиперссылки}:hover {Определение стиля};

Пример:

A:hover {color: lime; text-decoration: none;}

Гиперссылка, при наведении на нее мыши, будет ярко-зеленой и неподчеркнутой.

По умолчанию в IE гиперссылки подчеркиваются, когда пользователь помещает над ними курсор мыши.

Поддерживается IE начиная с 4.0

link

Применяется к не посещенным еще пользователем гиперссылкам.

{Задание стиля гиперссылки}:link {Определение стиля};

Аналогичен атрибуту link тега <BODY>.

Пример:

A:link {color: black;}

По умолчанию в IE непосещенные гиперссылки отображаются синим цветом.

Поддерживается IE начиная с 3.02

visited

Применяется к уже посещенным пользователем гиперссылкам.

{Задание стиля гиперссылки}:visited {Определение стиля};

Аналогичен атрибуту vlink тега <BODY>.

Пример:

A:link {color: indigo;}

По умолчанию в IE посещенные гиперссылки отображаются бордовым цветом.

Поддерживается IE начиная с 3.02

Псевдостили применяются некоторым элементам текстовых абзацев, например, к первой строке абзаца или первой букве первой строки.

first-letter

Применяется к первой букве первой строки абзаца. Может использоваться для создания буквиц.

{Задание стиля абзаца}:first-letter {Определение стиля};

Пример:

st:first-letter {font-size: 16pt;}

По умолчанию в IE первые буквы первых строк абзацев никак не выделяются.

Поддерживается IE начиная с 5.0

first-line

Применяется к первой строке абзаца.

{Задание стиля абзаца}:first-line{Определение стиля};

Пример:

st:first-line {text-decoration: underline;}

По умолчанию в IE первые строки абзацев никак не выделяются.

Поддерживается IE начиная с 5.0

Правила используются в таблицах стилей для особых нужд.

charset

Задает текстовую кодировку для внешней таблицы стилей.

@charset {Кодировка};

Пример:

@charset "windows-1251";

Может использоваться только во внешних таблицах стилей; должна быть первой строкой в файле.

Поддерживается IE начиная с 4.0

font-face

Задает файл загружаемого шрифта для использования на Web-странице.

@font-face {Определение загружаемого шрифта};

Определение загружаемого шрифта имеет следующий формат:

font-family: {Имя шрифта}

src: url({Интернет-адрес файла шрифта}) }

Пример:

@font-face {font-family: comic;src: url(http://www.youodmain.ru/comic_font_file.eot); }

Поддерживается IE начиная с 4.0

import

Импортирует внешную таблицу стилей.

@import url("{Интернет-адрес файла таблицы стилей}");

Пример:

@import url("http://www.spravkaweb.ru/style_file.css");

Поддерживается IE начиная с 4.0

page

Используется при задании размеров, ориентаций и полей печатной страницы в таблице стилей.

@page {Селектор страницы} {Правила}

Селектор страницы может принимать одно из трех значений:

Пример:

@page :first {margin-top: 2cm; margin-bottom: 2cm;}

Здесь мы задали для первой печатной страницы поля по два сантиметра сверху и снизу.

Поддерживается IE начиная с 5.5

important

Используется для задания неперекрываемых установок стиля.

{Установки слиля}!important

Пример:

<STYLE>P { color: red !important} </STYLE> <P style="color: green">Этот текст останется красным.</P>

Здесь установки, сделанные для текстового абзаца <P>, не будут перекрыты в дальнейшем.

Поддерживается IE начиная с 4.0