... главная страницаКарта сайтаКонтакты

Главная
Синтаксис CSS
Свойства CSS
Форматирование блоков
Списки
Пример применения стилей
Оптимизация стилей
Оформление текстов
Использование блоков
Позиционирование
Слои в CSS
Готовые решения
Дополнительные возможности CSS
Программа TopStyle
Таблица цветов

 

Все свойства CSS

 
Яндекс.Метрика
 
 

Свойства CSS. Цвет и фон (стр.2).

 

 

Цвет и фон ||  Шрифт ||  Изменение размера шрифта ||  Текст и его свойства ||  Интервалы


Свойство BACKGROUND-IMAGES

Свойство задает фоновое изображение, которое должно храниться в отдельном файле. Значением свойства может быть URL графического файла, заданное в виде url (picture, gif), или ключевое слово попе, означающее отсутствие фонового изображения. Понятно, что нет смысла указывать значение попе, когда изображения нет. Не упоминайте это свойство в таблице стилей, изображения и не будет. Спрашивается, зачем писать лишний код и усложнять себе работу? Плюс это, пусть и незначительно, увеличит объем кода. Тем более что значение попе установлено для данного свойства по умолчанию.


Замечание. При использовании свойства background-image рекомендуется задавать и значение свойства background-color. Оно будет использоваться в том случае, если фоновое изображение по тем или иным причинам окажется недоступным. Фоновый рисунок будет располагаться поверх фонового цвета, а сам фоновый цвет будет просвечивать только через прозрачные участки изображения.

Фоновое изображение в HTML можно задавать для страницы в целом, для таблицы (ТН) или для отдельных ее ячеек (TD). В CSS свойство background-image применимо для любого элемента.

Для сравнения приводим способ задания фонового изображения для страницы в целом при помощи CSS и только на HTML:

Задание фона страницы в CSS и HTML
CSS HTML
<BODY background="picture.gif" >...текст страницы...</BODY> BODY {background-images: url (picture.gif) }

Свойство BACKGROUND-REPEAT

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

  • repeat — изображение повторяется и по вертикали и по горизонтали (как в HTML);
  • repeat-х — изображение повторяется только по горизонтали (по оси х);
  • repeat-y — изображение повторяется только по вертикали (по оси y);
  • no-repeat — изображение не повторяется, остается только одна копия изображения.

Аналога такого свойства в языке HTML нет. Приведем пример его использования.

DIV { background-image: url(picture.gif) background-repeat: repeat-x }

<DIV>
Текст внутри этого контейнера будет располагаться поверх фонового изображения, которое будет повторяться по горизонтали
</DIV>

Свойство BACKGROUND-ATTACHMENT

Это свойство используется для указания, должно ли фоновое изображение страницы прокручиваться вместе с текстом страницы (или блока) или оно должно оставаться неподвижным. Установка значения scroll говорит о том, что фон прокручивается вместе с текстом, именно так чаще всего и требуется, поэтому значение scroll используется по умолчанию. Использование значения fixed фиксирует фоновое изображение относительно окна браузера, и во время прокрутки текста оно остается неподвижным. На этот эффект лучше посмотреть в действии, указав, например, для всех страниц фоновое изображение и зафиксировав его.


BODY { background-image: url(picture.gif); background-repeat: no-repeat; background-attachment: fixed }

При помощи HTML такого эффекта добиться нельзя, и, может, оно и к лучшему. На мой взгляд, использование такого эффекта непривычно для пользователя и, в общем-то, затрудняет процесс чтения страницы, а зачастую просто раздражает, поскольку сначала некоторое время уходит на полусознательные размышления о том, что же не так на этой странице, а это отвлекает внимание от основного содержимого страницы.

 

Страница: - 1 - | - 2 - | - 3 - | - 4 -

 

Цвет и фон ||  Шрифт ||  Изменение размера шрифта ||  Текст и его свойства ||  Интервалы

 

Наверх страницы

 

Уроки CSS © 2007 - 2018 г. Все права защищены