Единицы измерения в 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:
в) Допускаются различные единицы измерения: 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 – выпуклая
|
