Свойство background-image

CSS-свойство background-image используется для вставки фонового изображения.

Ниже мы используем в качестве фонового изображение бабочки, вы можете использовать другое изображение. Для вставки рисунка бабочки в качестве фонового изображения web-страницы просто примените свойство background-image в тэге <body> и укажите местоположение рисунка. Файл рисунка должен находиться в той же папке, что и файл вызывающей страницы.

Задание 8.6

Измените содержание выше созданных файлов сохраните их под новыми именами и просмотрите default6.htm в браузере

default6.htm:

<html>

<head>

<title>Мой документ</title>

…. остальное без изменений

style6.css:

body {

background-color: #FFCC66;

}

h1 {

color: #990000;

background-color: #FC9804;

}

Свойство background-repeat

Вы заметили в предыдущем примере, что изображение бабочки повторяется по умолчанию по горизонтали и вертикали, заполняя весь экран? Свойство background-repeat управляет этим.

В таблице указаны четыре значения background-repeat.

Значение	Описание
Background-repeat: repeat-x	Рисунок повторяется по горизонтали
background-repeat: repeat-y	Рисунок повторяется по вертикали
background-repeat: repeat	Рисунок повторяется по горизонтали и вертикали
background-repeat: no-repeat	Рисунок не повторяется

Например, для отмены повторения/мультипликации фонового рисунка следует записать такой код:

Задание 8.7

Измените содержание выше созданных файлов сохраните их под новыми именами и просмотрите default7.htm в браузере

default7.htm:

<html>

<head>

<title>Мой документ</title>

…. остальное без изменений

style7.css:

body {

background-color: #FFCC66;

background-repeat: no-repeat;

}

h1 {

color: #990000;

background-color: #FC9804;

}

Задание для самостоятельного выполнения: измените последовательно значения параметра background-repeat и посмотрите результат.

Свойство background-attachment

Свойство background-attachment определяет, фиксируется ли фоновый рисунок, или прокручивается вместе с содержимым страницы.

В таблице указаны два значения background-attachment. Щёлкните на примере, чтобы почувствовать разницу между scroll и fixed.

Значение	Описание
Background-attachment: scroll	Изображение прокручивается вместе со страницей - разблокировано
Background-attachment: fixed	Изображение блокировано

Например, следующий код фиксирует изображение.

Задание 8.8

Измените содержание выше созданных файлов сохраните их под новыми именами и просмотрите defaul8.htm в браузере

default8.htm:

<html>

<head>

<title>Мой документ</title>

</head>

<body>

<h1>Моя первая таблица стилей</h1>

<p>……... сюда следует вставить произвольную страницу текста, с целью обеспечения появления полосы прокрутки, иначе эффект будет не виден!!!!!....

</p> </body></html>

style8.css:

body {

background-color: #FFCC66;

background-repeat: no-repeat;

background-attachment: fixed;

}

h1 {

color: #990000;

background-color: #FC9804;

}

Задание для самостоятельного выполнения: измените последовательно значения параметра background-attachment и посмотрите результат.

Свойство 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	Рисунок расположен в правом верхнем углу страницы

В примере кода фоновое изображение располагается в правом нижнем углу экрана:

Задание 8.9

Измените содержание выше созданных файлов сохраните их под новыми именами и просмотрите default9.htm в браузере

default9.htm:

<html>

<head>

<title>Мой документ</title>

…. остальное без изменений

style9.css:

body {

background-color: #FFCC66;

background-repeat: no-repeat;

background-position: right bottom;

}

h1 {

color: #990000;

background-color: #FC9804;

}

Свойство background входит в состав всех свойств, перечисленных в этом уроке.

С помощью background вы можете сжимать несколько свойств и записывать ваши стили в сокращённом виде, что облегчает чтение таблиц.

Например, посмотрите на эти строки:

background-color: #FFCC66;

background-repeat: no-repeat;

background-attachment: fixed;

background-position: right bottom;

Используя background, того же результата можно достичь одной строкой кода:

background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;

Порядок свойств этого элемента таков:

[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]

Если свойство отсутствует, оно автоматически получает значение по умолчанию. Например, если background-attachment и background-position нет в данном примере:

background: #FFCC66 url("butterfly.gif") no-repeat;

то этим двум неспецифицированным свойствам будут присвоены значения по умолчанию - scroll и top left.

Контрольные вопросы:

1. Назовите способы привязки CSS к HTML-документу.

2. Перечислите свойства для задания цвета и фона.

Лабораторная работа №9
Шрифты. Ссылки

Цель работы:получить навыки работы с шрифтами.

Задачи:

· научиться использовать основные свойства CSS для задания шрифтов;

· научиться использовать ссылки в CSS.