Свойство background может устанавливать цвет фона, фоновое изображение и контролировать внешний вид этого фона – горизонтальное или вертикальное повторение, положение и режим прокрутки страницы.
Цвет фона задается свойством background-color и значениями:
Например, мы могли бы установить заголовок h1 с цветом фона бирюзового, следующим образом:
h1 {background-color: # 40E0D0}
Страницы также могут быть изменены с помощью подходящего фонового изображения. Чтобы разместить фоновую фотографию на странице, используйте свойство background-image со значением url и именем изображения:
body {background-image: url (smile.gif)}
Помните, что в Интернете используются три типа изображений: GIF, PNG, JPEG. Кроме того, будьте осторожны с фоновым изображением, чтобы не подавлять текст – слишком яркие цвета могут помешать чтению.
Большое фоновое изображение, покрывающее всю страницу, используется редко – это сделало бы страницу слишком тяжелой. В результате, мало кто будет ждать загрузки нескольких мегабайт, и вместо преимущества, фоновое изображение будет недостатком. Вместо целых картинок часто используется горизонтальное и / или вертикальное повторение меньших изображений. Для этого используйте свойство background-repeat и любое из следующих значений:
С помощью свойства background-position вы управляете местоположением страницы, на которой будет отображаться фоновое изображение. Вы можете выбрать одно из следующих значений позиционирования фонового изображения:
body {background-position: 200px 20px}
Вы можете зафиксировать фоновое изображение, чтобы даже при прокрутке страницы оно оставалось в том же месте на экране. Эта фиксация фонового изображения выполняется с помощью следующей команды:
background-attachment: fixed;
Свойства фона, перечисленные здесь, могут быть установлены кратко с помощью свойства background. Вот пример, который устанавливает цвет фона (близкий к оранжевому), фоновое изображение с именем grass.gif, повторение изображения, размещения его в правом верхнем углу и фиксацию изображения:
body {background: #F4A460 url(grass.gif) no-repeat right top fixed;}
То, как будет выглядеть веб-сайт, во многом определяется расположением его отдельных элементов. У CSS есть несколько опций для контроля положения элементов. Хорошее знание этих CSS-команд позволяет вам создавать веб-страницы вашего сайта именно так, как вы хотите, чтобы они выглядели.
Элементы могут быть расположены плотно слева или справа, используя свойство float. Например, фотография, для которой назначен класс photo, может быть расположена слева, как показано ниже:
.photo {float: left}
В то же время, текст будет перемещен так, чтобы изображение было плотно обернуто.
Значения, которые можно использовать с плавающей точкой:
Свойство 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;}
Используя float, автоматически устанавливается эффект переноса – текст повторяет форму обтекаемого элемента. Если такое поведение текста нежелательно, вы можете использовать свойство clear для позиционирования других элементов, независимо от обтекаемого объекта. Clear используется со следующими значениями:
В соответствии с тем, как отображается страница, элементы можно разделить на блоки и строки. Блочные элементы (заголовки h1 ~ h6, абзацы, div) занимают всю ширину экрана и всегда имеют символ конца строки, автоматически включаемый до и после них.
Элементы строк (например, span, em, a), в свою очередь, занимают только необходимое им пространство и не содержат обязательного символа конца строки.
Свойство display используется для изменения способа отображения элемента. Наиболее часто используемые значения (которые также лучше всего поддерживаются браузерами):
То, какой должна быть позиция элемента на странице, задает свойство position и одно из значений:
Эти свойства используются вместе с position, чтобы определить позицию, на которой должен быть размещен данный элемент. Для значений left, right, top и bottom можно использовать числа с единицами измерения (px, em и т. д.), проценты или ключевое слово auto.
Иногда элементы могут быть больше, чем их указанная ширина или высота. Что делать с частью элемента, выходящей за пределы указанных размеров, контролируется свойством overflow. Кроме того, overflow часто используется для добавления ползунка к элементу.
Overflow может использоваться со следующими значениями:
Используя соответствующие значения положения, вы можете накладывать элементы друг на друга. В этом случае, чем позже элемент описан в HTML-коде, тем дальше будет позиция.
Вы можете изменить наложение с помощью свойства z-index. Для значений z-index используются целые числа – чем больше номер z-index для элемента, тем выше будет его позиция. Z-индекс также может быть описан ключевым словом auto. В этом случае, положение элемента будет определяться как обычно – в порядке, в котором элемент упоминается в коде HTML.