Приглашаем посетить
Соллогуб (sollogub.lit-info.ru)

Цвета и краски


Разбирая примеры придания стилевых решений шрифтам и текстам, мы так или иначе касались вопросов назначения цветового решения для некоторых элементов Web-страниц. В данной статье мы повторим и дополним некоторые ранее изложенные моменты, а также рассмотрим вопросы, связанные с применением изображений для оформления Web-страниц. Пользователю, прочитавшему предыдущие статьи, при достаточно понятном синтаксисе назначение цвета определенным элементам Web-страницы или включение в страницу изображения покажется знакомым, и тем не менее все рассматриваемые вопросы по-прежнему будут проиллюстрированы примерами.

Цвет текста

Примеры назначения тексту определенного цвета среди прочих примеров задания стилевого решения читатели уже могли видеть в статье, посвященной шрифтам. Теперь мы укажем синтаксис этого действия:

{color: значение}

В качестве значений могут использоваться общепринятые английские названия цветов или указания цвета в формате RGB. Для создателей Web-страниц (а главное, для разработчиков браузеров) WWW-консорциум принял в качестве дополнения к спецификации CSS1 список стандартных наименований цветов. По форме он представляет собой таблицу согласования между принятым названием цвета и его обозначением в формате RGB в трех вариантах: линейном, для компьютеров типа РС и для компьютеров типа Macintosh. В списке учтено более сотни цветов, так что, даже оставаясь в жестких рамках спецификации, можно подобрать необходимый, даже самый экзотический цвет, что и сделано в приведенном ниже примере. Обратите внимание на то, что назначение цвета указанием его названия выглядит, например, как

{color: coral}

Назначение же цвета в формате RGB может быть представлено в нескольких видах, как-то:

в шестнадцатеричном виде:

