Веб-компас сайтостроителей
www.linedmk.com
Войти Регистрация
HTML CSS JavaScript PHP Разное
Основы CSS
/ Все статьи / CSS / Основы CSS / Стилевые свойства цвета и фона

Стилевые свойства цвета и фона

Продолжаем знакомиться с каскадными таблицами стилей, и в этой статье узнаем о стилевых свойствах цвета и фона элементов HTML-документа.

 


Цвет текста

 

Цвет текста можно задать свойством color, значение можно указывать разными способами. Цвет можно задать либо названием - red, white, black, либо можно указывать в числовом виде значение RGB. Значение RGB цвета можно указывать в шестнадцатеричной системе счисления, так и в десятичной системе счисления. В любом случае указывается интенсивность составляющих цвета - красной, зеленой и синей. В шестнадцатеричной системе счисления значение RGB записывается в виде символа "#", и следующих за ним три или 6 символов шестнадцатеричной системы. Причем запись из трех символов при обработке браузером преобразуется в последовательность из шести, дублированием символов каждой составляющей, например, значение #8DA будет соответствовать значению #88DDAA. Значение каждой составляющей при записи из шести символов может принимать значения от 00 (составляющая отсутствует) до FF (максимальное интенсивность). Значение каждой составляющей при записи из трех символов может принимать значения от 0 до F. Приведу примеры
Код
div {  color: #FFFFFF; }
div { color: #FFF; /* соответствует значению #FFFFFF  */  }
p { color:#44AAFF; }
p { color:#A0F; /* соответствует значению #AA00FF */  }

В десятичной системе счисления запись состоит из строки "rgb", за которой в скобочках через запятую записываются значения интенсивностей составляющих цвета. Значение каждой составляющей может принимать значения от 0 до 255. Например
Код
div { color: rgb(0,100,255); }
p { color: rgb(55,200,0); }

Приведу еще один пример
Код
...
p { color:red; }
...
<p>
текст будет красного цвета
</p>
<div style="color:#0000FF ;">
текст будет синего цвета
</div>

 

Управление фоном

 

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

 

Цвет фона

 

Задать цвет фона можно свойством background-color, в качестве значения должен выступать либо цвет, либо ключевое слово "transparent", которое делает фон прозрачным. Цвет задается точно также как и в свойстве color используются или имена цветов или числовой вид значения RGB цвета. Например
Код
body { background-color: green; }
div { background-color: #22AACC; }

 

Фоновый рисунок

 

В качестве фона можно установить рисунок свойством background-image. Свойство background-image должно принимать либо url-адрес изображения, либо значение "none", которое указывает, что рисунок не используется в качестве фона. Например
Код
body { background-image:  url("fon.gif"); }
div { background-image: none; }

При использовании фонового рисунка желательно также задавать и цвет фона, свойством background-color, близкий по оттенку к фоновому рисунку, так как фоновый рисунок может не загрузиться по каким-либо причинам. При этом фоновое изображение, если оно загрузиться, будет отображаться поверх фонового цвета.
Если изображение, используемое в качестве фона, меньше по размерам, чем элемент, в котором он указан, то рисунок будет повторяться по вертикали и горизонтали данного элемента. Но можно управлять повторением фонового рисунка свойством background-repeat.
Свойство background-repeat может принимать следующие значения
  • repeat - фоновый рисунок повторяется по горизонтали и по вертикали;
  • no-repeat - фоновый рисунок не повторяется, показывается изображение только один раз;
  • repeat-x - фоновый рисунок повторяется по горизонтали;
  • repeat-y - фоновый рисунок повторяется по вертикали.

Приведу примеры
Код
body { background-image:  url("fon.gif");  background-repeat: repeat; }
div { background-image: url("images/fon_div.jpg"); background-repeat: no-repeat; }

Но можно управлять не только повторяемостью фонового изображения, но и еще не менее интересными свойствами.
Так есть свойство background-attachment, которое определяет, будет ли фоновое изображение прокручиваться вместе с содержимым элемента HTML-документа и может принимать следующие значения
  • fixed - фоновое изображение фиксируется, и не будет перемещаться при прокрутке содержимого элемента;
  • scroll - фоновое изображение будет прокручиваться вместе с содержимым элемента (значение по умолчанию).

Например
Код
body { background-image:  url("fon.gif");  background-repeat: repeat; background-attachment: fixed;  }
div { background-image: url("images/fon_div.jpg"); background-repeat: repeat-x;
 background-attachment :scroll; }

Также есть интересное свойство background-position, которое задает начальное положение фонового рисунка. Данное свойство определяет первоначальное положение фонового рисунка, вне зависимости будет ли он повторяться или нет. Допустим, свойством background-repeat запрещено повторение фонового изображения (no-repeat), то свойством background-position можно задать положение рисунка в элементе, в котором он будет отображен без повторения. Если же заданно повторение рисунка во всех, либо в каком-то одном направлении (например, горизонтальном), то свойством background-position можно задать положение рисунка относительно которого будет идти повторение изображения.
В свойстве background-position нужно указать позицию фонового рисунка по горизонтали и вертикали. Это можно сделать ключевыми словами, абсолютными координатами или процентами от размеров элемента. Для определения позиции по горизонтали в качестве ключевых слов можно использовать следующие: left, center, right, которые соответственно выравнивают фоновый рисунок по левому краю элемента, середине и правому краю. Для определения положения по вертикали в качестве ключевых слов нужно использовать следующие: top, center и bottom, которые соответственно выравнивают фоновый рисунок по верху элемента, по центру и по низу. При задании положения фонового рисунка в процентах или в абсолютных единицах, отсчет ведется от левого верхнего угла элемента.
Значение по умолчанию свойства background-position является положение соответствующее позиции left top.
Приведу примеры
Код
body { background-image:  url("fon.gif");  background-repeat: repeat; 
background-position: center bottom; }
div { background-image: url("images/fon_div.jpg"); background-repeat: no-repeat; 
background-position: 50px 150px; }

Как видно из выше представленного свойств управляющих фоном довольно много, но чтобы не указывать каждое свойство отдельно можно использовать возможность сокращенной записи в виде одного свойства background.
В свойстве background можно указывать значения свойств: background-color, background-image, background-repeat, background- attachment, background-position. Например, вместо перечисления всех свойств
Код
body {background-color:#a93; background-image: url("fon_body.gif"); background-repeat: repeat-y;
  background- attachment: scroll, background-position: right center; }

Можно записать следующим образом
Код
body {background: #a93  url("fon_body.gif")   repeat-y scroll  right center; }

Соответственно значения по умолчанию можно не указывать.
Еще статьи из данной категории
Предыдущие статьи
Следующие статьи
Комментарии к публикации
Всего комментариев: 5
прохожий: Nadea | 17.06.2009, 06:21 #
а как можно растянуть фоновый рисунок на весь экран? А то он у меня маленький немного(
Напишите пажалуйста на мыло)
Ответить
Автор статьи: admin | 18.06.2009, 05:31 #
Фоновый рисунок растянуть на весь экран нельзя. Есть только вариант сделать размеры фонового рисунка на весь экран.
Ответить
прохожий: Hrry | 02.09.2009, 06:51 #
Фоновый рисунок баскграундиться на весь экран так:

<html>

<head>

<style>

.abs {
position: absolute;
left: 0%;
top: 0%;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}

</style>

</head>

<body class="abs">
<div class="abs">
<img alt="" src="img/top.jpg" width="100%" height="100%">
</div>

<div class="abs">

<p>Код не содержит никаких браузеро-зависимых заморочек, так что работать должен везде.
<p>если контента более чем на экран, то все что ниже экрана на белом фоне :(
<p>Чтобы зафиксировать картинку, нужно в стиле ее DIV-а указать position: fixed (а не absolute).

</div>
</body>
</html>
Ответить
прохожий: Сайбер | 05.09.2010, 01:22 #
А как сделать растяжение рисунка для ячейки таблицы?
Ответить
прохожий: Фуксия | 07.09.2010, 09:11 #
Можно сделать растяжение только слою - диву, а в нем уже разместить дивы с нужными элементами.
Ответить
Добавить комментарий
Новости сайта
Последние публикации в каталоге статей
Партнеры сайта
Современный бесплатный скрипт интернет-магазина на CMS boxcode.ru.
Доска бесплатных объявлений Краснодара и каталог фирм, магазинов, компаний и организаций Краснодарского края.
© web2-site.ru - Веб-компас сайтостроителей
Наш сайт переехал с сайта www.linedmk.com на web2-site.ru
Работает на
CMS boxcode.ru