Свойства

Свойства описывают желаемый способ воспроизведения материала.

Спецификация CSS 2.1 включает свойства для поддержки как «экранного» воспроизведения, так и «звукового» (иными словами — при помощи синтезаторов речи.)[1][2] Мы рассмотрим только первую из этих групп свойств.

Содержание

Свойство display

Свойство display определяет способ преобразования элемента в используемые CSS «коробки» (box.)[3]

block
Элемент воспроизводится как отдельный блок в рамках модели «коробок» (например: абзац текста, группа абзацев, раздел, документ в целом.)
inline-block
Элемент воспроизводится как блок, который затем встраивается в строку вышестоящего блока как ее неделимая составляющая (иными словами — как если бы он представлял отдельный «составной символ».)
inline
Элемент воспроизводится как одна или несколько «коробок» в пределах строки вышестоящего блока.
list-item
Элемент воспроизводится как блок, дополненный коробкой-маркером списка.
table, inline-table
Аналогично block и inline-block, но предполагает использование табличной модели. Последняя предлагает ряд отдельных значений данного свойства (table-caption и др.) для воспроизведения элементов как заголовков, строк, ячеек и других частей таблицы.
none
Элемент не воспроизводится.

Верстка абзаца в целом

text-align
Выравнивание — left, right, center, justify; inherit.
text-indent
Абзацный отступ — абсолютная или относительная (от ширины блока) длина; или inherit.

Верстка строк текста

line-height
Высота строки — абсолютная или относительная (от высоты шрифта — в процентах или долях) длина; normal; inherit.[4]
vertical-align
Вертикальное выравнивание — абсолютная или относительная (от высоты строки) длина; baseline, sub, super, top, text-top, middle, bottom, text-bottom; inherit.[5]
letter-spacing
word-spacing
Межсимвольный и межсловный интервалы — абсолютная длина; normal; inherit.

Цвет текста и фон

color
Цвет текста.
background
Фон — значение inherit, или последовательность из одного или более следующих значений (свойств):

Шрифт

font
Шрифт — inherit; caption, icon, menu, message-box, small-caption, status-bar; или же последовательность из одного или более следующих значений (свойств):
  1. Опционально, в любом порядке:
    • -stylenormal, italic, oblique; inherit;
    • -variantnormal, small-caps; inherit;
    • -weightnormal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900; inherit;
  2. -size; опционально — / и значение line-height.
  3. -family — одно или более разделенных запятыми названий семейств шрифтов. Помимо фактических названий, допускаются следующие предопределенные значения («псевдонимы»): serif («с засечками»), sans-serif («без засечек»), cursive («рукописный»), fantasy, monospace («моноширинный».)
text-decoration
none; inherit; или же последовательность из одного или более следующих ключевых слов: underline, overline, line-through, blink.

Текстовые преобразования

content
quotes
text-transform
none; inherit; capitalize, uppercase, lowercase.

Обработка пробелов

white-space
normal, pre, nowrap, pre-wrap, pre-line; inherit.

Положение на странице

float
none; inherit; left, right.
clear
none; inherit; left, right, both.
position
static; inherit; relative, absolute, fixed.
z-index
auto; inherit; целое число.

Некоторые другие свойства

cursor
outline
Граница элемента — inherit; или же последовательность из одного или более следующих значений (свойств):

Примечания

  1. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. W3C. Проверено 1 октября 2015.
  2. Full property table. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. W3C. Проверено 6 октября 2015.
  3. Visual formatting model. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. W3C. Проверено 7 октября 2015.
  4. Visual formatting model details. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. W3C. Проверено 7 октября 2015.
  5. Изучать действие этого свойства имеет смысл на содержащем текст элементе — b, span, или ином — имеющем кегль шрифта в несколько раз меньший, нежели окружающий текст.
  6. background-position. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. W3C. Проверено 7 октября 2015.

© 2015 Иван Шмаков, CC BY-SA 3.0+.