RGB кодът за червения цвят се записва като. Как да промените цвета на HTML и CSS текста. Бял текст на син фон

Задайте шрифта, размера и цвета на текста

Задайте шрифта, размера и цвета на текста

В HTML цветът може да бъде определен по три начина:

Задаване на цвят в HTML по неговото име

Някои цветове могат да бъдат посочени чрез името им, като се използва името на цвета на английски като стойност. Най-често срещаните ключови думи: черно, бяло, червено, зелено, синьо и др.:

Цвят на текста – червен

Най-популярните цветове на стандарта на World Wide Web Consortium (W3C):

Пример за използване на различни имена на цветове:

Пример: посочване на цвят чрез неговото име

• Опитайте сами"

Заглавие на червен фон

Заглавка на оранжев фон

Заглавие на лайм фон

Бял текст на син фон

Заглавие на червен фон

Заглавка на оранжев фон

Заглавие на лайм фон

Бял текст на син фон

Задаване на цвят чрез RGB

При изобразяване на различни цветове на монитор, RGB палитрата се използва като основа. Всеки цвят се получава чрез смесване на три основни: R - червено, G - зелено, B - синьо. Яркостта на всеки цвят се дава от един байт и следователно може да приема стойности от 0 до 255. Например RGB(255,0,0) се показва като червено, тъй като червеното е зададено на най-високата си стойност (255) и останалите са зададени на 0 Можете също да зададете цвета като процент. Всеки параметър показва нивото на яркост на съответния цвят. Например: стойностите rgb(127, 255, 127) и rgb(50%, 100%, 50%) ще зададат същия среден зелен цвят:

Пример: Определяне на цвят чрез RGB

• Опитайте сами"

rgb(127, 255, 127)

rgb (50%, 100%, 50%)

rgb(127, 255, 127)

rgb (50%, 100%, 50%)

Задайте цвят по шестнадесетична стойност

Стойности Р Ж Бможе също да се посочи с помощта на шестнадесетични (HEX) цветови стойности във формата: #RRGGBB където RR (червено), GG (зелено) и BB (синьо) са шестнадесетични стойности от 00 до FF (същите като десетични 0-255 ) . Шестнадесетичната система, за разлика от десетичната, се основава, както подсказва името й, на числото 16. Шестнадесетичната система използва следните знаци: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Тук числата от 10 до 15 са заменени с латински букви. Числата, по-големи от 15 в шестнадесетичната система, се представят чрез комбиниране на два знака в една стойност. Например най-високото число 255 в десетична система съответства на най-високата стойност на FF в шестнадесетична система. За разлика от десетичната система, шестнадесетичното число се предхожда от символ хеш. # , например #FF0000 се показва като червено, защото червеното е зададено на най-високата си стойност (FF), а останалите цветове са зададени на минималната си стойност (00). Знаци след символа хеш # Можете да пишете както с главни, така и с малки букви. Шестнадесетичната система ви позволява да използвате съкратената форма #rgb, където всеки знак е еквивалентен на двойно. Следователно записът #f7O трябва да се разглежда като #ff7700.

Пример: HEX цвят

• Опитайте сами"

червено: #FF0000

зелено: #00FF00

синьо: #0000FF

червено: #FF0000

зелено: #00FF00

синьо: #0000FF

червено+зелено=жълто: #FFFF00

червено+синьо=лилаво: #FF00FF

зелено+синьо=циан: #00FFFF

Списък с общи цветове (име, HEX и RGB):

Цветови кодове (фон) по наситеност и нюанс.

CSS цветовият модул детайлизира стойности, които позволяват на авторите да дефинират цветовете и непрозрачността на html елементите, както и стойностите на свойството цвят.

цветно свойство

1. Приоритетни цветове: свойство цвят

Свойството определя цвета на шрифта с помощта на различни системи за цветопредаване. Свойството описва цвета на текстовото съдържание на елемента. Освен това се използва за предоставяне на потенциална непряка стойност (currentColor) за всички други свойства, които приемат цветови стойности.

Имотът е наследен.

2. Цветови стойности

2.1. Основни ключови думи

Списъкът с основни ключови думи включва следните значения:

Имената на цветовете не са чувствителни към главни и малки букви.

Синтаксис

Цвят: синьо;

2.2. Числени стойности на цвета

2.2.1. RGB цветове на модела

