Za določanje barv se uporabljajo šestnajstiška števila. Šestnajstiški sistem za razliko od decimalnega temelji, kot že ime pove, na številu 16. Številke bodo naslednje: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Številke od 10 do 15 se nadomestijo z latiničnimi črkami. Števila, večja od 15 v šestnajstiškem sistemu, nastanejo tako, da se dve števili združita v eno. Na primer, število 255 v decimalnem zapisu ustreza številu FF v šestnajstiškem zapisu. Da bi se izognili zmedi pri določanju številskega sistema, se pred šestnajstiško številko postavi znak #, na primer #666999. Vsaka od treh barv - rdeča, zelena in modra - ima lahko vrednosti od 00 do FF. Tako je barvni simbol razdeljen na tri komponente #rrggbb, kjer prva dva simbola označujeta rdečo komponento barve, srednja dva - zeleno in zadnja dva - modro. Dovoljena je uporaba skrajšane oblike #rgb, kjer je treba vsak znak podvojiti. Zato je treba vnos #fe0 obravnavati kot #ffee00.
Po imenu
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Brskalniki podpirajo nekatere barve po imenu. V tabeli 1 prikazuje imena, šestnajstiško kodo, vrednosti RGB, HSL in opis.
| Ime | barva | Koda | RGB | HSL | Opis |
|---|---|---|---|---|---|
| bela | #ffffff ali #fff | rgb(255,255,255) | hsl(0,0%,100%) | Bela | |
| srebro | #c0c0c0 | rgb(192,192,192) | hsl(0,0%,75%) | siva | |
| siva | #808080 | rgb(128,128,128) | hsl(0,0%,50%) | Temno siva | |
| črna | #000000 ali #000 | rgb(0,0,0) | hsl(0,0%,0%) | Črna | |
| kostanjeva | #800000 | rgb(128,0,0) | hsl(0,100%,25%) | Temno rdeča | |
| rdeča | #ff0000 ali #f00 | rgb(255,0,0) | hsl(0,100%,50%) | Rdeča | |
| oranžna | #ffa500 | rgb(255,165,0) | hsl(38,8,100%,50%) | Oranžna | |
| rumena | #ffff00 ali #ff0 | rgb(255,255,0) | hsl(60,100%,50%) | Rumena | |
| olivno | #808000 | rgb(128,128,0) | hsl(60,100%,25%) | olivno | |
| apno | #00ff00 ali #0f0 | rgb(0,255,0) | hsl(120,100%,50%) | Svetlo zelena | |
| zelena | #008000 | rgb(0,128,0) | hsl(120,100%,25%) | zelena | |
| aqua | #00ffff ali #0ff | rgb(0,255,255) | hsl(180,100%,50%) | Modra | |
| modra | #0000ff ali #00f | rgb(0,0,255) | hsl(240,100%,50%) | Modra | |
| mornarica | #000080 | rgb(0,0,128) | hsl(240,100%,25%) | Temno modra | |
| teal | #008080 | rgb(0,128,128) | hsl(180,100%,25%) | Modro-zelena | |
| fuksija | #ff00ff ali #f0f | rgb(255,0,255) | hsl(300,100%,50%) | Roza | |
| vijolična | #800080 | rgb(128,0,128) | hsl(300,100%,25%) | Vijolična |
Uporaba RGB
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 5.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Barvo lahko določite z uporabo rdečih, zelenih in modrih vrednosti v decimalnih vrednostih. Vsaka od treh barvnih komponent ima vrednost od 0 do 255. Prav tako je dovoljeno določiti barvo v odstotkih, pri čemer 100 % ustreza številu 255. Najprej določite ključno besedo rgb, nato pa določite barvne komponente v oklepaju , ločeni z vejicami, na primer rgb(255 , 128, 128) ali rgb(100%, 50%, 50%).
RGBA
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Format RGBA je po sintaksi podoben RGB, vendar vključuje kanal alfa, ki določa prosojnost elementa. Vrednost 0 je popolnoma prosojna, 1 je neprozorna, vmesna vrednost, kot je 0,5, pa je polprosojna.
RGBA je bil dodan CSS3, zato je treba kodo CSS preveriti glede na to različico. Upoštevati je treba, da je standard CSS3 še v razvoju in da se lahko nekatere funkcije spremenijo. Na primer, barva v formatu RGB, dodana v lastnost barve ozadja, je potrjena, vendar tista, dodana v lastnost ozadja, ni več veljavna. Hkrati brskalniki povsem pravilno razumejo barvo za obe lastnosti.
HSL
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Ime formata HSL izhaja iz kombinacije prvih črk Hue (odtenek), Saturate (nasičenost) in Lightness (svetloba). Odtenek je vrednost barve na barvnem kolesu (slika 1) in je podana v stopinjah. 0° ustreza rdeči, 120° zeleni in 240° modri. Vrednost odtenka se lahko spreminja od 0 do 359.
riž. 1. Barvno kolo
Nasičenost je intenzivnost barve in se meri v odstotkih od 0 % do 100 %. Vrednost 0 % pomeni, da ni barve in je odtenek sive, 100 % pa je največja vrednost za nasičenost.
Svetlost določa, kako svetla je barva in je določena kot odstotek od 0 % do 100 %. Nizke vrednosti naredijo barvo temnejšo, visoke vrednosti pa svetlejšo; ekstremne vrednosti 0% in 100% ustrezajo črni in beli barvi.
HSLA
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Format HSLA je po sintaksi podoben HSL, vendar vključuje kanal alfa za določanje prosojnosti elementa. Vrednost 0 je popolnoma prosojna, 1 je neprozorna, vmesna vrednost, kot je 0,5, pa je polprosojna.
V CSS3 so bile dodane barvne vrednosti RGBA, HSL in HSLA, zato pri uporabi teh formatov preverite kodo glede veljavnosti različice.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Opozorilo
Vse metode lovljenja levov, navedene na spletnem mestu, so teoretične in temeljijo na računalniških metodah. Avtorji ne jamčijo za vašo varnost pri njihovi uporabi in se odpovedujejo odgovornosti za rezultate. Ne pozabite, lev je plenilec in nevarna žival!
Rezultat tega primera je prikazan na sl. 2.
riž. 2. Barve na spletni strani
Vlad Merževič
V HTML je barva določena na enega od dveh načinov: z uporabo šestnajstiške kode in z imenom določenih barv. Pretežno se uporablja metoda, ki temelji na šestnajstiškem številskem sistemu, saj je najbolj univerzalna.
Šestnajstiške barve
HTML za določanje barv uporablja šestnajstiška števila. Šestnajstiški sistem za razliko od decimalnega temelji, kot že ime pove, na številu 16. Številke bodo naslednje: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Številke od 10 do 15 se nadomestijo z latiničnimi črkami. V tabeli 6.1 prikazuje ujemanje med decimalnim in šestnajstiškim številom.
Števila, večja od 15, v šestnajstiškem sistemu nastanejo z združitvijo dveh števil v eno (tabela 6.2). Na primer, število 255 v decimalnem zapisu ustreza številu FF v šestnajstiškem zapisu.
Da bi se izognili zmedi pri definiranju številskega sistema, je pred šestnajstiško številko znak #, na primer #aa69cc. V tem primeru velike in male črke niso pomembne, zato je dovoljeno pisati #F0F0F0 ali #f0f0f0.
Tipična barva, ki se uporablja v HTML, je videti takole.
Tukaj je barva ozadja spletne strani nastavljena na #FA8E47. Oznaka # pred številko pomeni, da je številka šestnajstiška. Prvi dve števki (FA) določata rdečo komponento barve, številke od tretje do četrte (8E) definirajo zeleno komponento, zadnji dve števki (47) pa modro komponento. Končni rezultat bo ta barva.
| F.A. | + | 8E | + | 47 | = | FA8E47 |
Vsaka od treh barv - rdeča, zelena in modra - ima lahko vrednosti od 00 do FF, kar ima za posledico skupno 256 odtenkov. Tako je lahko skupno število barv 256x256x256 = 16.777.216 kombinacij. Barvni model, ki temelji na rdeči, zeleni in modri komponenti, se imenuje RGB (rdeča, zelena, modra). Ta model je aditivni (iz add - dodati), pri katerem dodatek vseh treh komponent tvori belo barvo.
Za lažjo navigacijo po šestnajstiških barvah upoštevajte nekaj pravil.
- Če so vrednosti barvnih komponent enake (na primer: #D6D6D6), bo rezultat siv odtenek. Višje kot je število, svetlejša je barva z vrednostmi v razponu od #000000 (črna) do #FFFFFF (bela).
- Svetlo rdeča barva se oblikuje, če je rdeča komponenta največja (FF), preostale komponente pa nastavljene na nič. Barva z vrednostjo #FF0000 je najbolj rdeč možni rdeč odtenek. Enako velja za zeleno (#00FF00) in modro (#0000FF).
- Rumena (#FFFF00) je narejena z mešanjem rdeče in zelene. To je jasno vidno na barvnem krogu (slika 6.1), ki predstavlja primarne barve (rdeča, zelena, modra) in komplementarne oziroma dodatne. Sem spadajo rumena, cian in vijolična (imenovana tudi magenta). Na splošno lahko katero koli barvo dobite z mešanjem barv, ki so ji blizu. Tako cian (#00FFFF) dobimo s kombinacijo modre in zelene.
riž. 6.1. Barvno kolo
Barv, ki temeljijo na šestnajstiških vrednostih, ni treba izbrati empirično. V ta namen je primeren grafični urejevalnik, ki lahko dela z različnimi barvnimi modeli, na primer Adobe Photoshop. Na sl. Slika 6.2 prikazuje okno za izbiro barve v tem programu, dobljena šestnajstiška vrednost trenutne barve je obrobljena s črto. Lahko ga kopirate in prilepite v kodo.
riž. 6.2. Okno za izbiro barv v Photoshopu
Spletne barve
Če kakovost upodabljanja barv monitorja nastavite na 8-bitno (256 barv), se lahko ista barva v različnih brskalnikih prikaže drugače. To je posledica načina prikaza grafike, ko brskalnik deluje s svojo paleto in ne more prikazati barve, ki je ni v njegovi paleti. V tem primeru se barva nadomesti s kombinacijo slikovnih pik drugih, podobnih barv, ki posnemajo dano. Da bi zagotovili, da barva ostane enaka v različnih brskalnikih, je bila uvedena paleta tako imenovanih spletnih barv. Spletne barve so tiste barve, pri katerih je vsaka komponenta - rdeča, zelena in modra - nastavljena na eno od šestih vrednosti - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC) , 255 (FF). Šestnajstiška vrednost te komponente je navedena v oklepajih. Skupno število barv iz vseh možnih kombinacij daje 6x6x6 - 216 barv. Primer spletne barve je #33FF66.
Glavna značilnost spletne barve je, da je videti enako v vseh brskalnikih. Trenutno je pomen spletnih barv zelo majhen zaradi izboljšanja kakovosti monitorjev in širitve njihovih zmogljivosti.
Barve po imenu
Da se izognete zapomnitvi niza številk, lahko namesto tega uporabite imena pogosto uporabljenih barv. V tabeli 6.3 prikazuje imena priljubljenih imen barv.
| Ime barve | barva | Opis | Šestnajstiška vrednost |
|---|---|---|---|
| črna | Črna | #000000 | |
| modra | Modra | #0000FF | |
| fuksija | Svetlo vijolična | #FF00FF | |
| siva | Temno siva | #808080 | |
| zelena | zelena | #008000 | |
| apno | Svetlo zelena | #00FF00 | |
| kostanjeva | Temno rdeča | #800000 | |
| mornarica | Temno modra | #000080 | |
| olivno | olivno | #808000 | |
| vijolična | Temno vijolična | #800080 | |
| rdeča | Rdeča | #FF0000 | |
| srebro | Svetlo siva | #C0C0C0 | |
| teal | Modro-zelena | #008080 | |
| bela | Bela | #FFFFFF | |
| rumena | Rumena | #FFFF00 |
Ni pomembno, ali določite barvo z imenom ali s šestnajstiškimi številkami. Te metode so po svojem učinku enake. Primer 6.1 prikazuje, kako nastaviti barvo ozadja in besedila spletne strani.
Primer 6.1. Barva ozadja in besedila
Primer besedila
V tem primeru je barva ozadja nastavljena z atributom bgcolor oznake
in barvo besedila prek atributa text. Zaradi raznolikosti je atribut besedila nastavljen na šestnajstiško število, atribut bgcolor pa na rezervirano ključno besedo teal.Barvne kode v CSS se uporabljajo za določanje barv. Običajno se barvne kode ali barvne vrednosti uporabljajo za nastavitev barve za barvo ospredja elementa (npr. barva besedila, barva povezave) ali barvo ozadja elementa (barva ozadja, barva bloka). Uporabljajo se lahko tudi za spreminjanje barve gumba, obrobe, označevalca, lebdenja in drugih okrasnih učinkov.
Svoje barvne vrednosti lahko določite v različnih formatih. V naslednji tabeli so navedeni vsi možni formati:
Našteti formati so podrobneje opisani spodaj.
Barve CSS - šestnajstiške kode
Šestnajstiška koda barve je šestmestna predstavitev barve. Prvi dve števki (RR) predstavljata rdečo vrednost, naslednji dve predstavljata zeleno vrednost (GG), zadnji dve pa predstavljata modro vrednost (BB).
Barve CSS – kratke šestnajstiške kode
Kratka šestnajstiška barvna koda je krajša oblika zapisa s šestimi znaki. V tem formatu se vsaka cifra ponovi, da se ustvari enakovredna šestmestna barvna vrednost. Na primer: #0F0 postane #00FF00.
Šestnajstiško vrednost lahko vzamete iz katere koli grafične programske opreme, kot je Adobe Photoshop, Core Draw itd.
Pred vsako šestnajstiško barvno kodo v CSS bo postavljen znak "#". Spodaj so primeri uporabe šestnajstiških zapisov.
Barve CSS - vrednosti RGB
RGB vrednost je barvna koda, ki je nastavljena z lastnostjo rgb(). Ta lastnost ima tri vrednosti: po eno za rdečo, zeleno in modro. Vrednost je lahko celo število od 0 do 255 ali odstotek.
Opomba: Vsi brskalniki ne podpirajo barvne lastnosti rgb(), zato je uporaba ni priporočljiva.
Spodaj je primer, ki prikazuje več barv z uporabo vrednosti RGB.
Generator barvnih kod
Z našo storitvijo lahko ustvarite na milijone barvnih kod.
Varne barve za brskalnik
Spodaj je tabela 216 barv, ki so najvarnejše in najbolj neodvisne od računalnika. Te barve v CSS segajo od 000000 do šestnajstiške kode FFFFFF. So varni za uporabo, saj zagotavljajo, da vsi računalniki pravilno prikazujejo barve pri delu s 256 barvno paleto.
| Tabela "varnih" barv v CSS | |||||
| #000000 | #000033 | #000066 | #000099 | #0000CC | #0000FF |
| #003300 | #003333 | #003366 | #003399 | #0033CC | #0033FF |
| #006600 | #006633 | #006666 | #006699 | #0066CC | #0066FF |
| #009900 | #009933 | #009966 | #009999 | #0099CC | #0099FF |
| #00CC00 | #00CC33 | #00CC66 | #00CC99 | #00CCCC | #00CCFF |
| #00FF00 | #00FF33 | #00FF66 | #00FF99 | #00FFCC | #00FFFF |
| #330000 | #330033 | #330066 | #330099 | #3300CC | #3300FF |
| #333300 | #333333 | #333366 | #333399 | #3333CC | #3333FF |
| #336600 | #336633 | #336666 | #336699 | #3366CC | #3366FF |
| #339900 | #339933 | #339966 | #339999 | #3399CC | #3399FF |
| #33CC00 | #33CC33 | #33CC66 | #33CC99 | #33CCCC | #33CCFF |
| #33FF00 | #33FF33 | #33FF66 | #33FF99 | #33FFCC | #33FFFF |
| #660000 | #660033 | #660066 | #660099 | #6600CC | #6600FF |
| #663300 | #663333 | #663366 | #663399 | #6633CC | #6633FF |
| #666600 | #666633 | #666666 | #666699 | #6666CC | #6666FF |
| #669900 | #669933 | #669966 | #669999 | #6699CC | #6699FF |
| #66CC00 | #66CC33 | #66CC66 | #66CC99 | #66CCCC | #66CCFF |
| #66FF00 | #66FF33 | #66FF66 | #66FF99 | #66FFCC | #66FFFF |
| #990000 | #990033 | #990066 | #990099 | #9900CC | #9900FF |
| #993300 | #993333 | #993366 | #993399 | #9933CC | #9933FF |
| #996600 | #996633 | #996666 | #996699 | #9966CC | #9966FF |
| #999900 | #999933 | #999966 | #999999 | #9999CC | #9999FF |
| #99CC00 | #99CC33 | #99CC66 | #99CC99 | #99CCCC | #99CCFF |
| #99FF00 | #99FF33 | #99FF66 | #99FF99 | #99FFCC | #99FFFF |
| #CC0000 | #CC0033 | #CC0066 | #CC0099 | #CC00CC | #CC00FF |
| #CC3300 | #CC3333 | #CC3366 | #CC3399 | #CC33CC | #CC33FF |
| #CC6600 | #CC6633 | #CC6666 | #CC6699 | #CC66CC | #CC66FF |
| #CC9900 | #CC9933 | #CC9966 | #CC9999 | #CC99CC | #CC99FF |
| #CCCC00 | #CCCC33 | #CCCC66 | #CCCC99 | #CCCCCC | #CCCCFF |
| #CCFF00 | #CCFF33 | #CCFF66 | #CCFF99 | #CCFFCC | #CCFFFF |
| #FF0000 | #FF0033 | #FF0066 | #FF0099 | #FF00CC | #FF00FF |
| #FF3300 | #FF3333 | #FF3366 | #FF3399 | #FF33CC | #FF33FF |
| #FF6600 | #FF6633 | #FF6666 | #FF6699 | #FF66CC | #FF66FF |
| #FF9900 | #FF9933 | #FF9966 | #FF9999 | #FF99CC | #FF99FF |
| #FFCC00 | #FFCC33 | #FFCC66 | #FFCC99 | #FFCCCC | #FFCCFF |
| #FFFF00 | #FFFF33 | #FFFF66 | #FFFF99 | #FFFFCC | #FFFFFF |
CSS se ne razume). Zato mora bodoči spletni skrbnik preprosto študirati orodja HTML, ki vam omogočajo spreminjanje barve, na primer za izdelavo svetlih in barvitih e-novic, ki bodo pritegnile pozornost ciljne publike spletnega mesta.
Ta objava je precej dolga, vendar boste iz nje izvedeli vse tehnične značilnosti dela z barvami s pomočjo HTML. Posnetek bomo začeli z razumevanjem vprašanja: zakaj moramo določene elemente HTML strani poudariti z barvo? Nato bomo govorili o modelu RGB, ki omogoča nastavitev barv v HTML s posebnimi kodami (vmes si bomo ogledali decimalne barvne kode in šestnajstiške barvne vrednosti HTML). Tudi iz te objave boste izvedeli več o barvni paleti in tudi razumeli, zakaj v HTML-ju ni palete. In na koncu te publikacije bo primeri spreminjanja barve ozadja, besedila in povezav.
Uporaba barv v HTML
Spletne strani bi bile dolgočasne in nezanimive brez slik, o čemer smo prej in zelo podrobno govorili. Toda slike imajo eno pomembno pomanjkljivost: vsaka slika je dodatna in s tem dodatno obremenitev gostovanja.
Rad bi omenil, da za oblikovanje svojega bloga WordPress nisem uporabil ene same slike; postavitev je bila v celoti zasnovana z uporabo barv. Enako Danes bomo govorili o barvah v HTML.. Barve v HTML se uporabljajo za različne namene, na primer lahko oblikujemo postavitve spletnih strani tako, da določene elemente poudarimo z eno ali drugo barvo.
Z barvo lahko usmerimo pozornost obiskovalcev na določeno besedilo ali blok spletnega mesta. Upoštevajte, da je določena tudi z barvo na način, da lahko uporabnik razume: na katero povezavo je že kliknil, katere povezave še ni obiskal in na kateri HTML strani se trenutno nahaja.
Bodite previdni uporaba barv za oblikovanje dokumentov HTML, ne gredo vse barve skupaj in ne bo vsaka barva všeč obiskovalcem vaše spletne strani. Toda bolje je, da o teh podrobnostih vprašate spletne oblikovalce; ta članek vam bo pomagal razumeti tehnične lastnosti, ki vam omogočajo nadzor nad barvo elementov strani HTML.
Vendar ne smete pozabiti, da je treba dizajn ločiti od vsebine, zato je bolje uporabiti CSS za manipulacijo barv na HTML straneh, a o tem bomo govorili v drugi objavi. Zdaj bomo videli Katera orodja ima HTML za nadzor barv na straneh spletnega mesta?.
V IT industriji obstaja veliko barvnih modelov za barvno manipulacijo. Najpogosteje uporabljen model barvne predstavitve je model RGB. Tukaj bomo govorili o nekaterih funkcijah tega modela, za podrobnejši uvod v RGB pa bo na voljo posebna publikacija. Spodaj boste našli seznam barvnih modelov, ki se uporabljajo v IT (ne samo HTML in CSS):
- RGB model. Ta model je postal zelo razširjen in je morda eden najbolj priročnih in pogostih načinov za spreminjanje barve elementov HTML.
- Model RGBA. Ta model je zelo podoben modelu RGB, vendar vključuje alfa kanal za barvo. Posebnost modela RGBA je, da omogoča prilagajanje ne le barva elementa HTML, ampak tudi njegova prosojnost zaradi prisotnosti alfa kanala. Model RGBA je bil dodan v CSS3 in ga starejši brskalniki ne podpirajo.
- Model HSL. Posebnost modela HSL je v tem, da barvo nastavimo z njegovimi parametri: odtenkom, ravnostjo in svetlobo. Ta model je nekoliko težje razumeti kot model RGB.
- Model HSLA. Ta model je zelo podoben modelu HSL, vendar tako kot model RGBA omogoča delo z barvnim kanalom alfa, tako da lahko z uporabo HSLA nastavimo ne samo barvo elementa HTML na strani, ampak tudi njegovo prosojnost. .
- Model HSV (HSB). Tega modela ne smemo zamenjevati z modelom HSL. Upoštevajte, da je mogoče prve štiri modele uporabiti v HTML ali CSS za oblikovanje spletnih strani, model HSV pa ne. HSV je zasnoval eden od ustanoviteljev Pixarja leta 1978 in je zelo podoben HSL.
- Model CMY ali CMYK. Ta model se uporablja v vseh barvnih tiskalnikih za tisk. Model CMYK temelji na pravilu, da se tiska na bele liste papirja. Vsako barvo CMYK dobimo z mešanjem Cyan (bledo modra, turkizna), Magenta (magenta) in rumene barve. Vsaka barva v modelu CMY ima lastnost motnosti (količina črnila), merjeno v odstotkih. Toda model CMYK poleg naštetih treh barv uporablja tudi črno.
Vsi zgoraj navedeni barvni modeli so odvisni od strojne opreme, to je, če nastavite barvo elementa HTML z uporabo modela RGB ali HSL, potem je nemogoče z gotovostjo trditi, kakšen natančen odtenek barve bo videl obiskovalec vaše strani, saj so monitorji vseh uporabnikov različni in različno prenašajo barve. Upoštevajte tudi, da vsi zgoraj navedeni modeli temeljijo na modelu RGB in da je katero koli barvo, določeno v katerem koli od modelov (razen HSLA in RGBA zaradi prisotnosti alfa kanala), mogoče pretvoriti v RGB.
Če govorimo o strojno neodvisnih modelih prenosa barv, potem velja omeniti model LAB. Tako smo si vzeli malo odmora od dela z barvami v HTML in se seznanili z nekaterimi barvnimi modeli. Upoštevajte, da brskalniki »razumejo« samo prve štiri modele: HSL, RGB, HSLA in RGBA. Zato lahko s temi modeli nadzorujemo samo barvo elementov HTML.
Kako se oblikuje barva elementa HTML: nekatere značilnosti modela RGB
Ugotovimo kako se oblikuje barva elementa HTML in z nekaterimi funkcijami modela RGB. Upoštevajte, da bomo o modelu RGB, pa tudi o drugih modelih, ki se uporabljajo za oblikovanje spletnih strani, govorili nekoliko kasneje v ločenih prispevkih.
Torej, model RGB pomeni rdeča, zelena, modra. Model RGB temelji na principu aditivnosti. To načelo je, da se za pridobitev katere koli barve črni doda barva. Za boljše razumevanje si predstavljajte, da je vaš zaslon črna stena in imate tri reflektorje: prvi sveti rdeče, drugi sveti zeleno in tretji sveti modro. Svetlost vsakega reflektorja lahko prilagodite z ravnilom s številkami od 0 do 255. Če torej reflektor nastavite na nič, se izklopi in ne sveti; če je vrednost 255, potem reflektor ustvari najsvetlejšo možno barvo .
Tako se izkaže, da če na isto točko osvetlite rdeči in zeleni reflektor, boste na črni steni opazili rumeno liso. Če kombinirate rdečo in modro, dobite vijolično, če kombinirate zeleno in modro, pa bo svetlobna točka na črni steni Cyan, če pa vse tri reflektorje usmerite v eno točko, bo svetlobna točka bela.
Zgoraj opisano načelo je osnova modela RGB in se uporablja za manipulacijo barv v elementih HTML na strani v brskalniku.
HTML atributi za spreminjanje barve elementov: barva ozadja elementa in barva besedila znotraj elementa
Uporablja se za unikatnost elementov strani. Z uporabo atributov HTML lahko manipuliramo z barvo elementov:
- Barva atributa HTML. Ta atribut vam omogoča spreminjanje barve besedila znotraj elementa HTML. Atribut lahko sprejme vrednosti v obliki imen barv HTML in kod modelov RGB v šestnajstiških in decimalnih zapisih. Atribut barve je edinstven atribut HTML, ki vam omogoča spreminjanje barve besedila v nekaterih elementih HTML.
- Atribut besedila HTML. Ta atribut je edinstven atribut oznake . Oznaka skupaj z oznakami in obrazec Če se spomnite, znotraj posode se postavijo elementi, ki jih nato brskalnik prikaže v območju za ogled. Atribut besedila vam omogoča, da določite Privzeta barva besedila za celotno stran HTML.
- HTML atribut bgcolor. Je tudi edinstven atribut HTML in omogoča spreminjanje barve ozadja nekaterih elementov HTML.
- HTML atribut vlink. Ta atribut je edinstven in velja samo za oznako spremeniti barvo povezave, ki jo je uporabnik že obiskal.
- Povezava atributa HTML. Tudi ta atribut je edinstven in velja samo za oznako . Atribut alink spremeni barvo aktivne povezave HTML.
- Atribut povezave HTML. Atribut povezave se uporablja samo v povezavi z oznako in služi za spreminjanje barve povezav strani HTML, ki jih uporabnik še ni obiskal.
Opomba: uporaba atributov za spreminjanje barve elementov HTML ni priporočljiva, saj obstajajo kaskadni slogovni listi, ki vam omogočajo, da ločite obliko spletne strani od njene vsebine.
Uporaba decimalnih barvnih kod v HTML
Torej, govorili smo o tem, da lahko nastavite svetlost reflektorja s posebnim ravnilom, na katerem so oštevilčene risbe od 0 do 255. Zdaj pa poglejmo, kako nam bo to pomagalo spremeniti barvo elementov HTML. Stvar je v tem, da lahko spremenimo barvo besedila znotraj elementa HTML ali barvo ozadja v HTML z uporabo decimalne kode, kot sledi:
Če ustvarite dokument HTML, v katerem je opisan vsebnik telesa, kot v primeru, boste videli:
- Barva ozadja dokumenta HTML je zdaj zelena: bgcolor=”rgb (0,255,0)”.
- Barva besedila strani HTML bo postala modra: text=”rgb (0,0,255)”.
- Barva HTML povezave, ki je uporabnik ni obiskal, bo bela: povezava=”rgb (255,255,255)”.
- Barve povezave, ki je trenutno odprta, bodo črne: alink=”rgb (0,0,0)”.
- In barva povezave HTML, ki je že bila obiskana, bo rdeča: vlink=”rgb (255,0,0)”.
Prosimo, upoštevajte: nihče vam ne prepoveduje, da prilagodite "moč reflektorja" po lastni presoji, lahko nastavite barvo HTML, na primer takole:
rgb(94, 85, 50) |
In pridobite barvo otroškega presenečenja. To je posebnost, prilagodljivost in priročnost modela RGB. Vaš monitor je črna stena z reflektorji, ki svetijo na njej, in lahko prilagodite moč teh reflektorjev in ustvarite vse vrste barv ozadja, besedila in povezav z uporabo atributov HTML v sistemu decimalnega zapisovanja ali, lahko tudi rečete: z uporabo decimalnih barvnih kod.
pravzaprav V HTML-ju je napačno reči decimalne barvne kode, bi bilo pravilneje reči RGB decimalne barvne kode, saj se ta model ne uporablja samo za oblikovanje spletnih strani v HTML in CSS.
Šestnajstiške barvne vrednosti HTML
Nastavitev barve elementov HTML z uporabo decimalnih kod modela RGB ni zelo priročna (in trenutno vsi brskalniki ne podpirajo te metode barvne manipulacije), saj zapis ne bo najbolj kompakten; veliko bolj priročno je nastavite barvo elementov HTML z uporabo šestnajstiških vrednosti. Na spodnji sliki lahko vidite, kako se decimalne vrednosti pretvorijo v šestnajstiške.
Za tiste, ki niso seznanjeni s šestnajstiškim številskim sistemom, je treba dati malo razlage, da boste zlahka manipulirajte z barvo elementov HTML z uporabo šestnajstiških modelnih kod RGB. Prvič, desetiški številski sistem se tako imenuje zato, ker lahko poljubno število dobimo s kombinacijo desetih števk (terminologija je pomembna: obstaja razlika med številom in števko): 0, 1, 2, 3, 5, 6, 7, 8, 9.
V šestnajstiškem številskem sistemu lahko poljubno število zapišemo s kombinacijo šestnajstih števk: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f. Za lažje razumevanje lahko predpostavite, da je a deset in f petnajst. Število šestnajst bi na primer zapisali šestnajstiško kot 10. Število 255 pa bi zapisali kot ff.
Zdaj pa poglejmo, kako lahko nastavite barvo elementov HTML z uporabo šestnajstiških vrednosti, ponovimo naš prejšnji primer in nadomestimo decimalne barvne kode z njihovimi šestnajstiškimi dvojniki:
<
body
alink
=
”#000000” link=”#ffffff” vlink=”ff0000” bgcolor=”#00ff00” text=”#0000ff”> |
Upoštevajte: pisanje barv v HTML v šestnajstiški obliki je nekoliko bolj kompaktno kot v decimalki, to je prvi. Drugič: moč vsakega reflektorja se nastavi s številkami od 0 do 255. Za zapis števila 255 sta potrebni dve števki v šestnajstiški obliki (ff = 250), torej svetlost vsakega barvnega kanala (naši reflektorji se pravilno imenujejo barvni kanal, barvni kanal) je nastavljen z dvema števkama od 0 do f.
Upoštevajte: svetlost vsakega barvnega kanala je nastavljena posebej, če pa si predstavljamo, da je to ena sama številka, potem je največje možno število v šestnajstiškem številskem sistemu modela RGB ffffff, nam bo dalo belo, v decimalni sistem je: 16.777.215. To število barv in odtenkov omogoča nastavitev/uporabo modela RGB. Ta številka izhaja iz dejstva, da ima vsak barvni kanal 256 vrednosti svetlosti (od 0 do 255): 256 * 256 * 256 = 16.777.215.
Šestnajstiške barvne vrednosti HTML so kompaktnejše in jasnejše, večina spletnih oblikovalcev in oblikovalcev postavitev uporablja šestnajstiške vrednosti za manipulacijo barve v HTML, zato priporočamo, da se ne navadite na decimalno obliko barvnega zapisa, ampak takoj uporabite šestnajstiško.
Jasno je, da bo oblikovalec začetnik ali oblikovalec postavitve sprva težko krmaril po šestnajstiški obliki barvnega zapisa, zato ima skoraj vsak grafični urejevalnik tako imenovano barvno paleto, ki vam omogoča, da izberete želeno barvo in jo dobite. koda za različne barvne modele v različnih številskih sistemih.
Nekateri urejevalniki besedil, kot je , imajo razširitve palete, ki so zelo priročne, ko želite hitro izbrati barvo in jo spremeniti. V zvezi s tem ne morem reči ničesar.
Imena barv v HTML
Atributi HTML lahko sprejmejo vrednosti ne le decimalnih kod in šestnajstiških vrednosti, ampak tudi posebna imena cvetov. Spreminjanje barve elementov HTML z njihovim imenom ni dobra ideja. Prvič, za imenom barve v HTML se skriva koda modela RGB, in drugič, vsak brskalnik drugače prikaže barvo elementa HTML, ki ga določa ime, odvisno samo od želje razvijalcev brskalnika.
zato uporaba imena barve v HTML ni priporočljiva. Model RGB je odvisen od strojne opreme, barva, ki jo določa ime, pa je odvisna od brskalnika in celo njegove različice. Poskusimo nastaviti barvo elementov strani HTML z imenom:
<
body
alink
=
”black
”link
=
”#white” vlink=”rdeča” bgcolor=”green” text=”blue”> |
Kot razumete, obstaja veliko barv in odtenkov. Tukaj je vredno omeniti, da vam atributi HTML ne omogočajo nastavitve gradienta; CSS ima to možnost, vendar bomo o tem govorili v drugi objavi. In veliko barv v HTML ima imena. Na moji spletni strani lahko najdete tabelo imen barv v HTML in njihovih RGB kod.
Zgornja tabela prikazuje kakšno barvo bo dobil element HTML, če ga določite z imenom. Ta tabela vsebuje 16 barv in njihova imena, ki jih je odobril W3C in morajo biti enako prikazane v katerem koli brskalniku. Toda v resnici lahko v HTML-ju uporabite približno 200 imen barv, ki jih podpirajo glavni brskalniki, kot so: Opera, Chrome, Firefox, Safari, Internet Explorer (ta trditev je glede slednjega zelo sporna).
Barvna paleta HTML
pravzaprav v HTML ni barvne palete. Spomnimo se definicije besede paleta. Paleta je majhna tanka plošča štirikotne ali ovalne oblike, na kateri umetnik meša barve in pridobiva vse vrste barv. Včasih je v paleti narejena luknja za palec, da jo je udobno držati. Spodaj boste našli sliko palete. Zato v HTML-ju ni palete.
Toda v različnih urejevalnikih besedil obstaja vtičniki barvne palete ki pomaga hitro izberite barvo elementa HTML. V grafičnih urejevalnikih obstaja tudi barvna paleta, saj oblikovalcu ni zelo priročno in zabavno sedeti in izračunati: kakšna barva se bo pojavila pri tej ali tisti svetlosti tega ali onega kanala. Na spodnji sliki lahko vidite najpreprostejšo paleto urejevalnika Paint.
Upoštevajte, da številni moduli barvne palete in vtičniki omogočajo pridobitev barvne kode ne le v formatu RGB/RGBA, temveč tudi v formatu drugih modelov. Ne pozabite da v HTML-ju ni palete, no, razen če ste umetnik v srcu in barvno paleto strani HTML imenujete te barve ki so bile uporabljene za dekoracijo (navsezadnje se včasih paleta nanaša na barve, ki jih uporablja določen umetnik, ali barve, ki so bile uporabljene pri ustvarjanju določene slike).
Naučite se spremeniti barvo besedila v HTML
Imamo veliko teorije o barvah v HTML, pojdimo vaditi in poskusiti delo z barvami elementov HTML. Prva stvar, ki se je bomo naučili, je spremeni barvo besedila v dokumentu HTML z uporabo posebnih atributov in oznak. Odprite poljuben urejevalnik in vanj vpišite naslednjo kodo:
Učenje dela z barvami v HTML
Spreminjanje barve besedila
Za spreminjanje barve besedila lahko uporabimo unikatni atribut besedilnega elementa BODY, uporabimo pa lahko tudi element FONT in njegov barvni atribut. To besedilo bo zatemnjeno.
< ! DOCTYPE html > < html lang = "ru-RU" > < head > < meta charset = "UTF-8" > < title >Spreminjanje barve besedila v dokumentu HTML< / title > < link rel = "stylesheet" type = "text/css" href = "style.css" / > < / head > < body text = "#ff0000" > < h1 > < font color = "rgb(0,255,0)" >Učenje dela z barvami v HTML< / font > < / h1 > < h2 > < font color = "yellow" >Spreminjanje barve besedila< / font > < / h2 > < p >Za spremembo barve besedila lahko uporabimo unikat besedilni atribut BODY elementa in uporabite tudi element FONT < / body > < / html > |
To datoteko bom shranil kot color.html in vam svetujem, da ne pozabite na . Chrome, Firefox in Opera ne podpirajo zapisovanja barv v decimalnem številskem sistemu, vendar IE razume ta barvni zapis in osvetli glavo HTML z zeleno:
Pravilno je, da ne spremenite barve besedila v HTML, ampak spremenite barvo pisave v HTML. O tem