Единицы измерения в CSS

Абсолютные единицы измерения:

Дюймы in 2,54 см

Сантиметры cm

Миллиметры mm

Пункты pt 1/72 дюйма

Пики pc 1/6 дюйма или 12 пунктов

Пиксели px

К относительным единицам измерения относятся:

1) Один em - это значение свойства font-size заданного текста: если для элемента font-size равен 14 пикселам, то 1em равен 14 пикселов; 1.5em равно 21 пиксел. Величина em зависит от того, к каким элементам применяется.

2) Ex - это высота строчной буквы х заданного шрифта.

В свойствах, которым требуется указание размеров, можно использовать несколько способов для их задания:

· относительный размер в процентах (%)

· относительный размер при помощи словесного описания (larger, smaller, xx-small, x-small, small, medium, large, x-large, xx-large)

· абсолютный размер в типографских единицах - размер может задаваться в пунктах (pt), пиках (pc), средней шириной буквы "m" (em), средней шириной буквы "x" (eх)

· абсолютный размер в стандартных единицах длины - размер может задаваться в сантиметрах (cm), миллиметрах (mm), дюймах (in)

· абсолютный размер в пикселях (px)

Задание цвета в CSS

Цвет для тех свойств, где это нужно, может быть определен одним из трех способов:

· при помощи названия цвета: yellow, red, green, grey,..

· шестнадцатеричным заданием цвета в формате #RRGGBB: #ff0000, #883490, #ffffff,..

· десятичным заданием составляющих цвета в формате rgb(red, green, blue): rgb(255,0,0), rgb(100,23,78),..

 

Можно задать повторение стиля в определенном направлении. Для этого используется свойство BACKGROUND-REPEAT.Значения свойства: repeat / repeat-x / repeat-y / no-repeat/. Начальное значение: no-repeat.

Можно задать расположение фонового изображения с помощью свойства BACKGROUND-POSITION. Значения: top / center / bottom / left / right. Например:

DIV {BACKGROUND-COLOR: blue;

BACKGROUND-IMAGE: url(fon.gif);

BACKGROUND-REPEAT: repeat-x;

BACKGROUND-POSITION: bottom;}

При использовании блоков внутри HTML-документы можно моделировать их свойства. На рисунке показаны основные элементы блоков:

 

Ширина

Высота

Верхняя внутренняя граница

Нижняя внутренняя граница

Верхний отступ

Нижний отступ

Верхняя рамка

Нижняя рамка

Верхнее поле

Верхняя внешняя граница

Нижнее поле

Нижняя внешняя граница

Нижняя рамка

 

Свойства WIDTH и HEIGHT позволяют определить ширину и высоту блоков. Значения свойства: длина / %-ое значение /auto. Начальное значение – auto. Наследование отсутствует.

Поля определяются свойством MARGIN. Значения: длина /%-ое значение/auto. Наследование отсутствует. Начальное значение не определено. %-ое значение вычисляется относительно ширины родительского элемента. В свойстве MARGIN можно использовать единицы длины - дюймы, пиксели, см.

Абсолютные значения и поля:

а) P { BACKGROUND–COLOR: silver; margin: 10px; } - поле в 10px со всех сторон абзаца.

б) разные поля:

P { MARGIN: 10px 20px 15px 5px; }

При разных полях порядок очень важен - 1 Top – 2 Right – 3 Bottom – 4 Left:

1 Top

2 Right

3 Bottom

4 Left

в) Допускаются различные единицы измерения:

H2 { MARGIN: 14px 5em 1.0in 3ex;}

Некоторые элементы (например, абзацы <Р>) имеют поля снизу и сверху по умолчанию. Свойство MARGIN может отменить их.

Пример определения поля с одной стороны:

MARGIN-TOP, MARGIN-RIGHT, MARGIN-BOTTOM, MARGIN-LEFT

H2 { MARGIN-LEFT: 3 em; }= MARGIN: 0 0 0 3 em

В одном правиле можно задать несколько этих свойств (в данном случае удобно просто MARGIN с несколькими значениями):

P { MARGIN: 10% 20%; } – сверху и снизу по 10%, справа и слева – по 20%

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

Отрицательные поля позволяют переместить элемент за границы его родительского элемента.

DIV {BACKGROUND: silver;

BORDER:1px solid;

MARGIN: 0 3em 0 3em;

}

P.A { BACKGROUND: #f00;

MARGIN:1em -2em 1em 25%;

BORDER:1px solid;

BORDER-RIGHT: none;

TEXT-ALIGN: justify;

}

Поля и строковые элементы

В строковых незамещаемых элементах (<А>, <STRONG>, <EM> и т. п.) браузеры устанавливают поля только слева и справа. Высоту строк вокруг таких элементов можно выставить с помощью свойств LINE – HEIGHT, FONT – SIZE и VERTICAL – ALIGN.

В строковых замещаемых элементах (<IMG>) поля выставляются и сверху, и снизу (относительно базовой линии, если не использовали VERTICAL – ALIGN).

 

Рамки

Рамки рисуются поверх фона элемента. Чтобы зарисовать рамку, нужно задать ее стиль с помощью свойства BORDER-STYLE. Значения:

none – нет (это значение по умолчанию)

hidden – скрытая

dotted – в виде точек

dashed – в виде тире

solid – сплошная

double – двойная

inset – вдавленная

outset – выпуклая