2.1 - Использование цвета в CSS

Цвет - это основа дизайна. От цвета, от сочетания цветов зависит восприятие объекта, элемента и конечно же восприятие сайта, его внешний вид.

В CSS цвет можно применять к чему угодно - текст, рамка, фон и так далее. Но способы немного отличаются.

Что бы изменить цвет текста нужно указать свойство color со значением нужного цвета.

Пример изменение цвета текста

<html>  <head>   <title>Меняем цвет текста</title>   <style>    p{color:blue;}   </style>  </head>  <body>   <p>Цвет этого текста синий</p>  </body> </html>

Результат

Изменение цвета текста в CSS

Причем любой текст заключенный между тегами <p></p> будет того цвета какого вы указали. Со свойством color можно указывать не только к определенным объектам, а сразу ко всем через тег <body>

Пример

<html>  <head>   <title>Меняем цвет текста</title>   <style>    body{color:red}   </style>  </head>  <body>   <p>Цвет этого текста красный</p>   <ul>    <li>Пункт списка</li>    <li>Еще пункт списка</li>    <li>И еще пункт списка</li>   </ul>   Список вверху тоже красного цвета<br />   Просто текст расположенный непосредственно    внутри тега <body><br />   А это <a href=#>ссылка</a>,    но цвет у ссылки другой.  </body> </html>

Использование цвета в CSS

Как видно из примера, весь текст изменил свой цвет. Весь кроме ссылки. Для ссылок, вернее для тега ссылки <a> нужно указывать свойство color отдельно:

a{color:red}

Установка цвета для фона

Для установки цвета на фон объекта используется свойство background-color со значением.

Пример установки цвета фона

<html>  <head>   <title>Меняем цвет фона</title>   <style>    body{background-color:silver;}   </style>  </head>  <body>   <p>У этой страницы серый фон</p>  </body> </html>

Результат

Изменение цвета фона в CSS

Исходя из примеров видно, что для любого текста (заголовки, ссылки, списки) используется свойство color, а для фона свойство background-color

Способы задания значения цвета

Существует несколько вариантов указать цвет, а именно:
- Используя название цвета - red, green, gray (в примерах выше использовался именно такой способ)
- Используя шестнадцатеричное значение цвета - #0066ff или сокращенная форма #06f.

Пример: использование шестнадцатеричной системы

<html>  <head>   <title>Меняем цвет текста</title>   <style>    p{color:#0000ff;}   </style>  </head>  <body>   <p>Цвет этого текста синий,    как и в первом примере, только задан    в шестнадцатеричной системе</p>  </body> </html>

Результат

Использование шестнадцатеричной системы для цвета

- Используя RGB - rgb(0, 0, 255). Принимаемые значения: числа от 0 до 255 или в процентах от 0% до 100%.

Пример использования RGB

<html>  <head>   <title>Меняем цвет текста</title>   <style>    body{background-color:rgb(192,192,192);}    p{color:rgb(255,255,255)}   </style>  </head>  <body>   <p>Фон этой страницы серого цвета, а текст белого.     Но заданы свойства с использованием RGB</p>  </body> </html>

Результат

Использование RGB для цвета в CSS

В этом уроке указано всего три варианта установки цвета: названием, шестнадцатеричной системой и RGB. Кроме этого есть еще несколько вариантов задать цвет.

Общепринято, или правильней сказать - чаще используется именно шестнадцатеричная система для установки цвета - #ffffff.

Список уроков