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

Краткий справочник по CSS2.

Содержание

Определение стилей изменяет внешний вид документа путем присвоения тех или иных значений свойствам стилей. В данном справочнике перечисляются основные свойства стилей и приводится перечень допустимых для них значений.

Значениями свойств могут быть ключевые слова, например, normal, или слова в квадратных скобках, которые определяют тип значения. Вертикальная черта «|», разделяющая альтернативные значения, означает исключающее ИЛИ (ИЛИ-НЕ); т.е. должен быть указан один из альтернативных вариантов. Двойная вертикальная черта «||» означает объединяющее ИЛИ (ИЛИ-И) — или и то и другое, или одно из двух.

Свойства, описывающие шрифт.

font-family: [перечень семейств или названий шрифтов]
Указывается разделенный запятыми перечень семейств или названий шрифтов. При этом браузер пользователя будет последовательно перебирать все перечисленные семейства, пока не найдет то, которое присутствует на компьютере. Значениями этого свойства могут быть следующие семейства:
  • serif — шрифт с засечками, например, Times;
  • sans-serif — шрифт без засечек - Helvetica;
  • cursive — курсивный шрифт - Zarf-Chencery;
  • fantasy — декоративный шрифт - Western;
  • monospace — моноширинный шрифт - Courier и другие.
Если название гарнитуры или семейства состоит из нескольких слов, рекомендуется заключать его в апострофы или кавычки, например, 'Times New Roman Cyr'. Значение по умолчанию определяется браузером.
font-style: normal | italic | oblique
Определяет начертание шрифта:
  • normal — нормальное (по умолчанию);
  • italic — курсивное;
  • oblique — наклонное.
font-size: [абсолютный] | [относительный] | [точный] | [проценты]
Задается размер шрифта. В качестве значений этого свойства могут использоваться абсолютные, относительные и точные размеры, а также проценты.
Абсолютные размеры шрифта указываются с помощью предопределенных значений:
xx-small | x-small | small | medium | large | x-large | xx-large.
Указывая такие значения, необходимо помнить, что эти размеры рассчитываются из заданных пользователем в установках браузера. Значение normal соответствует размеру, заданному пользователем. На дисплее градации масштабируются с шагом 1.5, например, если medium — кегль 10, то large — кегль 15. Различные мультимедийные устройства могут потребовать различные шкалы масштабирования. Значение по умолчанию — medium (средний).
Относительные размеры шрифта задаются относительно родительского элемента. Возможные значения: larger (больше), smaller (меньше). Например, если размер шрифта родительского элемента medium, то значение larger преобразует шрифт текущего элемента в large.
Точные размеры шрифта указываются в единицах длины, допускаемых в рекомендациях W3C. Это:
  • рх — логические пиксели;
  • pt — логические пункты;
  • em — единицы размера шрифта; em подразумевает, что размер шрифта устанавливается относительно размера шрифта в родительском элементе. 1em равно размеру шрифта родительского элемента.
Размер шрифта в процентах задается по отношению к родительскому элементу. Например, слово может иметь размер, на 20% больший, чем остальные слова фразы, благодаря свойству font-size: 120%.
font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Определяет толщину шрифта. По умолчанию - normal. Обычно используется только значение bold (полужирный). Значения bolder (толще) и lighter (тоньше) являются относительными. Т.е. если элемент является дочерним по отношению к элементу со значением font-weight: bold и значение свойства font-weight для него задано lighter, то он будет отображен нормальным (normal) шрифтом. Значения от 100 до 900, указывают толщину так, что каждое последующее значение соответствует, по крайней мере не меньшей жирности начертания, чем предшествующее. Нормальный шрифт normal соответствует номеру 400, полужирный bold — 700.
font-variant: normal | small-caps
Вариант начертания: нормальный (normal), малые прописные (small-caps). По умолчанию - normal.
font: [font-style] || [font-variant] || [font-weight] || [font-size] || [font-family]
Свойство font является обобщающим свойством для определения font-style, font-variant, font-weight, font-size, line-height и font-family в одном месте таблицы стилей. Синтаксис этого свойства основан на традиционном для полиграфии способе указания группы свойств, относящихся к шрифтам. Для определения допустимых значений и значений по умолчанию смотрите вышеописанные свойства. Если для тех или иных свойств значения явно не указаны, то для них принимаются значения по умолчанию.
Пример: 
h1 {font-family: Arial; font-size: 30 pt;
font-weight: bold; font-style: italic}
p {font: bold italic large Palatino, serif}
К оглавлению Краткий справочник по CSS2

