Само о компликованом или научите ЦСС3. Део 3. Начини подешавања боја у ЦСС-у. Подесите транспарентност на елемент у ХТМЛ документу

Поштовани, драги читаоци сајта ремонтцомпа.ру! Моје име је Роман Нахват и представљам вам трећи део серије чланака о језику стила ЦСС. У првом и другом делу погледали смо начине додавања стилова на веб страницу, проучавали концепт ЦСС селектора и њихове типове. Почевши од овог дела почећемо да проучавамо својства ЦСС језика који се примењују на различите елементе ХТМЛ странице: текст, табеле, спискове, обрасце и тако даље. Конкретно, у овом чланку ћемо размотрити начине постављања боје и транспарентности елемената на веб страници помоћу својстава боје, боје позадине и непрозирности..

Само о компликованом или научите ЦСС3. Део 3. Начини подешавања боја у ЦСС-у. Подесите транспарентност на елемент у ХТМЛ документу

Креирајте следећу структуру ХТМЛ документа као што је приказано у наставку.

Сачувајте овај документ као цолор.хтмл на фласх диску у ЦСС фасцикли

Такође ћемо креирати и сачувати на фласх драјву у ЦСС фасцикли датотеку стилова цолор.цсс

Додајте неколико одломака на веб страницу цолор.хтмл (ознаке)

...

са било којим текстом (у нашем случају 4 параграфа)

Добијамо следећу врсту веб странице

За сваки одломак напишите назив класе (цласс1, цласс2, цласс3 и цласс4) као што је приказано у наставку

ЦСС својство боје омогућава вам да одредите боју текста унутар елемента у ХТМЛ документу. Након својства боје, приказује се њена вредност, која се може написати на различите начине

Било коју боју у ЦСС-у можете подесити на следеће начине: Коришћење енглеских имена боја. Кроз хексадецимални код који одређује количину црвене, плаве и зелене боје. Овај се код пише након знака # РГБ, који изражава боју у пропорцијама црвене, плаве и зелене према РГБ моделу. РГБА вредност је и даље иста РГБ вредност, којој се додаје четврти параметар, такозвани алфа канал, који узима вредност од 0,0 (прозирност) до 1,0 (непрозирност) и омогућава вам да одредите степен непрозирности елемента. ХСЛ вредност која је додата у ЦСС3 као алтернативни начин да одредите боју. Ова вредност почиње словима хсл, а затим следе параметри у заградама који изражавају нијансу, засићеност и лакоћу боје. ХСЛА вриједност иста је ХСЛ вриједност којој се, као у случају РГБА вриједности, додаје четврти параметар такозвани алфа канал узимајући вриједности у распону од 0,0 до 1,0

На сајту хттпс://цолорсцхеме.ру/ имена, хексадецимални кодови, РГБ вредности ХТМЛ боја представљени су у прикладном облику

Такође на сајту хттпс://цолорсцхеме.ру/ представљен је универзални претварач боја, који ћемо користити у будућности. Овај претварач вам омогућује претварање боја из једног модела боје у други, на пример из РГБ у ХСЛ, претварање хексадецималног кода боје у РГБ вредност и тако даље..

Подесите текст на плаво за први одељак (овом одломку смо доделили класу која се зове цласс1)

У датотеци стила цолор.цсс након својства боје наведите име боје (плаву) као вредност

Као што видите, текст првог става је променио боју у плаву (плаву)

Промените боју текста из другог одељка (класа 2) у даркорцхид

Као вредност својства боје напишите боју даркорцхида као шестерокутни код, наиме # 9932цц