Шестнадесетичният формат на RGB стойност е знак #, последван непосредствено от три или шест шестнадесетични знака. Трицифрената RGB нотация #rgb се преобразува в шестцифрената форма #rrggbb чрез копиране на цифрите вместо добавяне на нули. Например #fb0 се разширява до #ffbb00. Това гарантира, че бялото #ffffff може да бъде указано в краткия запис #fff и премахва всякакви зависимости от дълбочината на цвета на дисплея.

Форматът на RGB стойност във функционална нотация е rgb (последван от разделен със запетая списък от три числови стойности (или три цели числа, или три процентни стойности), последвани от символ). Целочислената стойност 255 съответства на 100% и F или FF в шестнадесетичен запис:

Rgb(255,255,255) = rgb(100%, 100%, 100%) = #FFF

Разрешени са знаци за интервал около числовите стойности.

В първата част на книгата вече демонстрирахме в някои примери как да зададем цвета на текста в CSS. Тук няма нищо сложно: ще ви трябва свойството цвят и стойността на цвета, с който искате да оцветите текста.

P ( цвят: #211C18; )

В нашия пример стойността #211C18 представлява шестнадесетичния код на цвета. Ако вече сте запознати с шестнадесетичната бройна система, можете да пропуснете четенето на следващия параграф. Освен това ще говорим по-нататък за други начини за представяне на цветове в мрежата - използване на цветови модели (RGB, HSL) и ключови думи. Тази информация ще бъде полезна за начинаещи и се препоръчва за четене.

Шестнадесетични цветове (hex)

Шестнадесетична бройна система ( шестнадесетичен, шестнадесетичен) се базира на числото 16. За запис на шестнадесетична стойност се използват 16 знака: арабски цифри от 0 до 9 и първите букви от латинската азбука (A, B, C, D, E, F). Цветът в шестнадесетичен формат се записва като три двуцифрени числа от 00 до FF (те трябва да бъдат предшествани от символ #), което съответства на три компонента: червено, зелено, синьо (цветов модел RGB). С други думи, цветният запис може да бъде представен като #RRGGBB, където първата двойка знаци определя червеното ниво, втората - зеленото ниво, а третата - синьото ниво. Полученият цвят е комбинация от тези три цвята.

Стенопис за шестнадесетични цветове

Някои шестнадесетични стойности на цвета могат да бъдат записани със съкращения. За да направите това, завъртете запис като #RRGGBB в #RGB. Това може да се направи, когато шестнадесетичното число съдържа три двойки еднакви символи.

Съкратената форма на нотация е доста често срещана и за ваша справка ще предоставим няколко примера за съкращения. Между другото, стойностите на шестнадесетичния цвят не са чувствителни към главни и малки букви - можете да използвате както главни, така и малки букви, всичко зависи от вашето желание и вкус.

Примери за съкратено означение за шестнадесетични цветове:

RGB цветен модел

Вторият начин за указване на цветове в CSS е да използвате десетични RGB стойности (червено, синьо, зелено). За да направите това, трябва да напишете ключовата дума rgb след свойството цвят, а след това в скоби и разделени със запетаи - три числа в диапазона от 0 до 255, всяко от които означава интензитета на червения, зеления и синия цвят (r , g, b). Колкото по-голямо е числото, толкова по-интензивен е цветът. Например, за да получите ярко зелен цвят, трябва да напишете:

P (цвят: rgb(0, 255, 0); )

Но жълтеникаво-горчичният оттенък има следното значение:

Цвят: rgb(94, 81, 3); /* по-долу е същият цвят, написан в шестнадесетичен: */ цвят: #5E5103;

Стойността за черно се записва като (0, 0, 0), а за бяло като (255, 255, 255). Възможно е също да посочите тези стойности като проценти. И така, числото 255 съответства на 100%, следователно белият цвят може да бъде зададен, както следва:

Цвят: rgb(100%, 100%, 100%);

Къде да търсим цветовите значения

Може би имате въпрос: откъде получавате всички тези цветови значения? Има много графични редактори и онлайн услуги, с които можете да избирате цветове и да изграждате цветови схеми. Една от най-популярните програми, в която можете да изберете подходящ цвят и да получите неговите RGB, шестнадесетични стойности и други, е Adobe Photoshop. Като алтернатива има специални сайтове, където можете лесно да изберете не само цвят, но и цяла цветова схема. Чудесен пример е услугата Adobe Color CC.

Цветов модел RGBA

Можете да зададете цвят във формат RGBA почти по същия начин, както в RGB. Разликата между RGBA и RGB е наличието на алфа канал, който отговаря за прозрачността на цвета. Прозрачността се задава с помощта на число в диапазона от 0 до 1, където 0 е напълно прозрачен, а 1 е напълно непрозрачен. Междинни стойности като 0,5 ви позволяват да зададете полупрозрачен външен вид (разрешено е стенографско обозначение, без нула, но с точка – .5). Например, за да направите текста оцветен и леко прозрачен, трябва да напишете ключовата дума rgba и стойността на цвета след свойството цвят:

P (цвят: rgba(94, 81, 3, .9); )

Недостатъкът на RGBA е, че не се поддържа от Internet Explorer версия 8 и по-стари. Специално за IE8 можете да приложите следното решение:

P (цвят: rgb(94, 81, 3); цвят: rgba(94, 81, 3, .9); )

Първото свойство в примера е предназначено за браузъра IE8, който ще показва текста в желания цвят, но без прозрачност. И онези браузъри, които разбират RGBA, ще приложат второто свойство към елемента с прозрачност.

HSL (HSLA) цветови модели

Можете също да зададете цвят в CSS, като използвате координатите на цветовия модел HSL (Hue, Saturation, Lightness). Написано е така:

P (цвят: hsl(165, 100%, 50%); )

Първото число в скоби означава оттенък и е дадено в градуси (числов диапазон от 0 до 359). Ще бъде лесно да разберете защо се използват градуси, ако си спомните как изглежда цветното колело:

Второто и третото число в скоби означават съответно наситеност и лекота. Техните стойности са зададени в проценти от 0 до 100. Колкото по-ниска е стойността на насищане, толкова по-заглушен става цветът. Стойност на наситеност нула ще доведе до сив цвят, независимо каква е стойността на нюанса. Стойността на светлота ви позволява да определите яркостта на цвета. Ниските стойности водят до тъмни нюанси на цвета, високите стойности водят до светли нюанси. Стойност от 100% за светлота означава бяло, 0% означава черно.

Цветовият модел HSLA работи почти по същия начин като HSL, но подобно на RGBA има алфа канал, с който можете да зададете прозрачността на цвета, като посочите желаната стойност в диапазона от 0 до 1:

P (цвят: hsla(165, 100%, 50%, .6); )

HSL и HSLA се поддържат от всички браузъри с изключение на Internet Explorer версия 8 и по-стари.

Стандартни HTML цветове

Друг начин за представяне на цветове в мрежата е чрез ключови думи, които могат да се използват за определяне на цвят за елемент. Пример:

P (цвят: черен;)

Има 16 стандартни цвята, които могат да бъдат записани в стойността на свойството цвят:

Тези цветове се поддържат от всички браузъри. В допълнение към тях има около 130 допълнителни ключови думи за различни нюанси на цветовете. Пълна таблица на тези цветове може да се види в справочника на W3C.

Използването на такива ключови думи е приемливо, но съществува риск някоя дума да не бъде приета от браузъра. Затова се препоръчва да запишете шестнадесетичния код на цвета вместо ключови думи.

Резултати

В CSS цветът на текста се задава с помощта на свойството color, а стойността му може да бъде записана по няколко начина – в шестнадесетичен (hex) формат, в RGB или HSL формат или чрез посочване на ключова дума. За да избегнете неправилно показване на цвят, определен с ключова дума, по-добре е да посочите неговата шестнадесетична стойност.

Също така е възможно да се зададе прозрачността на елемента с помощта на алфа канал (RGBA и HSLA формати). Струва си да се има предвид, че браузърът IE8 и неговите по-ранни версии не поддържат формати RGBA, HSL и HSLA.

В тази статия ще се запознаем с възможностите на HTML и CSS за промяна на цвета на текста на страниците на уебсайта. Ще бъдат разгледани няколко варианта. За всеки отделен случай е удобен неговият специфичен метод.

Като начало отбелязваме, че всички цветове могат да бъдат зададени в три формата:

• Име на цвета (червено, синьо, зелено и т.н.)
• Шестнадесетичен формат (#104A00, #0F0 и т.н.)
• rgba формат (rgba(0,0,0,0.5) и т.н.)

Нашият сайт представя пълната палитра и имена на html цветове за сайта, където можете да изберете подходящия цвят.

Метод 1. Чрез html таг