Свойства, описывающие текст.

word-spacing: normal | [длина]
Задает интервал между словами. По умолчанию — normal. Численное выражение указывает добавление к установленной по умолчанию величине интервала между словами, например, word-spacing: 0.4em. Это значение может быть отрицательным, но в этом случае могут иметь место различные ограничения, накладываемые методами отработки. Интервалы между словами могут также зависеть от способа выравнивания абзаца. Последний определяется значением свойства align.
letter-spacing: normal | [длина]
Определяет величину межсимвольного интервала. По умолчанию — normal. Численное выражение указывает на добавление к установленной по умолчанию величине межбуквенных пробелов. Межсимвольные интервалы могут также зависеть от способа выравнивания абзаца, который определяется значением свойства align.
text-decoration: underline | overline | line-through | blink | none
Задает такие параметры начертания, как подчеркивание, надчеркивание, зачеркивание и мерцание. Допустимые значения:
  • underline — подчеркивание;
  • overline — надчеркивание;
  • line-through — зачеркивание;
  • blink — мерцание;
  • none — отмена ранее установленных атрибутов.
text-transform: capitalize | uppercase | lowercase | none
Определяет преобразование регистра текста при отображении (по умолчанию none):
  • capitalize — первая буква каждого слова преобразуется в заглавную;
  • upercase — все буквы преобразуются в заглавные;
  • lowercase — все буквы преобразуются в строчные;
  • none — отменяет установленные преобразования.
text-align: left | right | center | justify
Задает горизонтальное выравнивание текста:
  • left — по левому краю;
  • right — по правому краю;
  • center — по центру;
  • justify — по обоим краям.
text-indent: [абсолютные единицы] | [проценты]
Указывает отступы и выступы текста, значениями которых могут быть абсолютные единицы: рх — логические пиксели, pt — логические пункты, em — единицы размера шрифта, cm — сантиметры, mm — миллиметры и проценты. Отступ определяет смещение первой строки абзаца вправо относительно его левого края. Если значение отступа отрицательно, то первая строка смещена влево относительно левого края абзаца, т.е. образуется выступ, например, text-indent: -3em.
vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | [проценты]
Определяет вертикальное положение элемента. По умолчанию — baseline. Используется набор следующих зарезервированных слов, указывающих положение относительно родительского элемента:
  • baseline — совмещает базу элемента или его низ, если элемент не имеет базы, с базой родительского элемента;
  • middle — выравнивает среднюю линию элемента по уровню "база плюс половина высоты" родительского элемента;
  • sub — делает элемент подстрочным. Данное значение не задает уменьшение размера шрифта. Поэтому для создания нижних индексов вместе с ним следует использовать свойство font-size: smaller, например, vertical-align: sub; font-size: smaller.
  • super — делает элемент надстрочным. Данное значение не задает уменьшение размера шрифта. Поэтому для создания верхних индексов вместе с ним следует использовать свойство font-size: smaller, например, vertical-align: super; font-size: smaller.
  • text-top — выравнивает верх элемента по верху шрифта родительского элемента;
  • text-bottom — выравнивает низ элемента по низу шрифта родительского элемента.
Другой набор значений свойства определяет выравнивание относительно форматируемой линии, частью которой является указанный элемент:
  • top — выравнивает вершину элемента по самому высокому элементу линии;
  • bottom — выравнивает низ элемента по самому низкому элементу линии.
