«Единственный способ творить великие дела – это любить то, что ты делаешь»
CSS
site.komp36.ru Создание сайтов. Твой сайт фотографа Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Продающий лендинг «Установка и продажа окон» Установка и продажа окон, установка дверей, перегородок. Одностраничный продающий сайт. Заявки прямо с сайта
site.komp36.ru Универсальный лендинг. Любая тема сайта - 4900 руб. Лендинг адаптируется под любую тему: ремонт, отделка, продажа окон, дверей, лестниц, мебели и многое другое
site.komp36.ru Создание сайтов. Сайт сервисного центра. Сайт компании. Новости и отзывы. Несколько прайс-листов – под каждый отдельная страница. Возможность размещения статей


Для начала займемся рассмотрением свойств, отвечающих за цветовое оформление элементов страницы, а также свойств 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 я применил три свойства, относящиеся к фону элемента и его фоновому изображению, указав через пробел только значения свойств. Фоновым изображением является пингвин. Он смещен вправо и не повторяется. Фоновый цвет элемента не указан, а по умолчанию он белый.

site.komp36.ruТвой сайт фотографа. Создание сайтов Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Акция Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Акция Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта

CSS по шагам
Тематические публикации
site.komp36.ru Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта

Все cвойства CSS
Тематические публикации
site.komp36.ru Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта