background
advertisement
Лабораторная работа 2. CSS. Цвет и фон
Цель работы - изучение CSS-свойств:
color;
background-color;
background-image;
background-repeat;
background-attachment;
background-position;
background.
Цвет
текста:
свойство
'color'.
Цвета
можно
указывать
как
шестнадцатеричные значения, например, #ff0000, либо использовать названия
цветов ("red") или rgb-значения (rgb(255,0,0)).
h1 {color: #ff0000;}
Все заголовки <h1> будут красными.
Цвет фона элемента: свойство background-color.
Для изменения цвета фона всей страницы свойство background-color
нужно применить к элементу <body>:
body { background-color: #FFCC66;}
Если указать это свойство для элемента <div>, то будет окрашена область
ограниченная данным тегом; если для тега <input>, то область внутри поля и
т.п.
Фоновые изображения: свойство background-image.
Для вставки рисунка в качестве фонового изображения web-страницы
примените свойство background-image в теге <body> и укажите путь к файлу
рисунка.
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
}
2
Обычно при использовании рисунков подбирается подходящий фон, даже
если рисунок перекрывает его полностью. Если пользователь отключил показ
рисунков в своем браузере, то он увидит хотя бы цвет фона подходящей
цветовой гаммы.
Для указания каталогов используются конструкции:
url("../images/butterfly.gif");
url("http://www.html.net/butterfly.gif").
Укажите фоновые рисунки в областях, ограниченных разными <div>-ами.
Повторение фонового изображения: cвойство background-repeat.
В таблице указаны четыре значения background-repeat.
Значение
background-repeat: repeat-x
background-repeat: repeat-y
Описание
Рисунок повторяется по горизонтали
Рисунок повторяется по вертикали
Рисунок повторяется по горизонтали и
background-repeat: repeat
вертикали
background-repeat: no-repeat
Рисунок не повторяется
Например, для отмены повторения фонового рисунка мы должны
записать такой код:
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
}
Блокировка фонового изображения: cвойство background-attachment
определяет, фиксируется ли фоновый рисунок, или прокручивается вместе с
содержимым страницы. В таблице указаны два значения background-attachment.
Значение
Описание
Изображение прокручивается
background-attachment: scroll
страницей - разблокировано
background-attachment: fixed
Изображение блокировано
Например, следующий код фиксирует изображение.
вместе
со
3
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
Расположение фонового рисунка: свойство 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
в правом верхнем углу страницы
В примере кода фоновое изображение располагается в правом нижнем
углу экрана:
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}
4
Сокращённая запись background
Свойство background входит в состав всех свойств, перечисленных в этом
уроке.
С помощью background можно сжимать несколько свойств и записывать
стили в сокращённом виде, что облегчает чтение таблиц.
Например, записи справа и слева приведут к одинаковому результату.
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
= background: #FFCC66 url("butterfly.gif")
background-attachment: fixed;
no-repeat fixed right bottom;
background-position: right bottom;
Порядок свойств элемента background таков:
[background-color] | [background-image] | [background-repeat] | [backgroundattachment] | [background-position]
Если свойство отсутствует, оно автоматически получает значение по
умолчанию. Например, в следующем примере свойства background-attachment и
background-position отсутствуют:
background: #FFCC66 url("butterfly.gif") no-repeat;
значит, этим двум свойствам будут присвоены значения по умолчанию scroll и top left.
Практическое задание
1. Создайте папку и загрузите в неё несколько графических изображений
для использования в качестве фоновых рисунков.
2. Создайте файл style.css
и пропишите в нем
все декларации,
приведенные в теоретической части лабораторной работы.
3. Создайте файл TestBackground.html и пропишите в нем теги,
указанные в декларациях.
4. Создайте произвольный дизайн страницы, меняя свойства CSS.