При использовании значений top и bottom могут возникать неразрешимые ситуации, когда зависимости одних элементов от других образуют замкнутый цикл.
Процентное выражение соотносится со значением свойства line-height самого элемента. Таким способом база элемента или низ, если таковая отсутствует) повышается на определенный уровень относительно базы родительского элемента. Допускаются отрицательные значения. Например, при значении -100% элемент будет опущен так, что его база достигнет уровня, где должна лежать база следующей линии. Это позволяет позиционировать по вертикали элементы, не имеющие базы - скажем, изображения, используемые для замещения букв.
line-height: normal | [число] | [длина] | [проценты]
Задает высоту строки. По умолчанию — normal. Данное свойство определяет расстояние между базами двух смежных строк. Если численное значение явно определено, высота строки определяется как высота шрифта, умноженная на численное значение. Отрицательные значения не допускаются.
Пример: 
р {text-decoration: underline; text-align: center; text-indent: 3em}
К оглавлению Краткий справочник по CSS2

Свойства, описывающие цвет и фон.

color: [цвет]
Задает цвет текста документа. По умолчанию — определяется программой просмотра. Цвет может быть задан несколькими способами:
  • с помощью цветовых имен, например, red (красный), blue (синий). Перечень допустимых значений смотрите Приложении 1;
  • с помощью шестнадцатеричных значений составляющих цвета, например, #000000 (черный);
  • в шестнадцатеричном виде с трехзначной записью, без "лишних" нулей: #fff (белый);
  • с помощью RGB-составляющих с указанием насыщенности цвета в диапазоне от 0 до 255, например, rgb(255,255,255) (белый);
  • с помощью RGB-составляющих с процентным указанием насыщенности цвета: rgb(100%,0%,0%).
Если цвет задается в виде цветовых имен, то необходимо помнить, что цвета с одинаковым наименованием могут по-разному отображаться в различных браузерах. Имеет смысл использовать только наименования основных цветов — black, red, green, blue и т.п. — и проверять корректность отображения в различных браузерах.
background-color: [цвет] | transparent
Определяет цвет фона документа. Кроме способов обозначения цвета, приведенных выше, возможно задавать прозрачный фон с помощью цвета transparent. По умолчанию — transparent.
background-image: url ( [url] ) | none
Задает в качестве фона изображение из файла. Например, background-image: url("foto.jpg").
background-repeat: repeat | repeat-x | repeat-y | no-repeat
Задает способ повторения фонового изображения (по умолчанию — repeat):
  • repeat — фон повторяется по вертикали и по горизонтали;
  • repeat-x — фон повторяется только по горизонтали;
  • repeat-y — фон повторяется только по вертикали;
  • no-repeat — фоновое изображение выводится только один раз, без повторения.
background-attachment: scroll | fixed
Определяет способ "привязки" фона. Можно установить два значения: scroll и fixed. В первом случае фон будет "прокручиваться" вместе с текстом, если текст выходит за границы окна браузера. Во втором — фон будет оставаться неподвижным и текст документа будет прокручиваться поверх него. По умолчанию - scroll.
background-position: top | center | bottom | left | center | right | [проценты] | [длина]
Задает координаты, начиная с которых начнется вывод фонового изображения. Координаты могут быть определены с помощью ключевых слов, характеризующих положение изображения на странице по вертикали: top (вверху), center (по центру), bottom (внизу) и по горизонтали: left (слева), center (по центру), right (справа). Сначала указывается з начения для вертикальной координаты. Например, чтобы поместить рисунок в правом верхнем углу страницы, следует написать: background-position: top right.
Координаты можно задать и в единицах длины — пикселах (рх), сантиметрах (cm), процентах. Например, background-position: 50px 50рх или background-position: 50% 50%.
background: [background-color] || [background-image] || [background-repeat] || [background-attachment] || [background-position]
Свойство background — это обобщающее свойство для установки отдельных свойств фона, т.е. цвета, рисунка, повтора, привязки и положения в одном правиле таблиц стилей. Возможные значения обобщающего свойства background включают совокупность возможных значений каждого из составляющих свойств. Свойство background всегда устанавливает все совокупные значения свойства фона сразу. Если какие-либо значения явно не указаны, то они принимаются по умолчанию.
Пример: 
body {background-image: url ("http: //visa.com/map.jpg");
background-repeat: repeat-y; background-attachment: fixed;
background-position: 100% 100%}
p {background: url(chess.gif) red 50% repeat fixed}
К оглавлению Краткий справочник по CSS2

