Kodi RGB për ngjyrën e kuqe është shkruar si. Vendosja e ngjyrës së tekstit në CSS

Në pjesën e parë të librit, ne kemi demonstruar tashmë në disa shembuj se si të vendosni ngjyrën e tekstit në CSS. Nuk ka asgjë të komplikuar këtu: do t'ju duhet vetia e ngjyrës dhe vlera e ngjyrës me të cilën dëshironi të ngjyrosni tekstin.

P (ngjyra: #211C18; )

Në shembullin tonë, vlera #211C18 përfaqëson kodin heksadecimal të ngjyrave. Nëse tashmë jeni njohur me sistemin e numrave heksadecimal, mund të kaloni leximin e paragrafit tjetër. Ne gjithashtu do të flasim më tej për mënyra të tjera për të paraqitur ngjyrat në ueb - duke përdorur modele ngjyrash (RGB, HSL) dhe fjalë kyçe. Ky informacion do të jetë i dobishëm për fillestarët dhe rekomandohet të lexohet.

Ngjyrat heksadecimal (heks)

Sistemi i numrave heksadecimal ( heksadecimal, heks) bazohet në numrin 16. Për të shkruar një vlerë heksadecimal, përdoren 16 karaktere: numrat arabë nga 0 deri në 9 dhe shkronjat e para të alfabetit latin (A, B, C, D, E, F). Ngjyra në format heksadecimal shkruhet si tre numra dyshifrorë nga 00 në FF (ato duhet të paraprihen nga një simbol hash #), i cili korrespondon me tre komponentë: Kuqe, Jeshile, Blu (modeli i ngjyrave RGB). Me fjalë të tjera, një hyrje me ngjyra mund të përfaqësohet si #RRGGBB, ku çifti i parë i karaktereve përcakton nivelin e kuq, i dyti - nivelin e gjelbër dhe i treti - nivelin blu. Ngjyra që rezulton është një kombinim i këtyre tre ngjyrave.

Shënim i shkurtër për ngjyrat heks

Disa vlera heksadecimal të ngjyrave mund të shkruhen me shkurtesa. Për ta bërë këtë, kthejeni hyrjen si #RRGGBB në #RGB. Kjo mund të bëhet kur numri hex përmban tre palë karaktere identike.

Forma e shkurtuar e shënimit është mjaft e zakonshme, dhe për referencën tuaj ne do të ofrojmë disa shembuj të shkurtesave. Nga rruga, vlerat e ngjyrave gjashtëkëndore nuk janë të ndjeshme - mund të përdorni shkronja të mëdha dhe të vogla, gjithçka varet nga dëshira dhe shija juaj.

Shembuj të shënimeve të shkurtuara për ngjyrat hex:

Modeli i ngjyrave RGB

Mënyra e dytë për të specifikuar ngjyrat në CSS është përdorimi i vlerave dhjetore RGB (E kuqe, Blu, Jeshile). Për ta bërë këtë, duhet të shkruani fjalën kyçe rgb pas veçorisë së ngjyrës, dhe më pas në kllapa dhe të ndara me presje - tre numra në rangun nga 0 në 255, secila prej të cilave nënkupton intensitetin e ngjyrave të kuqe, jeshile dhe blu (r , g, b). Si numër më i madh, aq më intensive është ngjyra. Për shembull, për të marrë një ngjyrë të gjelbër të ndritshme, duhet të shkruani:

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

Por nuanca e verdhë-mustardë ka kuptimin e mëposhtëm:

Ngjyra: rgb(94, 81, 3); /* më poshtë është e njëjta ngjyrë, e shkruar në heksadecimal: */ ngjyra: #5E5103;

Vlera për të zezën shkruhet si (0, 0, 0) dhe për të bardhën si (255, 255, 255). Është gjithashtu e mundur të tregohen këto vlera si përqindje. Pra, numri 255 korrespondon me 100%, pra, Ngjyra e bardhë mund të vendoset si më poshtë:

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

Ku të kërkoni kuptimet e ngjyrave

Ndoshta keni një pyetje: ku i merrni gjithë këto kuptime ngjyrash? Ka shume redaktorët grafikë dhe shërbime online me të cilat mund të zgjidhni ngjyrat dhe të ndërtoni skema ngjyrash. Një nga programet më të njohura në të cilin mund të zgjidhni një ngjyrë të përshtatshme dhe të merrni RGB-në e saj, vlerën hex dhe më shumë - Adobe Photoshop. Si alternativë, ka faqe të veçanta ku mund të zgjidhni lehtësisht jo vetëm një ngjyrë, por edhe një skemë të tërë ngjyrash. Një shembull i shkëlqyer është shërbimi Adobe Color CC.

Modeli i ngjyrave RGBA

Ju mund të vendosni një ngjyrë në formatin RGBA në të njëjtën mënyrë si në RGB. Dallimi midis RGBA dhe RGB është prania e një kanali alfa, i cili është përgjegjës për transparencën e ngjyrës. Transparenca vendoset duke përdorur një numër që varion nga 0 në 1, ku 0 është plotësisht transparente dhe 1 është plotësisht e errët. Vlerat e ndërmjetme si 0.5 ju lejojnë të vendosni një pamje të tejdukshme (lejohet shënimi i shkurtuar, pa zero, por me një pikë - 0,5). Për shembull, për ta bërë tekstin me ngjyrë dhe pak transparent, duhet të shkruani fjalën kyçe rgba dhe vlerën e ngjyrës pas veçorisë së ngjyrës:

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

Disavantazhi i RGBA është se nuk mbështet Shfletuesi i internetit Versionet e Explorer 8 dhe më herët. Sidomos për IE8, mund të aplikoni zgjidhjen e mëposhtme:

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

Vetia e parë në shembull është menduar për shfletuesin IE8, i cili do të shfaqë tekstin në ngjyrën e dëshiruar, por pa transparencë. Dhe ata shfletues që kuptojnë RGBA do të aplikojnë veçorinë e dytë në element, me transparencë.

Modelet e ngjyrave HSL (HSLA).

Ju gjithashtu mund të vendosni ngjyrën në CSS duke përdorur koordinatat e modelit të ngjyrave HSL (Hue, Saturation, Lightness). Është shkruar kështu:

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

Numri i parë në kllapa do të thotë nuancë dhe jepet në gradë (vargu i numrave nga 0 në 359). Do të jetë e lehtë për të kuptuar pse përdoren shkallët nëse mbani mend se si duket rrota e ngjyrave:

Numrat e dytë dhe të tretë në kllapa nënkuptojnë respektivisht ngopje dhe lehtësi. Vlerat e tyre vendosen në përqindje nga 0 në 100. Sa më e ulët të jetë vlera e ngopjes, aq më e heshtur bëhet ngjyra. Një vlerë e ngopjes zero do të rezultojë në një ngjyrë gri, pavarësisht se cila është vlera e nuancës. Vlera e butësisë ju lejon të specifikoni shkëlqimin e ngjyrës. Vlerat e ulëta rezultojnë në nuanca të errëta të ngjyrave, vlerat e larta rezultojnë në nuanca të lehta. Një vlerë prej 100% për lehtësinë do të thotë e bardhë, 0% do të thotë e zezë.

Modeli i ngjyrave HSLA funksionon pothuajse njësoj si HSL, por, i ngjashëm me RGBA, ai ka një kanal alfa me të cilin mund të vendosni transparencën e ngjyrës, duke specifikuar vlerën e dëshiruar në rangun nga 0 në 1:

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

HSL dhe HSLA mbështeten nga të gjithë shfletuesit përveç Internet Explorer versionet 8 dhe më të hershme.

Ngjyrat standarde HTML

Një mënyrë tjetër për të paraqitur ngjyrat në ueb është përmes fjalëve kyçe, të cilat mund të përdoren për të specifikuar një ngjyrë për një element. Shembull:

P (ngjyra: e zezë;)

Janë 16 ngjyra standarde që mund të shkruhen në vlerën e vetive të ngjyrës:

Këto ngjyra mbështeten nga të gjithë shfletuesit. Përveç këtyre, ka rreth 130 fjalë kyçe shtesë për nuanca të ndryshme ngjyrash. Një tabelë e plotë e këtyre ngjyrave mund të shihet në librin e referencës së W3C.

Përdorimi i fjalë kyçe të tilla është i pranueshëm, por ekziston rreziku që ndonjë fjalë të mos pranohet nga shfletuesi. Prandaj, rekomandohet të shkruani kodin heksadecimal të ngjyrave në vend të fjalëve kyçe.

Rezultatet

NË Ngjyra CSS teksti specifikohet duke përdorur veçorinë e ngjyrës dhe vlera e tij mund të shkruhet në disa mënyra - në format heksadecimal (hex), në format RGB ose HSL, ose duke specifikuar një fjalë kyçe. Për të shmangur shfaqjen e gabuar të një ngjyre të specifikuar duke përdorur një fjalë kyçe, është më mirë të specifikoni vlerën e saj hex.

Është gjithashtu e mundur të vendosni transparencën e elementit duke përdorur një kanal alfa (formatet RGBA dhe HSLA). Duhet të kihet parasysh se shfletuesi IE8 dhe i tij versionet e hershme nuk mbështesin formatet RGBA, HSL dhe HSLA.

Në këtë artikull do të njihemi me aftësitë e HTML dhe CSS për të ndryshuar ngjyrën e tekstit në faqet e internetit. Do të merren parasysh disa opsione. Për secilin rast individual, metoda e tij specifike është e përshtatshme.

Për të filluar, vërejmë se të gjitha ngjyrat mund të specifikohen në tre formate:

• Emri i ngjyrës (e kuqe, blu, jeshile, etj.)
• Format heksadecimal (#104A00, #0F0, etj.)
• format rgba(rgba(0,0,0,0.5), etj.)

Faqja jonë e internetit paraqet paletën e plotë dhe emrat e ngjyrave html për faqen, ku mund të zgjidhni ngjyrën e duhur.

Metoda 1. Me anë të etiketës html