Само за сложно или научете CSS3. Част 3. Начини за задаване на цветове в CSS. Задайте прозрачност на елемент в HTML документ

Здравейте, скъпи читатели на сайта remontcompa.ru! Казвам се Роман Нахват и ви представям третата част от поредица статии на езика на CSS стила. В първата и втората част разгледахме начините за добавяне на стилове към уеб страница, проучихме концепцията за CSS селектора и техните типове. Започвайки с тази част, ще започнем да изучаваме свойствата на езика на CSS, които се прилагат към различни елементи на HTML страница: текст, таблици, списъци, формуляри и т.н. По-конкретно, в тази статия ще разгледаме начините за задаване на цвета и прозрачността на елементите на уеб страница, използвайки свойствата за цвят, фон и непрозрачност..

Само за сложно или научете CSS3. Част 3. Начини за задаване на цветове в CSS. Задайте прозрачност на елемент в HTML документ

Създайте следната структура на HTML документ, както е показано по-долу.

Запишете този документ като color.html на флаш устройство в папката CSS

Също така ще създадем и запишем на флаш устройството в папката CSS файла със стилове color.css

Добавете няколко абзаца към уеб страницата color.html (маркери)

...

с всеки текст (в нашия случай 4 параграфа)

Получаваме следния вид уеб страница

За всеки параграф напишете името на класа (class1, class2, class3 и class4), както е показано по-долу

Цветното свойство CSS ви позволява да укажете цвета на текста вътре в елемент в HTML документ. След свойството цвят се посочва неговата стойност, която може да бъде написана по различни начини

Можете да зададете всеки цвят в CSS по следните начини: Използване на английски имена на цветове. Чрез шестнадесетичен код, който определя количеството червено, синьо и зелено. Този код се изписва след знака # RGB стойност, който изразява цвета в пропорциите на червено, синьо и зелено според модела RGB. RGBA стойността все още е същата RGB стойност, към която се добавя четвъртият параметър, така нареченият алфа канал, който приема стойност от 0,0 (прозрачност) до 1,0 (непрозрачност) и ви позволява да определите степента на непрозрачност на елемента. Стойността на HSL, която беше добавена в CSS3 като алтернативен начин за определяне на цвят. Тази стойност започва с буквите hsl, последвани от параметри в скоби, които изразяват оттенъка, наситеността и лекотата на цвета. Стойността на HSLA е същата HSL стойност, към която, както в случая на RGBA стойността, така нареченият алфа канал се добавя като четвърти параметър, като стойностите са в границите от 0,0 до 1,0

На сайта https://colorscheme.ru/ имена, шестнадесетични кодове, RGB стойности на HTML цветове са представени в удобна форма

Също на сайта https://colorscheme.ru/ е представен универсален цветен конвертор, който ще използваме в бъдеще. Този конвертор ви позволява да конвертирате цвят от един цветен модел в друг, например от RGB в HSL, да конвертирате шестнадесетичен цветен код в RGB стойност и т.н..

Задайте текста на синьо за първия параграф (към този параграф сме присвоили клас, наречен class1)

В файла със стил color.css, след свойството на цвета, посочете името като цвят (синьо)

Както можете да видите, текстът на първия параграф е променил цвета си в син (син)

Променете цвета на текста на втория параграф (клас 2) на darkorchid

Като стойност за свойството за цвят напишете цвета на darkorchid като шестнадесетичен код, а именно # 9932cc

