Форматирование и установка стиля текста - ключевая проблема для любого web-дизайнера. В этом уроке вы увидите впечатляющие возможности CSS при отображении текста. Будут рассмотрены следующие свойства:
text-indent
text-align
text-decoration
letter-spacing
text-transform
Отступы [text-indent]
Свойство text-indent позволяет выделить параграф с помощью установки отступа для его первой строки. В примере 30px применяется ко всем параграфам <p>:
p { text-indent: 30px; }
Выравнивание текста [text-align]
CSS-свойство text-align соответствует атрибуту, используемому в старых версиях HTML. Текст может быть выровнен left, right, centred или justify.
В примере текст заголовочных ячеек таблицы <th> выравнивается вправо, а в ячейках данных <td> - по центру. Кроме того, нормальные параграфы - justify:
Свойство text-decoration позволяет добавлять различные "декоративные эффекты". Например, можно подчеркнуть текст, провести линию по или над текстом и т. д. В примере<h1> подчёркнуты, <h2> - имеют черту над текстом, а <h3> - перечёркнуты.
Интервал между буквами текста можно специфицировать свойством 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:
Капитализирует каждое слово. Например: "john doe" станет "John Doe".
Конвертирует все символы в верхний регистр. Например: "john doe" станет "JOHN DOE".
Конвертирует все символы в нижний регистр. Например: "JOHN DOE" станет "john doe".
Трансформации нет - текст отображается так же, как в HTML-коде.
Для примера мы используем список имён. Все имена выделены с помощью <li> (list-item). Давайте капитализируем все имена и отобразим все заголовки верхним регистром.
Видите, HTML-код в этом примере в действительности записан в нижнем регистре.
h1 { text-transform: uppercase; } li { text-transform: capitalize; }
Всё изученное в предыдущих уроках вы можете применять и для ссылок/links (например изменять шрифт, цвет, подчёркивание и т. д). Новым будет то, что в CSS эти свойства можно определять по-разному, в зависимости от того, посетили уже ссылку, активна ли она, находится ли указатель мыши над ссылкой. Это позволяет добавить интересные эффекты на ваш web-сайт. Для этого используются так называемые псевдоклассы.
Псевдокласс позволяет учитывать различные условия или события при определении свойств HTM-тэга.
Рассмотрим пример. Как вы знаете, ссылки специфицируются в HTML тэгом <a>. В CSS мы также можем использовать a в качестве селектора:
a { color: blue; }
Ссылка может иметь разные состояния. Например, её уже посетили/visited или ещё нет. Можно использовать псевдоклассы для установки разных стилей посещённых и непосещённых ссылок.
a:link { color: blue; } a:visited { color: red; }
Используйте |a:link| и |a:visited| для непосещённых и посещённых ссылок, соответственно. Активные ссылки имеют псевдокласс a:active, и a:hover, когда указатель - над ссылкой.
Мы рассмотрим каждый их этих четырёх псевдоклассов на примерах и с объяснениями.
Псевдокласс :link используется для ссылок на страницы, которые пользователь ещё не посещал.
В примере кода непосещённые ссылки - синие.
a:link { color: #6699CC; }
Псевдокласс :visited используется для ссылок на страницы, которые пользователь посетил. В примере кода посещённые ссылки - фиолетовые.
a:visited { color: #660099; }
Псевдокласс :active используется для активных ссылок.
В примере активные ссылки имеют жёлтый фон.
a:active { background-color: #FFFF00; }
Псевдокласс :hover используется для ссылок, над которыми находится указатель мыши.
Это можно использовать для создания интересных эффектов. Например, если мы хотим, чтобы ссылки становились оранжевыми и курсивными при прохождении указателя над ними, то наш CSS должен выглядеть так:
a:hover { color: orange; font-style: italic; }
Эффекты для положения указателя мыши над ссылкой стали уже общим местом. Мы рассмотрим несколько дополнительных примеров для псевдокласса :hover.
