Сибирский федеральный университет
Опубликован: 01.09.2010 | Доступ: свободный | Студентов: 3929 / 383 | Оценка: 4.08 / 3.78 | Длительность: 11:06:00
Лекция 3:

Атрибуты стиля (CSS attributes)

Шрифт и текст

Описание шрифта и форматирования текста состоит из целого ряда отдельных атрибутов. Многие термины здесь почерпнуты из типографской практики.

Font-family (гарнитура) задает название используемого шрифта. Поскольку нет полной уверенности, что указанный шрифт установлен и доступен в любом браузере и на любой клиентской машине, разработчик может задать список альтернативных шрифтов в порядке убывания предпочтительности, разделив список запятыми. Если название шрифта содержит пробелы, оно должно быть заключено в кавычки. Пример:

p {font-family: 'Times New Roman', Times, serif;}

Font-size (кегль) задает размер шрифта в абсолютных или относительных единицах или относительно пользовательских предпочитаемых размеров.

Пример:

.p1 {
    font-size: small;
  }
  /* варианты: xx-small, x-small, small, medium, large, x-large, xx-large */
  .p2 {
    font-size: larger;
  }
  /* варианты: larger, smaller */
  .p3 {
    font-size: 10pt;
  }
  /* абсолютный размер 10 пунктов */
  .p3 {
    font-size: 10px;
  }
  /* размер 10 пикселей. Зависит от разрешения экрана или принтера */
  .p3 {
    font-size: 120%;
  }
  /* 120% от размера шрифта родительского элемента */

Font-style (начертание) переключает между обычным (normal) и курсивным (italic).

h3 {font-style: italic;} /* курсив */

Font-weight задает насыщенность (жирность) шрифта. Возможные значения:

  • normal – обычный
  • bold – жирный
  • bolder – жирнее родительского
  • lighter – светлее родительского
  • 100 – самый светлый
  • 200
  • 300
  • 400 – то же что normal
  • 500
  • 600
  • 700 – то же что bold
  • 800
  • 900 – самый жирный

Установки жирности зависят от установленных на пользовательской машине шрифтов. Часто пользователь не может увидеть различий между близкими значениями жирности.

li {font-weight: bold;}

Font-variant переключает шрифт между обычным (normal) и малыми заглавными буквами (small-caps).

p:first-line {font-variant: small-caps;}

Line-height задает межстрочный интервал в размерных единицах или процентах межстрочного интервала родительского объекта.

p {line-height: 8mm;}

Перечисленные выше атрибуты могут быть объединены в составной атрибут font в следующем порядке: font-style, font-variant, font-weight, font-size, line-height, font-family.

Пример:

p {
    font: italic normal 400 12px/14px Arial;
  }
  /* выделенные жирным значения обязательны, остальные могут быть опущены */

Эквивалентно

p {
    font-style: italic;
    font-variant: normal; /* значение по умолчанию можно опустить*/
    font-weight: 400; /* значение по умолчанию можно опустить*/
    font-size: 12px;
    line-height: 14px;
    font-family: Arial;
  }

Значения font-size и font-family должны всегда присутствовать в объявлении font и быть расположены в установленном порядке. Если какое-либо из них будет пропущено, то все правило будет признано недействительным.

Text-decoration допускает следующие значения: none (без декорирования), underline (подчеркнутый), overline (надчеркнутый), line-through (перечеркнутый), а также их сочетания.

li {text-decoration: underline line-through;}

Text-transform задает преобразование текста следующим образом: none (нет преобразования, по умолчанию), capitalize (делает первую букву каждого слова заглавной), uppercase (все заглавные), lowercase (все строчные).

h1 {text-transform: capitalize;}

Text-align задает выравнивание текста внутри блока влево ( left ), вправо ( right ), по центру ( center ) или по ширине ( justify ). Text-indent определяет отступ первой строки текста от левой границы блока.

p {
    text-align: justify;
    text-indent: 20px;
  }
  /* допускаются положительные и отрицательные значения */

letter-spacing регулирует расстояние между буквами. Значения: любая единица измерения CSS (обычно em или px), хотя проценты для этого свойства не работают в большинстве браузеров. Допускаются отрицательные значения. Значение normal сбрасывает letter-spacing в стандартное значение.

Vertical-align устанавливает базовую линию элемента относительно базовой линии окружающего содержимого. С помощью этого свойства можно немного поднять или опустить символ относительно окружающего текста. При применении к ячейке таблицы значения top, middle, bottom и baseline управляют вертикальным размещением содержимого внутри ячейки.

color устанавливает цвет текста. Значение: любое корректное значение цвета.

p {
      font: 14px Verdana;
    }
  ...
  <p>
    Ко всем абзацам данного примера применено стилевое правило, устанавливающее
    кегль 14px и гарнитуру Verdana. Данный абзац демонстрирует эти свойства
    в чистом виде.
  </p>
  <p style="font-size: larger">
    Текст этого абзаца крупнее, поскольку к нему применен встроенный стиль
    со значением свойства font-size:larger.
  </p>
  <p style="line-height: 200%; color: Red">
    В этом абзаце увеличен межстрочный интервал путем задания свойства стиля
    line-height: 200%, что означает удвоенную высоту строки. Кроме того, тексту
    назначен красный цвет.
  </p>
  <p>
    Эффект <span style="letter-spacing: 3px">разреженного текста </span>достигается
    путем применения свойства letter-spacing.
  </p>
4.2. Свойства шрифта и текста
Свойства шрифта и текста

Рис. 4.1. Свойства шрифта и текста
Упражнение. Попробуйте практически применить рассмотренные свойства шрифта и текста к элементам body и p в примере.
Елена Сапегова
Елена Сапегова

После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть?

Андрей Лучицкий
Андрей Лучицкий
Россия
Дмитрий Юркин
Дмитрий Юркин
Россия, Москва