BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

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

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

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

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

Цвет фона.

background-color

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

background-color: #000000;

Пример:


<html>
<head>
<title>Цвет фона</title>
<style type="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); /* Цвет текста желтый */
}

*** Практика***:idea:

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

Пример:

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

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: , ,

Мои цели на 2016 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 600

4). Добиться стабильной посещаемости 2500 человек/сутки

5). Закончить все статьи, которые находятся в черновиках

6). Создать портфолио и мини интернет-магазин шаблонов

7). Создать книгу

8). Добиться стабильной посещаемости 3000 человек/сутки

9). Довести количество статей до 700

10). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 669
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 3663