Каждая таблица стилей образуется из наборов правил. Чтобы лучше понять, что же такое правила, давайте разберем их структуру. Каждое правило имеет две основные части: селектор (selector) и блок объявлений (declaration block).

Структура правила CSS

Блок объявлений состоит из одного или более объявлений (declarations), а каждое объявление представляет собой сочетание свойства (property) и значения (value).

Селектор, расположенный в левой части правила, определяет, на какие части документа распространяется правило. В правой части правила находится блок объявлений, образованный одним или несколькими объявлениями. Каждое объявление представляет собой сочетание свойства CSS и значения этого свойства. Выше представлен блок, содержащий два объявления. Первое определяет, что согласно правилу цвет (color) указанных элементов документа будет красным (red), а второе — что фон (background) этих элементов будет желтым (yellow). Таким образом, все элементы H1 (определённые селектором) этого документа будут выводиться красным текстом на желтом фоне.

Текущая категория

Свойства CSS — background-position

Это свойство задает местоположение исходного фонового изображения (заданного свойством background-image); это точка, от которой будет начинаться любое повторение фона.

Значения:

<?php
[[<процентное значение> | <длина> | left center right]  
[<
процентное значение>] | <длина> | top center bottom]] |  
[[
left center right] || [top center bottom]] | inherit

Начальное значение: % %
Область применения: блочные и замещаемые элементы
Наследование: нет
Вычисляемое значение: смещения абсолютной длины, если задана <длина> в противном случае — процентное значение

Есть несколько способов задания значения этого свойства. Во-первых, ключевые слова top, bottom, left, right и сеnter. Как правило, они появляются попарно, но не всегда. Во-вторых, значения, заданные в единицах измерения длины, такие как 50рх или 20em, и процентные значения. Каждый тип значения по-своему размещает фоновое изображение.

Ключевые слова:

Ключевые слова очень просты для понимания. Оказываемый ими эффект соответствует их именам; например, согласно значению top right исходное изображение будет находиться в верхнем правом углу области отступа элемента. Разместим маленький квадрат (bg.gif) 20px на 20px:

<?php
р 
{
background-imageurl(bg.gif);
background-repeatno-repeat;
background-positiontop right;
}

В результате исходное изображение будет помещаться в верхний правый угол и не будет повторяться. Ключевые слова (согласно спецификации) могут располагаться в любом порядке, но их должно быть не более двух: одно — горизонтальна ордината, другое — вертикальная. Если задано только одно ключевое слово, то предполагается, что другое слово — center.

Итак, если требуется, чтобы изображение располагалось над каждым абзацем посередине, достаточно объявить:

<?php
р 
{background-imageurl(bg.gif); background-repeatno-repeatbackground-positiontop;}

Процентные значения:

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

<?php
р 
{
background-imageurl(bg.gif);
background-repeatno-repeat;
background-position5050%;
}

При этом базовая точка изображения будет размещена так, что центр будет выровнен с центром ее элемента. Иначе говоря, процентные значения применяются и к элементу, и к исходному изображению.

Когда исходное изображейяе центрируется в элементе, точка изображения, которая может быть описана как 50% 50% (центр), выравнивается с точкой элемента, которайя может быть описана аналогичным образом. Если изображение размещается в точке 0% 0%, то его верхний левый угол находится в верхнем левом углу области отступа элемента. Значение 100% 100% соответствует положению нижнего правого угла исходного изображения в нижнем правом углу области отступа:

<?php
{
background-imageurl(bg.jpg);
background-repeatno-repeat;
border:1px dotted #009900;
margin:5px auto;
}
p.c1 {background-position:00%;}
p.c2 {background-position:5050%;}
р.сЗ {background-position:100100%;}
p.c4 {background-position0100%;}
p.c5 {background-position1000%;}

Таким образом, если вы хотите поместить одно исходное изображение на расстоянии трети ширины элемента и двух третей его высоты, ваше объявление может быть таким:

<?php
р 
{background-imageurl(bg.gif); background-repeatno-repeatbackground-position3366%;}

Значения, заданные в единицах измерения длины:

Если местоположение исходного изображения задано в единицах длины, то они интерпретируются как смещения от верхнего левого угла области отступа элемента. Точка, относительно которой отсчитываются смещения, — верхний левый угол исходного изображения. Таким образом, если заданы значения 20рх ЗОрх, верхний левый угол исходного изображения будет сдвинут на 20 пикселов вправо и 30 пикселов вниз относительно верхнего левого угла области отступа элемента.

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

Текущая категория

ПОЛЕЗНЫЕ ССЫЛКИ: