Лекция 12. Цвет и фоновые изображения CSS
Admin 15-10-2023, 20:39 197 Лекции по современным веб-технологиямДля оформления фона в CSS предусмотрено несколько свойств, позволяющих задавать цвет фона, фоновое изображение, позиционирование и укладку фонового изображения и многое другое. Однако, перед тем, как описывать основные свойства CSS для работы с фоном, опишем способ задания цвета переднего плана или цвета текста элемента.
Управление цветом переднего плана: свойство color
Цвет текста задается свойством color. Значения данного свойства можно задавать несколькими способами. Можно задать явное название цвета (например, red, yellow и др.), указать шестнадцатеричное значение или значение RGB. Шестнадцатеричное значение состоит из символа #, за которым следует шесть символов. Первая пара указывает уровень красного цвета, а вторая и третья – уровни зеленого и синего цветов соответственно, например, #FF0000. Можно определить цвет, используя значения уровня красной, зеленой и синей составляющей в десятичном исчислении, например, RGB(49, 151, 116). Также можно задавать цвет в процентном отношении. Например, следующее свойство делает все заголовки документа красными, а для задания свойства используется шестнадцатеричное значение:
H1 {color: #FF0000;}Некоторые программы позволяют выбрать оттенок цвета, а затем определить его шестнадцатеричное или RGB-значение, как это показано на рисунке 12.1.
Рис. 12.1. Пример выбора значения цвета в программе Adobe PhotoshopДалее представлены основные свойства CSS, предназначенные для оформления фона элемента.
Управление цветом фона: свойство background-color
Для описания цвета фона элемента используется свойство background-color. Для изменения цвета фона всей веб-страницы свойство background-color нужно применить к элементу BODY. Это свойство можно применять и к другим элементам, в том числе к заголовкам и тексту. В следующем примере различные цвета фона применяются к элементам BODY и H1:
BODY {background-color: #8798C3;}
H1 {color: #1A284D; background-color: #4F659E;}Результат применения данных правил представлен на рисунке 12.2.
Рис. 12.2. Применение цвета фона для элементов BODY и H1
Применение фонового изображения: свойство background-image
Свойство background-image позволяет установить фоновое изображение или графический образ для элемента. В качестве значения данного свойства используется путь к графическому файлу, который указывается внутри конструкции url(). Например, следующее свойство задает в качестве фона страницы графическое изображение image.jpg:
BODY {background-image: url("image.jpg")}Когда фоновое изображение не требуется, аргумент может принимать значение none.
Если одновременно для элемента задан цвет фона и фоновое изображение, то цвет фона будет отображаться до тех пор, пока фоновое изображение не загрузится полностью или в случае, если изображение по какой-либо причине не доступно. В случае наличия в рисунке прозрачных областей, через них будет проглядывать фоновый цвет.
Повторение фонового изображения: свойство background-repeat
Если фоновое изображение меньше области элемента, то по умолчанию оно будет повторяться по горизонтали и по вертикали, стремясь заполнить всю выделенную область. Однако CSS представляет возможность управлять повторением фонового изображения, т.е. выбрать, в каком направлении оно должно повторяться. Данный выбор можно осуществить с помощью свойства background-repeat, которое может принимать значения repeat-x, repeat-y и repeat, которое соответствуют повторению изображения по горизонтали, по вертикали и в обоих направлениях соответственно. Еще одно значение no-repeat является значением, которое требуется использовать, чтобы изображение не повторялось.
Например, горизонтальное повторение изображения может быть определено с помощью следующего свойства:
BODY {background-image: url("image.jpg"); background-repeat: repeat-x;}Результат применения данного свойства представлен на рисунке 12.3.
Рис. 12.3. Повторение фонового рисунка по горизонтали
Присоединение: свойство background-attachment
Свойство background-attachment определяет, фиксируется ли фоновый рисунок или прокручивается вместе с содержимым страницы. Данное свойство имеет два значения scroll и fixed. Значением по умолчанию является scroll, которое заставляет фоновое изображение прокручиваться вместе с содержимым элемента. Значение fixed фиксирует изображение, а содержимое страницы прокручивается. Например, следующий код фиксирует изображение:
BODY { background-color: #FFCC66; background-image: url("image.jpg"); background-repeat: no-repeat; background-attachment: fixed; }Положение фонового изображения: свойство background-position
По умолчанию, фоновый рисунок располагается в левом верхнем углу экрана. Свойство background-position позволяет располагать фоновое изображение в любом месте. Есть много способов установить значение background-position. Тем не менее, все они представляют собой набор координат. Например, значение 200px 200px располагает фоновый рисунок на 200 пикселей слева и на 200 пикселей сверху в окне браузера. Координаты можно указывать в процентах от ширины экрана, в фиксированных единицах (пикселы, сантиметры, и т. п.), либо использовать символьные константы top, bottom, center, left и right. На рисунке 12.4 представлена иллюстрация использования различных координат. В данном примере фоновое изображение располагается в правом нижнем углу:
BODY { background-image: url("image.jpg"); background-position: right bottom; }
Рис. 12.4. Различные примеры позиций фонового изображения, использующие ключевые слова, проценты и пиксели
Свойство background
С помощью свойства background можно объединить несколько свойств и записывать стили в сокращённом виде, что облегчает чтение таблиц. Например, приведенные ниже строки позволяют установить цвет фона, фоновое изображение, вид повторения, присоединение и позицию изображения:
background-color: #FFCC66; background-image: url("image.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-position: right top;Используя свойство background, того же результата можно достичь одной строкой кода:
background: #FFCC66 url("image.jpg") no-repeat fixed right top;Для обеспечения межбраузерной совместимости и для организации и обслуживания таблицы стилей при объединении отдельных свойств фона в группу рекомендуется размещать свойства в следующем порядке: background-color, background-image, background-repeat, background-attachment, background-position.
Если какое-либо свойство отсутствует, то оно автоматически получает значение по умолчанию. Например, в приведенном ниже примере не заданы свойства background-attachment и background-position:
background: #FFCC66 url("image.jpg") no-repeat;Поэтому этим свойствам будут присвоены значения по умолчанию - scroll и top left.
Практическое занятие 4
Целью занятия является закрепление материала лекций 11 и 12. В ходе практического занятия слушатель осваивает основные приемы оформления текстов с использованием CSS, а также методы работы с фоном и фоновыми изображениями.
Слушателю предлагается оформить созданные на предыдущих практических занятиях страницы, добавив цвет фона и фоновое изображение. Для фонового изображения необходимо предусмотреть такие свойства как направление повторения фонового изображения и поведение изображения при прокрутке. Также будет полезно оформить фоном не только саму страницу (т.е. элемент BODY ), но и некоторые структурные элементы, например, заголовки или параграфы.
При оформлении текста необходимо установить такие свойства как семейство шрифтов, размер, насыщенность и стиль, капитель и другие свойства, описанные в "Оформление текста с помощью CSS" . Данные свойства необходимо применять как к блокам текста, так и к группам символов. Слушателю предлагается поработать над цветовым оформлением текста и отдельных его символов. Выбор объектов применения данных свойств оставляется на усмотрение пользователя.
Задание потребует предварительной группировки элементов созданного HTML-документа в блоки с использованием элементов DIV и SPAN.