• overline – выводит линию поверх текста;
• line-through – перечеркивает текст (значение по умолчанию для HTML‑элементов DEL, S, STRIKE);
• none – убирает все украшения текста (значение для большинства HTML‑элементов).
С помощью свойства text-decoration, кстати, можно с легкостью изменить внешний вид гиперссылок, убрав в них подчеркивание текста (если это, конечно, нужно). Кроме того, с помощью рассмотренных далее в этой главе псевдоклассов гиперссылок можно, например, подчеркивать текст гиперссылки только при наведении на нее указателя мыши. Но оставим гиперссылки в покое и обратимся к маленькому примеру использования свойства text-decoration:
P.under {text-decoration: underline}
P.strike {text-decoration: line-through}
P.crazy {text-decoration: underline overline}
Обратите внимание на последнее приведенное здесь правило CSS. Если браузер это поддерживает, то применение нескольких значений одновременно дает очень любопытный, правда вряд ли особо полезный результат. В данном случае получится подчеркнутый и «надчеркнутый» одновременно фрагмент текста.
Следующим рассмотрим свойство text-align, при помощи которого задается горизонтальное выравнивание текста. В качестве значения этого свойства может использоваться одно из следующих значений:
• left – выравнивание по левому краю;
• right – выравнивание по правому краю;
• center – выравнивание по центру;
• justify – выравнивание одновременно по правому и левому краям.
Использовать text-align крайне просто, а потому сразу переключим свое внимание на следующее свойство, позволяющее задать отступ первой строки текста или так называемый отступ красной строки. Это свойство именуется test-indent. Оно может принимать или абсолютное, или относительное значение (в единицах измерения CSS), или же процент от ширины родительского HTML‑элемента, например:
...
<TD style = "text-indent: 10%">
Текст с отступом красной строки 10% от ширины ячейки таблицы
</TD>
...
Изменить расстояние между строками текста подобно тому, как это делается в текстовом редакторе (при смене одинарного интервала полуторным, например), можно при помощи свойства line-height. Хотя если говорить более точно, то свойство line-height задает не расстояние между строками, а высоту самих строк. По умолчанию это свойство имеет значение normal. Кроме того, значениями свойства line-height могут быть абсолютные или относительные значения в единицах измерения размеров CSS и процентные значения, определяющие процент от высоты строк, унаследованной от родительского элемента страницы. Ниже приведено несколько примеров использования свойства line-height:
P.compact {line-height: 80%} /*компактный абзац*/
P.lagre {line-height: 150%} /*абзац с полуторным межстрочным интервалом*/
Как изменяется внешний вид текста при использовании свойства line-height, можно увидеть на рис. 11.2.
Рис. 11.2. Различная высота строк
Следующее свойство используется для изменения регистра символов. Оно называется texttransform и принимает одно из следующих значений:
• capitalize – делает первые буквы слов прописными;
• uppercase – переводит текст в верхний регистр;
• lowercase – переводит текст в нижний регистр;
• none – отключает преобразования регистра (значение по умолчанию).
Теперь рассмотрим два свойства CSS, при помощи которых можно влиять на вывод текста на уровне слов: word-spacing и white-space. Первое из них используется для увеличения или уменьшения промежутка между словами. Значением по умолчанию этого свойства считается normal, означающее нормальное расстояние между словами. Кроме того, свойству wordspacing можно задать значение в одной из единиц измерения длины CSS, например:
P.compact {word-spacing: 1mm}
P.usial {word-spacing: 10px}
Второе упомянутое свойство white-space позволяет разрешить или запретить перенос текста по словам. Значения этого свойства:
• normal – разрешает обычное поведение при переносе текста на следующую строку (значение по умолчанию);
• pre – сохраняет оригинальное форматирование текста (как внутри HTML‑элемента PRE);
• nowrap – запрещает перенос текста по словам (аналогично HTML‑элементам NOBR).
Наконец, последним рассмотрим свойство CSS letter-spacing, позволяющее управлять расстоянием между буквами текста. Значением этого свойства может быть normal (значение по умолчанию, означает обычное расстояние между буквами) или значение в одной из единиц измерения длины.
В CSS предусмотрена группа свойств, позволяющих изменять внешний вид списков. Причем все рассмотренные здесь свойства влияют на внешний вид маркера, наличие которого, собственно, и является характерной особенностью любого списка.
Итак, в первую очередь обратимся к свойству list-style-type. Для маркированных списков этому свойству задаются следующие значения:
• disc – задает круглый маркер списка (маркер закрашен внутри);
• circle – задает маркер в виде окружности;
• square – задает маркер в виде квадрата.
Для нумерованных списков свойству list-style-type присваиваются такие значения, задающие тип нумерации:
• decimal – нумерация арабскими цифрами;
• lower-roman – нумерация малыми римскими цифрами;
• upper-roman – нумерация большими римскими цифрами;
• lower-alpha – нумерация малыми латинскими буквами;
• upper-alpha – нумерация большими латинскими буквами.
Воздействие каждого значения свойства list-style-type аналогично соответствующим значениям атрибута type HTML‑элементов OL и UL, рассмотренных в гл. 4.
Следующее свойство, предназначенное для задания рисунка в качестве маркера списка, имеет имя list-style-image. Оно перекрывает значение свойства list-style-type и может иметь следующие значения:
• url("URI изображения для маркера") – указывает путь рисунка, который будет использоваться в качестве маркера списка;
• none – отменяет использование рисунка в качестве маркера (значение по умолчанию).
Наконец, свойство list-style-position позволяет задать более компактное отображение списка за счет изменения положения маркера. Свойство принимает следующие значения:
• inside – помещает маркер в текст элемента списка;
• outside – помещает маркер вне текста элемента списка (значение по умолчанию).
На рис. 11.3 показано, как могут выглядеть обычный и компактный списки с маркерами‑изображениями.
Рис. 11.3. Обычный и компактный списки
Показанный на рис. 11.3 эффект достигнут применением совсем простой таблицы стилей:
<STYLE>
UL.list {list-style-image: url("marker.gif")}
UL.compact_list {list-style-image: url("marker.gif");
list-style-position: inside}
</STYLE>
В CSS предусмотрен целый набор свойств, позволяющий менять внешний вид границ элементов страницы. Причем с использованием таблиц стилей границы можно показать не только для ячеек таблиц или изображений, но и для других элементов страницы.
Свойства CSS, предназначенные для настройки границ, можно разбить на три группы: свойства для задания цвета границ, свойства для задания стиля границ и свойства для задания толщины границ. Рассмотрим эти три группы по очереди.
Итак, для задания цвета сразу всех границ элемента используется свойство border-color. Типы значений, задающих цвет, рассмотрены в разд. 10.5. Кроме того, можно задать цвет границ элемента по отдельности, то есть цвет верхней, нижней, левой и правой границ. Для этого используются следующие свойства:
• border-top-color – цвет верхней границы;
• border-bottom-color – цвет нижней границы;
• border-left-color – цвет левой границы;
• border-right-color – цвет правой границы.
Таким образом, приведенные ниже правила CSS дадут один и тот же эффект (конечно, если браузер поддерживает оба варианта задания цвета границ):
red_border1 {border-color: red}
red_border2 {border-left-color: red; border-right-color: red;
border-top-color: red; border-bottom-color: red}
Следующая группа свойств, которую мы рассмотрим, задает стиль сразу всех или же только отдельных границ элемента. Для задания стиля всех границ предназначено свойство borderstyle, а для задания стиля верхней, нижней, левой и правой границ – свойства border-topstyle, border-bottom-style, border-left-style и border-right-style соответственно. Значения свойств могут быть следующими:
• none – скрывает границу элемента;
• dotted – граница прерывистая, состоит из точек;
• dashed – граница прерывистая, состоит из отрезков;
• solid – сплошная линия границы;
• double – двойная сплошная линия границы;
• groove – вдавленная линия границы;
• ridge – выпуклая линия границы;
• inset – граница типа «ступенька вверх» (подобный вид границ используется для оформления кнопок);
• outset – граница типа «ступенька вниз» (так выглядит нажатие кнопки).
Небольшой пример использования свойств задания стиля рамки приведен ниже (пример 11.1).
Пример 11.1. Стили границ элементов
<HTML>
<HEAD>
<TITLE>Стили границ элементов</TITLE>
</HEAD>
<BODY>
<TABLE style = "border-color: black">
<TR>
<TD style = "border-style: none">none
<TD style = "border-style: dotted">dotted
<TD style = "border-style: dashed">dashed
<TD style = "border-style: solid">solid
<TD style = "border-style: double">double
