4.4. Цвет и фон

Таблица 4.8

Свойство	Характеристика свойства
color	Цвет элемента.
background	[{background-color}] [{background-image}] [{background-repeat}] [{background-attachment}] [{background-position}];
background-color	Фоновый цвет страницы или ее элемента: {Цвет}|transparent; значение transparent задает "прозрачный" фон.
background-image	Фоновый рисунок страницы или ее элемента. url({Интернет-адрес файла рисунка})|none; none отключает фоновый рисунок.
background-attachment	Fixed – позволяет "зафиксировать" фоновый рисунок, чтобы он не прокручивался вместе с содержимым тега <BODY>.
background-repeat	Устанавливает порядок повторения фонового рисунка: repeat|no-repeat|repeat-x|repeat-y; repeat – размножает изображение во всех направлениях; repeat-x/ repeat-y – размножает изображение по горизонтали/вертикали;
background-position	Задает местонахождение фонового рисунка и заменяет атрибуты [{background-position-x}] [{background-position-y}];
background-position-x	Задает горизонтальную координату фонового рисунка {X}|{X}%|left|center|right;
background-position-y	Задает вертикальную координату фонового рисунка {Y}|{Y}%|top|center|bottom;

Пример: color – указывает цвет текста элемента. background-color – определяет цвет фона элемента:

<html><head>

<title> Изменение цвета символов</title>

<style type="text/css">

.inverse {

font-family: Verdana; /* Шрифт Verdana */

font-weight: bold; /* Жирное начертание */

background-color: green; /* Зеленый фон */

color: white; /* Символы белого цвета */

}

p{color: red;}

</style>

</head>

<body>

<p> <span style="color: blue;">Первое </span> слово в строке синее. </р>

<p style="color: green;"> <span style="color: yellow;">Желтое</span> слово в строке зеленого цвета.</р>

<div class="inverse">Белые буквы на зеленом фоне</div>

</body></html>

Свойство background – может одновременно установить свойства background-color, background-image, background-repeat, background-attachment и background-position. Пример:

<style type="text/css">

body {

background:

white /* Цвет фона */

url(image.gif) /* Путь к файлу с рисунком фона */

left top /* Положение в левом верхнем углу */

no-repeat /* Не повторять рисунок */

fixed /* Зафиксировать фон */

}

</style> .

</head>

<body>

Свойства списков. list-style – задает параметры маркера или номера позиции списка:

[{list-style-image}] [{list-style-position}] [{list-style-type}];

list-style-type – задает тип маркера или номер позиции списка:

disc|circle|square|decimal|lower|roman|upper-roman|lower-alpha|upper-alpha|none;

disc – (по умолчанию) сплошной кружок; circle – окружность; square – сплошной квадрат; decimal – нумерует арабскими циф-рами; lower-roman – малыми римскими; upper-roman – большими рим-скими; lower-alpha –малыми латинскими буквами; upper-alpha – большими латинскими; none – убирает маркер или нумерацию; list-style-image – задает графическое изображение, отображаемое в качестве маркера позиции списка.

: none|url({интернет-адрес файла изображения});

list-style-position – задает местонахождение маркера позиции списка: в тексте позиции или вне: outside|inside; значение outside (по умолчанию) задает отображение маркера позиции списка вне текста позиции. Значение inside заставляет веб-браузер отобразить маркер позиции в ее тексте в качестве первого символа.

list-style-type определяет вид маркера элемента списка, если не за­дано изображение в качестве маркера, либо оно не доступно.

Пример:

ol {list-style-type: lower-roman}

list-style-image - определяет графическое изображение в качестве маркера элемента списка.

Пример:

<html>

<head>

<style type="text/css">

.outer {

list-style-image: url(image.gif);/*Путь к файлу с рисунком */

}

</style>

</head>

<body>

<ol>

<li class=”outer”>C маркером</li>

<li>Без маркера</li>

</ol>

</body>

</html>

list-style-position – определяет положение маркера в списке. По умолчанию маркеры находятся вне пространства, отведенного под спи­сок.

Пример:

<html>

<head>

<style type="text/css">

ul { list-style-position: outside }

</style>

</head>

<body>

<ul>

<1i>Изменение положения маркеров </li>

<1i>Маркеры размещаются за пределами текстового блока</li>

</ul>

</body> </html>

list-style – указывает значения сразу трех свойств: list-style-type, list-style-image и list-style-position.