Справочник CSS

css

Содержание:


  • Примечания для таблиц:
  • «Значения» - жирным шрифтом выделено значение по умолчанию.
    • Условные обозначения: запятая — «или»; точка с запятой — «и» или «или»; угловые скобки — группа из необязательных для выбора значений; фигурные скобки, например: {1,4} — не менее
      1-го раза и не более 4-х.
  • «Пр*» — область применения, «+» означает: для всех элементов.
  • «Нс*» — наследование свойств родителя.


Свойство BACKGROUND

Свойство Значения Пр* Нc*
background [ background-color; background-image; background-repeat; background-attachment; background-positon ] + -
background-attachment scroll, fixed, inherit + -
background-color ЦВЕТ, transparent, inherit + -
background-image URL, none, inherit + -
background-position [ %, ДЛИНА, left, center, right ]; [ %, ДЛИНА, top, center, bottom], inherit * -
background-repeat repeat, repeat-x, repeat-y, no-repeat, inherit + -

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

Применение:

body { background: #666 url(../images/img-1.gif) 100% 0% repeat-y;} — для селектора Body задан серый цвет фона, фоновое изображение img-1.gif — располагается в правом верхнем углу и повторяется по вертикали:

фон в css: свойство background

Background-attachment

Свойство определяет закрепление или перемещаемость фонового изображения.

Значения:

scroll — фоновое изображение перемещается вместе с элементом при прокрутке страницы.
fixed — фиксирует фоновое изображение.
inherit — наследование от родительского элемента.

Background-color

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

Значения:

Цвет
transparent — задает прозрачный цвет фона.
inherit — наследование от родительского элемента.

Background-image

Свойство задает фоновое изображение для элемента, которое с помощью значения свойства Background-repeat может выкладываться мозаикой по осям во всех направлениях, либо не повторяться.

Значения:

URL — путь к файлу изображения, синтаксис: url(…).
none — нет фонового изображения.
inherit — наследование от родительского элемента.

Background-position

Свойство устанавливает местоположение фонового изображения. Служит исходной точкой, от которой рассчитывается повторение фонового изображения, если применяется свойство Background-repeat.

Область применения*: блочные и замещаемые элементы.

Значения (по умолчанию: 0% 0% — левый верхний угол):

inherit — наследование от родительского элемента.

Возможно применение разных единиц, наиболее удобные — px или %. Первое значение — горизонтальное расположение, второе — расположение по вертикали.

Пример:

body { background-color: #00ff00; background-image: url(../images/img-2.gif); background-position: 50% 0%; background-repeat: no-repeat;} — фоновое изображение располагается по центру и вверху:

применение свойства background-position

Другой способ: значения left, center, right — расположения по горизонтали, соответственно, top, center, bottom — по вертикали.

Пример:

body { background-image: url(../images/img-2.gif); background-position: center top;} — аналог предыдущего примера: расположение фонового изображения по центру и вверху.

Можно использовать … background-position: top center;}, т.е. поменять местами значения center и top — расположение не изменится: по центру и вверху.

И последнее, если указать только один параметр … background-position: top;} — то предполагается, что другой будет center, а расположение изображения будет, как и прежде: по центру и вверху.

Примеры значений:

100% 100% — расположение в правом нижнем углу, равнозначно: right bottom или bottom right.
0% 50% — расположение слева и по центру, равнозначно: left center или center left или left.

Background-repeat

Свойство устанавливает порядок мозаичного размещения фонового изображения по осям в обоих направлениях.

Значения:

repeat — задает повторение фонового изображения относительно и горизонтальной, и вертикальной оси.
repeat-x — повторение вдоль горизонтальной оси.
repeat-y — повторение вдоль вертикальной оси.
no-repeat — без повторения.
inherit — наследование от родительского элемента.

Содержание: