Лабораторная работа 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.