9.1. Фон / HTML, XHTML и CSS на 100% / Библиотека (книги, учебники и журналы) / В помощь Веб-Мастеру

Обложка
Аннотация

Игорь Квинт i

Книги автора: HTML, XHTML и CSS на 100% Работаем на нетбуке. Начали!

/ Издательство «Питер»i

Книги автора: Системное программное обеспечение. Лабораторный практикум Мерчандайзинг. Курс управления ассортиментом в рознице Категорийный менеджмент. Курс управления ассортиментом в рознице Дефрагментация мозга. Софтостроение изнутри Искусство управления IT-проектами Гибкое управление проектами и продуктами Лидогенерация: клиентов много не бывает Идеальный программист. Как стать профессионалом разработки ПО Реклама. Принципы и практика Интернет-маркетинг 3.0. Нет русской рулетке! Информационный удар. Как сделать, чтобы в шумном медиамире услышали именно тебя Перехват клиента. Борьба за продажи в условиях жесткой конкуренции Маркетинг для государственных и общественных организаций Запуск! Быстрый старт для вашего бизнеса Большая книга директора магазина 2.0. Новые технологии Успешная короткая презентация Цифровая фотография. Трюки и эффекты Новое оружие маркетинговых войн Продвижение порталов и интернет-магазинов Разумный маркетинг. Как продавать больше при меньших затратах Установка, настройка и восстановление Windows 7 на 100% Графология XXI века HTML, XHTML и CSS на 100% Копирайтинг: как не съесть собаку. Создаем тексты, которые продают 99 инструментов продаж. Эффективные методы получения прибыли Выжми из бизнеса всё! 200 способов повысить продажи и прибыль Генератор новых клиентов. 99 способов массового привлечения покупателей Если покупатель говорит «нет». Работа с возражениями Копирайтинг: секреты составления рекламных и PR-текстов Продвижение бизнеса в ВКонтакте. Быстро и с минимальными затратами Профессиональный поиск в Интернете Восстановление данных на 100% Инфобизнес на полную мощность. Удвоение продаж Инфобизнес за один день Как сделать свой сайт и заработать на нем. Практическое пособие для начинающих по заработку в Интернете Монетизация сайта. Секреты больших денег в Интернете Удвоение продаж в интернет-магазине Деловая e-mail переписка. Пять правил успеха Социальные сети. Источники новых клиентов для бизнеса Быстрые деньги в Интернете. 50 способов заработать, сидя дома у компьютера Интернет-маркетинг на 100% Как спроектировать современный сайт

Книга: HTML, XHTML и CSS на 100%

9.1. Фон

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

Следует отметить, что некоторые браузеры будут отображать фон HTML-документов, заданный для элемента HTML. Хотя рекомендуется устанавливать фон для элемента BODY, а не для элемента HTML.

Рассмотрим пример, приведенный в листинге 9.1.

Листинг 9.1. Фон страницы

<html>

<head>

<title>Глава 9. Установка фона области представления</title>

body { background: url("http://style.com/marble.png") }

</style>

</head>

<body>

<p>Я использую мраморный фон из файла картинки.

</body>

</html>

Фон документа, представленного в листинге 9.1, будет задан картинкой, размноженной на все окно браузера и находящейся в файле marble.png.

Список всех возможных свойств фона таков: background-color, background-image, background-repeat, background-attachment, background-position и background.

Теперь рассмотрим каждое из них подробнее.

Итак, первое свойство – background-color. Оно устанавливает цвет фона элемента, равный либо шестнадцатеричному значению цвета, либо названию цвета, либо RGB-значению цвета, либо ключевому слову transparent. Ключевое свойство transparent просто-напросто делает фон элемента прозрачным.

Пример:

