CSS "От А до Я" - 3

Никита Е. Сенченко

🕛 13.10.2006, 14:58

http://webmoney.kharkov.ua

Приветствую! Продолжаю знакомить Вас с основами CSS. В предыдущей статье я подробно рассказывал о том, как с помощью каскадных таблиц можно форматировать текст. Но рассмотренные правила относились скорее к шрифту, чем к тексту как таковому. Тем временем существует еще много правил, относящихся непосредственно к тексту. Их мы сейчас и рассмотрим.

Эти правила (также как и свойства шрифта, рассмотренные ранее) применимы как к строковым, так и блочным элементам html-разметки. Например, с их помощью можно описать элементы 'H1' - 'H6', 'I' (строковые), а также 'P', 'DIV' (блочные) и т.д. Если определенное форматирование необходимо применить к выборочному фрагменту текста, то следует воспользоваться тегом <SPAN>: <H3>Начало заголовка<SPAN>Конец заголовка</SPAN></H3>

Итак, приступим.

Свойства текста.
# п/п Свойство Значение Описание
1 word-spacing px, pt, em, % Устанавливает интервалы между словами
2 letter-spacing px, pt, em, % станавливает интервалы между буквами
3 text-decoration underline
overline
line-through
blink
none Подчеркнутость, надчеркнутость, перечеркнутость
4 text-transform capitalize
uppercase
lowercas
blink
none Преобразует регистр текста
5 vertical-align baseline
middle
sub
super
text-top
text-bottom
top
bottom Устанавливает вертикальное положение элемента
6 text-align left
right
center
justify Устанавливает горизонтальное выравнивание
7 text-indent px, pt, em, % Управляет величиной отступа первой строки абзаца
8 line-height px, pt, em, %
число Устанавливает расстояние между строками
9 color мнемоника, RGB Задает цвет текста
* Свойства 'word-spacing' и 'letter-spacing' не должны вызвать никаких затруднений. Они задают соответственно расстояние между словами и буквами. А точнее, задают расстояния, которые нужно добавить к установленным по умолчанию интервалам. Чаще всего эти свойства применяются для того, чтобы уплотнить или, наоборот, разрядить строку.
Вот пример: <P style="letter-spacing: 10pt">Увеличенное межбуквенное расстояние</P>
Увеличенное межбуквенное расстояние
Кстати, 'letter-spacing' в NN 4 не поддерживается.
* Ну, тут вроде все ясно. А вот правило 'text-decoration' требует более детального пояснения. Как видно из таблицы, это свойство может иметь несколько значений: "underline", "overline", "line-through", "blink" и "none". С "none" все понятно. Оно принято по умолчанию. Значение "underline" аналогично элементу 'U' и служит для отображения подчеркнутого текста. Значение "overline" делает текст надчеркнутым, а "line-through" - зачеркнутым. Существует также значение "blink". Оно служит для того, чтобы сделать текст мерцающим. Непонятно, правда, кому это надо. Точно также посчитали и парни из Microsoft и норвежские разработчики Opera, а потому "blink" работает только в Нетскейпе: <P style="font-size:24px"><SPAN style="text-decoration: underline">Подчеркнуто</SPAN>, <SPAN style="text-decoration: overline">надчеркнуто</SPAN>, <SPAN style="text-decoration: line-through">перечеркнуто</SPAN></P>
Вот что получилось:
Подчеркнуто, надчеркнуто, перечеркнуто * Теперь рассмотрим свойство 'text-transform'. Значение "capitalize" устанавливает первую букву каждого слова прописной, "uppercase" делает все буквы прописными, "lowercase" - наоборот, строчными. Но не понятно только, зачем все это надо, ведь буквы можно сразу сделать такими, какими нужно - прописными или строчными. Хотя кто знает… По умолчанию, понятное дело, установлено "none". * А вот весьма полезное свойство - 'line-height'. Оно задает расстояние между строками. Точнее говоря, между базовыми линиями строк. Это значит, что 'line-height' задает расстояние между одинаковыми точками одинаковых букв, расположенных друг под другом, например, между точками пересечения двух "палочек" в букве "Х".
Значение этого свойства может задаваться в px, pt, %, em. Например: <SPAN style="line-height: 11pt; font-size: 14pt">В данном примере мы уменьшили межстрочное расстояние с помощью line-height. Иногда такой метод можно применить,чтобы "уплотнить" текст на странице. А вообще, действуйте по обстоятельствам, ведь Вы - веб-дизайнер!</SPAN>
А вот что получилось: В данном примере мы уменьшили межстрочное расстояние с помощью line-height. Иногда такой метод можно применить,чтобы "уплотнить" текст на странице. А вообще, действуйте по обстоятельствам, ведь Вы - веб-дизайнер!
Значением 'line-height' также может быть просто число. Тогда межстрочное расстояние определяется как высота шрифта, умноженная на это число:
<SPAN style="line-height: 2; font-size: 12pt">Экспериментируем с line-height. В этом примере расстояние между базовыми линиями строк будет равно 24pt</SPAN> *

