Как использовать цвета.

CSS позволяет использовать почти 16.777.216 цветов. Они могут быть представлены либо именем, либо функциональным значением rgb (red/green/blue), либо шестнадцатеричным кодом. Пример использования цвета:

// разные написания красного цвета:

red

rgb(255,0,0)

rgb(100%,0%,0%)

#ff0000

#f00

Существует 17 предопределенных имен цветов. Это aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white и yellow. Плюс еще один – transparent.

Значения для функциональной записи (rgb), должны быть числом в диапазоне 0-255. Это число представляет уровень конкретного составного цвета (всего составных цветов три – красный, зеленый, синий) – 255 максимальный и 0 минимальный. Также уровень этих цветов можно определять в процентах.

Шестнадцатеричный код основывается на шестнадцатеричной системе исчисления, в которой кроме цифр от 0 до 9 также используются латинские буквы от A до F. Перед шестнадцатеричным кодом ставится символ решетки (#), и он может состоять либо из трех, либо из шести цифр.

Есть много сайтов где можно найти таблицы всех CSS цветов и их коды. Вот один из них “comhub.ru

Цвет текста

Цвет текста определяется свойством color. Синтаксис свойства:

color: цвет | initial | inherit;
  • цвет – устанавливает цвет фона;
  • initial – значение наследуется от родительского элемента;
  • inherit – устанавливает значение по умолчанию.

Пример, сделаем цвет текста красным:

p {
 color: red;
}

Цвет фона

Цвет фона определяется свойством background-color. Синтаксис свойства:

background-color: цвет | transparent | initial | inherit;
  • цвет – устанавливает цвет фона;
  • transparent – значение по умолчанию. устанавливает, что фон должен быть прозрачным;
  • initial – устанавливает значение по умолчанию;
  • inherit – значение наследуется от родительского элемента.

Пример, установим цвет фона различным элементам:

body { // тег html (означает тело страницы)
   background-color: yellow;
}
h1 {
   background-color: #00ff00;
}

p {
   background-color: rgb(255,0,255);
}

 
Поделиться в facebook
Facebook
Поделиться в twitter
Twitter
Поделиться в vk
VK
Поделиться в google
Google+
Поделиться в email
Email

2 ответа к “Как использовать цвета.”

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Группа в VK

Помощь проекту

Обнаружили опечатку?

Сообщите нам об этом, выделите текст с ошибкой и нажмите Ctrl+Enter, будем очень признательны!

Свежие статьи

Похожие статьи

CSS flexbox

CSS flexbox

CSS flexbox (Flexible Box Layout Module) — модуль макета гибкого контейнера — представляет собой способ компоновки элементов, в основе лежит идея оси. Flexbox состоит из

 
Препроцессор Sass

Препроцессор Sass

Sass — это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS-кода и упрощения файлов каскадных таблиц стилей. Язык Sass имеет два синтаксиса: sass

 
Программируемый язык стилей LESS

Программируемый язык стилей LESS

LESS (Leaner Style Sheets, компактная таблица стилей) — это динамический язык стилей, который разработал Alexis Sellier. Он создан под влиянием языка стилей Sass, и, в

 
CSS-фреймворки

CSS-фреймворки

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

 

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: