Свойства данной категории влияют на отображение символов, слов и абзацев. Они определяют расстояние между словами и буквами в словах, задают отступы и высоту строк в абзацах.
Таблица 4. Форматирование текста
Свойство
Описание
letter-spacing
Определяет расстояние между символами в тексте. Его значение задается в единицах длины (mm, pt и др.).
text-transform
Определяет регистр текстовых символов. Возможные значения:
Capitalize – делает первую букву каждого слова прописной;
Uppercase – преобразует все буквы в прописные;
Lowercase – преобразует все буквы в строчные
Определяет отступ первой строки. Его значение задается в единицах длины (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}
Стиль верхней, правой, нижней, левой частей рамки. Возможные значения:
none – граница не отображается
solid – сплошная линия
double – двойная линия
groove – вдавленное оформление границы
ridge – выдавленное оформление границы
inset – весь блок отображается, как будто он вдавлен в лист
outset - весь блок отображается, как будто он выдавлен из листа
border- style
Группирует свойства стиля всех частей рамки. Возможные значения: None, solid, double, groove, ridge, inset, outset
Устанавливают свойства, связанные с блоками отображения элементов, их позиционированием и отображением списков.
Таблица 6. Параметры списка
Свойство
Описание
list-style-type
Определяет тип маркера. Возможные значения:
disc – закрашенный кружок
circle – не закрашенный кружок
square – закрашенный квадратик
decimal – арабская цифра с точкой
lower-roman – римская строчная цифра с точкой
upper-roman – римская прописная цифра с точкой
lower-alpha – латинская строчная буква с точкой
upper-alpha – латинская прописная буква с точкой
none – маркер не отображается
list-style-image
Задает в качестве маркера изображение.
ul {list-style-image: url(11.gif)}
list-style-position
Определяет положение маркера.
inside – маркер внутри тела списка,
outside – маркер снаружи тела списка.
list-style
Группирует свойства списка.
UL {list-style: decimal inside}
OL {list-style: url(11.gif) inside}
Таблица 7. Параметры блока
Свойство
Описание
width
Ширина элемента. Значение указывается в единицах измерения или в процентах.
a {width: 50%; background: red}
height
Высота элемента. Значение указывается в единицах измерения или в процентах.
h1 {background-color: yellow; height: 150}
float
Позиционирование элемента и управление обтеканием остальных элементов. Может принимать следующие значения:
· left – элемент располагается слева, остальной текст обтекает вокруг него;
· right – элемент располагается справа, остальной текст обтекает вокруг него;
· none – элемент располагается как обычный блочный элемент, обтекания не происходит.
clear
Обтекание предыдущего обтекаемого элемента. Может принимать следующие значения:
· left – элемент располагается ниже предыдущего обтекаемого элемента, если тот содержит параметр "float: left";
· right – элемент располагается ниже предыдущего обтекаемого элемента, если тот содержит параметр "float: right";
· both - элемент располагается ниже предыдущего обтекаемого элемента, если тот содержит параметр "float: right" или "float: left";
· none – элемент располагается рядом с предыдущим обтекаемым элементом.
display
Управляет отображением элемента. Может принимать следующие значения:
· none – элемент не отображается
· block – элемент разбивает строку
· inline – элемент не разбивает строку
· list-item - элемент разбивает строку и добавляет маркер списка.
Таблица 8. Слои в CSS
Свойство
Описание
Position
Способ позиционирования слоя. Может принимать следующие значения:
Absolute – относительно левого верхнего угла браузера
Relative – относительно родительского слоя
Static – отображение как обычного блочного элемента
Top
Смещение начала слоя по вертикали. Возможные значения: значение с единицей измерения, относительное значение в процентах или auto.
Left
Смещение начала слоя по горизонтали. Возможные значения: значение с единицей измерения, относительное значение в процентах или auto.
Уровень слоя при наложении слоя. Возможные значения:
Целое число – уровень слоя при наложении слоев
Inherit – наследовать параметр родительского слоя
Auto – соответствует нулю. То есть слои накладываются в порядке их указания
Overflow
Действия при переполнении слоя. Значения:
Visible – трансформировать слой при переполнении
Hidden – не показывать то, что не уместилось
Scroll – показать полосы прокрутки
Auto – при переполнении слоя показать полосы прокрутки
Clip
Ограничение области видимости слоя. Значения:
Rect (top, right, bottom, left) – ограничить область видимости прямоугольником с указанными значениями;
Auto – отобразить слой в соответствии с параметром overflow
<p id=layer1 style="position: absolute; top:100; left: 100; width: 400px; height: 115px; z-index: 2; font-size: 72px; font-weight: 900; font-family: arial; border: 2px solid; padding: 10; color: #cccccc">