На главную страницу
Форум txt.version   



Статья :: Справочник по CSS : White Cat

Вниманию читателей предлагается справочник по CSS.

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

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

Справочник по CSS

О этом справочнике

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

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


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


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



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


Что такое CSS и как применить

Каскадные таблицы стилей или 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 "utf-8";

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

Поддерживается 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

О этом справочнике

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

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


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


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



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





Справочник по CSS : White Cat

страницы в данном разделе 
Справочник по CSS : White Cat Что такое CSS и как применить : White Cat
Свойства шрифта : White Cat Цветовая гамма : White Cat
Свойства текста : White Cat Свойства текста, содержащего иероглифы : White Cat
Расположение элементов : White Cat Границы элементов : White Cat
Классификации : White Cat Статические фильтры : White Cat
Динамические фильтры : White Cat Barn : White Cat
Blinds : White Cat CheckerBoard : White Cat
Fade : White Cat GradientWipe : White Cat
Iris : White Cat Pixelate : White Cat
RadialWipe : White Cat RandomBars : White Cat
RandomDissolve : White Cat Slide : White Cat
Spiral : White Cat Stretch : White Cat
Strips : White Cat ZigZag : White Cat
Статические фильтры : White Cat Динамические фильтры : White Cat
Blinds : White Cat CheckerBoard : White Cat
Fade : White Cat GradientWipe : White Cat
Iris : White Cat Pixelate : White Cat
RadialWipe : White Cat RandomBars : White Cat
RandomDissolve : White Cat Slide : White Cat
Spiral : White Cat Stretch : White Cat
Strips : White Cat ZigZag : White Cat
Barn : White Cat Blinds : White Cat
CheckerBoard : White Cat Fade : White Cat
GradientWipe : White Cat Iris : White Cat
Pixelate : White Cat RadialWipe : White Cat
RandomBars : White Cat RandomDissolve : White Cat
Slide : White Cat Spiral : White Cat
Stretch : White Cat Strips : White Cat
ZigZag : White Cat    

Разделы
Околокомпьютерная литература (375)
Программирование (102)
Программы (75)
ОС и Сети (49)
Интернет (29)
Аппаратное обеспечение (16)
Базы данных (6)


Microsoft Office Журнал Компьютерра № 32 от 5 сентября 2006 года Журнал Компьютерра № 34 от 18 сентября 2006 года