Както можете да видите, цветът на текста на втория параграф се е променил в darkorchid (# 9932cc)

Променете цвета на текста на третия параграф (клас 3) на цветната фуксия (магента), като го посочите като RGB стойност след свойството цвят. Ще забележите, че цветовете фуксия и магента са по същество еднакви и имат еднакви шестнадесетични кодове (# ff00ff) и RGB стойности (255,0255)

Пишем след свойството RGB на цвета стойността на цвета на фуксия (магента), както следва: color: rgb (255,0255)

Цветът на текста на третия параграф е променен на фуксия (магента)

Променете цвета на текста на четвъртия параграф (клас4), използвайки стойността HSL. Както бе споменато по-горе, HSL стойността се определя от три параметъра: оттенък, насищане и лекота

Ние разглеждаме всеки от тези параметри поотделно. За да посочите нюанса, трябва да посочите ъгъла на завъртане (от 0 ° до 360 °) на цветното колело, както е показано на фигурата по-долу. Например, зеленото съответства на ъгъл на въртене от 120 °, а синьото - на ъгъл на въртене от 270 °

Параметърът на насищане определя насищането на избрания оттенък. Наситеността в цветовия модел HSL е посочена като процент в диапазона от 0% до 100%. Колкото по-близо е стойността на този параметър до 100%, цветът изглежда по-чист и ако наситеността има тенденция към 0%, тогава цветът става избледнял. Параметърът за лекота определя яркостта на цвета и подобно на параметъра за насищане се определя като процент в диапазона от 0% до 100%. Колкото по-висока е стойността на този параметър, толкова по-ярък става цветът. Променете цвета на текста на четвъртия абзац на lawngreen

Тъй като искаме да определим HSL стойността като стойност за свойството цвят, трябва да преобразуваме цвета на законния екран (# 7CFC00 или 124.252.0) в цветен модел HSL. За целта използвайте онлайн конвертора на цветове на адрес https://colorscheme.ru/color-converter.html. Например, в линията на цветовия модел посочете стойността на цвета на законния екран, например RGB, а именно 124.252.0, и малко по-ниско можем да видим резултата от преобразуването в HSL (hsl (90,100%, 49%))

След свойството за цвят посочете стойността на hsl (90,100%, 49%)

Както можете да видите, цветът на текста на четвъртия параграф се е променил в lawngreen

Разгледайте друго свойство CSS като цвят на фона. Свойството color-color задава цвета на фона на елемента в HTML документа. Можете да зададете стойността за свойството за цвят на фона по същите начини, които сме разгледали за уточняване на цвета на текста: използвайки английски имена на цветове, шестнадесетичен цветен код, RGB стойност и HSL стойност Променете цвета на фона за четири абзаца, използвайки свойството за цвят на фона по различни начини за определяне на цвят , За първия параграф задайте цвета на фона, използвайки английското име на цвят, например darkgray. В листа със стилове напишете цвят на фона: darkgray

Цветът на фона на първия параграф се е променил в darkgray

Променете цвета на текста на втория параграф на аква (циан)

Задайте шестнадесетичен цветен код aqua (cyan) като стойност за свойството цвят на фона

Получаваме следното

За третия параграф задайте цвета на фона на greenyellow, използвайки RGB стойността (173 255,47)

Във файла със стилове color.css посочете цвят на фона: rgb (173,255,47)

Задайте четвъртия параграф на черния цвят на фона, като използвате стойността hsl

Във файла със стилове color.css ние определяме свойството цвят на фона със стойността hsl (0,0%, 0%)

В резултат на това получаваме следното

В CSS3 има няколко начина за задаване на прозрачността на елементите в HTML документ:

Свойството непрозрачност, което ви позволява да определите степента на прозрачност на даден елемент и на някое от неговите деца. Свойството непрозрачност приема стойности в диапазона от 0,0 (напълно прозрачен) до 1,0 (непрозрачен), използвайки цветен модел RGBA, който ви позволява да зададете цвета по същия начин като RGB. За разлика от RGB, RGBA има четвърти параметър, така наречения алфа канал, който ви позволява да определите степента на прозрачност на елемента. Този параметър приема стойности в диапазона от 0,0 до 1,0. Цветовият модел HSLA, който позволява изразяване на цвят по отношение на оттенък, наситеност и лекота и по същия начин като цветовия модел RGBA, добавя стойност на прозрачността като четвърти параметър, така наречения алфа канал. Този параметър, както в случая с RGBA, може да приеме стойности от 0,0 до 1,0. Във файла color.css изтрийте всички свойства на цвета на фона

След свойството на непрозрачност се посочва неговата стойност, която може да бъде в диапазона от 0,0 до 1,0. Колкото по-близо е стойността на това свойство до 1, толкова по-голяма е непрозрачността на елемента

Задайте следните стойности за свойството на непрозрачност във всеки абзац: За първия параграф (присвоен клас със името class1) посочете числото 0,2 като стойност за свойството на непрозрачност. За втория параграф (присвоен клас с името class2) посочете стойността 0,3 за свойството на непрозрачност. За третия параграф (присвоен клас с името class3) като стойност за свойството на непрозрачност, посочете числото 0.4.За четвъртия параграф (назначен клас с име class4) като стойност за свойството на непрозрачност, посочете числото 1.0

В резултат виждаме, че текстът на първите три абзаца (към които се прилага свойството на непрозрачност със стойности съответно 0,2, 0,3 и 0,4) е по-прозрачен от текста на четвъртия параграф (свойство на непрозрачност със стойност 1,0)

Премахнете свойствата за цвят и непрозрачност от файла color.css и задайте прозрачността за текста на абзаца, като използвате функцията hsla

Във функцията hsla прозрачността се задава, както беше споменато по-горе, като се използва параметър, наречен алфа канал (алфа), който приема стойности от 0,0 до 1,0.

Във файла color.css за всеки параграф пишем стойностите на функцията hsla:

В резултат на това получаваме същия резултат като използването на свойството непрозрачност.

Задайте прозрачността на текста в параграфи, използвайки функцията rgba, където четвъртият параметър (алфа) е отговорен за нивото на прозрачност и приема стойности от 0,0 до 1,0

Получаваме същия резултат като в случая на hsla функцията и свойството на непрозрачност

Продължение в статията: Само за сложно или научете CSS3. Част 4. 1. Шрифтове в HTML документ. Свойства на шрифтовете и @ шрифтово лице