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