Samo zapleteno ali se naučite CSS3. Del 3. Načini nastavitve barv v CSS. Nastavite preglednost elementu v dokumentu HTML

Pozdravljeni, dragi bralci spletnega mesta remontcompa.ru! Moje ime je Roman Nahvat in predstavljam vam tretji del niza člankov o jeziku stila CSS. V prvem in drugem delu smo si ogledali načine dodajanja slogov na spletno stran, preučili smo koncept izbirnika CSS in njihove vrste. Z začetkom tega dela bomo začeli preučevati lastnosti jezika CSS, ki veljajo za različne elemente strani HTML: besedilo, tabele, sezname, obrazce ipd. V tem članku bomo natančneje preučili načine nastavitve barve in preglednosti elementov na spletni strani z uporabo lastnosti barve, barve ozadja in motnosti..

Samo zapleteno ali se naučite CSS3. Del 3. Načini nastavitve barv v CSS. Nastavite preglednost elementu v dokumentu HTML

Ustvarite naslednjo strukturo dokumentov HTML, kot je prikazano spodaj.

Ta dokument shranite kot color.html na bliskovni pogon v mapi CSS

Prav tako bomo ustvarili in shranili na bliskovni pogon v datoteko CSS datoteko stilov color.css

Na spletno stran color.html (oznake) dodajte nekaj odstavkov

...

s katerim koli besedilom (v našem primeru 4 odstavki)

Dobimo naslednjo vrsto spletnih strani

Za vsak odstavek napišite ime razreda (class1, class2, class3 in class4), kot je prikazano spodaj

Lastnost barve CSS vam omogoča, da določite barvo besedila znotraj elementa v dokumentu HTML. Po barvni lastnosti je navedena njegova vrednost, ki jo lahko zapišemo na različne načine

V CSS lahko poljubno barvo nastavite na naslednje načine: Uporaba angleških imen barv. Skozi šestnajstiško kodo, ki določa količino rdeče, modre in zelene. Ta koda je napisana po znaku # RGB, ki izraža barvo v razmerjih rdeče, modre in zelene glede na model RGB. Vrednost RGBA je še vedno enaka vrednost RGB, ki ji je dodan četrti parameter, tako imenovani alfa kanal, ki prevzame vrednost od 0,0 (transparentnost) do 1,0 (motnost) in vam omogoča, da določite stopnjo motnosti elementa. Vrednost HSL, ki je bila dodana v CSS3 kot alternativni način določanja barve. Ta vrednost se začne s črkami hsl, čemur sledijo parametri v oklepajih, ki izražajo odtenek, nasičenost in lahkotnost barve. Vrednost HSLA je enaka vrednost HSL, h kateri kot v primeru RGBA vrednosti doda četrti parameter tako imenovani alfa kanal, pri čemer je vrednost v območju od 0,0 do 1,0

Na spletnem mestu https://colorscheme.ru/ imena, šestnajstične kode, RGB vrednosti HTML barv so predstavljene v priročni obliki

Na spletni strani https://colorscheme.ru/ je predstavljen univerzalni pretvornik barv, ki ga bomo uporabljali v prihodnosti. Ta pretvornik vam omogoča pretvorbo barv iz enega barvnega modela v drugega, na primer iz RGB v HSL, pretvorbo šestnajstiške barvne kode v vrednost RGB in tako naprej..

Besedilo nastavite na modro barvo za prvi odstavek (temu odstavku smo dodelili razred, imenovan class1)

V datoteki s slogom color.css po lastnostih barve določite ime barve (modro) kot vrednost

Kot vidite, je besedilo prvega odstavka spremenilo barvo v modro (modro)

Spremenite barvo besedila drugega odstavka (razred 2) v temorhid

Kot vrednost za barvno lastnost zapišite barvo darkorchida kot šestnajsto kodo, in sicer # 9932cc