Свойства, описывающие рамки.

Эти свойства устанавливают рамки элемента. Каждый элемент имеет четыре стороны рамки, для которых устанавливаются толщина, цвет и стиль.

border-top-width: thin | medium | thick | [толщина]
Определяет толщину верхней стороны рамки элемента. По умолчанию — medium. Толщина, определяемая зарезервированным словом, зависит от браузера, но при этом выдерживается зависимость: thin (тонкая) меньше, чем medium (средняя), а последнее меньше, чем thick (толстая). Толщина рамки, определенная с помощью зарезервированного слова, является для документа величиной постоянной, не зависящей от размера шрифта. Величина толщины рамки не может быть отрицательной.
border-right-width: thin | medium | thick | [толщина]
Задает толщину правой стороны рамки элемента. Эквивалентно установке толщины верхней стороны рамки border-top-width.
border-bottom-width: thin | medium | thick | [толщина]
Определяет толщину нижней стороны рамки элемента. Эквивалентно установке толщины верхней стороны рамки border-top-width.
border-left-width: thin | medium | thick | [толщина]
Задает толщину левой стороны рамки элемента. Эквивалентно установке толщины верхней стороны рамки border-top-width.
border-width: thin | medium | thick | [толщина]
Это свойство является обобщающим для установки толщины верхней, правой, нижней и левой сторон рамки в одном правиле таблицы стилей. Может быть указано от одного до четырех значений, обрабатываемых следующим образом:
  • одно значение: используется для установки толщины всех четырех сторон;
  • два значения: толщина верхней и нижней сторон устанавливаются по первому значению, правое и левое — по второму;
  • три значения: толщина верхней стороны устанавливается по первому значению, правого и левого по второму, а нижнего по третьему;
  • четыре значения: соответственно толщина верхней, правой, нижней и левой сторон рамки.
border-color: [цвет] | transparent
Указывает цвет рамки. Может принимать значение transparent для задания невидимой, но имеющей толщину, границы. Свойство border-color определяет цвет четырех сторон рамки и может иметь от одного до четырех значений, которые устанавливают цвета сторон рамки аналогично вышеописанному для толщины рамки. Если не задано ни одного значения цвета, по умолчанию присваивается значение свойства color самого элемента.
border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
Определяет стиль рисования рамки. Возможны следующие варианты:
  • none — рамка отсутствует;
  • hidden — тоже, что и none, но при использовании в таблицах интерпретируется особым образом;
  • dotted — рамка из точек;
  • dashed — пунктирная рамка;
  • solid — непрерывная линия;
  • double — рамка из двух линий. Сумма толщины каждой линии и промежуток между ними равняется значению border-width;
  • groove — рамка выглядит так, как будто она вырезана в фоне;
  • ridge — эффект, противоположный groove - рамка выпуклая;
  • inset — вне таблиц создает эффект вдавленности всей прямоугольной области, ограниченной рамкой;
  • outset — эффект, противоположный inset - выпуклость прямоугольной области, ограниченной рамкой.
Следует отметить, что не все эти стили реализованы в ведущих браузерах. Реализация последних четырех стилей зависит от конкретного браузера. Следовательно при их использовании необходимо все проверять. Большое значение в этом случае имеют параметры цвета границы, цвета фона и толщины рамки.
Пример: 
h1 {border-width: thick; border-color: navy; border-style: outset}
К оглавлению Краткий справочник по CSS2

Свойства, описывающие поля и отступы.

Методика форматирования Web-страниц и размещения на них содержимого в отведенном для этого пространстве описывается в CSS в виде пространственной модели (Box Formatted Model). Согласно этой модели, пространство, в терминологии создателей CSS — бокс (box), в котором размещено содержимое или часть содержимого Web-страницы — тексты, изображения и т.д. — можно представить в виде объекта, обладающего набором специфических характеристик. Необходимо подчеркнуть, что боксом считается не страница или ячейка таблицы, а лишь пространство, отведенное для содержимого или определенной его части. Формально каждый бокс имеет ядро, представляющее собой содержательную часть страницы или ячейки таблицы, и набор окружающих ядро элементов, характеристики которых определяют внешний вид бокса. Под этими элементами понимаются поля (margin), отступы (padding), рамки (border) и т. д.

