Далее на странице...
Для начала займемся рассмотрением свойств, отвечающих за цветовое оформление элементов страницы, а также свойств 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>
Фиксация фонового изображения
Свойство background-attachment определяет, будет ли фоновое изображение прокручиваться вместе с содержимым элемента - значение scroll или будет неподвижным - значение fixed.
Свойство применимо ко всем элементам.
Универсальное свойство
Свойство background является универсальным свойством, позволяющим одновременно указать значения всех свойств, связанных с фоном элемента и его фоновым изображением.
Значения свойств указывают через пробел, в любом порядке. А браузер автоматически определяет принадлежность значения свойству.
Не обязательно указывать значения всех свойств. Не используемым свойствам присваиваются значения по умолчанию.
Свойство применимо ко всем элементам.
<p style="background: url(img/peng_64.gif) right no-repeat;"> К данному абзацу с помощью свойства background я применил три свойства, относящиеся к фону элемента и его фоновому изображению, указав через пробел только значения свойств. Фоновым изображением является пингвин. Он смещен вправо и не повторяется. Фоновый цвет элемента не указан, а по умолчанию он белый. </p>
К данному абзацу с помощью свойства background я применил три свойства, относящиеся к фону элемента и его фоновому изображению, указав через пробел только значения свойств. Фоновым изображением является пингвин. Он смещен вправо и не повторяется. Фоновый цвет элемента не указан, а по умолчанию он белый.
