Форматирование и установка стиля текста - ключевая проблема для любого web-дизайнера. В этом уроке вы увидите впечатляющие возможности CSS при отображении текста. Будут рассмотрены следующие свойства:
Свойство text-indent
позволяет выделить параграф с помощью установки отступа для его первой строки. В примере 30px применяется ко всем параграфам <p>
:
p {text-indent: 30px;}
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
позволяет добавлять различные "декоративные эффекты". Например, можно подчеркнуть текст, провести линию по или над текстом и т. д. В примере <h1>
подчёркнуты, <h2>
- имеют черту над текстом, а <h3>
- перечёркнуты.
h1 {text-decoration: underline;}h2 { text-decoration: overline;}h3 { text-decoration: line-through;}
Интервал между буквами текста можно специфицировать свойством letter-spacing
. Значение - нужная величина. Например, если вам необходимо 3px между буквами в параграфах <p>
и 6px - в заголовках <h1>
, то используется такой код:
h1 {letter-spacing: 6px;}p { letter-spacing: 3px;}
Свойство text-transform
управляет регистром символов. Можно выбрать capitalize, uppercase или lowercase, в зависимости от того, как выглядит текст в оригинальном HTML-коде.
Например, слово "headline" можно показать "HEADLINE" или "Headline". Имеются четыре возможных значения text-transform:
Для примера мы используем список имён. Все имена выделены с помощью <li>
(list-item). Давайте капитализируем все имена и отобразим все заголовки верхним регистром.
Видите, HTML-код в этом примере в действительности записан в нижнем регистре.
h1 {text-transform: uppercase;}li { text-transform: capitalize;}
В течение трёх последних уроков вы вы изучили несколько CSS-свойств, но их - множество. В следующем урокемы рассмотрим работу со ссылками.
Всего комментариев: 0 | |