Dizajni i mirë tipografik është një pjesë e rëndësishme e një faqe interneti të suksesshme. CSS ju jep kontroll të madh mbi paraqitjen e tekstit në faqet e uebit të faqeve web që ndërtuat. Kjo përfshin aftësinë për të ndryshuar ngjyrën e çdo font që përdorni.
Ngjyrat e shkronjave mund të ndryshohen duke përdorur një fletë të stilit të jashtëm , një fletë të brendshme të stilit , ose mund të ndryshohet duke përdorur styling inline brenda dokumentit HTML. Praktikat më të mira diktojnë që ju duhet të përdorni një fletë të stilit të jashtëm për stilet tuaja CSS. Një fletë e stilit të brendshëm, që janë stile të shkruara drejtpërdrejt në "kokën" e dokumentit tuaj, zakonisht përdoren vetëm për faqet e vogla, një faqe. Stilet inline duhet të shmangen pasi ato janë të ngjashme me etiketat e vjetra "font" që kemi trajtuar shumë vite më parë. Këto stile inline e bëjnë shumë të vështirë për të menaxhuar stilin e shkrimit sepse ju do të duhet të ndryshoni ato në çdo rast të stilit inline.
Në këtë artikull, do të mësosh si ta ndryshosh ngjyrën e shkrimit duke përdorur një fletë të stilit të jashtëm dhe një stil që përdoret në një etiketë paragrafi. Ju mund të aplikoni të njëjtën pronë stili për të ndryshuar ngjyrën e shkronjave në çdo tag që rrethon tekstin, duke përfshirë tagun
.Shtimi i stileve për të ndryshuar ngjyrën e shkrimit
Për këtë shembull, do të duhet të keni një dokument HTML për shënimin e faqes tuaj dhe një skedar të veçantë CSS që është i bashkangjitur në atë dokument. Dokumenti HTML ka gjasa të bëjë një numër elementesh në të. Ajo për të cilën jemi të shqetësuar për qëllimin e këtij artikulli është elementi i paragrafit.
Këtu është se si të ndryshoni ngjyrën e shkronjave të tekstit brenda paragrafëve të paragrafëve duke përdorur fletën tuaj të jashtme të stilit.
Vlerat e ngjyrave mund të shprehen si fjalë kyçe me ngjyra, numra RGB të ngjyrave ose numra heksadecimal të ngjyrave.
- Shto atributin e stilit për tag paragrafin:
- p {}
- Vendosni pronësinë e ngjyrës në stilin. Vendosni një zorrës së trashë pas asaj pasurie:
- p {color:}
- Pastaj shtoni vlerën tuaj të ngjyrës pas pronës. Sigurohuni që ta përfundoni atë vlerë me një gjysëm zorrës së trashë:
- p {color: black;}
Paragrafët në faqen tuaj tani do të jenë të zeza.
Ky shembull përdor një fjalë me ngjyra - "e zezë". Kjo është një mënyrë për të shtuar ngjyrën në CSS, por është shumë e kufizuar. Përdorimi i fjalë kyçe për "të zezë" dhe "të bardhë" është i drejtpërdrejtë pasi që këto dy ngjyra janë shumë specifike, por çfarë ndodh nëse përdorni fjalë kyçe si "të kuqe", "blu" apo "të gjelbërta"? Saktësisht se çfarë hije të kuqe, blu apo të gjelbër do të merrni? Ju nuk mund të specifikoni saktësisht se cila hije me ngjyra ju dëshironi me fjalë kyçe. Kjo është arsyeja pse vlerat hexadecimal shpesh përdoren në vend të fjalë kyçe me ngjyra.
p {color: # 000000; }
Ky stil CSS gjithashtu do të vendosë ngjyrën e paragrafëve tuaj në të zezë, sepse kodi i hekurt i # 000000 përkthehet në të zezë. Ju mund të përdorni edhe stenografi me atë vlerë magjike dhe shkruani atë si vetëm # 000 dhe ju do të merrni të njëjtën gjë.
Siç kemi përmendur tashmë, vlerat e magjishme punojnë mirë kur keni nevojë për një ngjyrë që nuk është thjesht e zezë ose e bardhë. Këtu është një shembull:
p {color: # 2f5687; }
Kjo vlerë hex do t'i vendoste paragrafët në një ngjyrë blu, por ndryshe nga fjalia "blu", ky kod magjik ju jep mundësinë për të vendosur një hije shumë specifike të ngjyrës blu - ndoshta ajo që projektuesi zgjedh kur ata po krijonin ndërfaqen për këtë faqe interneti. Në këtë rast, ngjyra do të ishte një bluzë e mesme, me ngjyrë blu.
Së fundmi, mund të përdorni edhe vlerat e ngjyrave të RGBA për ngjyrat e shkronjave. RGCA tani mbështetet në të gjithë shfletuesit modern, kështu që ju mund t'i përdorni këto vlera me pak shqetësim se nuk do të mbështetet në një shfletues interneti, por gjithashtu mund të vendosni një lehtësim të lehtë.
p {ngjyra: rgba (47,86,135,1); }
Kjo vlerë RGBA është e njëjtë me ngjyrën e propozuar blu të specifikuar më herët. Vlerat e para 3 përcaktojnë vlerat e kuqe, të gjelbër dhe blu dhe numri përfundimtar është përcaktimi alfa. Është vendosur në "1", që do të thotë "100%", kështu që kjo ngjyrë nuk do të kishte transparencë. Nëse e vendosni atë në një numër dhjetor, si .85, do të përkthehej në 85% perde dhe ngjyra do të ishte pak transparente.
Nëse dëshironi t'i kundërvihen vlerave tuaja të ngjyrave, do ta bëni këtë:
p {
ngjyra: # 2f5687;
ngjyra: rgba (47,86,135,1);
}
Kjo sintaksë e vendos kodin e parë magjik. Ai pastaj e mbivendos atë vlerë me numrin RGBA. Kjo do të thotë se çdo shfletues i vjetër që nuk e mbështet RGBA do të merrte vlerën e parë dhe do të injoronte të dytin. Shfletuesit modern do të përdorin të dytin për kaskadën e CSS.