|
Урок 5: Текст Форматирование и установка стиля текста - ключевая проблема для любого web-дизайнера. В этом уроке вы увидите впечатляющие возможности CSS при отображении текста. Будут рассмотрены следующие свойства:
Отступы [text-indent] Свойство text-indent позволяет выделить параграф с помощью установки отступа для его первой строки. В примере 30px применяется ко всем параграфам <p>:
![]() Выравнивание текста [text-align] CSS-свойство text-align соответствует атрибуту, используемому в старых версиях HTML. Текст может быть выровнен left, right, centred или justify. В примере текст заголовочных ячеек таблицы <th> выравнивается вправо, а в ячейках данных <td> - по центру. Кроме того, нормальные параграфы - justify:
![]() Декоративный вариант [text-decoration] Свойство text-decoration позволяет добавлять различные "декоративные эффекты". Например, можно подчеркнуть текст, провести линию по или над текстом. В примере <h1> подчёркнуты, <h2> - имеют черту над текстом, а <h3> - перечёркнуты.
![]() Интервал между буквами [letter-spacing] Интервал между буквами текста можно специфицировать свойством letter-spacing. Значение - нужная величина. Например, если вам необходимо 3px между буквами в параграфах <p> и 6px - в заголовках <h1>, то используется такой код:
![]() Трансформация текста [text-transform] Свойство text-transform управляет регистром символов. Можно выбрать capitalize, uppercase или lowercase, в зависимости от того, как выглядит текст в оригинальном HTML-коде. Например, слово "headline" можно показать "HEADLINE" или "Headline". Имеются четыре возможных значения text-transform: capitalize Капитализирует каждое слово. Например: "жанна моро" станет "Жанна Моро". uppercase Конвертирует все символы в верхний регистр. Например: "жанна моро" станет "ЖАННА МОРО". lowercase Конвертирует все символы в нижний регистр. Например: "ЖАННА МОРО" станет "жанна моро". none Трансформации нет - текст отображается так же, как в HTML-коде. Для примера мы используем список имён. Все имена выделены с помощью <li> (list-item). Давайте капитализируем все имена и отобразим все заголовки верхним регистром. Видите, HTML-код в этом примере в действительности записан в нижнем регистре.
![]() |
|