body { background-color: #FF0000 }

Приведенный код устанавливает красный цвет фона страницы.

Второе свойство – background-image. Оно задает графический объект, то есть картинку из файла, в качестве фона элемента. При определении фонового изображения рекомендуется также указывать цвет фона, который будет использоваться, если изображение недоступно. Если изображение доступно, то оно отображается поверх фонового цвета, который все же будет виден сквозь прозрачные фрагменты изображения. В качестве значения этого свойства выступает адрес картинки. Вы также можете задать в качестве значения ключевое слово none, чтобы не использовать фоновое изображение, например, пока не известен адрес файла фоновой картинки. Рассмотрим такой фрагмент таблицы стилей:

body { background-image: url(«some_bgimage.gif») }

p { background-image: none }

В данном примере в качестве фона страницы будет использоваться изображение из файла some_bgimage.gif. Однако содержимое страницы внутри элемента P будет находиться на белом либо на таком фоне, который задан в браузере по умолчанию (как правило, белый).

Если вы задали фоновое изображение, то можете также использовать свойство background-repeat, которое определяет, будет ли изображение дублироваться, и если да, то каким образом. Данное свойство может принимать следующие значения:

• repeat – дублируется как по вертикали, так и по горизонтали;

• repeat-x – дублируется только по горизонтали;

• repeat-y – дублируется только по вертикали;

• no-repeat – не дублируется: выводится только одна копия изображения.

Рассмотрим такой пример:

body {

background: white url("pendant.gif");

background-repeat: repeat-y;

background-position: center;

}

Цвет страницы будет белым. Фоновое изображение будет вертикально продублировано и расположено посередине страницы.

Если вы задали фоновое изображение, то нужно указать свойство background-attachment, которое определяет, будет ли изображение фиксироваться относительно окна просмотра (значение fixed) или перемещаться вместе с документом (значение scroll) в процессе его прокрутки.

Рассмотрим пример:

body {

background: red url("pendant.gif");

background-repeat: repeat-y;

background-attachment: fixed;

}

При использовании приведенного примера для какого-то HTML-документа цвет фона документа станет красным, а на странице сформируется бесконечная вертикальная полоса из файла pendant.gif. Полоса будет оставаться как бы «приклеенной» к окну просмотра во время горизонтальной или вертикальной прокрутки.

Вы также можете задать начальное положение фонового изображения на странице, используя свойство background-position. Есть несколько способов присвоения значения данному свойству.

Например, вы можете задавать местоположение, используя проценты. Причем если вы используете пару значений 0 % 0 %, то верхний левый угол изображения выравнивается относительно верхнего левого угла краевой линии отступов блока. Если зададите пару значений 100 % 100 %, то нижний правый угол изображения помещается в нижний правый угол краевой линии отступов. Если вы зададите пару значений 14 % 8 4 %, то верхний левый угол изображения смещается вдоль изображения на 14 % вправо по горизонтали и на 84 % вниз по вертикали. Тем самым он помещается в точку, смещенную вдоль области, предназначенной для отступов, на 14 % вправо по горизонтали и на 84 % вниз по вертикали.

Вы также можете задать данное значение, используя число и единицу длины. Например, если вы зададите пару 2 cm 2 cm, то верхний левый угол изображения помещается на 2 см правее и 2 см ниже верхнего левого угла области, предназначенной для отступов.

Помимо этого, вы можете использовать в качестве значений ключевые слова. Ниже приведены их список и описания:

• top left и left top – аналогично паре значений 0 % 0 %;

• top, top center и center top – как и пара значений 50 % 0 %;

• right top и top right – аналогично паре значений 100 % 0 %;

• left, left center и center left – как и пара значений 0 % 50 %;

• center и center center – аналогично паре значений 50 % 50 %;

• right, right center и center right – как и пара значений 100 % 50 %;

• bottom left и left bottom – аналогично паре значений 0 % 100 %;

• bottom, bottom center и center bottom – как и пара значений 50 % 100 %;

• bottom right и right bottom – аналогично паре значений 100 % 100 %.

Если вы зададите только одно значение длины или одно процентное соотношение, то оно определит позицию только по горизонтали, а позиция по вертикали будет принята браузером как значение 50 %. Если вы зададите два значения, то первым браузер будет считать позицию по горизонтали. Вы также можете сочетать значение длины и процентное соотношение (например, 5 0 % 2 cm). Можно использовать отрицательные значения. Однако помните, что ключевые слова нельзя применять вместе со значениями длины или процентными соотношениями.

Можно использовать сокращенную запись для всех свойств, приведенных выше, с помощью свойства background. Например:

body { background: url(«chess.png») gray 50% 20% repeat fixed }

В данной таблице стилей заданы значения для всех свойств фона документа.

Оглавление книги

Оглавление статьи/книги

Похожие страницы