Единицы измерения в CSS. Форматирование шрифта. Форматирование текста

Размеры в CSS можно задавать в абсолютный или относительных единицах.

Абсолютные единицы:

пиксел (px);
миллиметр (mm);
сантиметр (cm);
дюйм (in) — 1in = 2.54 cm;
пункт (pt) — 1pt = 1/72 in;
пика (pc) — 1pc = 12pt.

Остальные единицы:

процент (%);
высота текущего шрифта (em);
высота буквы "х" текущего шрифта (ех).

Для значения 0 можно не указывать единицы измерения.

Цвет можно задать одним из следующих способов:

именем цвета — blue, green, red и т.д.;
p {color:blue}
значением вида #[R] [G] [B], где R — насыщенность красного, G — насыщенность зеленого и B — насыщенность синего в цвете. Значения задаются одинарными шестнадцатеричными числами от 0 до F;
p {color: #F00}
значением вида #[RR] [GG] [BB], где RR — насыщенность красного, GG — насыщенность зеленого и BB — насыщенность синего в цвете. В таком формате значения задаются двузначными шестнадцатеричными числами от 00 до FF;
p {color: #FF0000}
значением вида rgb ([R], [G], [B]), где R, G и B — насыщенности красного, зеленого и синего цветов, которые задаются десятичными числами от 0 до 255;
p {color: rgb (255, 0, 0)}
значением вида rgb ([R%], [G%], [B%]), где R%, G% и B% — насыщенности красного, зеленого и синего цветов, которые задаются в процентах;
p {color: rgb (100%, 0%, 0%)}

Все перечисленные примеры задают красный цвет.

Форматирование шрифта

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

Имя шрифта

Атрибут font-family позволяет задать имя шрифта:

p { font-family:Arial }

В ряде случаев шрифт может отсутствовать на компьютере пользователя. Поэтому лучше указывать несколько альтернативных шрифтов. Именауказываются через запятую:

p { font-family:Arial, Helvetica, Verdana }

Можно также указать одно из пяти типовых семейств шрифтов — serif, sans-serif, cursive, fantasy или monospace:

p {font-family:Verdana, Arial, Helvetica, sans-serif }

Стиль шрифта

Атрибут font-style позволяет задать стиль шрифта. Он может принимать следующие значения:

normal —нормальный шрифт;
p { font-family:Verdana; font-style:normal }
italic — курсивный шрифт;
p { font-family:Verdana; font-style: italic}
oblique — наклонный шрифт;
p { font-family:Verdana; font-style:oblique }

Размер шрифта

Атрибут font-size позволяет задать размер шрифта:

.text1{ font-size:12px; color: red; font-family:Arial }

Цвет шрифта

Атрибут color позволяет задать цвет шрифта:

.text1{ font-size:12px; color: red; font-family:Arial }

Жирность шрифта

Атрибут font-weight позволяет управлять жирностью шрифта. Может принимать следующие значения:

100, 200, 300, 400, 500, 600, 700, 800, 900 — значение 100 соответствует самому бледному шрифту, а 900 — самому жирному;
p { font-family:Verdana; font-style:normal; font-size:12px; font-weight:700 }
normal —нормальный шрифт. Соответствует значению 400;
p { font-family:Verdana; font-style:normal; font-size:12px; font-weight: normal }
bold — полужирный шрифт. Соответствует значению 700;
p { font-family:Verdana; font-style:normal; font-size:12px; font-weight: bold }

Форматирование текста

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

Расстояние между символами в словах

Атрибут letter-spacing задает расстояние между символами текста. Он может принимать следующие значения:

normal —значение по умолчанию;
p { letter-spacing:normal; font-style:italic; font-weight:normal }
абсолютная величина в поддерживаемых CSS единицах;
p { letter-spacing:5px; font-style:italic; font-weight:normal }

Расстояние между словами

Атрибут word-spacing задает расстояние между словами. Он может принимать следующие значения:

normal —значение по умолчанию;
p { word-spacing:normal; font-style:italic; font-weight:normal }
абсолютная величина в поддерживаемых CSS единицах;
p { word-spacing:5px; font-style:italic; font-weight:normal }

Отступ первой строки

Атрибут text-indent задает отступ с "красной строки". Может задаваться абсолютная или относительная величина отступа;

p { text-indent:10px; font-style:italic; font-weight:normal }

Вертикальное расстояние между строками

Атрибут line-height задает вертикальное расстояние между базовыми линиями двух строк. Он может принимать следующие значения:

normal — значение по умолчанию;
p { line-height:normal; font-style:italic; font-weight:normal }
абсолютная величина в поддерживаемых CSS единицах;
p { font-family:Verdana; font-style:normal; font-size:12px; font-weight:700; line-height:5px }

Горизонтальное выравнивание текста

Атрибут text-align задает горизонтальное выравнивание текста. Это атрибут может принимать следующие значения:

center —выравнивание по центру;
Абзац с выравниванием по центру
left — выравнивание по левому краю;
Абзац с выравниванием по левому краю
right — выравнивание по правому краю;
Абзац с выравниванием по правому краю
justify — выравнивание по ширине (по двум сторонам);
Абзац с выравниванием по ширине

Вертикальное выравнивание текста

Атрибут vertical-alignзадает вертикальное выравнивание текста относительно элемента-родителя, например, ячейки таблицы. Он может принимать следующие значения:

baseline —по базовой линии;
td { font-size:12px; color:red; vertical-align: baseline }
middle —по центру;
td { font-size:12px; color:red; vertical-align: middle }
top — по верху;
td { font-size:12px; color:red; vertical-align:top }
bottom — по низу;
td { font-size:12px; color:red; vertical-align:bottom }