{color: #ff0000};

в шестнадцатеричном виде с трехзначной записью (без "лишних" нулей):

{color: #ff0};

в функциональном виде с указанием значения насыщенности в диапазоне 0 - 255:

{color: rgb(64,224,208)};

в функциональном виде с процентным указанием насыщенности цвета:

{color: rgb(100%, 0%, 0%)}.

Пример:

<html>

<head>

<title>Рисунок 1

</title>

</head>

<div style="{color:coral}">

Цвет CORAL (255,127,80)

</div>

<div style="{color:rgb(64,224,208)}">

Цвет TURQUOISE (64,224,208)

</div>

</html>

Результат исполнения кода представлен на (рисунке 1).

Цвет фона

В CSS предусмотрена возможность назначения цвета фона того или иного элемента - надписи, ячейки таблицы или страницы целиком. Синтаксис такого назначения

{background: значение},

а задаваться оно может теми же методами, что и цвет текста, как это сделано в примере ниже.

<html>

<head>

<title>Рисунок 2</title>

<head>

<style type="text/css">

body {background:rgb(64,224,208)}

div {font-size: 30; color:white; background: blue}

</style>

</head>

<div>

Белым по синему.

</div>

</html>

Результат исполнения кода приведен на (рисунке 2).

Фоновые изображения

Фоновые изображения встречаются почти на любой Web-странице. Создатели CSS не могли обойти своим вниманием такой важный, а главное популярный элемент оформления Web-страниц. Рассмотрим несколько методов оформления страниц с помощью фоновых изображений.

Как правило, фоновые изображения представляют собой некий рисунок, повторенный на странице столько раз, сколько необходимо для покрытия им всего пространства, для которого это фоновое изображение назначено. Синтаксис задания фонового изображения напоминает синтаксис назначения тех свойств, значение которых меняется в зависимости от использования того или иного внешнего файла:

{background: url(имя_файла)}

Указывая согласно синтаксису имя нужного файла, получаем код

<html>

<head>

<title>Рисунок 3</title>

<head>

<style type="text/css">

body {background:url(coco.gif)}

div {color:blue;}

</style>

</head>

<div>

Плюшевый крокодил

</div>

</html>

Результат исполнения кода - (рисунке 3).

Повторение фонового изображения

При исполнении приведенного выше кода в окне браузера увидим многократно повторенное изображение, содержащееся в файле coco.gif. Изображение будет последовательно заполнять все пространство окна браузера, однако при необходимости этим заполнением можно управлять, направляя его в ту или иную сторону, по горизонтали или вертикали либо вообще разместить одно изображение локально, не повторяя. Достигается это добавлением в конструкцию задания фонового изображения команд, значения и смысл которых приведены в табл. 1.

Для иллюстрации действия команд возьмем код из предыдущего примера. Так, чтобы фоновое изображение повторялось только по горизонтали, следует записать

body {background:url(coco.gif) repeat-x}

Результат исполнения кода - (рисунке 4).

Фиксация фонового изображения

Если содержимое Web-страницы или фрейма не помещается в рамках окна браузера или выделенного для него пространства, активизируется линейка прокрутки. В этом случае автор Web-страницы может указать, будет ли фоновое изображение перемещаться по мере передвижения бегунка линейки прокрутки или останется зафиксированным в одном и том же положении. В последней ситуации может быть получен забавный и несколько неожиданный эффект: прокручиваемый текст движется относительно фонового изображения. Для создания такого эффекта в рассматриваемую выше конструкцию добавим команду fixed:

body {background:url(coco.gif) fixed}

По умолчанию применяется команда scroll, в соответствии с которой фоновое изображение прокручивается вместе с текстом.Позиционирование

фонового изображения

Если изображение, применяемое как фоновое, никак не повторяется, его можно особым образом позиционировать. Синтаксис такого позиционирования является вариантом синтаксиса назначения фонового изображения, но с добавлением координат или указанием методов позиционирования:

{background: url(имя_файла) no-repeat X Y}

X и Y здесь соответствуют указанию метода позиционирования или численному значению позиции соответственно по горизонтали и по вертикали. Методы позиционирования по горизонтали приведены в табл. 2,

а по вертикали - в табл. 3.

При численных методах задания координат позиционирования за точку отсчета принимается левый верхний угол страницы или ячейки таблицы, в которой изображение позиционируется. Так, при задании позиции в привычных единицах измерения, например в сантиметрах, в случае, когда указано

{background: url(coco.gif) no-repeat 2cm 3cm},

левый верхний угол изображения разместится в двух сантиметрах книзу и в трех сантиметрах вправо от левого верхнего угла окна браузера или ячейки страницы. Если координаты задаются в процентах от высоты и ширины окна браузера или ячейки таблицы, то позиционируется точка, соответствующая тем же величинам, но уже относящимся к самому изображению. Ориентироваться в этом несложно. Так, например, если при расположении изображения в ячейке таблицы указано

{background: url(coco.gif) no-repeat 0% 0%},

то это означает, что верхний левый угол изображения находится в левом верхнем углу страницы. Если же указано

{background: url(coco.gif) no-repeat 100% 100%},

то это означает, что правый нижний угол изображения расположен в правом нижнем углу оформляемой страницы. Точно так же определяются и промежуточные положения: если позиция изображения на странице задана парой 20 и 80%, как в примере

<html>

<head>

<title>Рисунок 5</title>

<head>

<table width=200 height=200 border=1

style="background:url(coco.gif) no-repeat 20% 80%">

<tr>

<td>Плюшевый крокодил.

</table>

</html>

то позиционируется точка, соответствующая 20% ширины изображения и 80% его высоты, считая от его левого верхнего края. Результат - (рисунке 5).

Кроме того, необходимо отметить, что все методы позиционирования могут применяться совместно, т. е. позицию изображения можно задать и как

{background: url(coco.gif) no-repeat 40% 3cm}

Группировка значений, задающих фон

Практически все рассмотренные способы задания фона или фонового изображения можно в случае необходимости применить одновременно. Попробуем сделать это.

<html>

<head>

<title>Рисунок 6

</title>

<head>

<table width=300

height=150

border=1

style="background:url(coco.gif) blue repeat-x -10px center ">

<tr>

<td>Плюшевый крокодил.

</table>

</html>

Результат - (рисунке 6).

[Содержание]