Преобразование текста
В соответствии со спецификацией (см. http://www.w3.org/TR/css3-text/) текст может быть подвергнут преобразованиям при отображении, например, таким как:
• изменение регистра букв (capitalize | uppercase | lowercase);
• изменение пробелов (collapse | preserve | preserve-breaks);
• ограничение длины строки;
• формирование переносов слов;
• форматирование текста;
• выравнивание и разреживание;
• отступы;
• декорирование.
Некоторые примеры средств преобразования текста:
footer { text-wrap: avoid; /* inherits to all descendants */ }
…
<footer>
<venue>27th Internationalization and Unicode Conference</venue>
• <date>April 7, 2005</date> •
<place>Berlin, Germany</place>
</footer>
В узком окне текст из приведенного выше примера будет отображен так:
27th Internationalization and Unicode Conference •
April 7, 2005 • Berlin, Germany
Если окно станет еще yже, то текст будет выглядеть следующим образом:
27th Internationalization and Unicode
Conference • April 7, 2005 •
Berlin, Germany
Но ни при каких условиях текст не будет отображен в виде
27th Internationalization and Unicode Conference • April
7, 2005 • Berlin, Germany
Блочная модель
Блочная модель лежит в основе модели визуализации элементов и описывает прямоугольники, формирующиеся вокруг всех элементов в соответствии с их иерархией в дереве элементов документа. (Для более подробного изучения блочной модели следует обратиться на сайт http://www.w3.org/TR/CSS2/box.html.)
Отступы и границы
В соответствии с блочной моделью для любого элемента имеются область самого элемента (content), внутренние поля (padding), рамка или граница (border), внешние границы (margin). Для каждой области может быть задан размер. Наличие внутреннего поля позволяет сформировать рамку на заданном расстоянии от содержимого элемента; наличие внешнего поля — установить отступ между рядом расположенными элементами. На рисунке 3 представлена схема расположения этих составных частей — элементов блочной модели. Обратите внимание на то, что рамка может иметь толщину, задаваемую соответствующим свойством CSS, и также участвует в расчете внешнего размера элемента.
Рисунок 3 – Блочная модель CSS
В CSS любой элемент имеет свойства width и height, которые устанавливают размер «содержимого» элемента в процентах, пикселах. Кроме того, значения этих свойств могут быть вычислены.
Размер отступа задается свойствами 'padding-top', 'paddingright', 'padding-bottom', 'padding-left' или единственным свойством padding, которому указывается один общий размер отступа или последовательно отступ сверху, справа, снизу, слева.
Пример:
div { padding: 10px }
blockquote { padding-top: 0.3em }
h1 {
background: white;
padding: 1em 2em;
}
Граница представляет собой видимое обрамление элемента с указанным начертанием, цветом и толщиной. Граница может быть задана единственным свойством border или отдельно для каждой стороны блока: 'border-top', 'border-right', 'border-bottom', 'border-left'. Типы границ представлены в таблице 1. Указываются толщина, тип начертания границы и цвет.
Пример:
h1 { border: thick solid red }
#content { border-style: solid dotted } /* horiz: 'solid'
vertical: 'dotted'*/
h1 { border-width: thin } /* thin thin thin thin */
h1 { border-width: thin thick } /* thin thick thin thick */
h1 { border-width: thin thick medium } /* thin thick medium thick */
h1 { border-bottom: 10px; border-color: red; }
При расчете размеров блока необходимо помнить про толщину границы.
Таблица 1 - Типы границ
Внешнее прозрачное поле может быть задано либо единственным свойством 'margin' с указанием одинакового размера границы для всех сторон, либо перечислением размеров по каждой из сторон, либо с использованием свойств 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' для каждой из сторон в отдельности.
Пример:
body { margin: 2em } /* all margins set to 2em */
body { margin: 1em 2em } /* top & bottom = 1em, right & left =
2em */
body { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em,
left=2em */
body {
margin-top: 1em;
margin-right: 2em;
}