Форматирование текста
Свойства данной категории влияют на отображение символов, слов и абзацев. Они определяют расстояние между словами и буквами в словах, задают отступы и высоту строк в абзацах.
Таблица 4. Форматирование текста
|
Свойство |
Описание |
|
letter-spacing |
Определяет расстояние между символами в тексте. Его значение задается в единицах длины (mm, pt и др.). |
|
text-transform |
Определяет регистр текстовых символов. Возможные значения: Capitalize – делает первую букву каждого слова прописной; Uppercase – преобразует все буквы в прописные; Lowercase – преобразует все буквы в строчные |
|
text-decoration |
None – без подчеркивания Underline – подчеркивание текста; Overline – надчеркивание текста; Line-through – перечеркивание текст. |
|
text-align |
Выравнивание текста. Допустимые значения: right, left, center. |
|
text-indent |
Определяет отступ первой строки. Его значение задается в единицах длины (mm, pt и др.). |
|
vertical-align |
Определяет положение элемента по вертикали. Допустимые значения: Middle – выравнивание базовой линии элемента по базовой линии родителя Sub – нижний индекс Super – верхний индекс Text-top –выравнивание верха элемента с верхом шрифта Text-bottom – выравнивание низа элемента с низом шрифта Top – выравнивание верха элемента с верхом самого высокого элемента строки Bottom – выравнивание низа элемента с ниже всех расположенным элементом строки |
|
line-height |
Междустрочный интервал. Числовое значение этого свойства определяет высоту строки, вычисляемую умножением размера шрифта на заданное число. |
Например:
p {line-height: 2; text-indent: 10mm}
Данный пример определяет в абзаце двойной междустрочный интервал и отступ первой строки 10 мм.
Блоки
Схема блока:
|
|
Свойства этой категории устанавливают параметры отображения блоков. Среди них можно выделить три большие группы, которые форматируют поля, границы (устанавливают значения цвета, ширины, стиля границ) и отступы. Каждая группа включает свойства для задания параметров верхних, нижних, правых, левых и одновременно всех четырех частей блоков элемента.
Таблица 5. Форматирование блока
|
Свойство |
Описание |
|
Отступы снаружи |
|
|
margin-top |
Отступ сверху (верхнее поле). Возможные значения: значение с единицей измерения, относительное значение в процентах, auto. {margin-top: 10px} |
|
margin-right |
Отступ справа (правое поле). Возможные значения: значение с единицей измерения, относительное значение в процентах, auto. {margin-right: 20px} |
|
margin-bottom |
Отступ снизу (нижнее поле). Возможные значения: значение с единицей измерения, относительное значение в процентах, auto. {margin-bottom: 30px} |
|
margin-left |
Отступ слева (левое поле). Возможные значения: значение с единицей измерения, относительное значение в процентах, auto. {margin-left: 40px} |
|
margin |
Группирует все вышеперечисленные свойства в одном. Значения перечисляются по часовой стрелке, начиная с верхнего поля. Например: {margin: 10 20 30 40} – верхнее поле 10px, правое – 20px, нижнее – 30px, левое – 40px или {margin: 20} – отступ 20px со всех сторон |
|
Внутренние отступы |
|
|
padding-top |
Отступ внутри от верхней границы рамки. {padding-top: 10} |
|
padding- right |
Отступ внутри от правой границы рамки {padding- right: 10} |
|
padding- bottom |
Отступ внутри от нижней границы рамки {padding- bottom: 10} |
|
padding- left |
Отступ внутри от левой границы рамки {padding- left: 10} |
|
padding |
Группирует значения внутренних отступов в одном свойстве. Например: {padding: 10 20 30 40} или {padding: 10} |
|
Толщина рамки |
|
|
border-top-width |
Толщина верхней части рамки {border-top-width: 10} |
|
border-right-width |
Толщина правой части рамки {border-right-width: 10} |
|
border-bottom-width |
Толщина нижней части рамки {border-bottom-width: 10} |
|
border-left-width |
Толщина левой части рамки {border-left-width: 10} |
|
border-width |
Группирует свойства толщины элементов рамки {border-width: 5} |
|
Цвет рамки |
|
|
border- top-color |
Цвет верхней части рамки {Border-top-color: green} |
|
border- right-color |
Цвет правой части рамки {Border-right-color: red} |
|
border- bottom-color |
Цвет нижней части рамки {Border-bottom-color: blue} |
|
border- left-color |
Цвет левой части рамки {Border-left-color: yellow} |
|
border-color |
Цвет всех частей рамки {border-color: red} |
|
Стиль рамки |
|
|
border- top-style border- right- style border- bottom- style border- left- style |
Стиль верхней, правой, нижней, левой частей рамки. Возможные значения: none – граница не отображается solid – сплошная линия double – двойная линия groove – вдавленное оформление границы ridge – выдавленное оформление границы inset – весь блок отображается, как будто он вдавлен в лист outset - весь блок отображается, как будто он выдавлен из листа |
|
border- style |
Группирует свойства стиля всех частей рамки. Возможные значения: None, solid, double, groove, ridge, inset, outset |