Разделы На главную Организация сайтостроительства Разработка стилей ActiveX Язык HTML Моделирование сайта Пакет Adobe GoLive WEB системы Протокол WAP 3D графика LightWave 8 3DS MAX 3D Studio MAX Мультимедийный сайт Анимация Графика Фото Кино Flash Видео на сайте Организация видео контента Premiere Pro Vstudio VirtualDub ВSonic Scenarist Видео на DVD Графика на сайте Изображения для сайта Photoshop Adobe After Effect Adobe Illustrator CorelDRAW CorelXARA Maya

Основы работы с CSS

Предназначение стилей

, , и т.д.). Первоначально для представления документов не было предусмотрено каких-либо тегов форматирования, т.е. предполагалось, что о представлении документа позаботится браузер.
Но это породило процесс создания своих тегов и атрибутов к исходной спецификации HTML-браузерами Netscape и Internet Explorer ((такие, например, как тег и атрибут color), что затруднило создание Web-сайтов, на которых содержимое документов HTML было четко отделено от уровня представления документа.
В этой ситуации консорциум W3C (World Wide Web Consortium) — некоммерческая организация, ответственная за стандартизацию HTML — создала при разработке стандарта HTML 4.0 каскадные таблицы стилей.
Таким образом, необходимость разделения содержимого документа и его представления привела к созданию технологии CSS.
Сегодня эту технологию поддерживают все основные браузеры (Internet Explorer, Mozilla Firefox, Opera и др.).

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

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

Приоритет использования стилей

Для каскадных таблиц стилей определен приоритет использования. Если для элемента HTML определено более одного стиля, то все стили будут последовательно "каскадированы" в новую "виртуальную" таблицу стилей, согласно следующим правилам:

стили, используемые по умолчанию браузером;

стили, хранящиеся во внешней таблице;

стили, хранящиеся во внутренней таблице стилей (внутри тега );

встроенный стиль (внутри элемента HTML).

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

color: blue

p { color: blue; font-style: italic; margin-left: 20pt; }

ol,ul,li { list-style: circle; font-family: arial; }

a:link {color:black} a:visited {color:black}

body { background-image: url("http://www.intuit.ru/departament/picture.gif") }

h1,h3,h6 { margin: 20pt; }

h1,h3,h6 { margin: 20pt; }

h1,h2,h3,h4,h5,h6,p,ol,li { font-family: arial, "sans serif"; }

p,table,td,ol,ul { font-style: oblique; }

:link {COLOR: blue;} :visited {COLOR: blue;} a:active {COLOR: black;} a:hover {COLOR: black;}

a.myln:link {COLOR: olive;} a.myln:visited {COLOR: olive;} a.myln:active {COLOR: teal;} a.myln:hover {COLOR: teal;}

comic sans

p,ol,ul { font-style: italic; margin-right: 20pt; }

p,h1,h6 { font-family: " comic sans ms", arial, "sans serif"; }

p,th { font-size: 20% }

table {background-color: blue}

body {background-color:#FFF000}

p,ol,ul { color:green; }

:link {color:blue} :visited {color:blue} :active {color:green} :hover {color:green}

:link { color:red }

:link { color:red } :visited { color:red } :active { color:yellow } :hover { color:yellow }

body { background-color: #FAD123; }

h1,h2,h6 { margin-left: 20pt; color: blue; }

h3,h4,h5 { margin-left: 10pt; color: green; }

p,h1,h3 { font-size: 150%; }

p,h1,h2,h3,h4,h5,h6,table { font-family: arial; }

p { margin-left: 30pt; }

При последовательном применении этих стилей

p,h1,h2,h3 { font-size: 75%; }

table,h4,h5,h6,li { font-family: arial, "sans serif"; margin-left: 20pt; }

body { background-color: #F2FF2F; }

ol,ul {color: 12a45d;}

:link {color:brown} :visited {color:brown} :active {color:blue} :hover {color:blue}

При последовательном применении этих стилей к одному и тому же документу можно менять его представление.

Таблицы стилей могут существенно сократить объем работы

Таблицы стилей определяют вывод элементов HTML (как, например, тег font и атрибут color в HTML 3.2). Как уже говорилось, каскадные таблицы стилей обычно хранятся во внешних файлах с расширением .css. Этот способ удобен тем, что позволяет изменить внешний вид и компоновку всех необходимых страниц в Web, редактируя только один, единственный документ CSS.
Еще раз заострим внимание: CSS стали прорывом в Web-дизайне. Основой для него послужило то, что технология позволяет разработчикам одновременно управлять стилем и компоновкой множества Web-страниц, определять стиль для каждого элемента HTML и применять его к любому количеству Web-страниц. Также CSS дает возможность из одного документа ссылаться на несколько внешних таблиц стилей. Таким образом, чтобы сделать глобальное изменение, надо просто изменить стиль, и все элементы в Web будут автоматически изменены.
Разработчик может определять стили следующими способами:

внутри единственного элемента HTML;

внутри элемента страницы HTML;

во внешнем файле CSS.

Технология CSS: общий взгляд

Название "Каскадные таблицы стилей" происходит от английского Cascading Style Sheets, аббревиатурой которого является CSS. Впервые стили появляются в HTML 4.0 для определения представления элементов HTML и решения проблем представления документов. Стили обычно хранятся в таблицах стилей: могут быть определены как внутри HTML-документа, так и в специальном файле с расширением css. Используя отдельные файлы для хранения таблиц стилей, можно существенно сократить объем работы. Также можно определить несколько стилей, которые, подчиняясь существующим правилам, будут каскадно задавать один определенный стиль.

Комментарии CSS

Для пояснения кода и для последующего его редактирования используются комментарии, которые игнорируются браузерами. Комментарий CSS начинается символом "/*" и заканчивается символом "*/", как в примере ниже:
/* Первый комментарий. */ table { /* Второй комментарий. */ margin-left: 10pt;; font-family: "sans serif"; /* Третий комментарий. */ border-style:outset }

Несколько таблиц стилей

В случае объединения или использования нескольких таблиц стилей могут возникнуть ситуации, когда некоторые свойства заданы для одного и того же селектора в разных таблицах стилей; тогда будут использованы значения из более конкретной таблицы стилей.
Например, внешняя таблица стилей имеет следующие свойства для селектора p:
p { font-family: "sans serif"; margin-left: 10pt; font-style: italic; font-weight: bold }
А внутренняя таблица стилей имеет для селектора p следующие свойства:
p { margin-left: 20pt; font-style: normal; font-weight: bolder }
Итак, при соединении внешней таблицы стилей с внутренней для селектора p будут определены следующие свойства:
font-family: "sans serif"; margin-left: 20pt; font-style: normal; font-weight: bolder
Таким образом, тип шрифта будет наследоваться из внешней таблицы стилей, а его стиль, вес и внешний отступ параграфа определяются внутренней таблицей стилей.

Подключение таблицы стилей

Когда браузер считывает таблицу стилей, он форматирует документ согласно с этой таблицей. Существует три способа подключения таблицы стилей.

Подключение внешней таблицы стилей
Этот способ обычно применяется в ситуациях, когда один стиль определяется для множества страниц. Если необходимо быстро поменять дизайн Web-сайта этот способ идельно подходит – редактируется только один файл с таблицей стилей. Для подключения внешней таблицы стилей предназначен тег , который размещается в разделе заголовка:

Данный код указывает браузеру на то, что определение стиля хранятся в файле first.css. Последний, в свою очередь, выполнит форматирование документа согласно с этим определением стиля.
Некоторые замечания:

внешнюю таблицу стилей можно создать в любом текстовом редакторе;

файл с внешней таблицей стилей не должен содержать никаких тегов html;

файл с внешней таблицей стилей необходимо сохранить с расширением .css.

Пример:
ul {margin-left: 10pt} li {font-family: arial} body {background-color: blue}
Для корректности отображения браузерами таблиц стилей необходимо исключить пробелы между значением свойства и единицами измерения, т.к. это будет работать правильно только в IE6, но не в Mozilla/Firefox или Netscape.
Пример с пробелом — "margin-left: 20 px";
пример без пробела — "margin-left: 20px".

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

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

Для определения встроенных стилей в соответствующем теге применяют атрибут style, который может содержать любое свойство CSS.

Пример:

Заголовок H1

В примере показано, как задать цвет фона документа и цвет заголовка h1.

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

Рассмотрим несколько примеров использования CSS:

Технология CSS позволяет связываться с внешней таблицей стилей. Для этого в файле HTML применяют тег :

для этого элемента списка будет задан шрифт "arial"

для этого элемента списка будет задан шрифт "arial"

для этого элемента списка будет задан шрифт "arial"

для этого элемента списка будет задан шрифт "arial"

Внешний файл содержит следующее описание стилей (style.css):
ol {margin-left: 10pt} ul {margin-right: 20pt} li {font-family: arial}

Следующий файл HTML связывается с внешней таблицей стилей с помощью тега :
:

Ячейка 1

Ячейка 2

Здесь размещена ссылка

Внешний файл содержит следующее описание стилей (style2.css):
body {background-color: #FFFFFF)} table {margin-left: 10pt;} td {font-size:10pt; color: blue} a:link {color:blue} a:visited {color:brown} a:hover {color:lime} a:active {color:gray}.

Селектор идентификатора (id)

Стили элементов HTML можно определить также с помощью селектора идентификатора, который определяется символом #.
Следующее правило стиля будет применимо к элементу, который имеет атрибут id со значением "fontsz":
#fontsz{font-size: 50%}
Следующее правило стиля будет применимо к элементу ul, который имеет атрибут id со значением "first":
ul#first { list-style: disc; color: #ffffff }
Для корректности обработки кода браузерами не рекомендуется начинать имя ID с числа, т.к. это не будет работать в Mozilla/Firefox.

Селектор класса (class)

При Web-разработке часто возникает необходимость в задании различных стилей для одного и того же типа элемента HTML. Для решения этой задачи используют селектор класса.
Предположим, что в документе требуется два типа заголовков: более крупный заголовок должен иметь внешний отступ 10 пунктов, а второй — 20 пунктов. Вот как это можно сделать с помощью стилей:
h1.stepleft {margin-left: 10pt} h2.stepright {margin-left: 20pt}
Для применения этих стилей в документе HTML необходимо будет использовать атрибут класс:

Заголовок с внешним отступом 10 пунктов.

Заголовок с внешним отступом 20 пунктов.

В тоже время не допускается следующее определение атрибута class:
< h1 class="stepleft" h2 class="stepright">,
т.е. можно определить только один атрибут class
Можно также опустить имя тега в селекторе, чтобы определить стиль, который будет использоваться всеми элементами HTML, имеющими определенный class.
.left {margin-left: 40pt}
В следующем примере все элементы HTML, имеющие class="left", будут иметь внешний отступ, равный 40 пунктам.
В следующем коде элементы table и p имеют class="left". Это означает, что оба элемента будут следовать правилам в селекторе ".left":
Эта таблица будет иметь внешний отступ, равный 40 пунктам.

Этот параграф будет иметь внешний отступ, равный 40 пунктам.

Для корректности обработки кода браузерами не рекомендуется начинать имя класса с числа, т.к. это не будет работать в Mozilla/Firefox.

Синтаксис CSS

Синтаксис CSS состоит из трех частей: селектора, свойства и значения:
селектор {свойство: значение}
Селектор — элемент/тег HTML, который необходимо определить. Свойство — атрибут, который желательно изменить. Каждое свойство может принимать значение. Существует ряд правил и рекомендаций, которые необходимо запомнить.

Свойство и значение разделяются двоеточием и помещаются внутри фигурных скобок: p {font-size: 75%}

Если значение состоит из нескольких слов, то необходимо поместить значение в кавычки: h1 {font-family: "lucida calligraphy"}

Если требуется определить более одного свойства, то необходимо разделить свойства точкой с запятой: table { font-family: arial, "sans serif"; border-style: dotted}

Чтобы определения стилей было удобно читать, можно каждое свойство писать на отдельной строке:
h2 { font-family: arial; margin-right: 20pt; color:#ffffff }

При определении правил допускается группировка селекторов, при этом в качестве разделителя селекторов используется запятая. В следующем примере в группу были объединены все элементы заголовков. Все элементы заголовков будут выведены шрифтом sans serif:
p,table,li { font-family: "sans serif"; }

Параметр 'background-attachment'

Этот параметр определяет, будет ли фоновое изображение зафиксировано в определенном месте или будет перемещаться вместе со всей страницей.
Наследование: нет.
Может принимать следующие значения:
ЗначениеОписание

Scroll	Фоновое изображение перемещается, когда перемещается страница
Fixed	Фоновое изображение не перемещается, когда перемещается страница

Пример:
body { background-attachment: fixed; background-repeat: repeat }

Параметр 'background-color'

Этот параметр задает фоновый цвет элемента.
Наследование: нет.
Может принимать следующие значения:
ЗначениеОписание

color	Значение color может быть названием цвета (red), значением rgb (rgb(255,0,0)) или шестнадцатеричным числом (#ff0000)
transparent	Фоновый цвет является прозрачным

Пример:
h1 { background-color: gray; font-family: arial }

Параметр 'background-image'

Данный параметр задает изображение в качестве фона.
Наследование: нет.
Может принимать следующие значения:
ЗначениеОписание

url	Путь доступа к изображению
none	Фонового изображения нет

Пример:
body { background-image: url(http://www.intuit.ru/speciality/image.gif); background-repeat: repeat; background-attachment: fixed }
В тех случаях, когда изображение недоступно, необходимо задать цвет background-color, который будет использован.

Параметр 'background-position'

Этот параметр задает начальное положение фонового изображения.
Наследование: нет.
Может принимать следующие значения:
ЗначениеОписание

top left top center top right center left center center center right bottom left bottom center bottom right	Если определить только одно ключевое слово, то вторым значением подразумевается "center"
x-% y-%	Первое значение является горизонтальной координатой, второе значение — вертикальной. Верхний левый угол — 0% 0%. Правый нижний угол — 100% 100%. Если определено только одно значение, то вторым значением подразумевается 50%.
x-pos y-pos	Первое значение является горизонтальной координатой, второе значение — вертикальной. Верхний левый угол — 0 0. Единицами измерения могут быть пиксели (0px 0px) или любые другие единицы измерения CSS. Если определено только одно значение, то вторым значением подразумевается 50%. Можно смешивать % и эти координаты.

Пример:
body { background-image: url(http://www.intuit.ru/speciality/image.gif); background-position: right top; background-attachment: fixed }
body { background-image: url(http://www.intuit.ru/speciality/image.gif); background-repeat: no-repeat; background-position: 100% 100%; background-attachment: fixed }

Параметр 'background-repeat'

Этот параметр определяет, каким образом будет повторяться фоновое изображение.
Наследование: нет.
Может принимать следующие значения:
ЗначениеОписание

repeat		Фоновое изображение будет повторяться по вертикали и по горизонтали
repeat-x	Фоновое изображение будет повторяться по горизонтали
repeat-y	Фоновое изображение будет повторяться по вертикали
no-repeat	Фоновое изображение будет выведено только один раз

Пример:
body { background-image: url(http://www.intuit.ru/departament/image.gif); background-repeat: repeat; background-attachment: fixed }

Параметр 'background'

Этот параметр предназначен для задания всех свойств фона в одном объявлении.
Наследование: нет.
Примеры:
body { background: url(picture.gif) }
body { background: url(http://www.intuit.ru/speciality/image.gif) repeat scroll }
body { background: yellow url(http://www.intuit.ru/speciality/image.gif) repeat-x bottom }
Может принимать следующие значения:
ЗначениеОписание

background-color background-image background-repeat background-attachment background-position		В этом объявлении можно задать от одного до пяти свойств фона

Рассмотрим их подробнее.

Параметры фона в CSS: подробное рассмотрение

Как было показано ранее, параметры фона в CSS позволяют управлять цветом фона элемента, задавать в качестве фона изображение, повторять циклически фоновое изображение вертикально или горизонтально и позиционировать изображение на странице.
Данные свойства поддерживаются следующими браузерами (в скобках сокращенный вариант, который применяется далее в таблицах параметров и значений): Internet Explorer (IE), Firefox (F), Netscape(N).
ПараметрОписаниеЗначенияIEFNW3C

background	Служит для задания всех параметров фона в одном объявлении	background-color background-image background-repeat background-attachment background-position		4	1	6	1*
background-attachment	Задает для изображения фиксированное расположение или перемещающееся вместе с остальной страницей	scroll fixed		4	1	6	1
background-color	Задает цвет фона элемента	color-rgb color-hex color-name transparent		4	1	4	1
background-image	Задает в качестве фона изображение	url none		4	1	4	1
background-position	Задает начальное положение фонового изображения	top left top center top right center left center center center right bottom left bottom center bottom right x-% y-% x-pos y-pos		4	1	6	1
background-repeat	Определяет, будет ли и каким образом будет повторяться фоновое изображение	repeat repeat-x repeat-y no-repeat		4	1	4	1

(* здесь и далее число в столбце "W3C" указывает в какой спецификации CSS определен параметр (CSS1 или CSS2)).

Данный пример показывает, как задать

Данный пример показывает, как задать фоновый цвет элемента.

this is ul

this is ol

This is a paragraph

Данный пример показывает, как задать в качестве фона изображение.



В документе в качестве фона использовано изображение

Данный пример показывает, как использовать повторяющееся фоновое изображение.



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

Данный пример показывает, как использовать повторяющееся только по вертикали фоновое изображение.



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

Данный пример показывает, как использовать повторяющееся только по горизонтали фоновое изображение.



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

Данный пример показывает, как разместить на странице фоновое изображение.

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

Определено фиксированное фоновое изображение
Определено фиксированное фоновое изображение
Определено фиксированное фоновое изображение

Данный пример показывает, как задать прокручивающееся фоновое изображение, т.е. изображение, которое будет прокручиваться вместе с документом.

Определено прокручивающееся фоновое изображение
Определено прокручивающееся фоновое изображение
Определено прокручивающееся фоновое изображение

Данный пример показывает, как использовать свойство сокращения записи для задания всех свойств фона в одном объявлении.

Это документ, для которого свойства фона заданы в одном объявлении
Это документ, для которого свойства фона заданы в одном объявлении
Это документ, для которого свойства фона заданы в одном объявлении

Итак, можно определить фоновый цвет элемента, а также в качестве фона — изображение, повторяющееся изображение, повторяющееся изображение (только вертикально или только горизонтально), фиксированное или прокручивающееся изображение. Кроме того, можно использовать свойство сокращения записи для задания всех свойств фона в одном объявлении.

Параметр 'color'

Этот параметр задает цвет текста.
Наследование: да.
Может принимать следующие значения:
ЗначениеОписание

color	Значением color может быть название цвета (red), значение rgb (rgb(255,0,0)) или шестнадцатеричное значение (#ff0000).

Пример:
h1 { color: green }

Параметр 'direction'

Параметр задает направление текста.
Наследование: да.
Может принимать следующие значения:
ЗначениеОписание

ltr	Направление текста слева направо
rtl	Направление текста справа налево

Пример:
p { direction: rtl }

Параметр 'letter-spacing'

Данный параметр увеличивает или уменьшает интервал между символами.
Наследование: да.
Примечание: допускаются отрицательные значения.
Может принимать следующие значения:
ЗначениеОписание

normal	Определяет обычный пробел между символами
Length	Определяет фиксированный пробел между символами

Примеры:
pre { letter-spacing: -2px }
pre { letter-spacing: 20px }

Параметр 'text-align'

Этот параметр задает выравнивaние текста в элементе.
Наследование: да.
Может принимать следующие значения:
ЗначениеОписание

left	Выравнивает текст слева
right	Выравнивает текст справа
center	Центрирует текст
justify

Пример:
h1 { text-align: right }

Параметр 'text-decoration'

Данный параметр задает дополнительное оформление текста.
Наследование: нет.
Примечание: цвет оформления должен быть задан свойством "color".
Может принимать следующие значения:
ЗначениеОписание

None	Определяет обычный текст
Underline	Определяет линию под текстом
Overline	Определяет линию над текстом
line-through	Определяет линию через текст
Blink	Определяет мигающий текст

Пример:
h1 { text-decoration: overline }

Параметр 'text-indent'

Данный параметр создает отступ для первой строки текста элемента.
Наследование: да.
Примечание: допускаются отрицательные значения, для которых первая строка будет сдвинута влево.
Может принимать следующие значения:
ЗначениеОписание

Length	Определяет фиксированный отступ
%	Определяет отступ в % от ширины родительского элемента

Примеры:
pre { text-indent: -10px }
p { text-indent: 10px }

Параметр 'text-transform'

Этот параметр управляет регистром символов в элементе.
Наследование: да.
Может принимать следующие значения:
ЗначениеОписание

None	Определяет обычный текст с символами нижнего регистра и заглавными буквами
Capitalize	Каждое слово в тексте начинается с заглавной буквы
Uppercase	Определяет только заглавные буквы
Lowercase	Определяет только символы нижнего регистра

Примеры:
h1 { text-transform: capitalize }
pre { text-transform: lowercase }

Параметр 'white-space'

Параметр задает способ обработки пробелов внутри элемента.
Наследование: да.
Может принимать следующие значения:
ЗначениеОписание

normal	Браузер игнорирует пробел
pre	Браузер сохраняет пробел. Действует как тег в HTML
nowrap	Текст не будет переноситься на другую строку, пока не встретится тег

Пример:
pre { white-space: pre }

Параметр 'word-spacing'

Данный параметр увеличивает или уменьшает пробел между словами.
Наследование: да.
Примечание: допускаются отрицательные значения.
Может принимать следующие значения:
ЗначениеОписание

normal	Определяет обычный пробел между словами
length	Определяет фиксированный пробел между словами

Примеры:
pre { word-spacing: -10px }
h1 { word-spacing: 35px }

Этот пример показывает, как задать

Этот пример показывает, как задать цвет текста.

список ul

список ol

это параграф

Этот пример показывает, как задать фоновый цвет части текста.

Данный текст содержит определение, фон которого выделен. Это определение.

Данный пример показывает, как увеличить или уменьшить интервал между символами.


параграф

элемент списка

Данный пример показывает, как выравнивать текст.

список ol

список ol

список ol

список ul

список ul

список ul

список

dl dl dl

список

dl dl dl

список

dl dl dl

Этот пример показывает, как можно оформить текст.

первое

второе

третье

1

2

3

www.intuit.ru

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

параграф

параграф

параграф

Данный пример показывает, как управлять регистром символов в тексте.

Верхний регистр

Нижний регистр

первые буквы в словах заглавные
 

Параметр 'font-family'

Данное свойство определяет для элемента список имен семейств шрифтов и/или имен порождающих семейств в порядке их приоритета. Если специфицировано несколько значений, то браузер будет использовать первое распознанное значение.
Существует два типа значений font-family:

family-name: имя семейства шрифтов ("times", "courier", "arial", и т.д.);

generic-family: имя порождающего семейства, ("serif", "sans-serif", "cursive", "fantasy", "monospace").

В качестве разделителя используется запятая. Для последнего варианта желательно определять имя порождающего семейства. Если же имя семейства содержит пробел, то его необходимо поместить в кавычки. При использовании в HTML атрибута "style" применяются одиночные кавычки.
Наследование: да.
Может принимать следующие значения:
ЗначениеОписание

family-name	Определяет для элемента имен семейств шрифтов и/или имен
generic-family	порождающих семейств в порядке их приоритета.

Примеры:
h1 { font-family: Garamond, serif }

Параметр 'font-size-adjust'

Отношение между высотой буквы "x" нижнего регистра в шрифте и высотой "font-size" называется значением аспекта шрифта. Если значение аспекта большое, то шрифт будет легче читаться, когда его размер уменьшается. Например, Verdana имеет значение аспекта, равное 0.58, т.е. если размер шрифта равен 100px, то высота буквы x нижнего регистра будет равна 58px. Times New Roman имеет значение аспекта 0.46. Таким образом, чем больше значение аспекта шрифта, тем легче он читается при уменьшении. В данном случае шрифт Verdana при уменьшении будет читаться лучше, чем Times New Roman.
Свойство font-size-adjust определяет значение аспекта для элемента, которое будет сохранять высоту буквы x нижнего регистра выбранного шрифта.
Наследование: да.
Возможные значения:
ЗначениеОписание

none	Не сохранять высоту буквы x шрифта, если шрифт недоступен
number	Определяет значение аспекта для шрифта Используемая формула: размер выбранного шрифта * (font-size-adjust/значение аспекта доступного шрифта) = размер шрифта для доступного шрифта Пример: Если 14px Verdana (значение аспекта 0.58) недоступен, а доступный шрифт имеет значение аспекта 0.46, то размер шрифт для подстановки будет 14 * (0.58/0.46) = 17.65px.

Пример:
p { font-size-adjust: none }
p { font-size-adjust: 0.50 }

Параметр 'font-size'

Параметр задает размер шрифта.
Наследование: да.
Может принимат следующие значения:
ЗначениеОписание

xx-small	Задает размер шрифта от xx-small до xx-large
x-small
small
medium
large
x-large
xx-large
smaller	Задает размер шрифта меньше, чем у порождающего элемента
larger	Задает размер шрифта больше, чем у порождающего элемента
length	Задает фиксированный размер шрифта
%	Задает размер шрифта в % от порождающего элемента

Примеры:
p { font-size: small }
pre { font-size: 5pt }
i { font-size: 3em }
p { font-size: 120% }

Параметр 'font-stretch'

Данный параметр сжимает или расширяет текущее семейство шрифтов.
Необходимо отметить, что семейство шрифтов сжимается или расширяется только горизонтально.
Наследование: да.
Возможные значения:
ЗначениеОписание

normal	Задает масштаб сжатия или расширения как обычный
wider	Задает масштаб расширения как следующее расширенное значение
narrower	Задает масштаб сжатия как следующее сжатое значение
ultra-condensed	Задает масштаб сжатия или расширения семейства шрифтов. "ultra-condensed" является самым сжатым значением, а " ultra-expanded" — самым широким
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded

Пример:
colspan="2" p { font-stretch: extra-expanded }

Параметр 'font-style'

Данный параметр задает стиль шрифта.
Наследование: да.
Возможные значения:
ЗначениеОписание

normal	Браузер выводит обычный шрифт
italic	Браузер выводит шрифт курсивом
oblique	Браузер выводит наклонный шрифт

Пример:
p { font-style: oblique }
h1 { font-style: italic }

Параметр 'font-variant'

Этот параметр используется для вывода текста капителью: все символы нижнего регистра преобразуются в символы верхнего регистра, при этом все символы шрифта капители имеют меньший размер по сравнению с остальным текстом.
Наследование: да.
Может принимат следующие значения:
ЗначениеОписание

normal	Браузер выводит обычный шрифт
small-caps	Браузер выводит шрифт капитель

Пример:
pre { font-variant: small-caps }
p { font-variant: normal }

Параметр 'font-weight'

Данный параметр определяет степень жирности символов в тексте при выводе.
Наследование: да.
Возможные значения:
ЗначениеОписание

normal	Определяет обычные символы
bold	Определяет жирные символы
bolder	Определяет более жирные символы
lighter	Определяет более тонкие символы
100	Определяет степень жирности символов. 400 соответствует normal, 700 соответствует bold
200
300
400
500
600
700
800
900

Пример:
h1 { font-weight: 200 }
h2 { font-weight: bold }

Параметр 'font'

Параметр font предназначен для сокращенной записи, позволяющей задать все свойства шрифта в одном объявлении (за исключением некоторых системных шрифтов).
Наследование: да.
Может принимать следующие значения:
ЗначениеОписание

font-style	Задает свойства шрифта. Значение line-height задает расстояние между строками. Это значение может быть числом, % или размером шрифта
font-variant
font-weight
font-size* /line-height
font-family
Caption	Определяет шрифт для элементов управления с заголовком (таких, как кнопки, раскрывающиеся меню и т.д.)
icon	Определяет шрифты, которые используются метками пиктограмм приложений
menu	Определяет шрифты, которые используются для раскрывающихся меню.
message-box	Определяет шрифты, которые используются в диалоговых окнах.
small-caption
status-bar	Определяет шрифты, которые используются в строке состояния окна

(*это свойство имеет также шестое значение: "line-height", которое задает расстояние между строками)
Примеры:
pre { font: oblique arial }
h1 { font: italic 200 arial }
p { font: italic small-caps 10px/12px serif }
p { font: status-bar }

Параметры шрифта в CSS

Параметры шрифта в CSS позволяют изменить семейство шрифта, степень жирности, размер, и стиль текста. Обратите внимание на то, что в CSS1 шрифты идентифицируются названием шрифта. В случае, если браузер не поддерживает данный шрифт, будет использоваться шрифт по умолчанию.
Данные параметры поддерживаются следующими браузерами: Internet Explorer, Firefox, Netscape.
ПараметрОписаниеЗначенияIEFNW3C

font	Параметр для задания всех свойств шрифта в одном объявлении	font-style	4	1	4	1
		font-variant
		font-weight
		font-size/line-height
		font-family
		caption
		icon
		menu
		message-box
		small-caption
		status-bar
font-family	Определяет для элемента список имен семейств шрифтов и/или имен порождающих семейств в порядке их приоритета	family-name	3	1	4	1
		generic-family
font-size	Задает размер шрифта	xx-small	3	1	4	1
		x-small
		small
		medium
		large
		x-large
		xx-large
		smaller
		larger
		length
		%
font-size-adjust	Определяет значение аспекта для элемента, которое будет сохранять x-height выбранного шрифта	none	-	-	-	2
		number
font-stretch	Делает текущее семейство шрифтов более узким или более широким	normal	-	-	-	2
		wider
		narrower
		ultra-condensed
		extra-condensed
		condensed
		semi-condensed
		semi-expanded
		expanded
		extra-expanded
		ultra-expanded
font-style	Задает стиль шрифта	normal	4	1	4	1
		italic
		oblique
font-variant	Выводит текст малыми прописными буквами или обычным текстом	normal	4	1	6	1
		small-caps
font-weight	Задает степень жирности шрифта	normal	4	1	4	1
		bold
		bolder
		lighter
		100
		200
		300
		400
		500
		600
		700
		800
		900

Этот пример показывает, как задать

Этот пример показывает, как задать шрифт текста.

применяется шрифт "times"

заголовок h1

заголовок h2

Этот пример показывает, как задать размер шрифта.

1. first
2. second

текст параграфа


• first
• second


• Этот пример показывает, как задать стиль шрифта.
  
  Текст параграфа. Текст параграфа. Текст параграфа.
  
• первый пункт
• второй пункт
• третий пункт
• первый пункт
• второй пункт
• третий пункт


• Этот пример показывает, как задать вариант шрифта.
  
  

  Заголовок h1

  Заголовок h2

  
  
• Этот пример показывает, как задать степень жирности шрифта.
  
  

  заголовок h1

  заголовок h2

  заголовок h3

  
  
• Этот пример показывает, как использовать сокращенную запись для задания всех свойств шрифта в одном объявлении.
  
  параграф параграф параграф параграф параграф параграф
  
  




Параметр 'border-bottom-color'

Данный параметр задает цвет нижней границы элемента.
Наследование: нет.
Может принимать следующие значения:
ЗначениеОписание

Color	Значение для цвета может быть названием цвета (red), значением rgb (rgb(255,0,0)) или шестнадцатеричным числом (#FF0000)


Примеры:
p { border-bottom-color: rgb(20,200,250) }
span { border-bottom-color: blue }



Параметр 'border-bottom-style'

Этот параметр задает стиль нижней границы элемента.
Наследование: нет.
Может принимать следующие значения:
ЗначениеОписание

None	Определяет отсутствие границы
Hidden	То же самое, что "none", за исключением разрешения конфликта границ для элементов таблицы
Dotted	Определяет пунктирную границу. Изображается в большинстве браузеров сплошной линией
Dashed	Определяет штрих-пунктирную границу. Изображается в большинстве браузеров сплошной линией
solid	Определяет сплошную границу
double	Определяет двойную границу. Толщина двойной границы будет соответствовать значению border-width
groove	Определяет 3D-границу (groove). Результат зависит от значения цвета границы
ridge	Определяет 3D-границу (ridge). Результат зависит от значения цвета границы
inset	Определяет 3D-границу (inset). Результат зависит от значения цвета границы
outset	Определяет 3D-границу (outset). Результат зависит от значения цвета границы


Пример:
p { border-bottom-style: dotted }



Параметр 'border-bottom-width'

Данный параметр задает толщину нижней границы элемента.
Наследование: нет.
Может принимать следующие значения:
ЗначениеОписание

thin	Определяет тонкую нижнюю границу
medium	Определяет нижнюю границу средней толщины
thick	Определяет толстую нижнюю границу
length	Позволяет определить толщину нижней границы


Примеры:
p { border-bottom-width: 1px }
p { border-bottom-width: thick }



Параметр 'border-bottom'

Этот параметр позволяет определить все свойства нижней стороны границы в одном объявлении.
Наследование: нет.
Возможные значения:
ЗначениеОписание

border-bottom-width	Задает свойства для нижней стороны границы
border-style
border-color


Примеры:
span { border-bottom: thick solid #800080 }
li { border-bottom: dotted #800000 }



Параметр 'border-color'

Данный параметр задает цвет четырех сторон границы. Допускается определение от одного до четырех цветов. Необходимо объявлять свойство border-style перед свойством border-color, т.к. элемент должен иметь границу, прежде чем для нее будет задан цвет.
Наследование: нет.
Возможные значения:
ЗначениеОписание

Color	Значение цвета может быть названием цвета (red), значением rgb (rgb(255,0,0)) или шестнадцатеричным числом (#FF0000)
Transparent	Граница является прозрачной


Примеры:
p {border-color: blue} все четыре стороны границы будут синие.
p {border-color: blue yellow} верхняя и нижняя стороны границы будут синие, левая и правая стороны границы будут желтые.
p {border-color: blue yellow green} верхняя стороны граница будет синей, левая и правая стороны границы будут желтые, нижняя сторона границы будет зеленая.
p {border-color: blue yellow green red} верхняя сторона границы будет синей, правая сторона границы будет желтой, нижняя сторона границы будет зеленой, левая сторона границы будет красной.



Параметр 'border-left-color'

Данный параметр задает цвет левой стороны границы элемента.
Наследование: нет.
Может принимать следующие значения:
ЗначениеОписание

Color	Значение цвета может быть названием цвета (red), значением rgb (rgb(255,0,0)) или шестнадцатеричным числом (#FF0000)


Примеры:
h1 { border-left-color: green }
h2 { border-left-color: #00FF00 }



Параметр 'border-left-style'

Данный параметр задает стиль левой стороны границы элемента.
Наследование: нет.
Может принимать следующие значения:
ЗначениеОписание

None	Определяет отсутствие границы
Hidden	То же самое, что "none", за исключением разрешения конфликта границ для элементов таблицы
Dotted	Определяет пунктирную границу. Изображается в большинстве браузеров сплошной линией
Dashed	Определяет штрих-пунктирную границу. Изображается в большинстве браузеров сплошной линией
solid	Определяет сплошную границу
double	Определяет двойную границу. Толщина двойной границы будет соответствовать значению border-width
groove	Определяет 3D-границу (groove). Результат зависит от значения цвета границы
ridge	Определяет 3D-границу (ridge). Результат зависит от значения цвета границы
inset	Определяет 3D-границу (inset). Результат зависит от значения цвета границы
outset	Определяет 3D-границу (outset). Результат зависит от значения цвета границы


Пример:
p { border-left-style: dotted }



Параметр 'border-left-width'

Данный параметр задает толщину левой стороны границы элемента.
Наследование: нет.
Может принимать следующие значения:
ЗначениеОписание

thin	Определяет тонкую левую сторону границы
medium	Определяет левую сторону границы средней толщины
thick	Определяет толстую левую сторону границы
length	Позволяет определить толщину левой стороны границы


Примеры:
p { border-left-width: 7px }
p { border-left-width: thick }



Параметр 'border-left'

Данный параметр позволяет определить все свойства левой стороны границы в одном объявлении.
Наследование: нет.
Может принимать следующие значения:
ЗначениеОписание

border-left-width	Задает свойства левой стороны границы
border-style
border-color


Примеры:
p { border-left: medium dashed green }
p { border-left: thin dotted #FF00FF }



Параметр 'border-right-color'

Данный параметр задает цвет правой стороны границы элемента.
Наследование: нет.
Может принимать следующие значения:
ЗначениеОписание

color	Значение цвета может быть названием цвета (red), значением rgb (rgb(255,0,0)) или шестнадцатеричным числом (#FF0000)


Примеры:
p { border-right-color: rgb(250,200,250) }
p { border-right-color: blue }



Параметр 'border-right-style'

Данный параметр задает стиль правой стороны границы элемента.
Наследование: нет.
Может принимать следующие значения:
ЗначениеОписание

None	Определяет отсутствие границы
Hidden	То же самое, что "none", за исключением разрешения конфликта границ для элементов таблицы
Dotted	Определяет пунктирную границу. Изображается в большинстве браузеров сплошной линией
Dashed	Определяет штрих-пунктирную границу. Изображается в большинстве браузеров сплошной линией
solid	Определяет сплошную границу
double	Определяет двойную границу. Толщина двойной границы будет соответствовать значению border-width
groove	Определяет 3D-границу (groove). Результат зависит от значения цвета границы
ridge	Определяет 3D-границу (ridge). Результат зависит от значения цвета границы
inset	Определяет 3D-границу (inset). Результат зависит от значения цвета границы
outset	Определяет 3D-границу (outset). Результат зависит от значения цвета границы


Пример:
p { border-right-style: dashed }



Параметр 'border-right-width'

Данный параметр задает толщину правой стороны границы элемента.
Наследование: нет.
Может принимать следующие значения:
ЗначениеОписание

thin	Определяет тонкую правую сторону границы
medium	Определяет правую сторону границы средней толщины
thick	Определяет толстую правую сторону границы
length	Позволяет определить толщину правой стороны границы


Примеры:
h1 { border-right-width: 2cm }
h2 { border-right-width: medium }



Параметр 'border-right'

Этот параметр используется для определения всех свойств правой стороны границы в одном объявлении.
Наследование: нет.
Может принимать следующие значения:
ЗначениеОписание

border-right-width	Задает свойства правой стороны границы
border-style
border-color


Примеры:
h1 { border-right: medium dotted #FFFF00 }
h2 { border-right: thin dashed green }



Параметр 'border-style'

Этот параметр задает стиль четырех сторон границы. Позволяет определить от одного до четырех стилей.
Наследование: нет.
Может принимать следующие значения:
ЗначениеОписание

None	Определяет отсутствие границы
Hidden	То же самое, что "none", за исключением разрешения конфликта границ для элементов таблицы
Dotted	Определяет пунктирную границу. Изображается в большинстве браузеров сплошной линией
Dashed	Определяет штрих-пунктирную границу. Изображается в большинстве браузеров сплошной линией
solid	Определяет сплошную границу
double	Определяет двойную границу. Толщина двойной границы будет соответствовать значению border-width
groove	Определяет 3D-границу (groove). Результат зависит от значения цвета границы
ridge	Определяет 3D-границу (ridge). Результат зависит от значения цвета границы
inset	Определяет 3D-границу (inset). Результат зависит от значения цвета границы
outset	Определяет 3D-границу (outset). Результат зависит от значения цвета границы


Примеры:
p {border-style: dashed} все четыре стороны границы будут штрих-пунктирными.
p {border-style: solid double} верхняя и нижняя стороны границы будут сплошными, левая и правая сторона граница будут двойными.
p {border-style: solid double dotted} верхняя сторона границы будет сплошной, левая и правая сторона границы будут двойными, нижняя сторона границы будет пунктирной.
p {border-style: dashed double dotted solid} верхняя сторона граница будет штрих-пунктирной, правая сторона границы будет двойной, нижняя сторона границы будет пунктирной, левая сторона границы будет сплошной.



Параметр 'border-top-color'

Этот параметр задает цвет верхней стороны границы элемента.
Наследование: нет.
Может принимать следующие значения:
ЗначениеОписание

color	Значение цвета может быть названием цвета (red), значением rgb (rgb(255,0,0)) или шестнадцатеричным числом (#FF0000)


Примеры:
h1 { border-top-color: blue }
h2 { border-top-color: rgb(200,10,250) }



Параметр 'border-top-style'

Параметр задает стиль верхней стороны границы элемента.
Наследование: нет.
Возможные значения:
ЗначениеОписание

None	Определяет отсутствие границы
Hidden	То же самое, что "none", за исключением разрешения конфликта границ для элементов таблицы
Dotted	Определяет пунктирную границу. Изображается в большинстве браузеров сплошной линией
Dashed	Определяет штрих-пунктирную границу. Изображается в большинстве браузеров сплошной линией
solid	Определяет сплошную границу
double	Определяет двойную границу. Толщина двойной границы будет соответствовать значению border-width
groove	Определяет 3D-границу (groove). Результат зависит от значения цвета границы
ridge	Определяет 3D-границу (ridge). Результат зависит от значения цвета границы
inset	Определяет 3D-границу (inset). Результат зависит от значения цвета границы
outset	Определяет 3D-границу (outset). Результат зависит от значения цвета границы


Примеры:
p { border-top-style: dotted }



Параметр 'border-top-width'

Данный параметр задает толщину верхней стороны границы элемента.
Наследование: нет.
Возможные значения:
ЗначениеОписание

thin	Определяет тонкую верхнюю сторону границы
medium	Определяет верхнюю сторону границы средней толщины
thick	Определяет толстую верхнюю сторону границы
length	Позволяет определить толщину верхней стороны границы


Примеры:
p { border-top-width: medium }
p { border-top-width: 1cm }



Параметр 'border-top'

Данный параметр определяет все свойства верхней стороны границы в одном объявлении.
Наследование: нет.
Может принимать следующие значения:
ЗначениеОписание

border-top-width	Задает свойства верхней стороны границы
border-style
border-color


Примеры:
p { border-top: thick dashed green }
p { border-top: dotted #FF0000 }



Параметр 'border-width'

Данный параметр определяет в одном объявлении толщину четырех сторон границы и может иметь от одного до четырех значений.
Наследование: нет.
Возможные значения:
ЗначениеОписание

thin	Определяет тонкую границу
medium	Определяет границы средней толщины
thick	Определяет толстую границу
length	Позволяет определить толщину границ


Примеры:
p {border-width: thick} все четыре стороны границы будут толстыми.
p {border-width: thick thin} верхняя и нижняя стороны границы будут толстыми, левая и правая сторона границы будут тонкими.
p {border-width: medium thick thin} верхняя сторона границы будет иметь среднее значение, левая и правая стороны границы будут толстыми, нижняя сторона границы будет тонкой.
p {border-width: thick thin thin medium} верхняя сторона границы будет толстой, правая сторона границы будет тонкой, нижняя сторона границы будет тонкой, левая сторона границы будет иметь среднее значение.



Параметр 'border'

Данный параметр позволяет определить все свойства четырех сторон границы в одном объявлении. Но это свойство не может определить различные значения для каждой стороны границы, как, например, "margin" и "padding".
Наследование: нет.
Может принимать следующие значения:
ЗначениеОписание

border-width	Задает свойства для четырех сторон границы
border-style
border-color


Примеры:
h1 { border: medium solid #FFFF00 }
h2 { border: dotted green }



Параметры границы в CSS

Параметры границы в CSS позволяют определить стиль и цвет рамки вокруг элемента. Если в HTML для создания границ вокруг текста использовались таблицы, то в CSS можно создавать границы, которые применимы к любому элементу. Кроме того, возможности параметров границ в CSS расширены.
Данные параметры поддерживают следующие браузеры: Internet Explorer, Firefox, Netscape.
ПараметрОписаниеЗначенияIEFNW3C

border	Параметр для задания свойств всех четырех сторон границы в одном объявлении	border-width	4	1	4	1
		border-style
		border-color
border-bottom	Параметр для задания всех свойств нижней стороны границы в одном объявлении	border-bottom-width	4	1	6	1
		border-style
		border-color
border-bottom-color	Задает цвет нижней стороны границы	border-color	4	1	6	2
border-bottom-style	Задает стиль нижней стороны границы	border-style	4	1	6	2
border-bottom-width	Задает толщину нижней стороны границы	thin	4	1	4	1
		medium
		thick
		length
border-color	Задает цвета четырех сторон границы, может иметь от одного до четырех значений	color	4	1	6	1
border-left	Параметр для задания всех свойств левой стороны границы в одном объявлении	border-left-width	4	1	6	1
		border-style
		border-color
border-left-color	Задает цвет левой стороны границы	border-color	4	1	6	2
border-left-style	Задает стиль левой стороны границы	border-style	4	1	6	2
border-left-width	Задает толщину левой стороны границы	thin	4	1	4	1
		medium
		thick
		length
border-right	Параметр для задания всех свойств правой стороны границы в одном объявлении	border-right-width	4	1	6	1
		border-style
		border-color
border-right-color	Задает цвет правой стороны границы	border-color	4	1	6	2
border-right-style	Задает стиль правой стороны границы	border-style	4	1	6	2
border-right-width	Задает толщину правой стороны границы	thin	4	1	4	1
		medium
		thick
		length
border-style	Задает стили четырех сторон границы, может иметь от одного до четырех стилей	none	4	1	6	1
		hidden
		dotted
		dashed
		solid
		double
		groove
		ridge
		inset
		outset
border-top	Параметр для задания всех свойств верхней стороны границы в одном объявлении	border-top-width	4	1	6	1
		border-style
		border-color
border-top-color	Задает цвет верхней стороны границы	border-color	4	1	6	2
border-top-style	Задает стиль верхней стороны границы	border-style	4	1	6	2
border-top-width	Задает толщину верхней стороны границы	thin	4	1	4	1
		medium
		thick
		length
border-width	Параметр для задания толщин четырех сторон границы в одном объявлении, может иметь от одного до четырех значений	thin	4	1	4	1
		medium
		thick
		length





Отступы в CSS

Они определяют пространство вокруг элементов. Допускают использование отрицательных значений для того, чтобы создавать наложение содержимого. Все отступы (верхний, правый, нижний и левый) можно изменять независимо, используя отдельные параметры, а можно использовать параметр margin для изменения всех отступов одновременно.
Отступы заданные по умолчанию в браузерах:
Netscape и Internet Explorer — тег body имеет отступ, равный 8px. Opera вместо этого использует по умолчанию поле величиной 8px.
Таким образом, если требуется настроить отступы для всей страницы, чтобы они правильно выводились в Opera, то для body необходимо задать также поле!
Поддерживается следующими браузерами: Internet Explorer, Firefox, Netscape.
ПараметрОписаниеЗначенияIEFNW3C

margin	Параметр для задания отступов в одном объявлении	margin-top	4	1	4	1
		margin-right
		margin-bottom
		margin-left
margin-bottom	Задает нижний отступ элемента	auto	4	1	4	1
		length
		%
margin-left	Задает левый отступ элемента	auto	3	1	4	1
		length
		%
margin-right	Задает правый отступ элемента	auto	3	1	4	1
		length
		%
margin-top	Задает верхний отступ элемента	auto	3	1	4	1
		length
		%





Параметр 'margin-bottom'

Данный параметр задает нижний отступ элемента. Позволяет определять отрицательные значения.
Наследование: нет.
Может принимать следующие значения:
ЗначениеОписание

Auto	Нижний отступ задает браузер
Length	Определяет фиксированный нижний отступ
%	Определяет нижний отступ в % от общей высоты документа


Примеры:
p { margin-bottom: 5% }
p { margin-bottom: auto }



Параметр 'margin-left'

Этот параметр задает левый отступ элемента. Позволяет определять отрицательные значения.
Наследование: нет.
Может принимать следующие значения:
ЗначениеОписание

Auto	Левый отступ задает браузер
Length	Определяет левый отступ фиксированной ширины
%	Определяет левый отступ в % общей ширины документа


Примеры:
p { margin-left: 2% }
p { margin-left: -5px }



Параметр 'margin-right'

Этот параметр задает правый отступ элемента. Позволяет определять отрицательные значения.
Наследование: нет.
Может принимать следующие значения:
ЗначениеОписание

Auto	Правый отступ задает браузер
Length	Определяет правый отступ фиксированной величины
%	Определяет правый отступ в % общей ширины документа


Примеры:
p { margin-right: 2px }
p { margin-right: 10% }



Параметр 'margin-top'

Данный параметр задает верхний отступ элемента. Позволяет определять отрицательные значения.
Наследование: нет.
Возможные значения:
ЗначениеОписание

Auto	Верхний отступ задает браузер
Length	Определяет верхний отступ фиксированной ширины
%	Определяет верхний отступ в % от общей высоты документа


Примеры:
p { margin-top: auto }
p { margin-top: -5px }



Параметр 'margin'

Параметр определяет все отступы в одном объявлении. Позволяет определять отрицательные значения.
Наследование: нет.
Может принимать следующие значения:
ЗначениеОписание

margin-top	Задают свойства отступов. Значения задаются в % (определяет отступ в % общей высоты/ширины документа), длиной (определяет фиксированный отступ) и автоматически (отступ задает браузер)
margin-right
margin-bottom
margin-left


Примеры:
p {margin: 2px} все четыре отступа будут иметь отступ, равный 2px.
p {margin: 5px 10%} верхний и нижний отступ будут по 5px, левый и правый отступ будут составлять 10% общей ширины документа.
p {margin: 5px 10% -2px} верхний отступ будет равен 5px, левый и правый отступ будут составлять 10% общей ширины документа, нижний отступ будет равен 2px.
p {margin: 5px 10% -2px auto} верхний отступ будет 5px, правый отступ будет составлять 10% общей ширины документа, нижний отступ будет 2px, левый отступ будет задан браузером.



Этот пример показывает, как задать

• Этот пример показывает, как задать для текста левый отступ.
  

  Заголовок h1 без отступов

  Заголовок h1 с отступами

  
  
• Этот пример показывает, как задать для текста правый отступ.
  

  Заголовок h2 без отступов

  Заголовок h2 с с заданным правым отступом

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

  Заголовок h1 без отступов

  Заголовок h1 с заданным верхним отступом

• Этот пример показывает, как задать нижний отступ текста.
  

  Заголовок h2 без отступов

  Заголовок h2 с заданным нижним отступом

  Заголовок h2 без отступов

  
  
• Этот пример показывает, как задать параметры всех отступов в одном объявлении.
  

  Заголовок h1 без отступов

  Заголовок h1 с заданными отступами

  Заголовок h1 без отступов

  
  




Параметр 'padding-bottom'

Этот параметр задает нижнее поле элемента. Не позволяет задавать отрицательные значения.
Наследование: нет.
Может принимать следующие значения:
ЗначениеОписание

Length	Определяет фиксированное нижнее поле
%	Определяет нижнее поле в % от высоты ближайшего элемента


Пример:
li { padding-bottom: 5% }



Параметр 'padding-left'

Данный параметр задает левое поле элемента. Не позволяет задавать отрицательные значения.
Наследование: нет.
Может принимать следующие значения:
ЗначениеОписание

Length	Определяет фиксированное левое поле
%	Определяет левое поле в % от высоты ближайшего элемента


Пример:
li { padding-left: 2px }
li { padding-left: 5% }



Параметр 'padding-right'

Данный параметр задает правое поле элемента. Не позволяет задавать отрицательные значения.
Наследование: нет.
Может принимать следующие значения:
ЗначениеОписание

Length	Определяет фиксированное правое поле
%	Определяет правое поле в % от высоты ближайшего элемента


Пример:
li { padding-right: 2px }



Параметр 'padding-top'

Параметр padding-top задает верхнее поле элемента. Не позволяет задавать отрицательные значения.
Наследование: нет.
Может принимать следующие значения:
ЗначениеОписание

Length	Определяет фиксированное верхнее поле
%	Определяет верхнее поле в % от высоты ближайшего элемента


Пример:
li { padding-top: 2px }



Параметр 'padding'

Данный параметр предназначен для задания всех полей в одном объявлении. Не позволяет задавать отрицательные значения.
Наследование: нет.
Может принимать следующие значения:
ЗначениеОписание

padding-top	Устанавливает поля. Значения задаются в % (определяет поле в % от ширины ближайшего элемента) и длиной (определяет фиксированное поле)
padding-right
padding-bottom
padding-left


Примеры:
p {padding: 2px}
для всех четырех сторон будет задано поле 2px.
p {padding: 5% 2px}
верхнее и нижнее поле будет 5%, левое и правое поле будет составлять 2px от ширины ближайшего элемента.
p {padding: 2px 7px 5%}
верхнее поле будет 2px, левое и правое поле будет составлять 7px от ширины ближайшего элемента, нижнее поле будет 5%.
p {padding: 2px 5% 7px 5px}
верхнее поле будет 2px, правое поле будет 5% от ширины ближайшего элемента, нижнее поле будет 7px, левое поле будет 5px.



Параметры полей в CSS

Определяют пространство между границей элемента и содержимым элемента, для которого не предусмотрены отрицательные значения. Все поля (верхнее, правое, нижнее и левое) можно изменять независимо друг от друга. Существует также параметр padding, который позволяет определять нескольких полей в одном объявлении.
Поддерживается следующими браузерами: Internet Explorer, Firefox, Netscape.
ПараметрОписаниеЗначенияIEFNW3C

padding	Параметр для задания всех полей в одном объявлении	padding-top	4	1	4	1
		padding-right
		padding-bottom
		padding-left
padding-bottom	Задает нижнее поле элемента	length	4	1	4	1
		%
padding-left	Задает левое поле элемента	length	4	1	4	1
		%
padding-right	Задает правое поле элемента	length	4	1	4	1
		%
padding-top	Задает верхнее поле элемента	length	4	1	4	1
		%





Этот пример показывает, как задать

• Этот пример показывает, как задать левое поле элементов списка.
  
• элемент списка
• элемент списка
• элемент списка


• Этот пример показывает, как задать правое поле элементов списка.
  
• элемент списка
• элемент списка
• элемент списка


• Этот пример показывает, как задать верхнее поле элементов списка.
  
• элемент списка
• элемент списка
• элемент списка


• Этот пример показывает, как задать нижнее поле элементов списка.
  
• элемент списка
• элемент списка
• элемент списка


• Пример показывает, как с помощью параметра padding задать все поля в одном объявлении. Допускается определение от одного до четырех значений.
  
• элемент списка с одинаковыми полями со всех сторон
• элемент списка
• элемент списка, который имеет верхнее и нижнее поле, равное 1 см, а левое и правое поля — равные 2 см





Параметр 'list-style-image'

Данный параметр позволяет заменить маркер элемента списка указанным изображением. Необходимо определять параметр "list-style-type" на тот случай, если изображение будет недоступно.
Наследование:да.
Может принимать следующие значения:
ЗначениеОписание

url	Путь доступа к изображению
None	Изображение не выводится


Пример:
ul { list-style-image: url("www.intuit.ru/speciality/image.gif"); list-style-type: square }



Параметр 'list-style-position'

Параметр определяет способ размещения маркера элемента списка.
Наследование:да.
Может принимать следующие значения:
ЗначениеОписание

inside	Маркер смещен внутрь текста
outside	Маркер располагается слева от текста


Пример:
ul { list-style-position: outside }



Параметр 'list-style-type'

Данный параметр задает тип маркера элемента списка.
Наследование:да.
Может принимать следующие значения:
ЗначениеОписание

none	Без маркера
disc	Маркер — закрашенный круг
circle	Маркер — окружность
square	Маркер — закрашенный квадрат
decimal	Маркер — число
decimal-leading-zero	Маркер — число с добавленным ведущим нулем (01, 02, 03 b и т.д.)
lower-roman	Маркер — римские цифры, представленные строчными буквами (i, ii, iii, iv, v и т.д. )
upper-roman	Маркер — римске цифры, представленные прописными буквами (I, II, III, IV, V и т.д.)
lower-alpha	Маркер — латинские строчные буквы (a, b, c, d, e и т.д.)
upper-alpha	Маркер —- латинские прописные буквы (A, B, C, D, E и т.д.)
lower-greek	Маркер — греческие прописные буквы (альфа, бета, гамма и т.д.)
lower-latin	Маркер — латинские строчные буквы (a, b, c, d, e и т.д.)
upper-latin	Маркер — латинские прописные буквы (A, B, C, D, E и т.д.)
hebrew	Традиционная еврейская нумерация
armenian	Традиционная армянская нумерация
georgian	Традиционная грузинская нумерация (an, ban, gan, и т.д.)
cjk-ideographic	Маркер — простые идеографические числа
hiragana	Маркер — a, i, u, e, o, ka, ki, и т.д.
katakana	Маркер — A, I, U, E, O, KA, KI и т.д.
hiragana-iroha	Маркер — i, ro, ha, ni, ho, he, to и т.д.
katakana-iroha	Маркер — I, RO, HA, NI, HO, HE, TO и т.д.


Примеры:
ol { list-style-type: circle }
ul { list-style-type: decimal }



Параметр 'list-style'

Данный параметр определяет все характеристики списка в одном объявлении.
Наследование:да.
Может принимать следующие значения:
ЗначениеОписание

list-style	Задает характеристики списка
list-style-type
list-style-position
list-style-image


Примеры:
ol { list-style: square inside url("www.intuit.ru/departament/image.gif") }
ul { list-style: circle inside }



Параметры списков в CSS

Как было отмечено выше, параметры списков в CSS позволяют разместить и изменять маркеры элементов списка, задавать изображение в качестве маркера элемента списка.
Поддерживаются следующими браузерами: Internet Explorer, Firefox, Netscape.
ПараметрОписаниеЗначенияIEFNW3C

list-style	Параметр для задания всех характеристик списка в одном объявлении	list-style-type	4	1	6	1
		list-style-position
		list-style-image
list-style-image	Задает изображение в качестве маркера элемента списка	none	4	1	6	1
		url
list-style-position	Задает размещение в списке маркера элемента списка	inside	4	1	6	1
		outside
list-style-type	Задает тип маркера элемента списка	none	4	1	4	1
		disc
		circle
		square
		decimal
		decimal-leading-zero
		lower-roman
		upper-roman
		lower-alpha
		upper-alpha
		lower-greek
		lower-latin
		upper-latin
		hebrew
		armenian
		georgian
		cjk-ideographic
		hiragana
		katakana
		hiragana-iroha
		katakana-iroha
marker-offset		auto		1	7	2
		length





Этот пример показывает, как задать

• Этот пример показывает, как задать различные маркеры элементов списка.
  
  1. Первый элемент
  2. Второй элемент
  3. Третий элемент
  
  
  • Первый элемент
  • Второй элемент
  • Третий элемент
  
  
  1. Первый элемент
  2. Второй элемент
  3. Третий элемент
  
  
  • Первый элемент
  • Второй элемент
  • Третий элемент
  
  
  
  • Этот пример показывает, как задать различные маркеры элементов списка.
    
    
    1. Первый элемент
    2. Второй элемент
    3. Третий элемент
    
    
    • Первый элемент
    • Чай
    • Третий элемент
    
    
    1. Первый элемент
    2. Второй элемент
    3. Третий элемент
    
    
    • Первый элемент
    • Второй элемент
    • Третий элемент
    
    
    • Первый элемент
    • Второй элемент
    • Третий элемент
    
    
    

    Форматирование в CSS

    Данные параметры позволяют определить, как и в каком месте вывести элемент.
    Примеры:
    
    • В примере показано, как вывести элемент.
      
      

      Эта информация не будет отображена

      Между этими двумя элементами

      нет интервала

      
      
    • Пример показывает, как создать смещение изображения в параграфе вправо.
      В параграфе изображение смещено вправо. В параграфе изображение смещено вправо.
      
      
      
    • Пример показывает, как создать смещение изображения в параграфе вправо и добавить к изображению границы и отступы.
      Изображение смещено вправо, имеет границу из сплошной линии и отступы.
      
      
    • Пример показывает, как можно сместить изображение с заголовком вправо.
      
      
      Изучайте CSS!
      
      В данном примере элемент div имеет ширину 160 пикселей, содержит изображение, смещается вправо. Для дистанцирования текста от div, к последнему добавлены отступы, а для выделения картинки и заголовока - границы и поля.
      
      
    • Пример показывает, как можно сместить первую букву параграфа влево.
      
      В параграфе элемент b имеет ширину - 1. 2 размера текущего шрифта, размер шрифта - 500%, межстрочный интервал - 95%, шрифт буквы - Comic Sans MS.
      
      
      
    • Пример показывает, как создать горизонтальное меню.
      
      
    • Ссылка 1
    • Ссылка 2
    • Ссылка 3
    • Ссылка 4
    
    
    В примере элементы ol и a смещены влево. У элементов li отсутствует разрыв строки перед или после элемента.
    
    
    
    
    
    
    • В примере показано, как позиционировать элемент относительно его обычного положения.
      
      

      Это заголовок в обычном положении

      Параграф имеет смещение относитильно своего обычного положения
      

      Параграф имеет смещение относитильно своего обычного положения
      

      Параграф имеет смещение относитильно своего обычного положения
      

      Параграф имеет смещение относитильно своего обычного положения
      
      
      

    • В примере показано, как позиционировать элемент с помощью абсолютного значения.
      
      

      Параграф позиционируется с абсолютным значением
      

      С помощью абсолютного позиционирования элемент можно поместить в любом месте страницы. Параграф имеет смещение - на 50px от левого края страницы и на 50px от верхнего края страницы.

      
      
      
    • В примере показано, как сделать элемент невидимым.
      
      

      Параграф виден
      

      Параграф не виден
      
      
      

    • В примере показано, как изменить курсор.
      
      
      
      

      Курсоры:

      
      
      
      
      Auto
      Crosshair
      Default
      Pointer
      Move
      text
      wait
      help
      
      
      

      Курсоры типа resize:

      
      
      
      e-resize
      ne-resize
      nw-resize
      n-resize
      se-resize
      sw-resize
      s-resize
      w-resize
      
      
      
    
    
    

    © 2003-2007 INTUIT.ru. Все права защищены.

    
    

    Параметр 'height'

    Используется для задания высоты элемента.
    Наследование: нет.
    Пример:
    p { height: 50px }
    Может принимать следующие значения:
    ЗначениеОписание

    auto	Браузер вычисляет реальную высоту
    length	Определяет высоту в px, см, и т.д.
    %	Определяет высоту в % от объемлющего блока

    
    
    

    Параметр 'line-height'

    Используется для задания интервала между строками.
    Наследование: Да.
    Примечание: Отрицательные значения не допускаются.
    Примеры:
    div { line-height: 2.1 }
    div { line-height: 10pt }
    div { line-height: 120% }
    Может принимать следующие значения:
    ЗначениеОписание

    normal	Задает приемлемый интервал между строками
    number	Задает число, которое при умножении на размер текущего шрифта задает интервал между строками
    length	Задает фиксированный интервал между строками
    %	Задает интервал между строками в % от размера текущего шрифта

    
    
    

    Параметр 'max-height'

    Используется для задания максимальной высоты элемента.
    Наследование: нет.
    Пример:
    div { max-height: 200% }
    Может принимать следующие значения:
    ЗначениеОписание

    none	Отсутствие ограничений на максимальную высоту элемента
    length	Определяет максимальную высоту элемента
    %	Определяет максимальную высоту элемента в % от объемлющего блока

    
    
    

    Параметр 'max-width'

    Используется для задания максимальной ширины элемента.
    Наследование: нет.
    Пример:
    h6 { max-width: 75% }
    Может принимать следующие значения:
    ЗначениеОписание

    none	Отсутствие ограничений на максимальную ширину элемента
    length	Определяет максимальную ширину элемента
    %	Определяет максимальную ширину элемента в % от объемлющего блока

    
    
    

    Параметр 'min-height'

    Используется для задания минимальной высоты элемента.
    Наследование: нет.
    Пример:
    div { min-height: 20% }
    Может принимать следующие значения:
    ЗначениеОписание

    length	Определяет минимальную высоту элемента
    %	Определяет минимальную высоту элемента в % от объемлющего блока

    
    
    

    Параметр 'min-width'

    Используется для задания минимальной ширины элемента.
    Наследование: нет.
    Пример:
    h6 { min-width: 20% }
    Может принимать следующие значения:
    ЗначениеОписание

    length	Определяет минимальную ширину элемента
    %	Определяет минимальную ширину элемента в % от объемлющего блока

    
    
    

    Параметр 'width'

    Используется для задания ширины элемента.
    Наследование: нет.
    Пример:
    hr { width: 20% }
    Может принимать следующие значения:
    ЗначениеОписание

    auto	Браузер вычисляет реальную ширину
    %	Определяет ширину в % от ширины родительского элемента
    length	Определяет ширину в px, см, и т.д.

    
    
    

    Параметры размеров элементов CSS

    Данные параметры позволяют управлять высотой и шириной элемента, а также изменить межстрочный интервал.
    Данные свойства поддерживаются следующими браузерами (в скобках сокращенный вариант, который применяется далее в таблицах парметров и значений): Internet Explorer (IE), Firefox (F), Netscape(N).
    ПараметрОписаниеЗначенияIEFNW3C

    height	Задает высоту элемента	auto	4	1	6	1*
    		length
    		%
    line-height	Задает интервал между строками	normal	4	1	4	1
    		number
    		length
    		%
    max-height	Задает максимальную высоту элемента	none	-	1	6	2
    		length
    		%
    max-width	Задает максимальную ширину элемента	none	-	1	5	2
    		length
    		%
    min-height	Задает минимальную высоту элемента	length	-	1	6	2
    		%
    min-width	Задает минимальную ширину элемента	length	-	1	6	2
    		%
    width	Задает ширину элемента	auto	4	1	4	1
    		%
    		length

    
    (* здесь и далее число в столбце "W3C" указывает в какой спецификации CSS определен параметр (CSS1 или CSS2)).
    
    

    В примере показано, как увеличить

    В примере показано, как увеличить интервал между строками.
    
    
    Стандартный интервал между строками.
    Стандартный интервал между строками.
    
    
    
    Уменьшенный интервал между строками.
    Уменьшенный интервал между строками.
    
    
    
    Увеличенный интервал между строками.
    Увеличенный интервал между строками.
    
    
    
    

    Параметр 'clear'

    Данный параметр задает стороны элемента, где не допускаются другие плавающие элементы. Плавающие элементы - изображения и текстовые элементы, которые появляются в другом элементе.
    Примечание: При использовании с параметром "float" не всегда работает как ожидается.
    Наследование: нет.
    Пример:
    div { clear: both }
    div { clear: left }
    Может принимать следующие значения:
    ЗначениеОписание

    left	Плавающие элементы не допускаются слева
    right	Плавающие элементы не допускаются справа
    both	Плавающие элементы не допускаются ни справа, ни слева
    none	Плавающие элементы допускаются с любой стороны

    
    
    

    Параметр 'cursor'

    Данный параметр определяет тип курсора, который будет выводиться при указании на элемент.
    Наследование: да.
    Примеры:
    pre { cursor: pointer }
    div { cursor : url("general.cur"), url("other.cur"), text; }
    Может принимать следующие значения:
    ЗначениеОписание

    url	url специального курсора, который будет использоваться Примечание: Всегда определяйте базовый курсор в конце списка, который будет использоваться, если ни один из определенных url курсоров невозможно использовать.
    default	Курсор по умолчанию (часто стрелка)
    auto	Курсор задает браузер
    crosshair	Курсор изображается как перекрестие
    pointer	Курсор изображается как указатель (рука), который обозначает ссылку
    move	Курсор указывает объект, который можно переместить
    e-resize	Курсор, определяющий перемещение края бокса вправо (east)
    ne-resize	Курсор, определяющий перемещение края бокса вверх и вправо (north/east)
    nw-resize	Курсор, определяющий перемещение края бокса вверх и влево (north/west)
    n-resize	Курсор, определяющий перемещение края бокса вверх (north)
    se-resize	Курсор, определяющий перемещение края бокса вниз и вправо (south/east)
    sw-resize	Курсор, определяющий перемещение края бокса вниз и влево (south/west)
    s-resize	Курсор, определяющий перемещение края бокса вниз (south)
    w-resize	Курсор, определяющий перемещение края бокса влево (west)
    text	Курсор используемый для текста
    wait	Курсор, указывающий на занятость программы (часто песочные часы)
    help	Курсор, указывающий, что имеется справочная информация (часто знак вопроса)

    
    Примечания для браузеров:
    Internet Explorer:
    Чтобы вывести изображение руки, можно использовать нестандартное значение hand следующим образом: {cursor: hand}
    
    

    Параметр 'display'

    Данный параметр определяет, как в документе будет показан элемент.
    Наследование: нет.
    Примеры:
    pre { display: block }
    strong { display: inline }
    img { display: none }
    h1, h3 { display: no }
    Может принимать следующие значения:
    ЗначениеОписание

    none	Элемент не будет выводиться
    inline	Элемент будет выводиться как элемент уровня блока, с разрывом строки перед и после элемента
    block	Элемент будет выводиться как элемент строки, без разрыва строки перед или после элемента.
    list-item	Элемент будет выводиться как список
    run-in	Элемент будет выводиться на уровне блока или как внутристрочный элемент, в зависимости от контекста.
    compact	Элемент будет выводиться на уровне блока или как внутристрочный элемент, в зависимости от контекста.
    marker
    table	Элемент будет выведен как таблица блока (как ), с разрывом строки перед и после таблицы inline-table Элемент будет выведен как внутристрочная таблица (как ), без разрыва строки перед или после таблицы. ) ) ) ))) table-row-group Элемент выводится как группа из одной или нескольких строк (как table-header-group Элемент выводится как группа из одной или нескольких строк (как table-footer-group Элемент выводится как группа из одной или нескольких строк (как table-row Элемент выводится как строка таблицы (как table-column-group Элемент выводиться как группа из одного или нескольких столбцов (как table-column Элемент выводиться как столбец ячеек (как table-cell Элемент выводиться как ячейка таблицы (как и ) table-caption Элемент выводиться как заголовок таблицы (как ) Параметр 'position' Данный параметр помещает элемент в статическое, относительное, абсолютное или фиксированное положение. Наследование: нет. Пример: p { position:static; } Может принимать следующие значения: ЗначениеОписание static Элемент помещается в обычное положение (согласно нормальному потоку). Со значением "static" не используются параметры "left" и "top". relative Смещает элемент относительно его нормального положения, поэтому "left:20" добавляет 20 пикселей к позиции LEFT элемента. absolute С помощью значения "absolute" элемент можно поместить в любом месте страницы. Позиция элемента определяется с помощью параметров "left", "top", "right", и "bottom" fixed Параметр 'visibility' Этот параметр определяет видимость или невидимость элемента. Примечания: Невидимые элементы занимают место на странице. Для того, чтобы создать невидимые элементы, которые не занимают место необходимо использовать параметр "display". Этот параметр можно использовать со сценариями для создания Динамического HTML. Наследование: нет. Примеры: pre { visibility: hidden } Может принимать следующие значения: ЗначениеОписание visible Элемент видим hidden Элемент невидим collapse При использовании в табличных элементах это значение удаляет строку или столбец, но не влияет на компоновку таблицы. Пространство, занимаемое строкой или столбцом, будет доступно для другого содержимого. Если этот параметр используется с другими элементами, он действует как "hidden" Свойство 'float' Данное свойство определяет, где появится в другом элементе изображение или текст. Примечания: Если в строке слишком мало места для плавающего элемента, он переносится на следующую строку и продолжается пока строка имеет достаточно места. Перед float должны идти - содержание, фон, и границы внутристрочных элементов, содержание блочного элемента, после - фон и границы блочного элемента. Наследование: нет. Пример: p { float: right } Может принимать следующие значения: ЗначениеОписание left Изображение или текст смещается в родительском элементе влево. right Изображение или текст смещается в родительском элементе вправо. none Изображение или текст будут выводиться в том месте, где они встретились в тексте Параметр 'bottom' Данный параметр определяет нижний край элемента. Примечание:Если параметр "position" имеет значение "static", параметр "bottom" не оказывает влияния. Наследование: нет. Примеры: В примере показано, как задать нижний край элемента pre на 50 px выше нижнего края окна: pre { position: absolute; bottom: 50px } В примере показано, как задать нижний край элемента pre на 50 px ниже нижнего края окна: pre { position: absolute; bottom: -50px } Может принимать следующие значения: ЗначениеОписание auto Позволяет браузеру самостоятельно вычислить нижнюю позицию % Задает нижнюю позицию в % от положения нижнего края окна length Задает нижнюю позицию в px, см, и т.д. от нижнего края окна. Допускаются отрицательные значения. Параметр 'clip' Данный параметр задает форму элемента. В ситуации если, например, изображение больше того элемента в котором располагается, параметр позволяет определить размеры изображения, обрезать по форме и вывести. Примечание: Этот параметр нельзя использовать для элементов с параметром "overflow", заданным как "visible". Наследование: нет. Пример: p { position:absolute; clip:rect(2px 175px 100px 0px) } Может принимать следующие значения: ЗначениеОписание shape Задает форму элемента. Допустимым значением формы является: rect (top, right, bottom, left) auto Браузер задает форму элемента Параметр 'left' Данный параметр определяет левый край элемента. Примечание: Если параметр "position" имеет значение "static", параметр "left" не оказывает влияния. Наследование: нет. Примеры: В примере показано, как задать левый край элемента pre в 50 px справа от левого края окна: pre { position: absolute; left: 50px } В примере показано, как задать левый край элемента pre в 50 px слева от левого края окна: pre { position: absolute; left: -50px } Может принимать следующие значения: ЗначениеОписание auto Позволяет браузеру вычислить левую позицию. % Задает левую позицию в % от значения для левого края окна. length Задает левую позицию в px, см и т.д. от левого края окна. Допускаются отрицательные значения. Параметр 'overflow' Данный параметр определяет, что происходит, когда содержимое элемента переполняет его область. Наследование: нет. Пример: div { overflow: auto } Может принимать следующие значения: ЗначениеОписание visible Содержимое не обрезается. Оно выводится за пределами элемента. hidden Содержимое обрезается, но браузер не выводит полосу прокрутки для просмотра всего содержимого. scroll Содержимое обрезается, но браузер выводит полосу прокрутки для просмотра всего содержимого. auto Если содержимое обрезается, то браузер должен вывести полосу прокрутки для просмотра всего содержимого. Параметр 'right' Данный параметр определяет правый край элемента. Примечание: Если параметр "position" имеет значение "static", то параметр "right" не оказывает влияния. Наследование: нет. Примеры: В примере показано, как задать правый край элемента pre на 50 px влево от правого края окна: pre { position: absolute; right: 50px } В примере показано, как задать правое поле элемента pre на 50 px вправо от правого края окна: pre { position: absolute; right: -50px } Может принимать следующие значения: ЗначениеОписание auto Позволяет браузеру вычислить правую позицию. % Задает правую позицию в % от значения правого края окна. length Задает правую позицию в px, см, и т.д. от правого края окна. Допускаются отрицательные значения. Параметр 'top' Данный параметр определяет верхний край элемента. Примечание: Если параметр "position" имеет значение "static", то параметр "top" не оказывает влияния. Наследование: нет. Примеры: В примере показано, как задать верхний край элемента pre на 50 px ниже верхнего края окна: pre { position: absolute; top: 50px } В примере показано, как задать верхний край элемента pre на 50 px выше верхнего края окна: pre { position: absolute; top: -50px } Может принимать следующие значения: ЗначениеОписание auto Позволяет браузеру вычислить верхнюю позицию. % Задает верхнюю позицию в % от значения верхнего края окна. length Задает верхнюю позицию в px, см, и т.д. от верхнего края окна. Допускаются отрицательные значения. Параметр 'vertical-align' Данный параметр задает вертикальное выравнивание элемента. Наследование: нет. Примеры: img { vertical-align: baseline } Может принимать следующие значения: ЗначениеОписание baseline Элемент размещается на базовой строке родительского элемента. sub Выравнивает элемент как нижний индекс super Выраванивает элемент как верхний индекс top Вершина элемента выравнивается с вершиной самого высокого элемента в строке text-top Вершина элемента выравнивается с вершиной шрифта родительского элемента middle Элемент помещается в середине родительского элемента bottom Нижняя часть элемента выравнивается с самым нижним элементом в строке text-bottom Нижняя часть элемента выравнивается с минимальной нижней точкой родительского элемента length % Выравнивает элемент в % от значения параметра "line-height". Допускаются отрицательные значения. Параметр 'z-index' Данный параметр задает порядковый номер элемента в стеке. Элемент с большим порядковым номером стека всегда находится перед элементом с меньшим порядковым номером стека. Примечания: Элементы могут иметь отрицательные порядковые номера стека. Z-index работает только с теми элементами, которые были позиционированы (например, position:absolute;)! Наследование: нет. Пример: img { position:absolute z-index: 1 } Может принимать следующие значения: ЗначениеОписание auto Порядковый номер элемента в стека равен номеру родительского элемента number Задает порядковый номер элемента в стеке Параметры позиционирования в CSS Параметры позиционирования в CSS позволяют: определить левую, правую, верхнюю, и нижнюю позиции элемента: задать форму элемента: поместить элемент позади другого: определить, что будет происходить, когда содержимое элемента слишком большое для размещения в указанной области. Данные параметры поддерживаются следующими браузерами: Internet Explorer, Firefox, Netscape. ПараметрОписаниеЗначенияIEFNW3C bottom Задает, насколько далеко нижний край элемента находится выше/ниже нижнего края родительского элемента auto 5 1 6 2 % length clip Задает форму элемента. Элемент вырезается по форме и выводится. shape 4 1 6 2 auto left Задает, насколько далеко левый край элемента находится правее/левее левого края родительского элемента auto 4 1 4 2 % length overflow Определяет, что происходит, когда содержимое элемента переполняет его область visible 4 1 6 2 hidden scroll auto position Помещает элемент в статическое, относительное, абсолютное или фиксированное положение static 4 1 4 2 relative absolute fixed right Задает, насколько далеко правый край элемента находится левее/правее правого края родительского элемента auto 5 1 6 2 % length top Задает, насколько далеко верхний край элемента находится выше/ниже верхнего края родительского элемента auto 4 1 4 2 % length vertical-align Задает выравнивание элемента по вертикали baseline 4 1 4 1 sub super top text-top middle bottom text-bottom length % z-index Задает порядковый номер элемента в стеке auto 4 1 6 2 number В примере показано, как позиционировать В примере показано, как позиционировать элемент относительно его обычного положения. Параграф Параграф смещен влево относительно обычного положения Параграф смещен вправо относительно обычного положения В примере показано, как позиционировать элемент с помощью абсолютного значения. Параграф имеет абсолютное местоположение и смещен на 100px от левого края страницы и на 150px от верха страницы Параграф В примере показано, как задать форму элемента, по которой он обрезается и выводится. Обрезается параграф параграф параграф: В примере показано, как использовать параметр overflow для определения действий, когда содержимое элемента не помещается в указанной области. Если содержимое элемента превышает заданные значения ширины и высоты необходимо использовать параметр overflow который определдяет, что делать в этой ситуации. В данном случае переполняется бокс элемента и overflow определяет, что делать - установлено значение auto. В примере показано, как выравнять в тексте изображение по вертикали. Пара- граф. Пара- граф. В примере показано, как можно использовать Z-index для размещения элемента "позади" другого элемента. Пример использования Z-index Изображение с z-index равным -1 имеет меньший приоритет, поэтому расположено "позади". В примере показано, что произойдет если элементы из предыдущего примера изменят свои значения Z-index. Пример использования Z-index Изображение с z-index равным 1 имеет более высокий приоритет, поэтому расположено "спереди". Анкерные псевдо-классы Различные ссылки или ссылки, на которые указывает курсор мыши, можно выводить различным образом в поддерживающих CSS браузерах: a:link {color: #808080 } /* непосещенная ссылка*/ a:visited {color: #008000 } /* посещенная ссылка */ a:hover {color: #008080 } /* курсор мыши указывает на ссылку*/ a:active {color: #00FF00 } /* выбранная ссылка*/ Примечания: Чтобы иметь эффект, a:hover ДОЛЖЕН следовать в определении CSS после a:link и a:visited!! Чтобы иметь эффект, a:active ДОЛЖЕН следовать в определении CSS после a:hover!! Имена псевдо-классов не зависят от регистра символов. CSS2 - Псевдо-класс :first-child Псевдо-класс :first-child соответствует определенному элементу, который является первым потомком другого элемента. Примеры: В данном примере селектор соответствует любому элементу h1, который является первым потомком элемента div, и делает отступ для первой строки первого параграфа внутри элемента div: div > h1:first-child { text-indent:50px } Этот селектор будет соответствовать первому параграфу внутри div в следующем коде: Первый заголовок в div. Имеет отступ первой строки. Второй заголовок в div. Не имеет отступа. но он не будет соответствовать параграфу в следующем коде HTML: Параграф внутри div. Первый заголовок в div. Не имеет отступа. В данном примере селектор соответствует любому элементу strong, который является первым потомком элемента div, и задает font-style как italic для первого strong внутри элемента div: div:first-child strong { font-style: italic } В следующем коде HTML strong является первым потомком элемента div : Изучайте -- язык программирования C++. В данном примере селектор соответствует любому элементу b, который является первым потомком любого элемента, и задает text-decoration как none: b:first-child { text-decoration: none } В следующем примере первый элемент b в коде HTML ниже является первым потомком параграфа и не будет подчеркиваться. Но второй элемент a в параграфе не является первым потомком параграфа и будет подчеркнут: Посетите www.intuit.ru и выучите CSS! Посетите www.intuit.ru и выучите HTML! CSS2 - Псевдо-класс :lang Данный псевдокласс позволяет определить специальные правила для различных языков. В следующем примере класс :lang определяет тип кавычек для элементов b с атрибутом lang со значением "fr": Просто текст Выделенный текст Остальной текст В примере показано, как выделить В примере показано, как выделить гиперссылку в документе цветом. This is a link Примечание: a:hover ДОЛЖЕН следовать в определении CSS после a:link и a: visited!! a:active ДОЛЖЕН следовать в определении CSS после a:hover!! В примере показано, как определить для гиперссылки другой стиль. Наведите курсор мыши на ссылки. Меняем оформление текста у ссылки Меняем размер у ссылки Меняем цвет фона у ссылки Меняем семейство шрифта у ссылки Меняем цвет у ссылки В примере показано, как можно использовать псевдо-класс :first-child. Посетите Intuit там много бесплатных курсов Посетите Intuit там есть бесплатные учебные программы В примере показано, как можно использовать псевдо-класса :lang. Просто текстВыделенные текст: Сам текст. Псевдо-классы и классы CSS Псевдо-классы можно объединять с классами CSS: a.silver:visited {color: #C0C0C0 } Silver Если ссылка в приведенном выше примере была посещена, она будет выводиться серебряным цветом. Псевдо-классы Данные параметры поддерживаются следующими браузерами: Internet Explorer, Firefox, Netscape. Псевдо-классНазначениеIEFNW3C :active Добавляет специальный стиль активированному элементу 4 1 8 1 :focus Добавляет специальный стиль элементу, когда элемент находится в фокусе - - - 2 :hover Добавляет специальный стиль элементу, когда указатель мыши находится над элементом 4 1 7 1 :link Добавляет специальный стиль непосещенной ссылке 3 1 4 1 :visited Добавляет специальный стиль посещенной ссылке 3 1 4 1 :first-child Добавляет специальный стиль элементу, который является первым потомком некоторого другого элемента 1 7 2 :lang Позволяет автору определить используемый в заданном элементе язык 1 8 2 Синтаксис псевдо-классов: selector:pseudo-class {property: value} Классы CSS также можно использовать с псевдо-классами: selector.class:pseudo-class {property: value} CSS2 - Псевдо-элемент :after Псевдо-элемент ":after" можно использовать для вставки некоторого содержимого после элемента. Следующий стиль будет воспроизводить некоторый звук после каждого появления элемента заголовка h5. h5:after { content: url(song.wav) } CSS2 - Псевдо-элемент :before Данный псевдо-элемент можно использовать для вставки некоторого содержимого перед элементом. Следующий стиль будет воспроизводить некоторый звук перед каждым появлением элемента заголовка h5. h5:before { content: url(song.wav) } Несколько псевдо-элементов Несколько псевдо-элементов можно объединять: div {font-size: 20pt} div:first-letter {color: #808000; font-size: 150%} div:first-line {color: #808080 } Текст текст текст В примере выше первая буква параграфа будет оливковой с размером шрифта 30pt. Остальная часть первой строки будет серой, а остаток параграфа будет иметь цвет по умолчанию. В примере показано, как добавить В примере показано, как добавить специальные эффекты к первой букве текста. Заголовок В примере показано, как добавить специальные эффекты к первой строке текста. Пример испоьзования псевдо-элемента :first-line. Следующая строка в параграфе. Псевдо-элемент :first-letter Данный псевдо-элемент используется для добавления специального стиля первой букве текста в селекторе : div {font-size: 20pt} div:first-letter {font-size: 150%; float: right} Первое слово имеет специальный стиль Примечания: Псевдо-элемент "first-letter" может использоваться только с элементами блочного уровня. Следующие параметры применимы в псевдо-элементе "first-letter": параметры шрифта параметры цвета параметры фона параметры отступов параметры полей параметры границ text-decoration vertical-align (только если 'float' определен как 'none') text-transform line-height float clear Псевдо-элемент :first-line Данный псевдо-элемент используется для добавления специальных стилей к первой строке текста в селекторе: div {font-size: 5pt} div:first-line {color: #808000; font-variant: normal} Текст, продолжающийся на две или большее количество строк В примере выше браузер выводит первую строку (длина определяется размером окна браузера), форматированную согласно псевдо-элементу "first-line". Примечания: Псевдо-элемент "first-line" можно использовать только с элементами уровня блока. Следующие параметры применимы в псевдо-элементе "first-line": параметры шрифта параметры цвета параметры фона word-spacing letter-spacing text-decoration vertical-align text-transform line-height clear Псевдо-элементы и классы CSS Псевдо-элементы можно объединять с классами CSS: div.first:first-letter {color: #008080 } Параграф статьи В примере выше первая буква всех элементов div, где class="first", будет красной. Псевдо-элементы Данные параметры поддерживаются следующими браузерами: Internet Explorer, Firefox, Netscape. Псевдо-элементНазначениеIEFNW3C :first-letter Добавляет специальный стиль к первой букве текста 5 1 8 1 :first-line Добавляет специальный стиль к первой строке текста 5 1 8 1 :before Вставляет некоторое содержимое перед элементом 1.5 8 2 :after Вставляет некоторое содержимое после элемента 1.5 8 2 Синтаксис псевдо-элементов: selector:pseudo-element {property: value} Классы CSS также можно использовать с псевдо-элементами: selector.class:pseudo-element {property: value} Правило @media Данное правило позволяет задать различные правила стилей для различных носителей информации в одной таблице стилей. Стиль в следующем далее примере определяет для браузера вывод на экране шрифтом Times размером 30 пикселей. Но если страница будет печататься, то это будет сделано шрифтом Verdana размером 8 пикселей Отметим, что степень жирности шрифта задана normal, как на экране, так и на бумаге: ... Различные типы носителей информации Замечание: Имена типов носителей информации не зависят от регистра символов. Тип носителя информацииОписание all Используется для всех типов устройств носителей информации aural Используется для синтезаторов речи и звука braille Используется для устройств чтения азбуки Брайля для слепых embossed Используется для устройств печати азбуки Брайля для слепых handheld Используется для маленьких или карманных устройств print Используется для принтеров projection Используется для проецируемых изображений, таких как слайды screen Используется для экранов компьютера tty Используется для носителей информации, использующих шрифтовую сетку с фиксированным шагом, таким как телетайп и экранный терминал tv Используется для устройств телевизионного типа Типы носителей информации Некоторые параметры CSS предназначены только для определенных носителей информации. (Например, параметр "voice-family" создан для звуковых агентов пользователей.) Некоторые другие параметры можно использовать для различных типов носителей информации. (Например, параметр "font-size" можно использовать для экрана монитора и для печати на бумаге, но, возможно, с различными значениями.) Что касается шрифтов, то документу обычно требуется на экране шрифт большего размера, чем на бумаге. Шрифты sans-serif легче читать на экране, а шрифты serif на бумаге. JavaScript Статический Web-сайт прекрасно подходит, когда надо просто показать простой контент. JavaScript позволяет сделать Web-сайт более динамичным, т.е. реагирующим на события и взаимодействующим с пользователем и является самым популярным языком сценариев в Интернет и поддерживается всеми основными браузерами. Теперь после изучения CSS, что дальше? Следующий шаг состоит в изучении XHTML и JavaScript. XHTML XHTML является "новым" HTML. Самой последней рекомендацией HTML является HTML 4.01. HTML будет заменен XHTML, который является более строгой и ясной версией HTML. Этот учебник учит использовать CSS Этот учебник учит использовать CSS для управления стилем и компоновкой множества Web-сайтов одновременно. Он учит использовать CSS для: создания фона; форматирования текста; создания и форматирования границ; определения полей и отступов элементов. позиционирования элементов; управления видимостью и размером элемента; задания формы элемента; размещения элемента позади другого элемента; добавления специальных эффектов в некоторые селекторы, такие как ссылки. Чтобы лучше освоить CSS разберите приведенные примеры использования CSS и просмотрите справочник по CSS. Параметр CSS 'page-break-after' Данный параметр задает поведение разрыва страницы после элемента. Примечания: Этот параметр нельзя использовать для элементов с абсолютным позиционированием. Используйте параметры page-breaking как можно реже и избегайте параметров page-breaking внутри таблиц, плавающих элементов, и блочных элементов с границами. Наследование: нет. Пример: div { page-break-after: auto } Может принимать следующие значения: ЗначениеОписание auto Если необходимо, вставляет разрыв страницы после элемента always Вставляет разрыв страницы после элемента avoid Отменяет вставку разрыва страницы после элемента left Вставляет разрывы страницы после элемента, пока не будет достигнута пустая левая страница right Вставляет разрывы страницы после элемента, пока не будет достигнута пустая правая страница Параметр CSS 'page-break-before' Данный параметр задает поведение разрыва страницы перед элементом. Примечания: Этот параметр нельзя использовать для элементов с абсолютным позиционированием. Используйте параметры page-breaking как можно реже и избегайте параметров page-breaking внутри таблиц, плавающих элементов, и блочных элементов с границами. Наследование: нет. Пример: div { page-break-before: auto } Может принимать следующие значения: ЗначениеОписание auto Если необходимо, вставляет разрыв страницы перед элементом always Вставляет разрыв страницы перед элементом avoid Отменяет вставку разрыва страницы перед элементом left Вставляет разрывы страницы перед элементом, пока не будет достигнута пустая левая страница right Вставляет разрывы страницы перед элементом, пока не будет достигнута пустая правая страница Параметр 'page-break-inside' Данный параметр задает поведение разрыва страницы внутри элемента. Примечания: Этот параметр нельзя использовать для элементов с абсолютным позиционированием. Используйте параметры page-breaking как можно реже и избегайте параметров page-breaking внутри таблиц, плавающих элементов, и блочных элементов с границами. Наследование: нет. Пример: div { page-break-inside: avoid } Может принимать следующие значения: ЗначениеОписание auto Если необходимо вставляет разрыв страницы внутри элемента avoid Отменяет вставку разрыва страницы внутри элемента Параметры печати Печать документов HTML всегда вызывала некоторые трудности. В CSS2 были добавлены параметры печати, чтобы облегчить печать документов Web. ПараметрОписаниеЗначенияW3C orphans Задает минимальное число строк параграфа, которые должны быть оставлены внизу страницы number 2 marks Определяет, какие метки должны изображаться за пределами блока страницы none crop cross page Задает тип страницы для использования при выводе элемента auto 2 identifier page-break-after Задает поведение разрыва страницы после элемента auto 2 always avoid left right page-break-before Задает поведение разрыва страницы перед элементом auto 2 always avoid left right page-break-inside Задает поведение разрыва страницы внутри элемента auto 2 avoid size Задает ориентацию и размер страницы auto portrait landscape widows Задает минимальное число строк параграфа, которые должны быть оставлены в верхней части страницы number 2 Задает направление, откуда должен идти ПараметрОписаниеЗначенияW3C azimuth Задает направление, откуда должен идти звук/голоса (горизонтально) angle 2 left-side far-left left center-left center center-right right far-right right-side behind leftwards rightwards cue Параметр для задания cue-before и cue-after в одном объявлении cue-before 2 cue-after cue-after Определяет звук, который будет воспроизведен после произнесения содержимого элемента, чтобы отделить его от другого элемента none 2 url cue-before Определяет звук, который будет воспроизведен перед произнесением содержимого элемента, чтобы отделить его от другого элемента none 2 url elevation Задает направление, откуда должен идти звук/голоса (горизонтально) angle 2 below level above higher lower pause Параметр для задания pause-before и pause-after в одном объявлении pause-before 2 pause-after pause-after Задает паузу после произнесения содержимого элемента time 2 % pause-before Задает паузу перед произнесением содержимого элемента time 2 % pitch Задает среднюю высоту голоса x-low 2 low medium high x-high pitch-range Определяет вариацию относительно средней высоты голоса (монотонный голос или живой) number 2 play-during Определяет звук, который будет воспроизводиться во время произнесения содержимого элемента auto 2 none url mix repeat richness Определяет насыщенность голоса (Насыщенный голос или бледный голос?) number 2 speak Определяет, будет ли текст озвучиваться normal 2 none spell-out speak-header Определяет, как обрабатывать заголовки таблиц. Должны ли заголовки произноситься перед каждой ячейкой, или только перед ячейкой с заголовком, отличным от заголовка предыдущей ячейки always 2 once speak-numeral Определяет, как произносятся числа digits 2 continuous speak-punctuation Определяет, как произносятся символы пунктуации none 2 code speech-rate Определяет скорость речи number 2 x-slow slow medium fast x-fast faster stress Определяет "ударение" в говорящем голосе number 2 voice-family Список с приоритетом названий семейств голосов, которые содержат определенные голоса specific-voice 2 generic-voice volume Определяет громкость голоса number 2 % silent x-soft soft medium loud x-loud Звуковые таблицы стилей Звуковые таблицы стилей используют комбинацию синтеза речи и звуковых эффектов, чтобы пользователь прослушивал информацию, а не читал ее. Звуковое представление можно использовать: слепым; для помощи при обучении чтению; для помощи пользователям, имеющим проблемы с чтением; для домашних развлечений; в автомобиле; в сообществах, имеющих трудности с восприятем печатного текста. Звуковое представление преобразует документ в простой текст и подает его на считыватель экрана - программу, которая считывает все символы на экране. Пример звуковой таблицы стилей: h5, h6 { voice-family: female; richness: 70; cue-before: url("song.au") } Пример выше заставит синтезатор речи воспроизвести звуковой сигнал, а затем прочитать заголовки женским голосом. Цвета ЕдиницаОписание color_name Название цвета (например, red) rgb(x,x,x) Значение RGB (например, rgb((255,0,0)) rgb(x%, x%, x%) Значение RGB в процентах (например, rgb(100%,0%,0%)) #rrggbb шестнадцатеричное число (например, #ff0000) Измерения ЕдиницаОписание % процент in дюйм cm сантиметр mm миллиметр em один em равен размеру текущего шрифта текущего элемента ex один ex равен x-height шрифта (x-height составляет обычно около половины font-size) pt пункт (1 pt равен 1/72 дюйма) pc пика (1 pc то же самое, что 12 пунктов) px пиксель (точка на экране компьютера) Различных цветов Большинство современных мониторов способны выводить как минимум 16384 различных цветов. Если взглянуть на таблицу цветов, расположенную ниже, то можно увидеть результат изменения интенсивности красного цвета от 0 до 255, при значениях зеленого и синего цветов равных нулю. Красный цвет HEX RGB #080000 rgb(8,0,0) #100000 rgb(16,0,0) #180000 rgb(24,0,0) #200000 rgb(32,0,0) #280000 rgb(40,0,0) #300000 rgb(48,0,0) #380000 rgb(56,0,0) #400000 rgb(64,0,0) #480000 rgb(72,0,0) #500000 rgb(80,0,0) #580000 rgb(88,0,0) #600000 rgb(96,0,0) #680000 rgb(104,0,0) #700000 rgb(112,0,0) #780000 rgb(120,0,0) #800000 rgb(128,0,0) #880000 rgb(136,0,0) #900000 rgb(144,0,0) #980000 rgb(152,0,0) #A00000 rgb(160,0,0) #A80000 rgb(168,0,0) #B00000 rgb(176,0,0) #B80000 rgb(184,0,0) #C00000 rgb(192,0,0) #C80000 rgb(200,0,0) #D00000 rgb(208,0,0) #D80000 rgb(216,0,0) #E00000 rgb(224,0,0) #E80000 rgb(232,0,0) #F00000 rgb(240,0,0) #F80000 rgb(248,0,0) #FF0000 rgb(255,0,0) Межплатформенных цветов Эта палитра из 216 межплатформенных безопасных для Web цветов была первоначально создана для обеспечения правильного вывода компьютерами всех цветов при использовании палитры из 256 цветов. 000000 000033 000066 000099 0000CC 0000FF 003300 003333 003366 003399 0033CC 0033FF 006600 006633 006666 006699 0066CC 0066FF 009900 009933 009966 009999 0099CC 0099FF 00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF 00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF 330000 330033 330066 330099 3300CC 3300FF 333300 333333 333366 333399 3333CC 3333FF 336600 336633 336666 336699 3366CC 3366FF 339900 339933 339966 339999 3399CC 3399FF 33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF 33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF 660000 660033 660066 660099 6600CC 6600FF 663300 663333 663366 663399 6633CC 6633FF 666600 666633 666666 666699 6666CC 6666FF 669900 669933 669966 669999 6699CC 6699FF 66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF 66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF 990000 990033 990066 990099 9900CC 9900FF 993300 993333 993366 993399 9933CC 9933FF 996600 996633 996666 996699 9966CC 9966FF 999900 999933 999966 999999 9999CC 9999FF 99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF 99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF Безопасные цвета Web Несколько лет назад, когда большинство компьютеров поддерживали только 256 различных цветов, был предложен в качестве стандарта Web список из 216 безопасных цветов Web. Причина этого состояла в том, что операционные системы Microsoft и Mac использовали 40 различных "резервных" фиксированных системных цветов (около 20 каждая). Трудно сказать насколько это важно сегодня, так как все больше и больше компьютеров обладают возможностью выводить миллионы различных цветов, но такой стандарт существует, и его при желании можно придерживаться. Названия цветов в CSS На этой странице находится таблица названий цветов, которые поддерживаются большинством броузеров. Примечание: Стандарт CSS консорциума W3C поддерживает только 16 имен цветов (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow). Для всех остальных цветов необходимо использовать HEX (шестнадцатеричное) значение цвета. Название цвета HEX цвета Цвет AliceBlue (бледно-голубой) #F0F8FF AntiqueWhite (античный белый) #FAEBD7 Aqua (голубой) #00FFFF Aquamarine (аквамарин) #7FFFD4 Azure (лазурный) #F0FFFF Beige (беж) #F5F5DC Bisque (бисквитный) #FFE4C4 Black (черный) #000000 BlanchedAlmond (светло-кремовый) #FFEBCD Blue (синий) #0000FF BlueViolet (сине-фиолетовый) #8A2BE2 Brown (коричневый) #A52A2A BurlyWood (старое дерево) #DEB887 CadetBlue (серо-голубой) #5F9EA0 Chartreuse (зеленовато-желтый) #7FFF00 Chocolate (шоколадный) #D2691E Coral (коралловый) #FF7F50 CornflowerBlue (васильковый) #6495ED Cornsilk (кукурузные рыльца) #FFF8DC Crimson (малиновый) #DC143C Cyan (светло-голубой) #00FFFF DarkBlue (темно-синий) #00008B DarkCyan (темно-голубой) #008B8B DarkGoldenRod (темно-золотисто-коричневый) #B8860B DarkGray (темно-серый) #A9A9A9 DarkGreen (темно-зеленый) #006400 DarkKhaki (темный хаки) #BDB76B DarkMagenta (темно-пурпурный) #8B008B DarkOliveGreen (темно-оливково-зеленый) #556B2F Darkorange (темно-оранжевый) #FF8C00 DarkOrchid (темно-лиловый) #9932CC DarkRed (темно-красный) #8B0000 DarkSalmon (темно-оранжево-розовый) #E9967A DarkSeaGreen (темно-зеленое море) #8FBC8F DarkSlateBlue (темный серовато-синий) #483D8B DarkSlateGray (темный синевато-серый) #2F4F4F DarkTurquoise (темно-бирюзовый) #00CED1 DarkViolet (темно-фиолетовый) #9400D3 DeepPink (темно-розовый) #FF1493 DeepSkyBlue (темно-небесно-голубой) #00BFFF DimGray (тускло-серый) #696969 DodgerBlue (тускло-васильковый) #1E90FF Feldspar (полевой шпат) #D19275 FireBrick (огнеупорный кирпич) #B22222 FloralWhite (цветочно-белый) #FFFAF0 ForestGreen (лесная зелень) #228B22 Fuchsia (фуксия) #FF00FF Gainsboro (светло-серый) #DCDCDC GhostWhite (туманно-белый) #F8F8FF Gold (золотой) #FFD700 GoldenRod (золотисто-коричневый) #DAA520 Gray (серый) #808080 Green (зеленый) #008000 GreenYellow (зелено-желтый) #ADFF2F HoneyDew (медовая роса) #F0FFF0 HotPink (ярко-розовый) #FF69B4 IndianRed (индийский-красный) #CD5C5C Indigo (индиго) #4B0082 Ivory (слоновая кость) #FFFFF0 Khaki (хаки) #F0E68C Lavender (бледно-лиловый) #E6E6FA LavenderBlush (бледный розово-лиловый) #FFF0F5 LawnGreen (зеленая трава) #7CFC00 LemonChiffon (лимонный) #FFFACD LightBlue (светло-синий) #ADD8E6 LightCoral (светло-коралловый) #F08080 LightCyan (светло-светло-голубой) #E0FFFF LightGoldenRodYellow (светлый коричнево-желтый) #FAFAD2 LightGrey (светло-серый) #D3D3D3 LightGreen (светло-зеленый) #90EE90 LightPink (светло-розовый) #FFB6C1 LightSalmon (светлый оранжево-розовый) #FFA07A LightSeaGreen (светло-зеленое море) #20B2AA LightSkyBlue (светло-небесно-голубой) #87CEFA LightSlateBlue (светлый серовато-синий) #8470FF LightSlateGray (светлый синевато-серый) #778899 LightSteelBlue (светлый голубовато стальной) #B0C4DE LightYellow (светло-желтый) #FFFFE0 Lime (лайм) #00FF00 LimeGreen (зеленый лайм) #32CD32 Linen (льняной) #FAF0E6 Magenta (пурпурный) #FF00FF Maroon (каштановый) #800000 MediumAquaMarine (умеренно аквамариновый) #66CDAA MediumBlue (умеренно синий) #0000CD MediumOrchid (умеренно лиловый) #BA55D3 MediumPurple (умеренно пурпурный) #9370D8 MediumSeaGreen (умеренно-зеленое море) #3CB371 MediumSlateBlue (умеренно серовато-синий) #7B68EE MediumSpringGreen (умеренная весенняя зелень) #00FA9A MediumTurquoise (умеренно-бирюзовый) #48D1CC MediumVioletRed (умеренно фиолетово красный) #C71585 MidnightBlue (ночной синий) #191970 MintCream (мятно-кремовый) #F5FFFA MistyRose (туманно-розовый) #FFE4E1 Moccasin (песочный) #FFE4B5 NavajoWhite (темно-песочный) #FFDEAD Navy (темно-синий) #000080 OldLace (старые кружева) #FDF5E6 Olive (оливковый) #808000 OliveDrab (тускло-оливковый) #6B8E23 Orange (оранжевый) #FFA500 OrangeRed (оранжево-красный) #FF4500 Orchid (лиловый) #DA70D6 PaleGoldenRod (бледно-золотисто-коричневый) #EEE8AA PaleGreen (бледно-зеленый) #98FB98 PaleTurquoise (бледно-голубой) #AFEEEE PaleVioletRed (бледно-фиолетово-красный) #D87093 PapayaWhip (дыни) #FFEFD5 PeachPuff (персиковый) #FFDAB9 Peru (коричневый) #CD853F Pink (розовый) #FFC0CB Plum (сливовый) #DDA0DD PowderBlue (туманно-голубой) #B0E0E6 Purple (пурпурный) #800080 Red (красный) #FF0000 RosyBrown (розово-коричневый) #BC8F8F RoyalBlue (ярко-синий) #4169E1 SaddleBrown (старая кожа) #8B4513 Salmon (оранжево-розовый) #FA8072 SandyBrown (песочно-коричневый) #F4A460 SeaGreen (зеленое море) #2E8B57 SeaShell (морская ракушка) #FFF5EE Sienna (охра) #A0522D Silver (свето-серый) #C0C0C0 SkyBlue (небесно-голубой) #87CEEB SlateBlue (серовато-синий) #6A5ACD SlateGray (синевато-серый) #708090 Snow (снежный) #FFFAFA SpringGreen (весенняя зелень) #00FF7F SteelBlue (сине-стальной) #4682B4 Tan (бронзы) #D2B48C Teal (сине-зеленый) #008080 Thistle (чертополох) #D8BFD8 Tomato (томат) #FF6347 Turquoise (бирюзовый) #40E0D0 Violet (фиолетовый) #EE82EE VioletRed (фиолетово-красный) #D02090 Wheat (пшеничный) #F5DEB3 White (белый) #FFFFFF WhiteSmoke (белый дым) #F5F5F5 Yellow (желтый) #FFFF00 YellowGreen (желто-зеленый) #9ACD32 Названия цветов Некоторая совокупность названий цветов поддерживается большинством браузеров. Примечание: Только 16 названий цветов поддерживается стандартом W3C для CSS (aqua (голубой), black (черный), blue (синий), fuchsia (фуксия), gray (серый), green (зеленый), lime (лайм), maroon (темно-бордовый), navy (темно-синий), olive (оливковый), purple (сиреневый), red (красный), silver (светло-серый), teal (сине-зеленый), white (белый), и yellow (желтый)). Для всех других цветов необходимо использовать значение HEX цвета. Цвет Цвет (HEX) Название цвета #FFF8DC Cornsilk (кукурузные рыльца) #00008B DarkBlue (темно-синий) #008B8B DarkCyan (темно-голубой) #FFFFF0 Ivory (слоновая кость) #FFFFE0 LightYellow (светло-желтый) #FFA500 Orange (оранжевый) #4169E1 RoyalBlue (ярко-синий) Оттенки серого цвета Серые цвета выводятся при равных значениях интенсивности всех трех источников света. Чтобы облегчить выбор правильного серого цвета ниже представлена таблица оттенков серого цвета: Серый цвет RGB HEX RGB(0,0,0) #000000 RGB(8,8,8) #080808 RGB(16,16,16) #101010 RGB(24,24,24) #181818 RGB(32,32,32) #202020 RGB(40,40,40) #282828 RGB(48,48,48) #303030 RGB(56,56,56) #383838 RGB(64,64,64) #404040 RGB(72,72,72) #484848 RGB(80,80,80) #505050 RGB(88,88,88) #585858 RGB(96,96,96) #606060 RGB(104,104,104) #686868 RGB(112,112,112) #707070 RGB(120,120,120) #787878 RGB(128,128,128) #808080 RGB(136,136,136) #888888 RGB(144,144,144) #909090 RGB(152,152,152) #989898 RGB(160,160,160) #A0A0A0 RGB(168,168,168) #A8A8A8 RGB(176,176,176) #B0B0B0 RGB(184,184,184) #B8B8B8 RGB(192,192,192) #C0C0C0 RGB(200,200,200) #C8C8C8 RGB(208,208,208) #D0D0D0 RGB(216,216,216) #D8D8D8 RGB(224,224,224) #E0E0E0 RGB(232,232,232) #E8E8E8 RGB(240,240,240) #F0F0F0 RGB(248,248,248) #F8F8F8 RGB(255,255,255) #FFFFFF Значения цветов Цвета в CSS определяют с помощью шестнадцатеричной записи комбинации значений красного, зеленого и синего цветов (RGB). Наименьшее значение, которое можно задать одному из источников равно 0 (hex #00), а максимальное - 255 (hex #FF). Следующая таблица показывает результат объединения источников красного (R), зеленого (G) и синего (B) источников цвета: Цвет Цвет (HEX) Цвет RGB #000000 rgb(0,0,0) #FF0000 rgb(255,0,0) #00FF00 rgb(0,255,0) #0000FF rgb(0,0,255) #FFFF00 rgb(255,255,0) #00FFFF rgb(0,255,255) #FF00FF rgb(255,0,255) #C0C0C0 rgb(192,192,192) #FFFFFF rgb(255,255,255)