CSS уроки, 5 часть: фон, позиция

CSS фон (background)

Свойство background может устанавливать цвет фона, фоновое изображение и контролировать внешний вид этого фона – горизонтальное или вертикальное повторение, положение и режим прокрутки страницы.

Цвет фона

Цвет фона задается свойством background-color и значениями:

• transparent (прозрачный);
• название цвета, например, blue;
• RGB значение – например, rgb(120, 230, 180);
• HEX значение – например, #FF7F50;

Например, мы могли бы установить заголовок h1 с цветом фона бирюзового, следующим образом:

h1 {background-color: # 40E0D0}

Фоновое изображение

Страницы также могут быть изменены с помощью подходящего фонового изображения. Чтобы разместить фоновую фотографию на странице, используйте свойство background-image со значением url и именем изображения:

body {background-image: url (smile.gif)}

Помните, что в Интернете используются три типа изображений: GIF, PNG, JPEG. Кроме того, будьте осторожны с фоновым изображением, чтобы не подавлять текст – слишком яркие цвета могут помешать чтению.

Повторение фонового изображения

Большое фоновое изображение, покрывающее всю страницу, используется редко – это сделало бы страницу слишком тяжелой. В результате, мало кто будет ждать загрузки нескольких мегабайт, и вместо преимущества, фоновое изображение будет недостатком. Вместо целых картинок часто используется горизонтальное и / или вертикальное повторение меньших изображений. Для этого используйте свойство background-repeat и любое из следующих значений:

• repeat – повторение по горизонтали и по вертикали до заполнения страницы
• repeat-x – повторение только по горизонтали
• repeat-y – повторение только по вертикали
• no-repeat – без повторения

Расположение фонового изображения

С помощью свойства background-position вы управляете местоположением страницы, на которой будет отображаться фоновое изображение. Вы можете выбрать одно из следующих значений позиционирования фонового изображения:

• два числовых значения – первое, это расстояние от левого края страницы, а второе – расстояние от верхнего края, например:
  body {background-position: 200px 20px}
• проценты (%) – аналогично числовым значениям, используются две цифры – процент от ширины и высоты страницы
• left top – позиция в левом верхнем углу, эквивалентно 0% 0%
• center top – сверху в середине, тот же результат имеет и 50% 0%
• right top – вверху справа, может быть использован вместо 100% 0%
• left center – слева по горизонтали и в середине по вертикали (0% 50%)
• center center – прямо в середине страницы (50% на 50%)
• right center – справа по горизонтали и в середине по вертикали (100% и 50%)
• left bottom – внизу слева (0% и 100%)
• center bottom – внизу, в середине (50% и 100%)
• right bottom – внизу справа (100% и 100%)

Фиксация фонового изображения

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

background-attachment: fixed;

Укороченная запись свойств фонового изображения

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

body {background: #F4A460 url(grass.gif) no-repeat right top fixed;}

CSS позиция

То, как будет выглядеть веб-сайт, во многом определяется расположением его отдельных элементов. У CSS есть несколько опций для контроля положения элементов. Хорошее знание этих CSS-команд позволяет вам создавать веб-страницы вашего сайта именно так, как вы хотите, чтобы они выглядели.

Обтекание (float)

Элементы могут быть расположены плотно слева или справа, используя свойство float. Например, фотография, для которой назначен класс photo, может быть расположена слева, как показано ниже:

.photo {float: left}

В то же время, текст будет перемещен так, чтобы изображение было плотно обернуто.

Значения, которые можно использовать с плавающей точкой:

• left – отступ слева;
• right – отступ справа;
• none – без смещения;

Свойство float также часто используется для формирования столбцов на странице. Для этой цели содержимое каждого столбца в HTML заключается в теги <div> и </div>, и тогда для каждого элемента div в CSS указывается float:left и ширина (width). Таким образом, первый столбец (первый в HTML-коде div элемент) будет смещаться влево, занимая указанную для нее ширину, затем будет упорядочен второй столбец и т. д. Вот конкретный пример использования float:

div.content { float:left; width:400 px;}

div.menu { float:left: width:200px;}

Очистка (clear)

Используя float, автоматически устанавливается эффект переноса – текст повторяет форму обтекаемого элемента. Если такое поведение текста нежелательно, вы можете использовать свойство clear для позиционирования других элементов, независимо от обтекаемого объекта. Clear используется со следующими значениями:

• none – нет эффекта, т.е. обтекание элемента продолжается;
• left – останавливает обтекание слева;
• right – останавливает обтекание справа;
• both – останавливает обтекание вокруг правого и левого элементов.

Display – блок, строка, список, скрытие

В соответствии с тем, как отображается страница, элементы можно разделить на блоки и строки. Блочные элементы (заголовки h1 ~ h6, абзацы, div) занимают всю ширину экрана и всегда имеют символ конца строки, автоматически включаемый до и после них.

Элементы строк (например, span, em, a), в свою очередь, занимают только необходимое им пространство и не содержат обязательного символа конца строки.

Свойство display используется для изменения способа отображения элемента. Наиболее часто используемые значения (которые также лучше всего поддерживаются браузерами):

• block – для представления элемента в виде блока
• inline – то дает элементу свойства элемента строки
• list-item – элемент будет отображаться как элемент списка
• none – элемент не будет отображаться

Позиция – Position

То, какой должна быть позиция элемента на странице, задает свойство position и одно из значений:

• static – значение по умолчанию. Элементы располагаются в порядке установки их в HTML-коде. Если выбран пункт static, то набор с left, top, right, bottom значения, являются недействительными.
• absolute – позиция объекта определяется абсолютно из значений, заданных с left, top, right, bottom. Исключением является случай, когда родительский элемент имеет позицию, отличную от static. Тогда положение элементов является относительной по отношению к родительскому элементу. Подробнее о родительских элементах читайте в нашей статье.
• relative – значения, заданные с помощью left, top, right, bottom, используются для смещение элемента от нормального положения.
• fixed – элемент будет оставаться в указанном с помощью left, top, right, bottom месте, даже при прокрутке страницы.

Слева, справа, сверху, снизу (left, right, top, bottom)

Эти свойства используются вместе с position, чтобы определить позицию, на которой должен быть размещен данный элемент. Для значений left, right, top и bottom можно использовать числа с единицами измерения (px, em и т. д.), проценты или ключевое слово auto.

Переполнение – Overflow

Иногда элементы могут быть больше, чем их указанная ширина или высота. Что делать с частью элемента, выходящей за пределы указанных размеров, контролируется свойством overflow. Кроме того, overflow часто используется для добавления ползунка к элементу.

Overflow может использоваться со следующими значениями:

• visible – независимо от указанных размеров будет отображаться проекционная часть, выходящая за их пределы.
• hidden – если какая-либо часть превышает размер, указанный для элемента, она будет невидимой
• scroll – будет добавлен ползунок. Если есть часть, которая выходит за пределы размера элемента, она будет видна при прокрутке элемента
• auto – если элемент больше указанного размера, ползунок добавляется автоматически, в противном случае ползунок не отображается.

Элемент наложения – z-index

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

Вы можете изменить наложение с помощью свойства z-index. Для значений z-index используются целые числа – чем больше номер z-index для элемента, тем выше будет его позиция. Z-индекс также может быть описан ключевым словом auto. В этом случае, положение элемента будет определяться как обычно – в порядке, в котором элемент упоминается в коде HTML.