Свойства полей margin-top, margin-right, margin-bottom, margin-left устанавливают границу элемента. Поле — это расстояние между краями страницы или ячейки таблицы и рамкой, если она имеется. Обобщающее свойство margin устанавливает поле для всех четырех сторон, в то время как остальные устанавливают поле только для соответствующей стороны.

Свойства отступа padding-top, padding-right, padding-bottom, padding-left позволяют регулировать величину отступа между содержимым и рамкой, если таковая имеется. С их помощью можно, например, менять положение текста относительно краев страницы или ячейки таблицы, не прибегая к жестко заданному выравниванию. Обобщающее свойство padding устанавливает отступ для всех четырех сторон, в то время как остальные устанавливают отступ лишь для соответствующей стороны.

Кроме регулирования параметров окружения содержимого, имеется возможность в явном виде отводить площадь для того или иного содержимого. Для этого указываются размеры прямоугольника — width (ширина) и height (высота) — в который должно "вписаться" содержимое.

margin-top: [длина] | [проценты] | auto
Определяет верхнее поле элемента. По умолчанию — 0.
margin-right: [длина] | [проценты] | auto
Задает правое поле элемента. По умолчанию — 0.
margin-bottom: [длина] | [проценты] | auto
Определяет нижнее поле элемента. По умолчанию — 0.
margin-left: [длина] | [проценты] | auto
Устанавливает левое поле элемента. По умолчанию — 0.
margin: [длина] | [проценты] | auto
Обобщающее свойство margin используется для одновременной установки свойств верхнего, правого, нижнего и левого полей в одном месте таблицы стилей. При явном указании четырех значений длины они соответственно применяются к верхней, правой, нижней и левой сторонам. Если явно указано одно значение, оно применяется ко всем сторонам, если два или три значения, то отсутствующие значения берутся по значению противоположной стороны.
padding-top: [длина] | [проценты]
Определяет величину верхнего отступа элемента. По умолчанию — 0. Процентное выражение — по отношению к ширине родительских элементов. Отрицательные значения для отступа не допускаются.
padding-right: [длина] | [проценты]
Задает величину правого отступа элемента. По умолчанию — 0
.
padding-bottom: [длина] | [проценты]
Указывает величину нижнего отступа элемента. По умолчанию — 0.
padding-left: [длина] | [проценты]
Устанавливает величину левого отступа элемента. По умолчанию — 0.
padding: [длина] | [проценты]
Свойство padding является обобщающим для установки свойств верхнего, правого, нижнего и левого отступа в одном правиле таблицы стилей. Если явно указаны четыре значения, они применяются соответственно к верхнему, правому, нижнему и левому отступу. Если явно указано только одно значение, оно применяется ко всем сторонам, если два или три, то отсутствующие значения принимаются по значениям противоположной стороны.
width: [ширина] | [проценты] | auto
Устанавливает ширину элемента. По умолчанию — auto. Это свойство может быть использовано для текстовых элементов, но чаще — для замещаемых, таких, как изображения. Если необходимо, ширина изображения может быть изменена масштабированием. При этом отношение ширины изображения к высоте будет сохранено, если для свойства указано значение auto. Отрицательные значения для данного свойства не допускаются.
height: [высота] | auto
Определяет высоту поля. Это свойство может быть использовано для текстовых элементов, но чаще — для замещаемых, таких как изображения. Если необходимо, высота изображения может быть изменена масштабированием. При этом отношение ширины изображения к высоте будет сохранено, если для свойства указано значение auto. Отрицательные значения для данного свойства не допускаются.
Пример: 
h1 {margin-top: 2em; padding-top: О.3em; width: 50%; height: 70px}
body {margin: 2em; padding: lem 2em}
К оглавлению Краткий справочник по CSS2

Свойства, описывающие объекты.

Свойства float (плавающий) и clear (очистка) позволяют изменять позицию элементов.

float: left | right | none
Позволяет изменять положение объекта. По умолчанию — none. При установке значения none (нет) элемент отображается там, где он присутствует в тексте. При значении left (влево) и right (вправо) объект смещается соответственно влево или вправо, а перенос текста производится по правой или левой его стороне.
clear: none | left | right | both
Это свойство устанавливается, если объект допускает размещение на своих сторонах плавающих элементов. Если точнее, то значение данного свойства указывает стороны, где плавающие элементы не ставятся. Если для свойства элемента clear указать значение left, то для такого элемента все плавающие элементы на левой стороне будут опущены вниз. Если указано значение попе, то плавающие элементы устанавливаются на всех сторонах. По умолчанию — none.
Пример: 
img {float: left}
h1 {clear: left}
К оглавлению Краткий справочник по CSS2

Свойства, описывающие таблицы.

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

caption-side: top | bottom | left | right
Определяет положение табличного заголовка относительно самой таблицы: вверху (top) — по умолчанию, внизу (bottom), слева (left), справа (right).
table-layout: auto | fixed
Определяет алгоритм, используемый для отображения ячеек, строк и столбцов таблицы: fixed — алгоритм фиксированной раскладки таблицы; auto — алгоритм автоматической раскладки таблицы. При использовании алгоритма фиксированной раскладки (fixed), наиболее быстрого, горизонтальная раскладка таблицы не зависит от содержимого ячеек и определяется только шириной колонок, рамок и отступов в ячейках. По умолчанию auto.
border-collapse: collapse | separate
Позволяет определить модель рамки таблицы. Значение separate устанавливает для каждой ячейки собственную рамку. Значение collapse задает общую рамку для всех ячеек таблицы. По умолчанию — separate.
border-spacing: [длина]
Определяет расстояние между рамками смежных ячеек в том случае, когда для свойства border-collapse установлено значение separate. Значение включает два числа. Первое значение устанавливает горизонтальный интервал, второе — вертикальный. Если установлено одно значение, то оно применяется к обоим интервалам. Данные значения не могут быть отрицательными.
empty-cells: show | hide
Определяет, прорисовываются ли рамки вокруг пустых ячеек. Если установлено значение show, рамки вокруг пустых ячеек отображаются. При установленном значении hide рамки вокруг пустых ячеек не показываются.
Пример: 
caption {caption-side: bottom; width: auto; text-align: left}
table {border: outset lOpt; border-collapse: separate;
border-spacing: 15pt; empty-cells: show}
К оглавлению Краткий справочник по CSS2

Свойства, описывающие списки.

list-style-type: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | none
Назначает стандартные типы маркеров элементам списка:
  • disc — маркер в виде заполненного круга;
  • circle — маркер в виде окружности;
  • square — маркер в виде квадрата;
  • decimal — десятичная нумерация, начинающаяся с 1;
  • decimal-leading-zero — десятичная нумерация с предшествующим нулем: 01, 02, 03, ...,98, 99 и т.д.;
  • lower-roman — римские цифры в нижнем регистре: i, ii, iii, iv, v и т.д.;
  • upper-roman — римские цифры в верхнем регистре: I, II, III, IV, V, и т.д.;
  • lower-latin или lower-alpha — буквы из набора символов ASCII в нижнем регистре: а, b, с,... z;
  • upper-latin или upper-alpha — буквы из набора символов ASCII в верхнем регистре: А, В, С,... Z;
  • lower-greek — символы греческого алфавита.
list-style-image: url ( [url] ) | none
Задает изображение, которое будет использоваться в качестве маркера списка. По умолчанию none.
list-style-position: inside | outside
Определяется положение содержимого пунктов списка в пространстве, отведенном для всего списка:
  • outside — маркеры, помечающие список, находятся вне пространства, отведенного под сам список (по умолчанию);
  • inside — маркеры, помечающие список, находятся внутри пространства, отведенного под сам список.
list-style: [list-style-type] || [list-style-position] || [list-style-image]
Обобщающее свойство для определения list-style-type, list-style-position и list-style-image в одном месте таблицы стилей.
Пример: 
ul {list-style-image: url("bullit.gif"); list-style-position: inside}
ol {list-style: upper-roman inside)