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

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

Язык HTML был создан для описания содержимого документа. Его теги были предназначены для определения "заголовка", "параграфа", "таблицы" (

, , и т.д.). Первоначально для представления документов не было предусмотрено каких-либо тегов форматирования, т.е. предполагалось, что о представлении документа позаботится браузер.
Но это породило процесс создания своих тегов и атрибутов к исходной спецификации 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"

Внешний файл содержит следующее описание стилей (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

список ul

список: dl dl dl
список: dl dl dl
список: dl dl dl

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

первое

второе

третье

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

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

first
second

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

first
second

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

Текст параграфа. Текст параграфа. Текст параграфа.
первый пункт
второй пункт
третий пункт
первый пункт
второй пункт
третий пункт

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

Заголовок h1

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

заголовок h1

заголовок h2

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

параграф параграф параграф параграф параграф параграф

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

Наследование:

Может принимать следующие значения:

Color

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

Примеры:

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

Наследование:

Может принимать следующие значения:

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

Пример:

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

Наследование:

Может принимать следующие значения:

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

Примеры:

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

Наследование:

Возможные значения:

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

Примеры:

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

Наследование:

Возможные значения:

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

Примеры:

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

Наследование:

Может принимать следующие значения:

Color

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

Примеры:

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

Наследование:

Может принимать следующие значения:

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

Пример:

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

Наследование:

Может принимать следующие значения:

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

Примеры:

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

Наследование:

Может принимать следующие значения:

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

Примеры:

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

Наследование:

Может принимать следующие значения:

color

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

Примеры:

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

Наследование:

Может принимать следующие значения:

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

Пример:

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

Наследование:

Может принимать следующие значения:

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

Примеры:

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

Наследование:

Может принимать следующие значения:

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

Примеры:

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

Наследование:

Может принимать следующие значения:

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

Примеры:

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

Наследование:

Может принимать следующие значения:

color

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

Примеры:

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

Наследование:

Возможные значения:

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

Примеры:

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

Наследование:

Возможные значения:

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

Примеры:

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

Наследование:

Может принимать следующие значения:

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

Примеры:

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

Наследование:

Возможные значения:

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

Примеры:

Параметр 'border'

Наследование:

Может принимать следующие значения:

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

Примеры:

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

Данные параметры поддерживают следующие браузеры:

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	Параметр для задания отступов в одном объявлении	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	Определяет фиксированный нижний отступ
%	Определяет нижний отступ в % от общей высоты документа

Примеры:

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

Наследование:

Может принимать следующие значения:

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

Примеры:

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

Наследование:

Может принимать следующие значения:

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

Примеры:

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

Наследование:

Возможные значения:

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

Примеры:

Параметр 'margin'

Наследование:

Может принимать следующие значения:

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

Примеры:

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

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

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

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

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

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

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

Заголовок h1 с заданным верхним отступом
Этот пример показывает, как задать нижний отступ текста.

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

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

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

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

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

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

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

Наследование:

Может принимать следующие значения:

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

Пример:

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

Наследование:

Может принимать следующие значения:

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

Пример:

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

Наследование:

Может принимать следующие значения:

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

Пример:

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

Наследование:

Может принимать следующие значения:

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

Пример:

Параметр 'padding'

Наследование:

Может принимать следующие значения:

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

Примеры:

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

Поддерживается следующими браузерами:

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'

Наследование:

Может принимать следующие значения:

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

Пример:

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

Наследование:

Может принимать следующие значения:

inside	Маркер смещен внутрь текста
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 и т.д.

Примеры:

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

Наследование:

Может принимать следующие значения:

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

Примеры:

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

Поддерживаются следующими браузерами:

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

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

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

Первый элемент
Второй элемент
Третий элемент

Первый элемент
Второй элемент
Третий элемент

Первый элемент
Второй элемент
Третий элемент

Первый элемент
Второй элемент
Третий элемент

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

Первый элемент
Второй элемент
Третий элемент

Первый элемент
Чай
Третий элемент

Первый элемент
Второй элемент
Третий элемент

Первый элемент
Второй элемент
Третий элемент

Первый элемент
Второй элемент
Третий элемент

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

Примеры:

В примере показано, как вывести элемент.
```
Эта информация не будет отображена
```
Между этими двумя элементами

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

Изучайте CSS!

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

В параграфе элемент b имеет ширину - 1. 2 размера текущего шрифта, размер шрифта - 500%, межстрочный интервал - 95%, шрифт буквы - Comic Sans MS.
Пример показывает, как создать горизонтальное меню.
Ссылка 1
Ссылка 2
Ссылка 3
Ссылка 4

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

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

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

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

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

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

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

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

С помощью абсолютного позиционирования элемент можно поместить в любом месте страницы. Параграф имеет смещение - на 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

Параметр 'height'

Наследование:

Пример:

Может принимать следующие значения:

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

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

Наследование:

Примечание:

Примеры:

Может принимать следующие значения:

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

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

Наследование:

Пример:

Может принимать следующие значения:

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

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

Наследование:

Пример:

Может принимать следующие значения:

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

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

Наследование:

Пример:

Может принимать следующие значения:

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

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

Наследование:

Пример:

Может принимать следующие значения:

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

Параметр 'width'

Наследование:

Пример:

Может принимать следующие значения:

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

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

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

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

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

Уменьшенный интервал между строками.
Уменьшенный интервал между строками.

Увеличенный интервал между строками.
Увеличенный интервал между строками.

Параметр 'clear'

Примечание:

Наследование:

Пример:

Может принимать следующие значения:

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

Параметр 'cursor'

Наследование:

Примеры:

Может принимать следующие значения:

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:

Параметр 'display'

Наследование:

Примеры:

Может принимать следующие значения:

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'

Данный параметр задает поведение разрыва страницы перед элементом.
Примечания:

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

Наследование: нет.
Пример:
div { page-break-before: auto }
Может принимать следующие значения:
ЗначениеОписание

auto	Если необходимо, вставляет разрыв страницы перед элементом
always	Вставляет разрыв страницы перед элементом
avoid	Отменяет вставку разрыва страницы перед элементом
left	Вставляет разрывы страницы перед элементом, пока не будет достигнута пустая левая страница
right	Вставляет разрывы страницы перед элементом, пока не будет достигнута пустая правая страница

Параметр 'page-break-inside'

Данный параметр задает поведение разрыва страницы внутри элемента.
Примечания:

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

Наследование: нет.
Пример:
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)

Бизнес в интернете: Сайты - Софт - Языки - Дизайн

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

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

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

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

color: blue

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

comic sans

:link { color:red }

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

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

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

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

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

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

Заголовок H1

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

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

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

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

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

Синтаксис CSS

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

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

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

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

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

Параметр 'background'

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

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

Параметр 'color'

Параметр 'direction'

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Параметр 'font'

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

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

заголовок h1

заголовок h2

Заголовок h1

Заголовок h2

заголовок h1

заголовок h2

заголовок h3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Параметр 'border'

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

Отступы в CSS

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

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