Као што видите, боја текста другог параграфа се променила у даркорцхид (# 9932цц)

Промените боју текста трећег ставка (класа 3) у фуксију боје (магента), означавајући је као РГБ вредност после својства боје. Примијетићете да су боје фуксије и магента у основи идентичне и имају исте хексадецималне кодове (# фф00фф) и РГБ вриједности (255,0255)

Након РГБ својства боје пишемо вредност боје фуксије (магента) на следећи начин: боја: ргб (255,0,255)

Боја текста трећег ставка промијењена је у фуксију (магента)

Промените боју текста четвртог ставка (класа 4) користећи ХСЛ вредност. Као што је горе споменуто, ХСЛ вриједност одређена је с три параметра: нијансом, засићењем и свјетлошћу

Сваки од ових параметара размотримо засебно. Да бисте назначили нијансу, на котачу у боји морате навести угао ротације (од 0 ° до 360 °), као што је приказано на доњој слици. На пример, зелена одговара угао ротације од 120 °, а плава угао ротације од 270 °

Параметар засићења одређује засићеност одабране нијансе. Засићеност у моделу ХСЛ боја је приказана као проценат у распону од 0% до 100%. Што се вредност овог параметра ближи 100%, боја изгледа чистија, а ако засићеност има тенденцију до 0%, тада боја постаје избледела. Параметар светлости одређује осветљеност боје и, попут параметра засићености, одређује се као проценат у опсегу од 0% до 100%. Што је већа вредност овог параметра, боја постаје светлија. Промените боју текста четвртог става у правни екран

Будући да желимо одредити ХСЛ вриједност као вриједност за својство боје, морамо претворити боју законског заслона (# 7ЦФЦ00 или 124.252.0) у ХСЛ модел боја. Да бисте то учинили, користите мрежни претварач боја на хттпс://цолорсцхеме.ру/цолор-цонвертер.хтмл. На примјер, у линији модела у боји наведите вриједност боје законског заслона, на примјер РГБ, точније 124.252.0, и мало ниже можемо видјети резултат конверзије у ХСЛ (хсл (90.100%, 49%))

Након својства боје наведите хсл вредност (90,100%, 49%)

Као што видите, боја текста у четвртом пасусу се променила у законски екран

Размотрите још један ЦСС својство као позадинску боју. Својство боје позадине поставља боју позадине елемента у ХТМЛ документу. Можете поставити вриједност за својство боје позадине на исте начине као што смо то сматрали за одређивање боје текста: користећи енглеска имена боја, хексадецимални код боје, РГБ вриједност и вриједност ХСЛ Промијените боју позадине за четири одломка користећи својство боје позадине на различите начине да одредите боју . За први одељак подесите боју позадине коришћењем енглеског имена боје, на пример даркграи. На листу стилова напишите боју позадине: даркграи

Боја позадине првог параграфа промењена је у тамножуту

Промените боју текста другог става у акуа (цијан)

Подесите хексадецимални код боје акуа (цијан) као вредност за својство боје позадине

Добијамо следеће

У трећем пасусу поставите боју позадине на зелену боју користећи РГБ вредност (173,255,47)

У датотеци стилова цолор.цсс наведите боју позадине: ргб (173,255,47)

Четврти одломак поставите на црну боју позадине помоћу хсл вриједности

У датотеци стилова цолор.цсс одређујемо својство боје позадине са вредности хсл (0,0%, 0%)

Као резултат, добијамо следеће

У ЦСС3 постоји неколико начина за подешавање транспарентности елемената у ХТМЛ документу:

Својство непрозирности омогућава вам да одредите степен транспарентности елемента и било ког његовог подређеног. Својство непрозирности прихвата вриједности у распону од 0,0 (потпуно прозирно) до 1,0 (непрозирно) Кориштењем РГБА колорног модела, који вам омогућује да поставите боју на исти начин као РГБ. За разлику од РГБ, РГБА има четврти параметар, такозвани алфа канал, који вам омогућава да одредите степен транспарентности елемента. Овај параметар прихвата вредности у опсегу од 0,0 до 1,0. ХСЛА модел боја, који омогућава изражавање боје у погледу нијансе, засићености и светлости, а на исти начин као и РГБА модел боја, додаје вредност прозирности као четврти параметар, такозвани алфа канал. Овај параметар, као у случају РГБА, може примити вредности од 0,0 до 1,0. Размотрите све методе за подешавање транспарентности (користећи текст као пример) користећи посебне примере. У датотеци цолор.цсс избришите сва својства боје позадине

Након својства непрозирности приказује се његова вриједност која може бити у опсегу од 0,0 до 1,0. Што се ближи вредност овог својства 1, већа је непрозирност елемента

Поставите сљедеће вриједности за својство непрозирности у сваком одломку: За први став (додијељена класа с именом цласс1) наведите број 0,2 као вриједност за својство непрозирности. За други одломак (додијељен разреду с именом цласс2), наведите вриједност 0,3 за својство непрозирности. За трећи одломак (додијељена класа с именом цласс3) као вриједност за својство непрозирности, наведите број 0,4. За четврти одломак (којем је додијељена класа с именом цласс4) као вриједност за својство непрозирности наведите број 1,0

Као резултат, видимо да је текст прва три става (на који се примењује својство непрозирности са вредностима 0,2, 0,3 и 0,4) транспарентнији од текста четвртог става (својство непрозирности у вредности од 1,0).

Уклоните својства боје и непрозирности из датотеке цолор.цсс и поставите прозирност текста у одломку помоћу функције хсла

У функцији хсла, транспарентност се поставља, као што је горе споменуто, користећи параметар зван алфа канал (алфа), који узима вредности од 0,0 до 1,0.

У датотеку цолор.цсс за сваки одломак уписујемо вредности функције хсла:

Као резултат, добијамо исти резултат као и коришћење својства непрозирности.

Поставите транспарентност текста у одломке користећи ргба функцију, где је четврти параметар (алфа) одговоран за ниво транспарентности и узима вредности од 0,0 до 1,0

Добијамо исти резултат као у случају хсла функције и својства непрозирности

Наставак у чланку: Само о компликованом или научите ЦСС3. Део 4. 1. Фонтови у ХТМЛ документу. Породица фонтова и @ фонт-фаце својства