<img src=”*.gif” style=”position: absolute; right: 30px”>
float
Изменяет положение блока. Значениями свойства могут быть:
left – блок смещается влево, а его содержимое отображается вдоль правой стороны блока;
right – блок перемещается вправо, а его содержимое выводится вдоль левой стороны блока;
none – блок не смещается.
Пример:
p {float: left }
clear
Указывает стороны блока, где плавающие элементы не ставятся. По умолчанию плавающие элементы устанавливаются на всех сторонах. Значениями свойства могут быть:
left – все плавающие элементы на левой стороне блока будут опущены вниз;
right – все плавающие элементы на правой стороне блока будут опущены вниз;
none – плавающие элементы устанавливаются на всех сторонах блока.
Пример:
h1 {float: left }
width
Указывает ширину блока содержимого элемента. По умолчанию ширина блока вычисляется браузером автоматически.
Пример:
p {width: 100px}
height
Определяет высоту блока содержимого элемента. По умолчанию высота блока вычисляется браузером автоматически.
Пример:
p {height: 100px}
min-width
Указывает минимальную ширину блока. По умолчанию значением свойства является 0.
Пример:
p {min-width: 30px}
max-width
Определяет максимальную ширину блока. По умолчанию на максимальную ширину ограничений не накладывается.
Пример:
p {max-width: 150px}
min-height
Указывает минимальную высоту блока. По умолчанию значением свойства является 0.
Пример:
p {min-height: 30px}
max-height
Определяет максимальную высоту блока. По умолчанию на максимальную высоту ограничений не накладывается.
Пример:
p {max-height: 150px}
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.
Пример:
|
Из за большого объема этот материал размещен на нескольких страницах:
1 2 3 4 5 6 7 8 9 10 11 |
