некоторые ранее изложенные моменты, а также рассмотрим вопросы, связанные с применением изображений для оформления 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).
Фоновые изображения
методов оформления страниц с помощью фоновых изображений.
назначено. Синтаксис задания фонового изображения напоминает синтаксис назначения тех свойств, значение которых меняется в зависимости от использования того или иного внешнего файла:
{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).
Фиксация фонового изображения
будет ли фоновое изображение перемещаться по мере передвижения бегунка линейки прокрутки или останется зафиксированным в одном и том же положении. В последней ситуации может быть получен забавный и несколько неожиданный эффект: прокручиваемый текст движется относительно фонового изображения. Для создания такого эффекта в рассматриваемую выше конструкцию добавим команду 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).
| |||||||||||||||||||