В этом уроке вы научитесь, как использовать цвета и фон на ваших
web-сайтах. Мы рассмотрим также продвинутые методы позиционирования и
управления фоновым изображением. Будут разъяснены следующие
CSS-свойства:
- color
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
- background
Цвет
переднего плана : свойство 'color'
Свойство color
описывает цвет переднего плана элемента.
Например, представьте, что
мы хотим сделать все заголовки документа тёмно-красными. Все заголовки
обозначаются HTML-элементом . В нижеприведённом коде цвет элемента
устанавливается красным.
Цвета
можно указывать как шестнадцатеричные значения, как в примере (#ff0000),
либо вы можете использовать названия цветов ("red") или rgb-значения
(rgb(255,0,0)).
Свойство 'background-color'
Свойство
background-color описывает цвет фона элемента.В элементе размещается
всё содержимое HTML-документа. Таким образом, для изменения цвета фона
всей страницы свойство background-color нужно применить к элементу .
Вы
можете также применять это свойство к другим элементам, в том числе - к
заголовкам и тексту. В следующем примере различные цвета фона
применяются к элементам и .
Заметьте,
что устанавливает два свойства для , разделяя их точкой с запятой.
Фоновые
изображения [background-image]
CSS-свойство
background-image используется для вставки фонового изображения.
Ниже
мы используем в качестве фонового изображение бабочки. Вы можете
загрузить это изображение и использовать его на вашем компьютере
(щёлкните правой клавишей мыши на изображении и выберите "сохранить
изображение как/save image as"), либо вы можете использовать другое
изображение.
Для вставки
рисунка бабочки в качестве фонового изображения web-страницы просто
примените свойство background-image в тэге и укажите местоположение
рисунка.
PS: Обратите
внимание, что мы специфицируем место, где находится файл как url("butterfly.gif").
Это означает, что он находится в той же папке, что и таблица стилей.
Вы, разумеется, можете ссылаться и на файлы изображений в других папках,
используя, например, url("../images/butterfly.gif"), или даже на
файлы в Internet, указывая полный адрес файла : url("http://www.hl.net/butterfly.gif").
Повторение/мультипликация фонового изображения
[background-repeat]
Вы заметили в предыдущем примере,
что изображение бабочки повторяется по умолчанию по горизонтали и
вертикали, заполняя весь экран? Свойство background-repeat управляет
этим.
- Background-repeat:
repeat-x - Рисунок повторяется по горизонтали
- background-repeat: repeat-y - Рисунок
повторяется по вертикали
- background-repeat: repeat - Рисунок повторяется по горизонтали и
вертикали
- background-repeat:
no-repeat - Рисунок не повторяется
Например, для
отмены повторения/мультипликации фонового рисунка мы должны записать
такой код:
Блокировка фонового изображения
[background-attachment]
Свойство
background-attachment определяет, фиксируется ли фоновый рисунок, или
прокручивается вместе с содержимым страницы.
В таблице указаны два
значения background-attachment. Щёлкните на примере, чтобы почувствовать
разницу между scroll и fixed.
Background-attachment: scroll -
Изображение прокручивается вместе со страницей — разблокировано
Background-attachment:
fixed - Изображение блокировано
Например, следующий код фиксирует
изображение.
Расположение
фонового рисунка [background-position]
По умолчанию фоновый рисунок
позиционируется в левом верхнем углу экрана. Свойство
background-position позволяет изменять это значение по умолчанию, и
фоновый рисунок может располагаться в любом месте экрана.
Есть много
способов установить значение background-position. Тем не менее, все они
представляют собой набор координат. Например, значение '100px 200px'
располагает фоновый рисунок на 100px слева и на 200px сверху в окне
браузера.
Координаты можно указывать в процентах ширины экрана, в
фиксированных единицах (пикселы, сантиметры, и т. п.), либо вы можете
использовать слова top, bottom, center, left и right.
- background-position: 2cm 2cm - Рисунок
расположен на 2 cm слева и на 2 cm сверху
- background-position: 50% 25% - Рисунок
расположен по центру и на четверть экрана сверху
- background-position: top right - Рисунок
расположен в правом верхнем углу страницы
В примере
кода фоновое изображение располагается в правом нижнем углу экрана:
Сокращённая запись [background]
Свойство
background входит в состав всех свойств, перечисленных в этом уроке.
С
помощью background вы можете сжимать несколько свойств и записывать
ваши стили в сокращённом виде, что облегчает чтение таблиц.
Например,
посмотрите на эти строки:
Используя
background, того же результата можно достичь одной строкой кода:
Порядок
свойств этого элемента таков:
- [background-color]
- [background-image]
- [background-repeat]
- [background-attachment]
- [background-position]
Если
свойство отсутствует, оно автоматически получает значение по умолчанию.
Например, если background-attachment и background-position
нет в данном примере:
то этим
двум неспецифицированным свойствам будут присвоены значения по умолчанию
- scroll и top left.
В этом уроке вы уже
познакомились с техникой, отсутствующей в HTML. Ещё интереснее будет в
следующем уроке, где мы рассмотрим широкие возможности CSS при описании
шрифтов.