Коды цвета в css


Код цвета в HTML и CSS

От автора: всем привет. Сегодня я бы хотел поговорить о цвете в веб-разработке, а именно о том, как формируются коды цветов в html и css. Ну и вообще о способах задания цвета.

Нет такого сайта, где при верстке вам не пришлось бы указывать цвет. Вот даже у букв, которые я сейчас набираю, черный цвет, а читаете вы их на белом фоне. Способов задания цвета в html очень много, я как раз предлагаю их кратко рассмотреть.

Задание цвета с помощью ключевых слов

Например, color: red. И даже те из вас, кто спал в школе на уроках английского, понимают, что мы задали красный цвет. Но таких вот ключевых слов в html не сильно много, чуть более сотни. То есть с их помощью вы не сможете задать миллион разных оттенков, да и запомнить все названия очень трудно. Я могу лишь порекомендовать держать в уме самые основные значения, остальное лучше задавать не с помощью ключевых слов, а по-другому.


С помощью шестнадцатеричного кода

Звучит, может быть, страшно, но на деле ничего сложного. Цвет в таком формате записывается через решетку, далее записывается 3 или 6 символов, которые и определяют оттенок. Чтобы брать значения, я рекомендую вам использовать сайт https://color.hailpixel.com

А также палитру программы Adobe Photoshop, где также отображается шестнадцатеричный код или как его еще называют – hex-код.

В фотошопе вы можете в палитре установить галочку “Только web-цвета”. В этом случае в палитре вам будут предложены только так называемые безопасные цвета, которые поддерживаются всеми браузерами. Но я вам могу сказать, что необходимость в этом потихоньку отходит в прошлое, так как современные браузеры могут без проблем распознавать миллионы оттенков.

В форматах rgb и rgba

Эти способы используются уже реже, потому что обычно хватает варианта с hex-кодом. Объяснить суть записи цвета в формате rgb очень просто. Есть красный, зеленый и синий цвета. Они являются основными. Вот на основании их смешивания мы и получаем нужный нам цвет. Для этого нужно в скобках указать первым значение насыщенности красным цветом от 0 до 255, далее через запятую проделать то же самое с зеленым и синим. Например, так:

Как вы понимаете, это позволяет задавать миллионы разных оттенков, которые будут отличаться совсем незначительно. Значение (0, 0, 0) приравнивается к черному цвету, а (255, 255, 255) – белому. Здесь действует правило, что если смешать все цвета в их максимальной насыщенности, то получится белый цвет.


Формат rgba отличается лишь тем, что добавляется четвертое значение – альфа канал. Допустимо использовать значения от 0 до 1, значения с десятичной дробью, естественно, допускаются. Это позволяет задать полупрозрачный цвет. Например, если написать так:

То наш цвет будет уже не абсолютно черным, а более светлым, а также через него будет видно содержимое заднего слоя, если оно есть.

В форматах hsl и hsla

Это последние форматы, которые мы рассмотрим. В веб-разработке они используются еще реже. Расшифровывается hsl так: цвет, насыщенность, светлота. Первое значение задается числом от 0 до 360, а второе и третье в процентах.

Более понятно это объяснение будет для тех, кто работал с цветом более глубоко. В любом случае, чтобы понимать, как в этом формате формируется цвет, необходимо понимать принцип цветового круга, потому что именно на его основании задается цвет.

Собственно, hsla добавляет только тот самый альфа-канал. То есть это еще один формат, в котором вы можете получить полупрозрачный цвет. Кому-то удобнее будет использовать rgb, кому-то hsl.

Остальные форматы записи цвета мы рассматривать не будем, потому что этих с головой хватает в веб-разработке.

Коды цвета в css

webformyself.com

В html формате


Очень часто требуется поменять цвет текста на сайте, мало кто из начинающих к этому прибегает, так как для этого нужно знать html и css. Но, если вы знаете эти основы web-строительства, то вы без труда с этой задачей справитесь и в помощь ниже вам будет дана таблица. Обычно начинающие меняют цвет текста маленькими абзацами, например, через встроенные редакторы статей. Но, у меня, к примеру, часто возникает задача поменять цвет текста на всем сайте и, поэтому коды цветов в html формате — для меня необходимы — «как воздух».

Меняем цвет текста на сайте

1) html код необходимого вам цвета вставляем в специальный файл css, обычно он называется style.css — вот такие примерно строки появятся в нем:

color:#FFF;

Это был пример: мы вставили корректировку, а именно назначили цвет текста белым: color:#FFF — это и есть код белого цвета в html. Не пугайтесь #FFF — это сокращенная форма, это тоже самое, что и #FFFFFF. Для экономии времени часто пользуются сокращенным кодом белого цвета в html.

Примерно может выглядеть так изменение цвета текста тела сайта — тег body:

body {color:#FFF;}

На закрытых движках типа ucoz — это делается по-другому, хотя там этот css-файл выведен отдельной ссылкой(об этом напишу позже).

2) Если вам нужно поменять цвет текста в отдельном абзаце, то встраивается такая конструкция (но она не приветствуется профессионалами, но на это мало кто смотрит и не смотрят поисковики типа Яндекса и Google, Mail, Rambler — то есть основным ПС это безразлично, потому что это «не ошибка»)

А вставляется такая конструкция:


style="color:#FFF;"

То есть применительно к абзацу, а это тег p, конструкция будет иметь следующий вид:

<p style="color:#FFF;">

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

3) Если вам нужно изменить цвет ссылки html — конструкция приобретает следующий вид:

<a style="color:#FFF;" href="http://saitsozdanie.ru/">тут текст ссылки</a>

Если вы еще не знаете, что такое тег a — то мы уже об этом писали тут — «как вставить ссылку на сайт». Вообще изменение цвета ссылки через html код страницы редко делают, во-первых это муторно, а во-вторых также считается, если не дурным тоном, то что-то типа того.

 

 

Таблица цветов html

Ниже приведена таблица цветов html, только также не забывайте вставить знак решетки перед кодом:


 

Сервис от Яндекса

Яндекс также предоставляет онлайн-сервис по html-цветам, иногда тоже помогает, но им все же реже пользуюсь. Вот можете потыкать и html цвета онлайн яндекс.

Упрощенная форма html цвет на английском

Если вы знаете хоть немного знаете английский язык то вам еще проще будет освоить упрощенную форму записи популярных цветов в html на английском. К, примеру: brown — коричневый, green — зеленый, blue — синий, red — красный, white — белый, grey — серый, black — черный и тд. Вот как это будет выглядеть:

<p style="color:white;">

То есть, все то же самое, просто заменяем код на слова.

Пока на этом все, я надеюсь вам была полезна статья, следите за новостями http://saitsozdanie.ru.

Я тоже когда-то начинал с азов, а вот как я начинал свое обучение основам html.

saitsozdanie.ru


You May Also Like

About the Author: admind

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.