Сегодня: 25 апреля 2024 г., четверг Время:

Online-учебник по CSS

Автор учебника: Евгений Андросов

Урок 4. Свойства и значения (фон)

В этом большом уроке мы изучим различные свойства и значения css-тегов. Сразу и приступим.

Свойство color (цвет). Самое простое свойство. Может применяться, как самостоятельно, например:

h1 {color: red}

(все заголовки h1 должны быть красного цвета)

так и в составе других свойств, например background-color:

h1 {
color: red;
background-color: grey;
}

(все заголовки h1 должны быть красного цвета на сером фоне).

Свойство background (фон)

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

Обратите внимание на приставку “url” – она обязательна. Файл же может быть любой, с одним из трех допустимых для использования на сайтах расширений: .jpg, .gif или .png.
При этом не забывайте о такой вещи, как путь к файлу! В приведенном примере файл лежит в той же папке, что и таблица стилей. Если файл с изображением лежит, например в папке “images”, то этот пример будет выглядеть так:

Не важно в какое количество папок «спрятан» ваш файл, главное указать к нему правильный путь. Этот пример может выглядеть и так:

Свойство background-repeat (повторение фонового изображения).

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

Перечислим все возможные значения этого свойства.

background-repeat: no-repeat (единичное изображение, не повторяется)

background-repeat: repeat-y (повторение изображения по вертикали)

background-repeat: repeat-x (повторение изображения по горизонтали)

background-repeat: repeat (повторение изображения по всей площади экрана)

Свойство background-position– место размещения фонового изображения на экране.

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

backgroundposition: 300px 200px;

Это значит, что изображение будет размещено на 300 пикселей слева и на 200 пикселей от верха экрана.

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

Еще пример:

background-position: 30% 20%;

изображение будет размещено в 30% слева и 20% от верха экрана.

По умолчанию размещение изображения идет слева и сверху. Однако это значение тоже можно поменять, указав дополнения. Например:

background-position: top right;

как вы можете догадаться, изображение будет размещено вверху справа.

Свойство background-attachment – блокировка или прокрутка фонового изображения.

Это значит, что изображение может быть «прикреплено» к тому месту, где вы его разместили, либо прокручиваться вниз и вверх вместе с прокруткой экрана.

Собственно, это два возможных значения этого свойства. Рассмотрим их оба на примерах.

background-attachment: fixed; (фиксировано, т.е. «прикреплено» к месту на экране)

Cмотрим пример (чтобы увидеть эффект, прокручиваем страницу вниз)

background-attachment: scroll; (прокручивается вместе с экраном)

Cмотрим пример (чтобы увидеть эффект, прокручиваем страницу вниз)

По умолчанию, свойство "background-attachment" имеет значение "scroll". Поэтому если вам нужно это значение, вы можете его вообще не указывать.

Не забывайте, что все перечисленные дополнения можно и нужно указывать перечислением через пробел к одному единственному свойству "background". Например:

background: #F0EFEC url("flowers.jpg") repeat-y top right;

Смотрим пример

Так как мы не указали "attachment", по умолчанию происходит прокрутка изображения, кроме того, благодаря свойству "repeat-y", происходит повторение изображения по вертикали, ну и размещено оно в этот раз в правом верхнем углу экрана.

Вот и все в этом уроке. Переходим к следующему...

Предыдущий урок | К началу урока | К оглавлению | Следующий урок

Непонятно? Есть вопросы?
Задайте их прямо сейчас и получите ответ автора учебника!

Комментарий добавил(а): Стас
Дата: 23.09.2012

no-repeat через дефис пишется)

Задать вопрос

Имейте, пожалуйста, ввиду, что любые ссылки, html-теги или скрипты, будут выводиться в виде обычного текста - бессмысленно их использовать. Вопросы, содержащие мат и оскорбления, будут немедленно удалены.