Postavljanje boje teksta u CSS-u. Načini predstavljanja boja

Nazivi boja ne razlikuju velika i mala slova.

Sintaksa

Boja: plavozelena;

2.2. Numeričke vrijednosti boja

2.2.1. RGB boje modela

Heksadecimalni format RGB vrijednosti je znak # iza kojeg odmah slijede tri ili šest heksadecimalnih znakova. Troznamenkasti RGB zapis #rgb pretvara se u šesteroznamenkasti oblik #rrggbb kopiranjem znamenki umjesto dodavanja nula. Na primjer, #fb0 proširuje se u #ffbb00. Ovo osigurava da bijeli #ffffff može biti specificiran u kratka bilješka#fff i uklanja sve ovisnosti o dubini boje prikaza.

Format RGB vrijednosti u funkcionalnoj notaciji je rgb (nakon čega slijedi popis triju numeričkih vrijednosti odvojenih zarezima (bilo tri cjelobrojne vrijednosti ili tri postotne vrijednosti) nakon čega slijedi simbol). Vrijednost cijelog broja 255 odgovara 100% i F ili FF u heksadecimalnom zapisu:

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

Oko numeričkih vrijednosti dopušteni su razmaci.

U prvom dijelu knjige već smo na nekim primjerima pokazali kako postaviti boju teksta u CSS-u. Ovdje nema ništa komplicirano: trebat će vam svojstvo boje i vrijednost boje kojom želite obojiti tekst.

P (boja: #211C18; )

U našem primjeru, vrijednost #211C18 predstavlja heksadecimalni kod boje. Ako ste već upoznati s heksadecimalnim brojevnim sustavom, možete preskočiti čitanje sljedećeg odlomka. Također ćemo dalje govoriti o drugim načinima predstavljanja boja na webu - korištenjem modela boja (RGB, HSL) i ključnih riječi. Ove informacije će biti korisne za početnike i preporučuje se čitanje.

Heksadecimalne boje (hex)

Heksadecimalni brojevni sustav ( heksadecimalni, heksadecimalni) temelji se na broju 16. Za zapis heksadecimalne vrijednosti koristi se 16 znakova: arapski brojevi od 0 do 9 i prva slova latinične abecede (A, B, C, D, E, F). Boja u heksadecimalnom formatu je zapisana kao tri dvoznamenkasta broja od 00 do FF (ispred njih mora biti hash simbol #), što odgovara trima komponentama: crvenoj, zelenoj, plavoj (RGB model boja). Drugim riječima, unos u boji može se predstaviti kao #RRGGBB, gdje prvi par znakova određuje crvenu razinu, drugi - zelenu razinu, a treći - plavu razinu. Dobivena boja je kombinacija ove tri boje.

Stenografski zapis za heksadecimalne boje

Neke heksadecimalne vrijednosti boja mogu se napisati u kraticama. Da biste to učinili, pretvorite unos poput #RRGGBB u #RGB. To se može učiniti kada heksadecimalni broj sadrži tri para identičnih znakova.

Skraćeni oblik notacije prilično je uobičajen, a za vašu referencu navest ćemo nekoliko primjera kratica. Usput, heksadecimalne vrijednosti boja ne razlikuju velika i mala slova - možete koristiti i velika slova i mala slova, sve ovisi o vašoj želji i ukusu.

Primjeri skraćenog zapisa za heksadecimalne boje:

RGB model boja

Drugi način za određivanje boja u CSS-u je korištenje decimalnih RGB vrijednosti (crvena, plava, zelena). Da biste to učinili, nakon svojstva boje trebate napisati ključnu riječ rgb, a zatim u zagradama i odvojene zarezima tri broja u rasponu od 0 do 255, od kojih svaki označava intenzitet crvene, zelene i plave boje (r , g, b). Što je veći broj, to je boja intenzivnija. Na primjer, da biste dobili svijetlo zelenu boju, morate napisati:

P (boja: rgb(0, 255, 0); )

Ali žućkasto-senfna nijansa ima sljedeće značenje:

Boja: rgb(94, 81, 3); /* ispod je ista boja, napisana heksadecimalno: */ boja: #5E5103;

Vrijednost za crnu se piše kao (0, 0, 0), a za bijelu kao (255, 255, 255). Također je moguće navesti ove vrijednosti kao postotke. Dakle, broj 255 odgovara 100%, stoga se bijela boja može postaviti na sljedeći način:

Boja: rgb(100%, 100%, 100%);

Gdje tražiti značenja boja

Možda imate pitanje: odakle dobivate sva ta značenja boja? Ima ih mnogo grafički urednici i online usluge pomoću kojih možete odabrati boje i izraditi sheme boja. Jedan od naj popularni programi, u kojem možete odabrati odgovarajuću boju i dobiti njenu RGB, hex vrijednost i više - Adobe Photoshop. Kao alternativa, postoje posebna mjesta na kojima možete jednostavno odabrati ne samo boju, već i cijelu shemu boja. Sjajan primjer je usluga Adobe Color CC.

RGBA model boja

Možete postaviti boju u RGBA formatu na gotovo isti način kao u RGB. Razlika između RGBA i RGB je prisutnost alfa kanala, koji je odgovoran za transparentnost boje. Prozirnost se postavlja brojem u rasponu od 0 do 1, gdje 0 znači potpunu prozirnost, a 1, naprotiv, znači potpuno neprozirno. Međuvrijednosti poput 0,5 omogućuju vam da postavite proziran izgled (dopušten je stenografski zapis, bez nule, ali s točkom – .5). Na primjer, da bi tekst bio obojen i blago proziran, trebate napisati ključnu riječ rgba i vrijednost boje nakon svojstva boje:

P (boja: rgba(94, 81, 3, .9); )

Nedostatak RGBA je što ga preglednik ne podržava Internet Explorer verzije 8 i starije. Posebno za IE8 možete primijeniti sljedeće rješenje:

P (boja: rgb(94, 81, 3); boja: rgba(94, 81, 3, .9); )

Prvo svojstvo u primjeru namijenjeno je pregledniku IE8 koji će prikazati tekst u željenoj boji, ali bez prozirnosti. A oni preglednici koji razumiju RGBA primijenit će drugo svojstvo na element, s transparentnošću.

HSL (HSLA) modeli boja

Također možete postaviti boju u CSS-u koristeći koordinate HSL modela boja (Hue, Saturation, Lightness). Napisano je ovako:

P (boja: hsl(165, 100%, 50%); )

Prvi broj u zagradama označava nijansu i daje se u stupnjevima (raspon brojeva od 0 do 359). Bit će lako razumjeti zašto se koriste stupnjevi ako se sjetite kako izgleda kotačić boja:

Drugi i treći broj u zagradama znače zasićenost, odnosno svjetlinu. Njihove su vrijednosti postavljene u postocima od 0 do 100. Što je niža vrijednost zasićenosti, boja postaje prigušenija. Vrijednost zasićenja jednaka nuli rezultirat će siva boja, nije važno koju vrijednost ima nijansa. Vrijednost svjetline omogućuje vam da odredite svjetlinu boje. Niske vrijednosti rezultiraju tamnim nijansama boje, visoke vrijednosti rezultiraju svijetlim nijansama. Vrijednost od 100% za svjetlinu znači bijelu boju, 0% znači crnu.

HSLA model boja radi gotovo isto kao i HSL, ali, slično RGBA, ima alfa kanal s kojim možete postaviti prozirnost boje, navodeći željenu vrijednost u rasponu od 0 do 1:

P (boja: hsla(165, 100%, 50%, .6); )

HSL i HSLA podržavaju svi preglednici osim Internet Explorera verzije 8 i starijih.

Standardne HTML boje

Drugi način predstavljanja boja na webu je putem ključnih riječi, koje se mogu koristiti za određivanje boje za element. Primjer:

P(boja:crna;)

Postoji 16 standardnih boja koje se mogu napisati u vrijednosti svojstva boje:

Ove boje podržavaju svi preglednici. Osim ovih, postoji oko 130 dodatnih ključnih riječi za različite nijanse boja. Potpuna tablica ovih boja može se vidjeti u priručniku W3C.

Korištenje takvih ključnih riječi je prihvatljivo, ali postoji rizik da preglednik neće prihvatiti neku riječ. Stoga je preporučljivo zapisati heksadecimalni kod boje umjesto ključnih riječi.

Rezultati

U CSS boja tekst se zadaje svojstvom color, a njegova se vrijednost može napisati na više načina - u heksadecimalnom (hex) formatu, u RGB ili HSL formatu ili navođenjem ključne riječi. Kako biste izbjegli netočan prikaz navedene boje pomoću ključna riječ, bolje je navesti njegovu hex vrijednost.

Također je moguće postaviti prozirnost elementa pomoću alfa kanala (RGBA i HSLA formati). Vrijedno je uzeti u obzir da preglednik IE8 i njegove ranije verzije ne podržavaju formate RGBA, HSL i HSLA.