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

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

Разработка отдельных фрагментов сайтов, консультации по вопросам верстки веб-страниц и веб-программирования.

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

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