Modulul de culoare CSS detaliază valorile care permit autorilor să definească culorile și opacitatea elementelor html, precum și valorile proprietății culorii.
Proprietatea culorii
1. Culori prioritare: proprietatea culorii
Proprietatea setează culoarea fontului folosind diferite sisteme de redare a culorilor. Proprietatea descrie culoarea conținutului text al elementului. De asemenea, este folosit pentru a furniza o valoare indirectă potențială (currentColor) pentru orice alte proprietăți care acceptă valori de culoare.
Proprietatea este moștenită.
2. Valori de culoare
2.1. Cuvinte cheie principale
Lista de cuvinte cheie principale include următoarele semnificații:
| Nume | HEX | RGB | Culoare |
|---|---|---|---|
| negru | #000000 | 0,0,0 | |
| argint | # C0C0C0 | 192,192,192 | |
| gri | #808080 | 128,128,128 | |
| alb | #FFFFFF | 255,255,255 | |
| maro | #800000 | 128,0,0 | |
| roșu | # FF0000 | 255,0,0 | |
| Violet | #800080 | 128,0,128 | |
| fucsie | # FF00FF | 255,0,255 | |
| verde | #008000 | 0,128,0 | |
| lămâie verde | # 00FF00 | 0,255,0 | |
| măsline | #808000 | 128,128,0 | |
| galben | # FFFF00 | 255,255,0 | |
| marina | #000080 | 0,0,128 | |
| albastru | # 0000FF | 0,0,255 | |
| teal | #008080 | 0,128,128 | |
| acva | # 00FFFF | 0,255,255 |
Numele culorilor nu fac distincție între majuscule și minuscule.
Sintaxă
Culoare: teal;
2.2. Valori numerice de culoare
2.2.1. Culori RGB
Formatul valorii hexazecimale RGB este un semn # urmat imediat de trei sau șase caractere hexazecimale. RGB cu trei cifre #rgb este convertit în #rrggbb cu șase cifre prin copierea cifrelor, mai degrabă decât prin adăugarea zerourilor. De exemplu, # fb0 se extinde la # ffbb00. Acest lucru asigură faptul că #ffffff alb poate fi specificat în scurtul #fff și elimină orice dependență de adâncime a culorii de pe afișaj.
Formatul valorii RGB în notație funcțională este rgb (urmat de o listă de trei valori numerice separate prin virgulă (fie trei valori întregi, fie valori de trei procente) urmată de un caracter). Valoarea întreagă 255 corespunde cu 100% și F sau FF în notație hexazecimală:
Rgb (255.255.255) = rgb (100%, 100%, 100%) = #FFF
Caracterele de spațiu sunt permise în jurul valorilor numerice.
Vlad Merjevici
În HTML, o culoare este specificată în unul din două moduri: folosind un cod hexazecimal și prin numele unor culori. Metoda bazată pe sistemul numeric hexazecimal este utilizată în principal, ca fiind cea mai universală.
Culori hexazecimale
Numerele hexazecimale sunt folosite pentru a specifica culorile în HTML. Sistemul hexazecimal, spre deosebire de sistemul zecimal, se bazează, după cum sugerează și numele, pe numărul 16. Numerele vor fi după cum urmează: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 , A, B, C , D, E, F. Numerele de la 10 la 15 sunt înlocuite cu litere latine. Masa 6.1 arată corespondența dintre numerele zecimale și hexazecimale.
Numerele mai mari de 15 în sistemul hexazecimal sunt formate prin combinarea a două numere într-unul singur (Tabelul 6.2). De exemplu, 255 zecimale este FF hexazecimal.
Pentru a evita confuzia în definiția sistemului numeric, caracterul hash # este plasat în fața numărului hexazecimal, de exemplu # aa69cc. În acest caz, registrul nu contează, deci este permis să scrieți # F0F0F0 sau # f0f0f0.
O culoare tipică folosită în HTML arată astfel.
Aici, culoarea de fundal a paginii web este setată la # FA8E47. Simbolul hash # în fața unui număr înseamnă că este hexazecimal. Primele două cifre (FA) definesc componenta roșie a culorii, a treia până la a patra cifre (8E) sunt verzi, iar ultimele două cifre (47) sunt albastre. Drept urmare, obțineți această culoare.
| FA | + | 8E | + | 47 | = | FA8E47 |
Fiecare dintre cele trei culori - roșu, verde și albastru - poate lua valori de la 00 la FF, rezultând 256 de nuanțe. Astfel, numărul total de culori poate fi 256x256x256 = 16.777.216 combinații. Modelul de culoare bazat pe componente roșu, verde și albastru se numește RGB (roșu, verde, albastru; roșu, verde, albastru). Acest model este aditiv (de la add - to add), în care adăugarea tuturor celor trei componente formează o culoare albă.
Pentru a facilita navigarea în culori hexazecimale, luați în considerare câteva reguli.
- Dacă valorile componentelor de culoare sunt aceleași (de exemplu: # D6D6D6), atunci obțineți o nuanță gri. Cu cât numărul este mai mare, cu atât culoarea este mai deschisă, valorile variază de la # 000000 (negru) la #FFFFFF (alb).
- O culoare roșie aprinsă se formează dacă componenta roșie este setată la maxim (FF), iar restul componentelor sunt setate la zero. Culoarea # FF0000 este cea mai roșie nuanță roșie posibilă. La fel este și cazul verde (# 00FF00) și albastru (# 0000FF).
- Galbenul (#FFFF00) se obține prin amestecarea roșului cu verdele. Acest lucru este clar vizibil pe roata culorilor (Fig. 6.1), unde sunt prezentate culorile primare (roșu, verde, albastru) și culorile complementare sau complementare. Acestea includ galben, cyan și violet (numit și magenta). În general, orice culoare poate fi obținută prin amestecarea culorilor din apropiere. Deci, cyan (# 00FFFF) se obține prin combinarea albastrului și verdelui.
Orez. 6.1. Cercul de culoare
Culorile hexazecimale nu trebuie să fie alese empiric. În acest scop, un editor grafic care poate lucra cu diferite modele de culoare este potrivit, de exemplu, Adobe Photoshop. În fig. 6.2 arată o fereastră pentru alegerea unei culori în acest program, valoarea hexazecimală rezultată a culorii curente este conturată cu o linie. Îl puteți copia și lipi în codul dvs.
Orez. 6.2. Fereastra de selecție a culorilor în Photoshop
Culori web
Dacă setați calitatea culorii monitorului la 8 biți (256 de culori), atunci aceeași culoare poate fi afișată diferit în browsere diferite. Acest lucru se datorează modului în care sunt afișate graficele, în care browserul lucrează cu propria paletă și nu poate afișa o culoare pe care nu o are în paletă. În acest caz, culoarea este înlocuită cu o combinație de pixeli de alte culori, apropiate acesteia, care o imită pe cea specificată. Pentru a păstra culoarea neschimbată în diferite browsere, am introdus o paletă de așa-numitele culori web. Culorile web sunt acele culori, pentru fiecare componentă a cărora - roșu, verde și albastru - este setată una dintre cele șase valori - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC). ), 255 (FF). Parantezele indică valoarea hexazecimală a acestei componente. Numărul total de culori din toate combinațiile posibile dă 6x6x6 - 216 culori. Un exemplu de culoare web este # 33FF66.
Caracteristica principală a culorii web este că apare la fel în toate browserele. În momentul de față, relevanța culorilor web este foarte mică datorită creșterii calității monitoarelor și extinderii capacităților acestora.
Culori după nume
Pentru a nu memora un set de numere, puteți folosi în schimb numele culorilor utilizate în mod obișnuit. Masa 6.3 listează numele numelor de culori populare.
| Nume culoare | Culoare | Descriere | Valoare hexazecimală |
|---|---|---|---|
| negru | Negru | #000000 | |
| albastru | Albastru | # 0000FF | |
| fucsie | violet deschis | # FF00FF | |
| gri | Gri inchis | #808080 | |
| verde | Verde | #008000 | |
| lămâie verde | Verde deschis | # 00FF00 | |
| maro | Roșu-închis | #800000 | |
| marina | albastru marin | #000080 | |
| măsline | măsline | #808000 | |
| Violet | Violet închis | #800080 | |
| roșu | roșu | # FF0000 | |
| argint | Gri deschis | # C0C0C0 | |
| teal | Albastru verde | #008080 | |
| alb | alb | #FFFFFF | |
| galben | Galben | # FFFF00 |
Nu contează în ce fel specificați culoarea - după numele ei sau folosind numere hexazecimale. Aceste metode sunt egale în acțiunea lor. Exemplul 6.1 arată cum să setați culoarea de fundal și a textului unei pagini web.
Exemplul 6.1. Culoare de fundal și text
Text mostră
În acest exemplu, culoarea de fundal este setată folosind atributul bgcolor al etichetei
, iar culoarea textului prin atributul text. Pentru o modificare, atributul text este setat la un număr hexazecimal, iar bgcolor este setat la cuvântul cheie rezervat teal.Trucuri Minecraft flori, sau Minecraft coduri formatare, permite oricărui jucător să adauge flori și să formateze textul în orice fel, chiar în Minecraft. Coduri de culoare& 0-9 - la & a-f. Adăugați-le în fața textului dvs. Mesajele jucătorului pot conține coduri de culoare care vă permit să adăugați vopsea la sugestiile dvs.
Ampersand (&) urmat de un număr hexazecimal în mesaje semnalează clientului să schimbe culorile atunci când afișează text. Alternativ, textul poate fi formatat cu caracterul & urmată de o scrisoare. Puteți adăuga diferite culori la cărți, blocuri de comandă, numele serverului, descrierea serverului ( motd), în numele lumilor, în tablete și chiar în nume jucători.
Este foarte ușor să formatați textul în configurații sau în joc folosind tabelul de culori de mai jos. & r este folosit pentru a șterge toate codurile, de exemplu. & mAAA & rBBB vor fi afișate ca AAA BBB.
Tabelul codurilor de culori
| Cod | Nume | Denumirea tehnică | Culoarea simbolului | Culoarea umbrei simbolului | ||||||
|---|---|---|---|---|---|---|---|---|---|---|
| R | G | B | Hex | R | G | B | Hex | |||
| &0 | Negru | negru | 0 | 0 | 0 | 000000 | 0 | 0 | 0 | 000000 |
| &1 | albastru marin | albastru inchis | 0 | 0 | 170 | 0000AA | 0 | 0 | 42 | 00002A |
| &2 | Verde inchis | verde inchis | 0 | 170 | 0 | 00AA00 | 0 | 42 | 0 | 002A00 |
| &3 | Verde albastru închis | dark_aqua | 0 | 170 | 170 | 00AAAA | 0 | 42 | 42 | 002A2A |
| &4 | Roșu-închis | roșu-închis | 170 | 0 | 0 | AA0000 | 42 | 0 | 0 | 2A0000 |
| &5 | Violet închis | violet închis | 170 | 0 | 170 | AA00AA | 42 | 0 | 42 | 2A002A |
| &6 | Aur | aur | 255 | 170 | 0 | FFAA00 | 42 | 42 | 0 | 2A2A00 |
| &7 | gri | gri | 170 | 170 | 170 | AAAAAA | 42 | 42 | 42 | 2A2A2A |
| &8 | Gri inchis | gri închis | 85 | 85 | 85 | 555555 | 21 | 21 | 21 | 151515 |
| &9 | Albastru | albastru | 85 | 85 | 255 | 5555FF | 21 | 21 | 63 | 15153F |
| & A | Verde | verde | 85 | 255 | 85 | 55FF55 | 21 | 63 | 21 | 153F15 |
| & b | Albastru verde | acva | 85 | 255 | 255 | 55FFFF | 21 | 63 | 63 | 153F3F |
| & c | roșu | roșu | 255 | 85 | 85 | FF5555 | 63 | 21 | 21 | 3F1515 |
| & d | violet deschis | violet_deschis | 255 | 85 | 255 | FF55FF | 63 | 21 | 63 | 3F153F |
| & e | Galben | galben | 255 | 255 | 85 | FFFF55 | 63 | 63 | 21 | 3F3F15 |
| & f | alb | alb | 255 | 255 | 255 | Fffffff | 63 | 63 | 63 | 3F3F3F |
Formatarea tabelului de coduri
Uneori ai nevoie subliniază, tăiați, pune in evidenta orice text... Pentru aceasta, se folosește formatarea textului. Se folosește la fel ca și culorile (în fața textului pe care l-am pus cod de exemplu & lMinecraft = Minecraft.
Există mai multe moduri de a reprezenta culoarea în design web.
HEX este un sistem de reprezentare a culorilor hexazecimală de bază 16. Pentru acest sistem, sunt folosite cifre zecimale arabe de la 0 la 9 și litere latine de la A la F pentru a completa numărul digital la 16. Pentru design web, sunt luate 16 culori de bază (cheie). , așa-numitul cod de culoare hexazecimal #RRGGBB, unde fiecare pereche este responsabilă pentru cota sa de culoare: RR - roșu, GG - verde și BB - albastru. Fiecare fracțiune de culoare variază de la 00 la FF.
Alte două reprezentări ale culorii în design web sunt: sub formă de RGB (*, *, *), unde fiecare fracțiune de culoare „*” este reprezentată prin cifre zecimale de la 0 la 255 și prin nume de culori în limba engleză.
La crearea unei imagini color, principala problemă este redarea corectă a culorilor pe diferite tipuri de computere, monitoare și browsere. Dacă browserul nu poate afișa corect o culoare, atunci preia una similară sau amestecă mai multe culori. Și uneori poate fi înlocuit cu o culoare complet diferită.
masa 16 culori primare care sunt utilizate în toate browserele
| Nume | Culoare | Hex | (RGB) |
| Aqua (valul mării) | # 00FFFF | (000,255,255) | |
| negru (negru) | #000000 | (000,000,000) | |
| Albastru | # 0000FF | (000,000,255) | |
| fucsia (fucsin) | # FF00FF | (255,000,255) | |
| gri (gri) | #808080 | (128,128,128) | |
| verde (verde) | #008000 | (000,128,000) | |
| Tei (verde aprins) | # 00FF00 | (000,255,000) | |
| maro (maroon) | #800000 | (128,000,000) | |
| Bleumarin (albastru marin) | #000080 | (000,000,128) | |
| măsline (măsline) | #808000 | (128,128,000) | |
| Violet | #800080 | (128,000,128) | |
| roșu (roșu) | # FF0000 | (255,000,000) | |
| Argint (argint) | # C0C0C0 | (192,192,192) | |
| Teal (gri-verde) | #008080 | (000,128,128) | |
| alb (alb) | #FFFFFF | (255,255,255) | |
| galben (galben) | # FFFF00 | (255,255,000) |
masa Violet culori si nuante
| Nume | Culoare | Hex | (RGB) |
| Magenta (magenta) | #FFCBDB | (255,203,219) | |
| Magenta (magenta) | # FF0099 | (255,000,153) | |
| Magenta (magenta) | # F95A61 | (249,090,097) | |
| fucsia (fucsia) | # FF00FF | (255,000,255) | |
| Movein (violet anilină) | # EF0097 | (239,000,151) | |
| Roz somon (roz portocaliu) | # FF91A4 | (255,145,164) | |
| Cenise (o nuanță de magenta) | # DE3163 | (153,149,140) | |
| vinete vinete (vinete) | #990066 | (153,000,132) | |
| Blush de lavandă (lavandă roz) | & nbsp # FFF0F5 | (255,240,245) | |
| liliac (liliac) | # C8A2C8 | (200,162,200) | |
| Magenta (magenta) | # FF008F | (255,000,143) | |
| orhidee (orhidee) | # DA70D6 | (218,112,214) | |
| Roșu-violet | # C71585 | (199,021,133) | |
| Sanguin (sangvin) | # 92000A | (146,000,010) | |
| Ciulin (nuanță de magenta) | # D8BFD8 | (185,211,238) | |
| Violet-vinete (nuanță de violet) | #991199 | (153,017,153) | |
| Rosa vivo (roz intens) | # FF007F | (255,000,127) | |
| Lavandă-trandafir (nuanță de violet) | # FBA0E3 | (108,123,139) | |
| Mountbatten roz | # 997ABD | (153,122,141) |
masa gri culori si nuante
| Nume | Culoare | Hex | (RGB) |
| gri | #808080 | (128,128,128) | |
| gri | #bebebe | (190,190,190) | |
| (nuanță gri) | #858585 | (133,133,133) | |
| Gri33 (Gray-33) | #545454 | (084,084,084) | |
| (Ardezie gri) | #708090 | (112,128,144) | |
| (Cuarţ) | # 99958с | (153,149,140) | |
| (Gri deschis) | #bbbbbb | (187,187,187) | |
| (Argint) | # c0c0c0 | (192,192,192) | |
| (gri-alb) | # f0f0f0 | (240,240,240) | |
| (Barba lui Abdel-Kerim) | # e0e0e0 | (224,224,224) | |
| Gri deschis (gri deschis) | # d3d3d3 | (211,211,211) | |
| LightStateGray () | #778899 | (119,136,153) | |
| StateGray-1 (albastru pal de floarea de colț1) | # c6e2ff | (198,226,255) | |
| StateGray-2 (albastru pal de floarea de colț2) | # b9d3ee | (185,211,238) | |
| StateGray3 () | # 9fb6cd | (159,182,205) | |
| StateGray4 () | # 6c7b8b | (108,123,139) |
Numerele hexazecimale sunt folosite pentru a seta culorile. Sistemul hexazecimal, spre deosebire de sistemul zecimal, se bazează, după cum sugerează și numele, pe numărul 16. Numerele vor fi după cum urmează: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 , A, B, C , D, E, F. Numerele de la 10 la 15 sunt înlocuite cu litere latine. Numerele mai mari de 15 în hexazecimal sunt formate prin combinarea a două numere într-unul singur. De exemplu, 255 zecimale este egal cu FF hexazecimal. Pentru a evita confuzia în definiția sistemului numeric, simbolul hash # este plasat în fața numărului hexazecimal, de exemplu # 666999. Fiecare dintre cele trei culori - roșu, verde și albastru - poate varia de la 00 la FF. Astfel, desemnarea culorii este împărțită în trei componente #rrggbb, unde primele două caractere marchează componenta roșie a culorii, cele două din mijloc - verde, iar ultimele două - albastru. Este permisă utilizarea unei forme prescurtate precum #rgb, unde fiecare caracter ar trebui să fie dublat. Deci, intrarea # fe0 ar trebui tratată ca #ffee00.
Dupa nume
| Internet Explorer | Crom | Operă | Safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Browserele acceptă unele culori după nume. Masa 1 arată numele, codul hexazecimal, RGB, valorile HSL și descrierea.
| Nume | Culoare | Cod | RGB | Hsl | Descriere |
|---|---|---|---|---|---|
| alb | #ffffff sau #fff | rgb (255.255.255) | hsl (0,0%, 100%) | alb | |
| argint | # c0c0c0 | rgb (192.192.192) | hsl (0,0%, 75%) | gri | |
| gri | #808080 | rgb (128.128.128) | hsl (0,0%, 50%) | Gri inchis | |
| negru | # 000000 sau # 000 | rgb (0,0,0) | hsl (0,0%, 0%) | Negru | |
| maro | #800000 | rgb (128,0,0) | hsl (0,100%, 25%) | Roșu-închis | |
| roșu | # ff0000 sau # f00 | rgb (255,0,0) | hsl (0,100%, 50%) | roșu | |
| portocale | # ffa500 | rgb (255.165,0) | hsl (38,8.100%, 50%) | portocale | |
| galben | # ffff00 sau # ff0 | rgb (255.255.0) | hsl (60.100%, 50%) | Galben | |
| măsline | #808000 | rgb (128.128.0) | hsl (60.100%, 25%) | măsline | |
| lămâie verde | # 00ff00 sau # 0f0 | rgb (0,255,0) | hsl (120.100%, 50%) | Verde deschis | |
| verde | #008000 | rgb (0,128,0) | hsl (120.100%, 25%) | Verde | |
| acva | # 00ffff sau # 0ff | rgb (0.255.255) | hsl (180.100%, 50%) | Albastru | |
| albastru | # 0000ff sau # 00f | rgb (0,0,255) | hsl (240.100%, 50%) | Albastru | |
| marina | #000080 | rgb (0,0,128) | hsl (240.100%, 25%) | albastru marin | |
| teal | #008080 | rgb (0.128.128) | hsl (180.100%, 25%) | Albastru verde | |
| fucsie | # ff00ff sau # f0f | rgb (255,0,255) | hsl (300.100%, 50%) | Roz | |
| Violet | #800080 | rgb (128,0,128) | hsl (300.100%, 25%) | Violet |
Cu RGB
| Internet Explorer | Crom | Operă | Safari | Firefox | Android | iOS |
| 5.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Puteți determina culoarea folosind valorile zecimale ale componentelor roșii, verzi și albastre. Fiecare dintre cele trei componente de culoare ia o valoare de la 0 la 255. De asemenea, este permisă setarea culorii ca procent, în timp ce 100% va corespunde numărului 255. În primul rând, este specificat cuvântul cheie rgb, iar apoi în paranteze, sunt indicate componentele de culoare, separate prin virgule, de exemplu rgb (255, 128, 128) sau rgb (100%, 50%, 50%).
RGBA
| Internet Explorer | Crom | Operă | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Formatul RGBA este similar ca sintaxă cu RGB, dar include un canal alfa care controlează transparența elementului. O valoare de 0 corespunde transparenței totale, 1 opacității și o valoare intermediară, cum ar fi 0,5, semi-transparenței.
RGBA a fost adăugat în CSS3, așa că validarea codului CSS ar trebui făcută folosind această versiune. Trebuie remarcat faptul că standardul CSS3 este încă în curs de dezvoltare și unele caracteristici se pot schimba. De exemplu, o culoare RGB adăugată la proprietatea culoare de fundal este validată, dar o culoare adăugată la proprietatea de fundal nu mai. În același timp, browserele înțeleg destul de corect culoarea pentru ambele proprietăți.
Hsl
| Internet Explorer | Crom | Operă | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Numele formatului HSL este format dintr-o combinație a primelor litere Hue (nuanță), Saturate (saturație) și Lightness (luminozitate). Nuanța este valoarea unei culori pe roata culorilor (Fig. 1) și este dată în grade. 0 ° este roșu, 120 ° este verde și 240 ° este albastru. Valoarea nuanței poate varia de la 0 la 359.
Orez. 1. Roata de culori
Saturația este intensitatea unei culori, măsurată ca procent de la 0% la 100%. O valoare de 0% indică nicio culoare și o nuanță de gri, 100% este valoarea maximă de saturație.
Luminozitatea stabilește cât de strălucitoare este culoarea și este indicată ca procent de la 0% la 100%. Valorile scăzute fac culoarea mai închisă, iar valorile ridicate se deschid, valorile extreme de 0% și 100% corespund alb-negru.
HSLA
| Internet Explorer | Crom | Operă | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Formatul HSLA este similar ca sintaxă cu HSL, dar include un canal alfa care stabilește transparența elementului. O valoare de 0 corespunde transparenței totale, 1 opacității și o valoare intermediară, cum ar fi 0,5, semi-transparenței.
Valorile de culoare în formatele RGBA, HSL și HSLA au fost adăugate în CSS3, așa că asigurați-vă că verificați validitatea versiunii atunci când utilizați aceste formate.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Un avertisment
Toate metodele de prindere a leului enumerate pe site sunt teoretice și se bazează pe metode de calcul. Autorii nu vă garantează siguranța atunci când le utilizați și își declină orice responsabilitate pentru rezultat. Amintiți-vă, leul este un prădător și un animal periculos!
Rezultatul acestui exemplu este prezentat în Fig. 2.
Orez. 2. Culori pe pagina web
