Цвет и фон.

Свойство	Описание
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 - указывает цвет текста элемента.

<html>

<head>

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

</head>

<body>

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

<р style="color: rgb(49, 151, 116)"><span style="color:#fе0">Желтое</sраn> слово в строке зеленого цвета.</р>

</body>

</html>

Пример background-color - определяет цвет фона элемента.

<html>

<head>

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

<style type="text/css">

. inverse {

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

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

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

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

}

</style>

</head>

<body>

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

</body>

</html>

background - одновременно устанавливает свойства background-color, background-image, background-repeat, background-attachment и back­ground-position.

Пример:

<html>

<head>

<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 заставляет Web-браузер отобразить маркер позиции в ее тексте в качестве первого символа.

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

Пример:

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

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

Пример:

<html>

<head>

<style type="text/css">

a.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.