Что забавно, среди поименованных цветов очень
мало «безопасных». Зато в том самом диалоге Color Picker в Photoshop 7.0 и
CS имеется флажок Only Web Colors, позволяющий выбирать только те
цвета, которые относятся к «безопасной» 216-цветной палитре (рис. 3.11).
М
FOnfrW«fc?e8ors
OK
1
‘^Hijo *^ Clx [26
f » J67 % Г «.J41
С & J60 % /Г Ы [28
Cm Jug ci|3i %
Г О: J51 «[«Г»*
# j993333 upiT*
Рис. 3.11. Диалог Color Picker в Photoshop CS. Флажок Only Web Colors активизирован
Глава 3. Оформление веб-страниц с использованием каскадных листов стилей 139
В среднем столбце диалога Color Picker координаты выбранного цвета
отображаются в моделях HSB и RGB, в том числе в шестнадцатеричном
представлении.
Фоновое изображение
В эпоху, когда каскадные листы стилей были еще в новинку, существовал
лишь один алгоритм рендеринга фона— размножение фонового
изображения от верхнего левого угла того или иного элемента страницы по всей
площади последнего.
Благодаря CSS арсенал средств по управлению фоновыми изображениями
существенно расширился.
За отображение фонового рисунка отвечают четыре свойства: background-
image, background-repeat, background-attachment И background-position.
Свойство background-image, как и следует из названия, определяет
графическое изображение, предполагаемое к использованию в качестве фона.
Пример:
body {background-image: url(bg.png)}
Алгоритм повторения фонового изображения задается при помощи свойства
background-repeat. Возможные значения:
П repeat — изображение повторяется и по вертикали, и по горизонтали,
заполняя собой всю площадь элемента, это значение используется по
умолчанию;
П repeat-x — изображение повторяется только по горизонтали;
П repeat-y — то же, только по вертикали;
П no-repeat — фоновое изображение не повторяется, а размещается в
единственном экземпляре.
Свойство background-attachment указывает, следует ли изображению
прокручиваться вместе с контентом, или же ему надлежит быть зафиксированным
относительно области просмотра, т. е. окна браузера. Значениями этого
свойства могут являться, соответственно, ключевые слова scroll и fixed.
Свойство background-position определяет расположение фона (а точнее,
первого экземпляра фонового изображения) на странице и допускает множество
разнообразных значений, в которых нетрудно и запутаться.
Одним из способов определения координат фона является задание их в
процентах от линейных размеров элемента, которому назначается фоновое
изображение. Значение по умолчанию так и определено — о% о%.
140
Часть I. Технологические основы
Первая цифра означает смещение по горизонтали, вторая — по вертикали.
Если задано только одно число, например 10%, подразумевается, что речь идет
о горизонтальном смещении. Вертикальное смещение при этом считается
равным 50%.
Помимо процентов, допускается использование ключевых слов left (левая
граница), right (правая граница), top (верхняя граница), bottom (нижняя
граница) и center (по центру). Примеры:
П top left или left top — то же, что 0% 0%;
О top, top center ИЛИ center top — TO же, ЧТО 50% 0%;
П right top ИЛИ top right — TO же, ЧТО 100% 0%;
П left, left center ИЛИ center left — TO же, ЧТО 0% 50%;
П center ИЛИ center center — TO же, ЧТО 50% 50%;
П right, right center ИЛИ center right — TO же, ЧТО 100% 50%;
П bottom left ИЛИ left bottom — TO же, ЧТО 0% 100%;
П bottom, bottom center ИЛИ center bottom—TO же, ЧТО 50% 100%;
П bottom right ИЛИ right bottom—TO же, ЧТО 100% 100%.
Помимо всего прочего, смещения можно задавать в линейных единицах
измерения, предусмотренных в CSS. О них стоит поговорить подробнее.
Линейные единицы измерения в CSS
Мы подошли к весьма и весьма важной теме, которая будет сопровождать нас
и в следующей главе, посвященной блочной модели CSS2.
В CSS определены следующие единицы измерения.
П Относительные:
• em— кегельная (круглая) шпация, или просто кегельная; иными
словами — величина кегля шрифта, т. е.
|
5th Фев 2011
|
Теги:
|