5.27. Установка свойства text-transform
Свойством text-transform можно воспользоваться для управления стилем прописных букв текста элемента при отображении его браузером. Для данного свойства можно задать значения в виде ключевых слов, описанных в таблице 5.10.
Таблица 5.10
Ключевые слова, используемые для свойства text-transform
Ключевое слово для text-transform |
Пример правила CSS |
Описание |
Образец |
capitalize |
STANZA {text-transform: capitalize} |
Превращает все первые буквы слов в прописные |
Изучение Языка Разметки Документов |
uppercase |
STANZA {text-transform: uppercase} |
Преобразует в прописные все буквы |
Изучение языка разметки документов |
lowercase |
STANZA {text-transform: lowercase} |
Отображает все буквы строчными |
изучение языка разметки документов |
none |
STANZA {text-transform: none} |
Отображает текст без изменения стиля прописных букв |
Изучение языка разметки документов |
5.28. Установка свойства text-decoration
Свойство text-decoration можно использовать для рисования различных типов линий внутри текста элемента. В таблице 5.11 представлены ключевые слова, которые могут быть назначены этому свойству:
Таблица 5.11
Ключевые слова, используемые для свойства text- decoration
Ключевое слово для text- decoration |
Пример правила CSS |
Описание |
Образец |
underline |
TITLE {text- decoration: underline} |
Рисует линию под текстом |
Установка свойств |
overline |
TITLE {text- decoration: overline } |
Рисует линию над текстом |
|
line-through |
TITLE {text- decoration: line-through} |
Рисует линию, перечёркивающую текст |
|
none |
TITLE {text- decoration: none} |
Отображает текст без линии |
Установка свойств |
Можно применить более одного типа линий, присвоив свойству text-decoration несколько значений. (Однако включение ключевого слова none отменяет действие всех ранее установленных ключевых слов.) Например, следующее правило указывает браузеру нарисовать линию поверх и под текстом:
TITLE { text- decoration: underline overline}
5.29. Установка свойств управоения полями
Спецификация CSS поддерживает ряд свойств (типа box), которые можно ьзовать для форматирования блока текста, принадлежащего элементу. К этим свойствам относятся следующие:
свойство margin добавляет невидимое (прозрачное) поле вокруг элемента, снаружи от видимой рамки (если она имеется);
свойство border отображает видимую рамку - определенного стиля -вокруг элемента, снаружи от просвета (если он имеется);
свойство padding добавляет просвет непосредственно снаружи от содержимого элемента, но внутри рамки (если она имеется);
свойства задания размеров height и width устанавливают размеры области содержимого элемента с добавленными просветом и рамкой (см. следующий рисунок);
Рисунок 26. Схема текстовой области
свойства задания позиций float и clear устанавливают положение элемента относительно окружающих элементов.
По умолчанию ширина полей вокруг элемента равна нулю. Чтобы добавить поле с одной или с нескольких сторон элемента, можно присвоить ненулевое значение одному или нескольким из следующих свойств:
margin-top;
margin-right;
margin-bottom;
margin-left.
Можно устанавливать для этих свойств любые значения в размерных единицах. Например, следующее правило добавляет поле слева и справа от элемента STANZA. Ширина поля в два раза больше высоты текста элемента:
STANZA
{margin-left:2em;
margin-right:2em}
Также можно устанавливать величину поля в процентах относительно ширины родительского элемента. Например, следующее правило создает левое поле, равное 1/4 от ширины родительского элемента:
STANZA (margin -left: 25%}
Можно назначать одинаковые величины полей по всем четырем сторонам элемента путем присвоения одного значения — в размерных единицах или в процентах - свойству margin. В качестве примера возьмем таблицу стилей, представленную в Листинге 1.7, которая присоединена и XМL-документу, представленному в Листинге 1.8. В соответствии с этой таблицей стилей текст отображается без полей.
РОЕМ
{font-size:small}
РОЕМ, TITLE, AUTHOR, STANZA, VERSE {display:block}
Листинг 1.7
<?xml version=”1.0”?>
<?xml-stylesheet type=”text/css” href=”Ruslud.css”?>
<POEM>
<TITLE>Руслан и Людмила</TITLE>
<AUTHOR>Пушкин Александр Сергеевич</AUTHOR>
<STANZA>
<VERSE>У лукоморья дуб зелёный;</VERSE>
<VERSE>Златая цепь на дубе том:</VERSE>
<VERSE>И днём и ночью кот учёный</VERSE>
<VERSE>Всё ходит по цепи кругом;</VERSE>
<VERSE>Идёт направо — песнь заводит,</VERSE>
<VERSE>Налево — сказку говорит,</VERSE>
</STANZA>
<STANZA>
<VERSE>Там чудеса: там леший бродит,</VERSE>
<VERSE>Русалка на ветвях сидит;</VERSE>
<VERSE>Там на неведомых дорожках</VERSE>
<VERSE>Следы невиданных зверей;</VERSE>
<VERSE>Избушка там на курьих ножках</VERSE>
<VERSE>Стоит без окон, без дверей;</VERSE>
</STANZA>
</POEM>
Листинг 1.8
Рисунок 27. Вид в браузере документа из листинга 1.8
— есть ссылка на символ для увеличенного тире (-).
Добавив следующее правило в таблицу стилей, которое устанавливает поля в 2,5еm по всем четырем сторонам элементов STANZA, можно получить то, что представлено на рисунке.
STANZA {margin:2.5em}
Зона полей всегда прозрачна, т.е. через нее видна фоновая заливка или фоновый рисунок родительского элемента (или браузера).
Рисунок 28. Вид в браузере документа из листинга 1.8 с изменёнными полями по всем четырём сторонам элемента STANZA