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

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

 

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

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

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

 

 

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


Свойство BACKGROUND

Рассмотрим полный пример задания фона для страницы:

BODY
{
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 50%;
}

Фоновое изображение теперь будет закреплено по центру экрана, не будет повторяться ни в одном из направлений и не будет прокручиваться вместе с текстом страницы.

В CSS существует понятие стенографического свойства, позволяющего упрощенно записывать правила, относящиеся к заданию стилей для одного элемента, в данном случае для фонового изображения. Свойство background является стенографическим свойством для задания значений свойств: background-image, background-repeat, background-attachment и background-position. Таким образом, показанный выше пример можно переписать так:

BODY { background: url(images/bg.gif) no-repeat fixed 50% 50% }


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

BODY { background: no-repeat url(images/bg.gif) 50% 50% fixed }

Вот мы и познакомились со свойствами цвета и фона, и вы знаете, как с помощью CSS можно задать варианты повторения фона и позиционировать фоновое изображение. Краткое описание всех этих свойств приведено в таблице:



Свойства Цвета и Фона в CSS
Свойство Описание Пример
color Назначает цвет элемента STRONG {color:red;}
background-color Назначает цвет фона элемента Н4 {background-color: silver;}
background-images Определяет URL фонового изображения BODY {background-images: url(bg.gif);}
background-repeat Задает стиль повторения фонового изображения
repeat | repeat-x | repeat-y | no-repeat
BODY {background-repeat: no-repeat;}
background-attachment Устанавливает возможность прокрутки фонового изображения вместе с элементом

scroll|fixed
BODY {background-attachment: scroll;}
background-repeat Задает стиль повторения фонового изображения

repeat | repeat-x | repeat-y | no-repeat
BODY {background-repeat: no-repeat;}
background-position Устанавливает начальную позицию фонового изображения в процентах, абсолютных величинах или с помощью ключевых слов

top center | bottom right и т.д.
BODY {background-position: top center;}
background Сокращенная запись определяет свойства фона в любом порядке P { background: url("chess.png") gray 50% repeat fixed }

 

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

 

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

 

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

 

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