2.4 Визуальные эффекты

Управление поведением элементов. В этом разделе даны основные свойства визуальных эффектов.

overflow

Управляет поведением элемента в случае, когда его размеры не соответствуют размерам блока отображения. По умолчанию элемент не обрезается, а сжимается или увеличивается, чтобы полностью отобразиться в заданном блоке. Значениями свойства overflow могут быть:

scroll – добавляет полосы прокрутки к блоку отображения в любом случае;

hidden – обрезает элемент в соответствии с размерами блока;

auto – добавляет полосы прокрутки к блоку отображения в случае, если размеры содержимого элемента превосходят размеры блока отображения;

visible – принуждает элемент сжаться или увеличиться, чтобы полностью отобразиться в заданном блоке для рисунка или увеличивает размеры блока отображения в случае текста.

Пример:

blockquote {overflow: auto}

clip

Обрезает видимое изображение элемента. По умолчанию усечение не производится. Значениями свойства clip могут быть:

границы видимого прямоугольного изображения элемента в виде rect(<top>, <right>, <bottom>, <left>), где параметры <top>, <right>, <bottom>, <left> определяют верхнюю, правую, нижнюю, левую границы, auto – усечение изображения элемента не производится.

Пример:

p {clip: rect(10px, 20px, 20px, 10px)}

Visibility

Определяет, будет ли отображаться элемент в окне браузера. Значениями свойства могут быть:

visible – элемент будет отображаться;

hidden – элемент не будет выводиться на экран.

Пример:

p {visibility: hidden}

2.5 Автоматическая нумерация и списки

list-style-type

Определяет вид маркера элемента списка, если не задано изображение в качестве маркера, либо оно недоступно. По умолчанию маркер имеет вид закрашенного кружка. Значениями свойства могут быть:

disk – закрашенный кружок;

circle – незакрашенный кружок;

none – маркер отсутствует;

square – закрашенный квадрат.

decimal – арабская цифра с точкой;

lower-roman – римская строчная цифра с точкой;

upper-roman – римская прописная цифра с точкой;

lower-alpha – латинская строчная цифра с точкой;

upper-alpha – латинская прописная цифра с точкой.

Пример:

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

list-style-image

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

none – изображение не задается;

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

Пример:

ol {list-style-image: url(http://www.firm.ru/*.gif)}

list-style-position

Определяет положение маркера в списке. По умолчанию маркеры находятся вне пространства, отведенного под список. Значениями свойства list-style-position могут быть:

inside – маркеры расположены внутри пространства списка;

outside – маркеры находятся вне пространства, отведенного под список.

Пример:

ul {list-style-position: inside}

list-style

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

Пример:

ul {list-style: circle url(atlang.gif) inside}

2.6 Цвет и фон

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

color

Указывает цвет текста элемента.

Пример:

p {color: red}

background-color

Определяет цвет фона элемента. По умолчанию цвет фона является прозрачным. Значениями свойства могут быть:

transparent – задает прозрачный цвет фона;

цвет фона - задает нужный цвет.

Пример:

p {background-color: blue}

background-image

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

адрес файла изображения, который указывается с помощью функции url();

none – рисунок отсутствует.

Пример:

p {background-image: url(“*.gif”)}

background-repeat

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

repeat-x – рисунок дублируется только в горизонтальной плоскости;

repeat-y – изображение дублируется только в вертикальной плоскости;

repeat – рисунок дублируется в вертикальной и горизонтальной плоскостях;

no-repeat – изображение не дублируется: отображается только одна копия рисунка.

Пример:

p {background-image: url(“*.gif”);background-repeat: repeat-y}

background-attachment

Определяет, будет ли фон, на котором отображается документ, оставаться неподвижным при прокрутке содержимого окна браузера, или фоновое изображение будет прокручиваться вместе с документом. По умолчанию фоновый рисунок прокручивается вместе с содержимым окна. Значениями свойства могут быть:

fixed – фоновое изображение будет оставаться неподвижным при прокрутке содержимого окна браузера;

scroll – фоновый рисунок будет прокручиваться вместе с документом.

Пример:

p {background-image: url(“*.gif”); background-attachment: fixed;}

background-position

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

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

top left – левый верхний угол фонового рисунка совпадает с левым верхним углом блока;

left top – левый верхний угол фонового изображения совпадает с левым верхним углом блока;

bottom right – правый нижний угол фонового рисунка совпадает с правым нижним углом блока;

right bottom – правый нижний угол фонового изображения совпадает с правым нижним углом блока;

top – фоновый рисунок отображается сверху и по горизонтальному центру блока;

top center – фоновое изображение выводится сверху и по горизонтальному центру блока;

center top – фоновый рисунок отображается сверху и по горизонтальному центру блока;

left – фоновый рисунок выводится слева и по вертикальному центру блока;

left center – фоновое изображение выводится слева и по вертикальному центру блока;

center left – фоновый рисунок отображается слева и по вертикальному центру блока;

center – фоновое изображение выводится по центру блока;

center center – фоновый рисунок отображается по центру блока;

right – фоновое изображение выводится справа и по вертикальному центру блока;

right center – фоновый рисунок отображается справа и по вертикальному центру блока;

center right – фоновое изображение выводится справа и по вертикальному центру блока;

bottom – фоновый рисунок отображается снизу и по горизонтальному центру блока;

bottom center – фоновое изображение выводится снизу и по горизонтальному центру блока;

center bottom – фоновый рисунок отображается снизу и по горизонтальному центру блока;

bottom left – левый нижний угол фонового изображения совпадает с левым нижним углом блока;

left bottom – левый нижний угол фонового рисунка совпадает с левым нижним углом блока.

Пример:

p {background-image: url(“*.gif”); background-position: left bottom}

background

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

Пример:

p {background: blue url(“*.gif”) center}