Константы

Для указания размеров используют следующие единицы: in (дюймы), cm (сантиметры), mm (миллиметры), pt (1/72 дюйма), pc (12pt), em (размер шрифта), ex (размер буквы "x"), px (размер пикселя). Собственно размер задаётся в виде десятичного числа с разделителем в виде точки. Перед числом может стоять знак + или -.

URL задаются в виде конструкции url(). Внутри скобок в кавычках задаётся собственно адрес.

Цвет задаётся либо названием, либо числовым кодом (#шестнадцатеричный код), либо в виде тройки (rgb(255,255,255)), либо rgba, где а – это прозрачность.

Основные свойства Границы, отступы и поля

• margin,margin-left,margin-right,margin-top,margin-bottom задают отступы вокруг элемента (отступы от рамки до объемлющего бокса с соответствующей стороны). При указании размера в процентах, используют в качестве базы размер объемлющего блока. В случае использования margin можно указать одно значение (для всех полей), два значения (первое - для верхнего и нижнего, второе - для левого и правого), три значения (первое - для верхнего, второе - для левого и правого, третье - для нижнего), четыре значения (верхнее, правое, нижнее, левое).

• padding,padding-left,padding-right,padding-top,padding-botton задают расстояния от содержимого до рамки.

• border-width, border-top-width, border-right-width, border-left-width, border-bottom-width задают ширины линий рамок. Можно указать их либо в виде длины (но не в процентах), либо значения thin, medium, thick.

• border-color, border-top-color, border-left-color, border-right-color, border-bottom-color задают цвета рамок. Кроме собственно цвета можно указать значение transparent (прозрачная рамка)

• border-style, border-top-style, border-left-style, border-right-style, border-bottom-style задают стиль рамки. Значения: none (размер будет 0), hidden (почти всегда, то же, что none), dotted - рамка из точек, dashed - рамка из пунктирных линий, solid - рамка из сплошной линии, double - двойная сплошная линия, groove - вырезанная линия, ridge - выступающая линия, inset - вдавленная линия, outset - выпуклая линия.

• border, border-top, border-bottom, border-left, border-right позволяют устанавливать все атрибуты рамок в порядке: размер, стиль, цвет. Первый вариант позволяет устанавливать только одинаковые значения для всех сторон.

Отображение и позиция

display

задаёт тип используемого бокса для элемента. Значения для уровня блока: block, list-item, compact; для уровня текста: inline, inline-table, compact, run-in. Значения compact и run-in позволяют более компактно отображать содержимое элементов. Так, если следующий блок compact умещается внутри своей ширины, то следующий блок идет на той же строке. run-in делает подобное вне зависимости от размера. marker объявляет содержимое маркером и используется в конструкциях :before или :after. none подавляет вывод бокса (используется часто совместно с JavaScript для создания динамических эффектов). table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell и table-caption задают типы боксов элементов таблиц.

position

указывает способ размещения бокса. Используются значения: static (обычное расположение), relative (смещение относительно обычного расположения), absolute (задаётся смещение относительно включающего бокса), fixed (смещение относительно позиции просмотра (скроллинг не будет работать для этого элемента, можно использовать для создания меню))

Свойства top, right, bottom и left указывают позицию элемента в процентах или с помощью указания смещения. В них задаётся расстояние от соответствующего края объемлющего бокса до соответствующего края описываемого. Кроме того, возможно значение auto. Значения right и bottom не используются для static и relative.

float

позволяет создавать плавающие объекты. Значения left и right задают нахождение плавающего объекта, none запрещает плавающий объект

Свойство clear задаёт расположение теста в случае наличия плавающих элементов. Значения left, right, both и none имеют тот же смысл, что и атрибут clear тэга br. both эквивалентен all в br.

z-index

задаёт уровень близости содержимого к смотрящему (целое число или auto). Чем оно больше, тем ближе к человеку.

direction

позволяет задавать направление текста (ltr, rtl).