Kot lahko vidite, se je barva besedila drugega odstavka spremenila v darkorchid (# 9932cc)

Spremenite barvo besedila tretjega odstavka (razred 3) v barvno fuksijo (magenta) in jo označite kot vrednost RGB po barvni lastnosti. Morda opazite, da sta barvi fuksija in magenta v bistvu enaki in imata enaki šestnajstiški kodi (# ff00ff) in vrednosti RGB (255,0255)

Po barvni lastnosti RGB zapišemo vrednost barve fuksije (magenta) na naslednji način: barva: rgb (255,0,255)

Barva besedila tretjega odstavka se je spremenila v fuksijo (magenta)

Spremenite barvo besedila četrtega odstavka (class4) s pomočjo vrednosti HSL. Kot že omenjeno, vrednost HSL določa tri parametre: odtenek, nasičenost in lahkotnost

Vsak od teh parametrov upoštevamo posebej. Če želite označiti odtenek, morate na barvnem kolesu določiti kot vrtenja (od 0 ° do 360 °), kot je prikazano na spodnji sliki. Na primer, zelena ustreza rotacijskemu kotu 120 °, modra pa kotu vrtenja 270 °

Parameter nasičenosti določa nasičenost izbranega odtenka. Nasičenost v barvnem modelu HSL je navedena v odstotkih v območju od 0% do 100%. Bližje kot je vrednost tega parametra na 100%, barva je videti bolj čista, in če se nasičenost nagiba na 0%, potem barva zbledi. Parameter lahkotnosti določa svetlost barve in je tako kot parameter nasičenosti določen kot odstotek v območju od 0% do 100%. Višja kot je vrednost tega parametra, svetlejša postane barva. Spremenite barvo besedila četrtega odstavka v pravico

Ker želimo vrednost HSL določiti kot vrednost za lastnosti barve, moramo barvo zakonodajnega zaslona (# 7CFC00 ali 124.252.0) pretvoriti v barvni model HSL. Če želite to narediti, uporabite spletni pretvornik barv na https://colorscheme.ru/color-converter.html. V vrstici barvnega modela na primer določite barvno vrednost, na primer RGB, in sicer 124.252.0, nekoliko nižje pa lahko vidimo rezultat pretvorbe v HSL (hsl (90.100%, 49%))

Po barvni lastnosti navedite vrednost hsl (90,100%, 49%)

Kot lahko vidite, se je barva besedila v četrtem odstavku spremenila v zakonodajni okvir

Upoštevajte drugo lastnost CSS kot barvo ozadja. Lastnost barve ozadja nastavi barvo ozadja elementa v dokumentu HTML. Vrednost lastnosti barve ozadja lahko nastavite na enake načine, kot smo jih določili za določitev barve besedila: z uporabo angleških imen barv, šestnajstiške barvne kode, RGB vrednosti in vrednosti HSL Spremenite barvo ozadja za štiri odstavke z uporabo lastnosti barve ozadja na različne načine, da določite barvo . Za prvi odstavek nastavite barvo ozadja z angleškim imenom barve, na primer darkgray. V tabelo slogov napišite barvo ozadja: darkgray

Barva ozadja prvega odstavka se je spremenila v temno sivo

Spremenite barvo besedila drugega odstavka v aqua (cyan)

Nastavite šestnajstično barvno kodo aqua (cyan) kot vrednost za lastnosti barve ozadja

Dobimo naslednje

Za tretji odstavek nastavite barvo ozadja na zeleno rumeno z uporabo vrednosti RGB (173,255,47)

V datoteki stilov color.css določite barvo ozadja: rgb (173,255,47)

Četrti odstavek nastavite na črno barvo ozadja s pomočjo vrednosti hsl

V datoteki stilov color.css določimo lastnost barve ozadja z vrednostjo hsl (0,0%, 0%)

Kot rezultat dobimo naslednje

V CSS3 obstaja več načinov za nastavitev preglednosti elementov v dokumentu HTML:

Lastnost motnosti, ki vam omogoča, da določite stopnjo preglednosti elementa in katerega koli od njegovih otrok. Lastnost motnosti sprejme vrednosti v območju od 0,0 (popolnoma pregledno) do 1,0 (neprozorno) z uporabo barvnega modela RGBA, ki omogoča nastavitev barve na enak način kot RGB. Za razliko od RGB ima RGBA četrti parameter, tako imenovani alfa kanal, ki vam omogoča, da določite stopnjo preglednosti elementa. Ta parameter sprejema vrednosti v območju od 0,0 do 1,0. Barvni model HSLA, ki omogoča izražanje barve glede na odtenek, nasičenost in lahkotnost ter na enak način kot barvni model RGBA, doda vrednost preglednosti kot četrti parameter, tako imenovani alfa kanal. Ta parameter lahko, kot v primeru RGBA, sprejme vrednosti od 0,0 do 1,0. Upoštevajte vse metode za nastavitev preglednosti (z uporabo besedila kot primera) z uporabo posebnih primerov. V datoteki color.css izbrišite vse lastnosti barve ozadja

Po lastnosti motnosti se navede njegova vrednost, ki je lahko v območju od 0,0 do 1,0. Bolj ko je vrednost te lastnosti enaka 1, večja je motnost elementa

V vsakem odstavku nastavite naslednje vrednosti lastnosti motnosti: Za prvi odstavek (dodeljeni razred z imenom class1) določite številko 0,2 kot vrednost za nepreglednost nepremičnine. Za drugi odstavek (dodelite razred z imenom class2) določite vrednost 0,3 za nepreglednost lastnosti. Odstavek (dodeljen razred z imenom class3) kot vrednost lastnosti nepreglednosti navedite številko 0,4. Za četrti odstavek (ki mu je dodeljen razred z imenom class4) kot vrednost lastnosti nepreglednosti navedite številko 1.0

Kot rezultat vidimo, da je besedilo prvih treh odstavkov (na katere se nanaša nepremičnina motnosti z vrednostmi 0,2, 0,3 in 0,4) preglednejše od besedila četrtega odstavka (nepregledna lastnost z vrednostjo 1,0)

Odstranite lastnosti barv in motnosti iz datoteke color.css in s funkcijo hsla nastavite preglednost besedila odstavka.

V funkciji hsla se nastavi preglednost, kot je že omenjeno, s pomočjo parametra, imenovanega alfa kanal (alfa), ki sprejme vrednosti od 0,0 do 1,0.

V datoteko color.css za vsak odstavek zapišemo vrednosti funkcije hsla:

Kot rezultat dobimo enak rezultat kot z uporabo lastnosti nepreglednosti.

V odstavkih nastavite preglednost besedila s funkcijo rgba, pri čemer je četrti parameter (alfa) odgovoren za stopnjo preglednosti in sprejme vrednosti od 0,0 do 1,0

Dobimo enak rezultat kot v primeru funkcije hsla in lastnosti motnosti

Nadaljevanje v članku: Samo zapleteno ali se naučite CSS3. Del 4. 1. Pisave v dokumentu HTML. Lastnosti družine pisav in @ font-face lastnosti