Следующее свойство - 'text-indent'. Оно дает нам возможность установить "красную" строку, то есть отступ первой строки абзаца. Значение может быть задано в px, pt, % или em: <P style="text-indent: 30px">Этот параграф начинается с "красной" строки в 30 пикселей. Как видите, все очень просто! Вообще, так делать намного удобнее, чем отдельно форматировать каждый абзац, "подгоняя" его к "красной" строке искусственными методами (например, с помощью нескольких &nbsp в начале абзаца)</P>
Вот что получилось:
Этот параграф начинается с "красной" строки в 30 пикселей. Как видите, все очень просто! Вообще, так делать намного удобнее, чем отдельно форматировать каждый абзац, "подгоняя" его к "красной" строке искусственными методами (например, с помощью нескольких &nbsp в начале абзаца)
Также очень часто практикуется применение отрицательных значений 'text-ident'. Рассмотрим пример: <P style="text-indent: -10px">В этом параграфе мы применили отрицательный отступ первой строки. Такой прием часто применяется на веб-страницах. Например, для того, чтобы сделать акцент на словах, стоящих в начале абзаца. Была бы фантазия!</P>
А вот что мы получим:
В этом параграфе мы применили отрицательный отступ первой строки. Такой прием часто применяется на веб-страницах. Например, для того, чтобы сделать акцент на словах, стоящих в начале абзаца. Была бы фантазия!
Забегая вперед, скажу, что примерно такую же функцию, что и 'text-indent', может выполнять также т.н. псевдо-класс 'first-line', но его мы рассмотрим немного позже. * Теперь поговорим о выравнивании. С горизонтальным выравниванием 'text-align' вроде все понятно. Возможные значения здесь: "left", "right", "central", "justify". Они устанавливают выравнивание соответственно по левому, правому краю, по центру и по обоим.
У вертикального выравнивания 'vertical-align' может быть целых 8 значений (см. таблицу). Но большинство из них не представляется мне полезными. Кроме двух: "sub" и "super". Первое делает элемент подстрочным, а второе - надстрочным. Такие возможности можно использовать, например, при написании химических и математических формул. Хотя получается довольно громоздко, но это все-же, по-моему, лучше, чем отливать формулы в графике: <HEAD> <STYLE> .a {font-size: 48px; color: red; font-weight: bold} .b {font-size: 32px; vertical-align: sub; color: red; font-weight: bold} </STYLE> ... </HEAD> <BODY> <P><SPAN class="a">C</SPAN> <SPAN class="b">2</SPAN> <SPAN class="a">H</SPAN> <SPAN class="b">5</SPAN> <SPAN class="a">OH</SPAN></P>

Пусть не очень удобно, зато формула спирта получилась очень даже ничего :) :
C 2 H 5 OH * Теперь поговорим о цвете текста. За это отвечает свойство 'color'.
Этот атрибут уже не раз использовался в предыдущих примерах, поэтому вы должны быть с ним уже немного знакомы. Это свойство определяет цвет шрифта. Все вроде бы просто.
Единственная сложность заключается в том, как это свойство задать. Для этого существует два способа: o мнемоническое имя цвета; o код RGB.

Мнемоническое имя означает, что цвет можно обозначить "по имени". Но это возможно не для всех цветов. Официальные документации говорят, что задание цвета мнемоническим именем допустимо только для следующих цветов: aqua (светло-голубой), black (черный), blue (синий), fuchsia (светло-фиолетовый),gray (серый), green (зеленый), lime (светло-зеленый), maroon (коричневый), navy (темно-синий), olive (оливковый), purple (фиолетовый), red (красный), silver (светло-серый), teal (сине-зеленый), white (белый), yellow (желтый). Для остальных цветов рекомендуется использовать RGB-формат, хотя современные браузеры "понимают" мнемонику намного большего количества цветов.
Но, несмотря на это, в любом случае для задания цвета желательно использовать его код RGB. Этот код состоит из шести шестнадцатеричных символов. Первая пара символов кодирует "интенсивность" красного, вторая - "интенсивность" зеленого, третья - синего. Этот код обязательно должен начинаться знаком #. Например, #FF0000 кодирует красный цвет (интенсивность красного, как видим, максимальная, а зеленого и синего - нулевая), кодом #FFFFFF обозначается белый цвет, #000000 - черный.
Таким образом, каждый цвет цветовой гаммы может быть однозначно определен любым браузером. Кстати, можно задавать подобный код и с помощью трех символов; тогда он преобразовывается в шестисимвольный путем дублирования каждого символа. Например, #FB2 эквивалентен #FFBB22 и т.д.

Вот вроде бы и все, что хотелось рассказать по поводу атрибутов CSS, позволяющих управлять свойствами текста.

Но мой рассказ был бы неполным, если бы я не рассказал о т.н. псевдо-элементах, об одном из которых было вскользь сказано ранее.

