Цвет и фон в CSS

Цвет фона в CSS В сегодняшнем посте мы познакомимся с таем, как отображается цвет и фон в CSS . При помощи каскадных таблиц стилей задавать цвет и фон намного эффективнее чем в html.

Цвета в CSS обозначаются по тому же принципу, что и в HTML. Возможно использование как шестнадцатеричного значения после знака # (#cc3344), так и обычное (английское) название цвета (blue,red, gray и др.). Также допускается задавать цвета при помощи значений RGB. Берутся значения красного, зелёного и синего (от 0 до 255), и записываются через запятую, в том же порядке примерно так — RGB (30, 135, 99). Вместо чисел возможно использование процентов.

Можно определить цвет используя значения красной, зеленой и синей составляющей в десятичном исчислении. Значение каждого из трех цветов может принимать значения от 0 до 255. Также можно задавать цвет в процентном отношении.

Рассмотрим семь основных свойств цвета и фона, которые применяются в CSS, к ним относятся:

  1. color
  2. background
  3. background-attachment
  4. background-color
  5. background-image
  6. background-repeat
  7. background-position

Ну, а теперь каждое свойство CSS будем разбирать отдельно, и по-порядку:

свойство CSS color

С помощью данного свойства в СSS задаётся цвет текста. Всё просто, поэтому сразу переходим к примеру:

<html>
<head>
<title>color</title>
<style type="text/css">
.exp {
color: red;
}
H2 {
color: #1F1F8A;
}
P {
color: RGB (49, 50, 116);
}
.exp2{
color: RGB (20%, 99%, 0%);
}
</style>
</head>
<body>
<p class="exp">Красный цвет текста</p>
<h2>Заголовок цвета «#1F1F8A»</h2>
<p class="exp2">Зелёный цвет текста RGB (20%, 99%, 0%)</p>
<p><span class="exp">Ц</span>вет первой буквы красный, а остальные буквы<br> цвета «RGB (49, 50, 116)», как задано параграфу.</p>
</body>
</html>
Результаты видны на скриншоте:

CSS свойство color

Далее рассмотрим свойство CSS цвета фона  background-color.

Свойство стилей background-color задаёт цвет фона элемента. По умолчанию имеет прозрачное значение (transparent). Поэтому, фон дочернего элемента имеет цвет фона “родителя”, хотя и не наследует его.

Значения  background-color определяются теми же тремя способами, что и свойство color. А именно:

  1. По шестнадцатеричному коду
  2. По названию цвета
  3. С помощью значений RGB

Рассмотрим примеры задания фонов с помощью всех параметров свойства background-color  в одном коде:

<html>
<head>
<title>background-color</title>
<style type="text/css">
BODY {
background-color: gray;
}
H2 {
background-color: RGB (20%, 99%, 0%);
}
P {
background-color: RGB (49, 50, 116);
color: #F9D411;
}
</style>
</head>
<body>
<h2>Заголовок на зелёном фоне</h2>
<p >Жёлтый текст на синем фоне</p>
</body>

</html>

Посмотрим как этот код выглядит в браузере:

CSS свойство background-color

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

Я не знаю, обращали ли Вы внимание, но на некоторых сайтах (хотя редко), при перемещении вниз по странице, фон остаётся неподвижен. Для достижения такого эффекта используют свойство CSS для фона — background-attachment. Свойство имеет два основных значения:

  • fixed – фиксирует фон на месте, т. е. делает последний неподвижным.
  • scroll – при таком значении фон перемещается вместе с содержимым.

Думаю, с этим свойством всё предельно ясно и без примера. Оставшиеся CSS свойства цвета и фона рассмотрим в следующий раз.

Поделиться в соц. сетях

Опубликовать в Google Buzz
Опубликовать в Google Plus
Опубликовать в LiveJournal
Опубликовать в Мой Мир
Опубликовать в Одноклассники

Реклама

Оставить комментарий

Перед отправкой формы:
Human test by Not Captcha