ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Размеры в 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 — выравнивание по центру;

• <p style="text-align: center">Абзац с выравниванием по центру</p>

• left — выравнивание по левому краю;

• <p style="text-align: left">Абзац с выравниванием по левому краю</p>

• right — выравнивание по правому краю;

• <p style="text-align: right">Абзац с выравниванием по правому краю</p>

• justify — выравнивание по ширине (по двум сторонам);

• <p style="text-align: justify">Абзац с выравниванием по ширине</p>

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

Атрибут 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 }

Подчеркивание, надчеркивание и зачеркивание текста

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

• none — обычный текст (по умолчанию);

• <p style="text-decoration: none">Текст</p>

• underline — подчеркивает текст;

• <p style="text-decoration: underline">Подчеркнутый текст</p>

• overline — проводит линию над текстом;

• <p style="text-decoration: overline">Надчеркнутый текст</p>

• line-through — зачеркивает текст;

• <p style="text-decoration: line-through">Зачеркнутый текст</p>