Используйте свойство word-spacing, чтобы увеличить расстояние между словами в теге. Вы можете присвоить word spacing либо длину, либо ключевое слово normal, возвращающее обычное расстояние между словами. К примеру:
h3 {word-spacing: 25px}
помещает дополнительные 25 пикселов между словами в теге <h3>. Все популярные броузеры поддерживают свойство word-spacing.
Свойство text-transform позволяет автоматически преобразовать часть или весь текст документа в отображаемый заглавными или строчными буквами. Допустимыми значениями являются capitalize, uppercase, lowercase, none.
Capitalize выводит каждую первую букву любого слова в верхнем регистре, даже если текст исходного документа набран строчными буквами. Значения uppercase и lowercase выводят весь текст в верхнем и соответственно нижнем регистрах. Значение none, разумеется, отменяет всякое преобразование.
К примеру:
h1 {text-transform: uppercase}
выводит все буквы в заголовках уровня 1, предположительно названиях, в верхнем регистре, тогда как:
h2 {text-transform: capitalize}
гарантирует, что каждое слово в заголовках уровня 2 начинается с прописной буквы, что приемлемо, например, в заголовках разделов.
Отметьте, что тогда как uppercase и lowercase влияют на весь текст, capitalize действует только на первую букву каждого слова. Следовательно, попытка преобразовать слово «htML» при помощи capitalize приведет к «HTML». Свойство text-transform поддерживают все популярные броузеры.
Свойство text-shadow позволяет придать вашему тексту трехмерный вид при помощи выдержавших проверку временем теней. Значениями свойства являются обязательный сдвиг и необязательные цвет и радиус растушевки. У свойства может быть несколько наборов значений, разделенных запятыми, что позволяет получить последовательность
теней, причем каждый очередной набор значений находится на слое выше предыдущего, но всегда остается под оригинальным текстом.
Обязательно указываемый при определении свойства сдвиг составляется из двух длин. Первая отвечает горизонтальному смещению, вторая определяет смещение по вертикали. Положительные значения размещают тень вправо и вниз на указанное расстояние от текста. Отрицательные значения соответствуют тени, протянувшейся вверх и влево.
Необязательный параметр радиус тоже принимает значения длины и характеризует границы растушевки. Влияние этого параметра зависит от выводящего устройства. Еще один параметр тени – это цвет. Он, разумеется, может быть задан названием или RGB триплетом и обозначает цвет тени. Если цвет не указан, text shadow использует значение свойства color. К примеру:
h1 {text-shadow: 10px 10px 2px yellow}
p:first-letter {text-shadow: -5px -5px purple, 10px 10px orange}
Первый пример создает желтую тень от заголовков первого уровня в документе. Она протягивается на 10 пикселов вправо и 10 пикселов вниз и растушевана на 2 пиксела. Второй пример отбрасывает две тени от первой буквы в каждом абзаце. Фиолетовая тень размещается вверх и влево от буквы на пять пикселов. Другая тень, как и в первом примере, только оранжевая, протягивается на 10 пикселов вниз и 10 пикселов вправо от первой буквы каждого абзаца.
Существует традиция, в наши дни уже не такая общепринятая, начинать первую строку абзаца с отступом. Некоторые же текстовые блоки, такие как определения, обычно выносят первую строку влево, создавая то, что называется обратным или висячим отступом.
Свойство text indent стандарта CSS2 позволяет начинать абзац с красной строки или с висячего отступа, управляя величиной отступа первой строки в блоке. Применяйте с этим свойством длины и процентные значения. Отрицательные значения создают висячий отступ. Процентные – влекут за собой вычисление величины отступов в долях ширины
родительского элемента. По умолчанию значение свойства – ноль.
Чтобы выводить все абзацы в документе с красной строки, напишите, скажем:
p {text indent: 3em}
Использованная единица длины em масштабирует величину отступа в зависимости от размера шрифта на разных броузерах.
С висячими отступами дело обстоит хитрее, поскольку вам приходится следить за рамками элементов. Отрицательный отступ не смещает левого края текста, он просто сдвигает влево первую строку элемента, возможно, на поле, рамку или подложку родительского элемента. По этой причине висячие отступы работают в соответствии с ожиданиями, если вы сдвигаете левый край элемента вправо на такое же расстояние,
на какое строка выступает влево, или на большее. В частности:
p.wrong {text-indent: -3em}
p.hang {text-indent: -3em; margin-left: 3em}
p.large {text-indent: -3em; margin-left: 6em}
создает три стиля абзацев. Первый формирует висячий отступ, выходящий на левое поле. Второй вводит традиционный висячий отступ, а третий создает абзац, тело которого сдвинуто вправо больше, чем первая строка выступает влево. Посмотрите на все три стиля в действии.
Свойство text decoration создает украшения текста, некоторые из которых можно получить с применением тегов физической разметки.
Значением этого свойства служат одно или несколько ключевых слов из множества: underline (подчеркнутый), overline (надчеркнутый), line-through (зачеркнутый) и blink (мерцающий). Значение none принимается по умолчанию и говорит поддерживающему стили броузеру, что текст следует представлять обычным образом.
Свойство text decoration хорошо подходит для оформления гиперссылок. К примеру:
a:visited a:link a:active {text-decoration: underline overline}
помещает линии над и под гиперссылками в документе.
Это свойство текста не наследуется и не имеет влияния на нетекстовые элементы.
Интересно, что все популярные броузеры поддерживают свойство text-decoration, но только Internet Explorer обладает достаточно хорошим вкусом, чтобы не поддерживать значение blink.
Выравнивание текста относительно краев страницы – это элементарная функция практически всех текстовых процессоров. Свойство text-align предоставляет такую возможность для любого HTML-тега блочного характера. (Разработчики стандартов из W3C предпочитают, чтобы вы пользовались скорее text-align из CSS2, чем явным атрибутом align для выравнивания блочных тегов, таких как <p> и <div>). Используйте одно из четырех значений: left, right, center или justify. По умолчанию принимается, конечно, left. К примеру:
div {text-align: right}
указывает поддерживающему стили броузеру выровнять весь текст в теге <div> по правому краю. Значение justify предлагает броузеру выровнять текст по левому и по правому краю, раздвигая символы и слова по мере необходимости.
Все популярные броузеры в настоящее время поддерживают выравнивание left, right и center, но не justify.
Используйте свойство line-height (высота строки) для определения минимального расстояния между строками в тексте, являющемся содержимым тега. Когда броузер выводит текст с одинарным интервалом, верх следующей строки всего лишь на несколько пунктов ниже предыдущей. Увеличивая высоту строк, вы увеличиваете расстояние между
ними.
Значением свойства line-height может быть абсолютная или относительная длина, процентное значение, масштабный множитель или ключевое слово normal. Например:
p {line-height: 14pt}
p {line-height: 120%}
p {line-height: 2.0}
Первый пример устанавливает расстояние между базовыми линиями последовательных строк текста в точности равным 14 пунктам. Вто-рой указывает, что высота строки должна составлять 120% от размера шрифта. Последний пример использует масштабный множитель, чтобы установить высоту строки в два раза большей, чем размер шрифта,
выводя текст с двумя интервалами. Принятое по умолчанию значение normal обычно эквивалентно масштабному множителю 1,0 или 1,2.
Имейте в виду, что абсолютные и процентные значения свойства line-height применяются для вычисления высоты строки, основываясь на значении font-size. Вычисленное значение этого свойства наследуется дочерними элементами. Последующие изменения свойства font-size в родительском и дочернем элементах уже не изменяют вычисленную высоту строки.
Масштабные множители, напротив, откладывают вычисление высоты строки до момента действительного отображения текста. Следовательно, варьирование font-size локально воздействует на line-height. Вообще, лучше использовать для свойства line-height масштабные множители, чтобы высота строки автоматически менялась вместе с размером
шрифта.
Рассматриваемое обычно отдельно от характеристик шрифтов свойство line-height (точнее, его значение) может служить одним из элементов спецификации свойства font.
Свойство letter-spacing вставляет дополнительные промежутки между символами в тексте при его отображении броузером. Значение свойства может быть либо длиной, либо принятым по умолчанию ключевым словом normal, указывающим, что броузер должен использовать обычное расстояние между буквами. К примеру:
blockquote {letter-spacing: 2px}
вставляет дополнительные два пиксела между соседними буквами в теге <blockquote>. А так выглядят 5 пикселов между символами. Все популярные броузеры поддерживают это свойство.
Свойство vertical-align управляет положением элемента по отношению к содержащей его строке. Его допустимыми значениями являются:
Baseline
Выравнивает базовую линию элемента с базовой линией охватывающего элемента.
Middle
Выравнивает середину элемента с серединой охватывающего элемента. (Обычно середина – это верх строчной буквы).
sub
Элемент выводится как подстрочный индекс.
super
Элемент выводится как надстрочный индекс.
Text-top
Выравнивает верхний край элемента с верхним краем шрифта охватывающего элемента.
bottom
Выравнивает нижний край элемента по нижнему выносному элементу текущей строки.
Кроме того, процентное значение указывает положение относительно базовой линии текущей строки, так что значение 50% приподнимает элемент на половину высоты строки над базовой линией. Значение 100% помещает элемент ровно на высоту строки ниже базовой линии.
Все популярные броузеры сходятся в том, как следует располагать изображения относительно линии текста для значений baseline (которое устанавливается по умолчанию и соответствует отсутствию выравнивания по вертикали), middle (но не center), super (но не sub), text-top, text-bottom, top (то же самое, что text-top; но не bottom), а также для положительных и отрицательных значений относительного смещения.
А теперь обсудим различия. Броузер Firefox интерпретирует значение center так же, как Internet Explorer, причем иначе, чем значение middle, Netscape считает значение center идентичным значению middle, а Opera вообще не распознает его. Что касается значения
sub, Netscape соглашается с Firefox и выравнивает нижнюю сторону изображения по крайней строчке нижнего выносного элемента. При этом Opera помещает изображение явно ниже базовой линии, но не так низко, как Internet Explorer, у которого изображение оказывается чуть выше следующей строчки текста.
В отношении значения bottom броузер Opera соглашается с Internet Explorer, выравнивая нижнюю границу изображения по линии, проведенной чуть выше следующей строчки текста. Firefox и Netscape располагают нижнюю сторону изображения по крайней строчке нижнего выносного элемента.