Сразу хочу предупредить всех (и расстроить поклонников дядюшки Билла): как это ни странно, но псевдо-элементы поддерживает только Netscape, и никак не IE. Не знаю, чем это объяснить, но тем не менее, это так... Я прекрасно понимаю, что NN сегодня пользуются единицы, но все-таки хотел бы для полноты изложения рассказать и о псевдо-элементах. Примеры сопровожу скриншотами, снятыми с Нетскейпа.

Псевдо-элементов в CSS два: 'first-line' и 'first-letter'. Как видно из названия, они позволяют форматировать соответственно первую строку и первую букву какого-либо элемента html. Чаще всего таким элементом выступает элемент 'P'.

Псевдо-элементы задаются в соответствии со следующим синтаксисом: элемент:псевдо-элемент {свойство: значение}

Какой же предварительный вывод можно сделать, исходя из такого синтаксиса? Псевдо-элементы в CSS - это не свойства какого-либо элемента html, это его составные части, так сказать, подэлементы. И действительно, первая строка и первая буква абзаца - это как бы его составляющие.

И еще. Псевдо-классы можно определять в отдельном файле, подключаемом к документу, можно задавать внутри тегов <STYLE>, </STYLE>, но с помощью атрибута 'style' их задавать нельзя. Но давайте перейдем к конкретике.

'first-line'
Псевдо-элемент 'first-line' используется для применения особых стилей к первой строке элемента (чаще всего это элемент 'P'). Вот пример: <STYLE TYPE = "text/css">
P:first-line {text-decoration: underline}
</STYLE>
...
<P>Первая строка абзаца подчеркнута, так как соответствующий стиль описан для псевдо-элемента 'first-line'. Остальные строки, как видим, неподчеркнуты.</P>

Вот что получилось:

К 'first-line' могут быть применены только следующие свойства: свойства цвета и фона, свойства шрифтов, 'word-spacing', 'letter-spacing', 'text-decoration', 'vertical-align', 'text-transform', 'line-height', 'clear'. С большинством из них вы уже знакомы.

'first-letter'
Псевдо-элемент 'first-letter' используется для создания эффекта буквицы и, кстати сказать, употребляется очень и очень часто. К нему применимы следующие свойства: свойства шрифтов, свойства цвета и фона, 'text-decoration', vertical-align', 'text-transform', 'line-height', свойства границ, отступов и рамок (о них я расскажу в следующей статье), а также 'float' и 'clear'.

Следующий пример позволит создать эффект буквицы, когда высота первой буквы равна высоте двух строк: <STYLE TYPE="text/css">
P {font-size: 12pt; line-height: 12pt}
P:first-letter {font-size: 200%; float: left}
</STYLE>
...
<P>Здесь я показал, как с помощью CSS быстро и легко можно добиться эффекта буквицы. Попробуйте-ка сделать то же самое с помощью "чистого" HTML. Дудки! :) </P>

По-моему, неплохо получилось:

В этом примере вам, видимо, не все понятно, так как использовалось свойство 'float', о котором я еще ничего не говорил. Оно будет рассмотрено в следующей главе. Сейчас же я могу только прокомментировать его функцию в данном примере. Запись "float: left", примененная к первой букве абзаца, делает эту букву "плавающей". Это значит, что остальной текст будет ее обтекать (в данном случае справа). Это и приводит к эффекту буквицы.

Но чаще всего одинаково форматировать первые строки или буквы абсолютно всех абзацев в документе оказывается не нужным. Или же другой вариант: один абзац надо отформатировать одним способом, другой - другим. Как поступить? Правильно, надо прибегнуть к классам. Вот тут внимание! В связи с тем, что классы применяются к псевдо-элементам, их синтаксис будет несколько необычен: элемент.имя_класса:псевдо-элемент {свойство: значение}

Вызов класса осуществляется как обычно. При этом он может быть применен только к тому элементу, для которого он описан: <элемент class="имя_класса">

Давайте рассмотрим это на примере. <STYLE TYPE="text/css">
P {color:green}
P.a:first-letter {font-size:200%; color:red}
P.a:first-line {letter-spacing: 2pt; text-decoration: overline; color: navy}
P.b:first-letter {font-size:200%; color: blue}
P.b:first-line {background-color:grey; color:navy}
</STYLE>
...
<P class="a">У этого абзаца первая буква размером в два раза больше основного текста. Первая буква в соответствии с правилами наследования - красная, а не темно-синяя, как вся первая строка и не зеленая, как весь абзац. У первой строки межбуквенное расстояние равно 2 pt, первая строка надчеркнута</P> <P class="b">Этот абзац формируется аналогично. Первая строка, включая и первую букву, напечатана на фоне серого и, к тому же, темно-синим цветом. Первая буква - светло-синяя</P>

Результат:

Но должен вас огорчить (хотя вы наверно уже и так догадались по скриншотам последних примеров): "народный" браузер IE 5 псевдо-элементы не поддерживает, а примеры я представил в Нетскейпе.