Advego.ru - система покупки и продажи контента для сайтов, форумов и блогов

Информационный Бестселлер на DVD или CD

Статьи для сайтов!!!
Главная Свойства CSS CSS по шагам Цвет и фон в CSS Шрифты в CSS

Цвет текста и фона в CSS. Фоновое изображение

Color Background Background-attachment
Background-color Background-image Background-position Background-repeat


Цвет текста
Цвет фона
Фоновое изображение
Повторение фонового изображения
Расположение фонового изображения
Фиксация фонового изображения
Универсальное свойство


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

Цвет в CSS можно задать двумя способами (подробнее здесь...).

Цвет текста

Свойство color предназначено для задания цвета текста элемента.

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

Свойство применимо ко всем элементам.

Пример

Фрагмент кода:

<head>
<title>
Цвет текста </title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>
<p> <span class="first">
З</span>ададим цвет текста для абзацев данного документа. </p>
<p> <span class="first">
А</span> также создадим стиль, который применим к первым буквам каждого абзаца! </p>
</body>

Фрагмент кода из файла со стилями:

p{color:#00CC00;}
.first{
color:red; font-size:30px;}

Результат:


Зададим цвет текста для абзацев данного документа.

А также создадим стиль, который применим к первым буквам каждого абзаца!


Цвет фона

Свойство background-color предназначено для задания фонового цвета элемента.

Свойство применимо ко всем элементам.

Пример

Фрагмент кода:

<head>
<title>
Цвет фона </title>

<style type="text/css">
p{background-color:#CCFF00; padding:5px}
</style>

</head>

<body>
<p>
Зададим фоновый цвет. </p>
<p>
Для всех абзацев текущей страницы. </p>
</body>

Результат:


Зададим фоновый цвет.

Для всех абзацев текущей страницы.


Фоновое изображение

Свойство background-image предназначено для задания фонового изображения элемента.

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

Если изображение невелико (меньше пространства, занимаемого элементом), оно будет повторяться и по вертикали и по горизонтали, пока не займет всю область, которую занимает элемент.

Свойство применимо ко всем элементам.

Пример

Фрагмент кода:

<p style="background-image:url(img/peng_64.gif); height:100px; border:#FF0000 solid 1px;"> Пингвин является фоновым изображением данного абзаца. </p>

Результат:


Пингвин является фоновым изображением данного абзаца.


Повторение фонового изображения

Свойство background-repeate задает направление, в котором фоновое изображение будет повторяться.

Значения repeat-x и repeat-y устанавливают повторение фонового изображения по горизонтали и по вертикали соответственно.

Значение no-repeat отменяет повтор изображения.

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

Свойство применимо ко всем элементам.

Пример

Фрагмент кода:

<p style="background-image:url(img/peng_64.gif); background-repeat:no-repeat; height:100px; border:#FF0000 solid 1px;"> Пингвин является фоновым изображением данного абзаца. И он не повторяется! </p>

Результат:


Пингвин является фоновым изображением данного абзаца. И он не повторяется!


Расположение фонового изображения

Свойство background--position задает положение фонового изображения элемента относительно его верхнего левого угла.

Положение изображения можно задать как с помощью ключевых слов: left, right, center, top, bottom, так и в единицах, принятых в CSS (подробнее здесь...).

Свойство применимо к блочным элементам (подробнее здесь...).

Пример

Фрагмент кода:

<p style="background-position:120px bottom; background-image:url(img/peng_64.gif); background-repeat:no-repeat; font-size:18px; width:500px;"> По умолчанию фоновое изображение располагается в левом верхнем углу элемента. Я расположил его в нижней части области, занимаемой данным абзацем, сместив на 120 пикселей вправо. </p>

Результат:


По умолчанию фоновое изображение располагается в левом верхнем углу элемента. Я расположил его в нижней части области, занимаемой данным абзацем, сместив на 120 пикселей вправо.


Фиксация фонового изображения

Свойство background-attachment определяет, будет ли фоновое изображение прокручиваться вместе с содержимым элемента - значение scroll или будет неподвижным - значение fixed.

Свойство применимо ко всем элементам.

Универсальное свойство

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

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

Не обязательно указывать значения всех свойств. Не используемым свойствам присваиваются значения по умолчанию.

Свойство применимо ко всем элементам.

Пример

Фрагмент кода:

<p style="background: url(img/peng_64.gif) right no-repeat;"> К данному абзацу с помощью свойства background я применил три свойства, относящиеся к фону элемента и его фоновому изображению, указав через пробел только значения свойств. Фоновым изображением является пингвин. Он смещен вправо и не повторяется. Фоновый цвет элемента не указан, а по умолчанию он белый. </p>

Результат:


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


Синтаксис CSS. Селектор Цвет и фон в CSS Шрифты в CSS
CSS по шагам
Дизайн сайтов
ПОИСК ПО САЙТУ:

Моё имя Антон. Связаться со мною Вы можете по e-mail: averagev@mail.ru