Главная » Все про CSS » Свойства цвета в CSS

Свойства цвета в CSS

2013-02-16 / Вр:00:40 / просмотров: 8037

Таблица стилей CSS дает возможность управлять цветом теста, ссылок и фона веб-страницы в целом. Эта возможность ускоряет и упрощает работу с подбором цвета на сайте. CSS дает массу новых возможностей по работе с цветами на сайте.
В этой статье я хочу рассмотреть такие возможности в CSS как:
цвет фона, цвет текста, цвет ссылки, коды цветов, цвет рамки.

Цвет фона.

background-color

Есть отличная возможность в CSS создать фон для сайта с помощью правила background-color.

background-color: #000000;

Пример:


<html>
<head>
<title>Цвет фона</title>
<style ENGINE="text/css">
body
{
background-color: #сс0000;
}
</style>
</head>
<body>
<p>Текст на сайте.</p>
</body>
</html>

Результат:

Фон сайта будет красного цвета.

Цвет текста.

color

В CSS вы можете задавать цвет каждому элементу отдельно, например, цвет текста для всего сайта <p> красным, цвет заголовка <h1> серым, <h2> синим, <h3> зеленым.

color: #000000;

Пример:

<html>
<head>
<title>Цвет в CSS</title>
<style type="text/css">
H1 {color: #cccccc; /* серый цвет */}
H2 {color: #0000ff; /* синий цвет */}
H3 {color: #00ff00; /* зеленый цвет */}
p {color: #сс0000; /* красный цвет */}
</style>
</head>
<body>
<H1>Заголовок-1</H1>
<H2>Заголовок-2</H2>
<H3>Заголовок-3</H3>
<p>Текст на сайте</p>
</body>
</html>

Результат:

Цвет текста

Цвет в CSS можно задавать тремя способами.

[1-способ. ] По названию цвета.

p
{
color: yellow;  /* Цвет текста желтый */
}

[2-способ. ] По шестнадцатеричному значению.

p
{
color: cc0000;  /* Цвет текста красный */
}

[3-способ. ] С помощью RGB.

p
{
color: RGB(249, 231, 16); /* Цвет текста желтый */
}

*** Практика***

Давайте теперь для закрепления темы объединим "цвет фона" и "цвет текста" в одном файле.

Пример:

<html>
<head>
<title>Цвет в CSS</title>
<style type="text/css">
body {
background-color: #cccccc;  /* Цвет фона серый */
}
p {
color: RGB(249, 231, 16);  /* Цвет текста желтый */
background-color: RGB(85%, 24%, 5%);  /* Цвет фона в тексте красный */
}
</style>
</head>
<body>
<p>Текст на сайте</p>
</body>
</html>

Результат:

Цвет текста

Цвет рамки css.

border-color

Как задать цвет рамки? Сейчас мы с вами это выясним.
Чтобы задать цвет рамки, достаточно прописать правило border-color.

border-color: red; /* Цвет границы */

или

border-color: #cc0000; /* Цвет границы */

или

border: 1px solid #cc0000; /* Цвет границы */

Пример:

<html>
<head>
<title>Цвет в CSS</title>
<style type="text/css">
p
{
border-color: red; /* Цвет границы */
border-style: solid; /* Стиль границы */
}
</style>
</head>
<body>
<p>Текст на сайте</p>
</body>
</html>

Результат:

Цвет рамки css

Цвет ссылки css.

Теперь пришло время поговорить о том, как задать цвет ссылки через CSS.

A { color: red; /* Цвет ссылок */ }

Значения:

visited — Стиль для посещенной ссылки.

active — Стиль для нажатой ссылки.

hover — Стиль ссылки при наведении на нее курсора.

Пример:


<html>
<head>
<title>Цвет ссылок в CSS</title>
<style type="text/css">
A {
color: red; /* Цвет ссылок */
}
A:visited {
color: #cecece; /* Цвет посещенных ссылок */
}
A:active {
color: #000000; /* Цвет активных ссылок */
}
A:hover {
color: #ffff00; /* Цвет ссылок при наведении курсора */
}
</style>
</head>
<body>
<p><a href="1.html">Ссылка сайта</a></p>
</body>
</html>

Результат:

Цвет ссылок будет красного цвета.
Цвет посещенных ссылок будет серого цвета.
Цвет активных ссылок будет черного цвета.
Цвет ссылок при наведении курсора будет желтого цвета.

Коды цветов css.

Стандартные цвета:

	#000000
	#FF0000
	#00FF00
	#0000FF
	#FFFF00
	#00FFFF
	#CCCCCC
	#FF00FF
	#FFFFFF
	#663333

Читайте полную информацию "коды цветов в CSS - / R G B / HTML"

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

Вот и все, что я хотел рассказать по теме "Свойства цвета в CSS".
Если вы интересуетесь CSS, HTML и вообще созданием сайта, рекомендую подписаться на обновление моего блога, чтобы быть всегда в курсе новых тем. Форма подписки сразу после кнопок социальных сетей.