Dobro tipografsko oblikovanje je pomemben del uspešne spletne strani. CSS vam daje velik nadzor nad pojavom besedila na spletnih straneh spletnih strani, ki jih gradite. To vključuje tudi možnost, da spremenite barvo pisav, ki jih uporabljate.
Barve pisav lahko spremenite z zunanjim slogovnim listom , notranjim slogovnim listom ali pa ga lahko spremenite z inline stylingom v dokumentu HTML. Najboljše prakse narekujejo, da bi morali uporabiti zunanji slogovni list za svoje sloge CSS. Notranji slogovni list, ki je slog, napisan neposredno v "glavi" dokumenta, se običajno uporablja samo za majhna spletna mesta na eni strani. V slogovnih slogih se je treba izogibati, saj so podobni starejšim "pisavam" oznak, s katerimi smo se ukvarjali pred mnogimi leti. Zaradi teh vrstic stilov je zelo težko upravljati slog pisave, saj bi jih morali spremeniti v vsakem primeru inline sloga.
V tem članku boste izvedeli, kako spremeniti barvo pisave z uporabo zunanjega slognega lista in sloga, ki se uporablja v oznaki odstavka. Za isto slogovno lastnost lahko uporabite barvo pisave na kateri koli oznaki, ki obkroža besedilo, vključno z oznako
.Dodajanje slogov za spreminjanje barve pisave
V tem primeru bi morali imeti dokument HTML za oznako strani in ločeno datoteko CSS, ki je priložena temu dokumentu. Dokument HTML bi verjetno sestavil več elementov v njem. Tega, ki nas zanima za namen tega člena, je element odstavka.
Tukaj je, kako spremeniti barvo pisave besedila v oznakah odstavka z uporabo zunanjega slogovnega lista.
Barvne vrednosti se lahko izrazijo kot barvne ključne besede, barvne številke RGB ali šestnajstiške barvne številke.
- Dodajte atribut sloga za oznako odstavka:
- p {}
- Postavite barvo v slog. Za to lastnost postavite dvopičje:
- p {barva:}
- Nato dodajte svojo barvno vrednost po znamki. Prepričajte se, da to vrednost zaključite s podčetno številko:
- p {barva: črna;}
Strani na vaši strani bodo zdaj črne.
Ta primer uporablja barvno ključno besedo - »črna«. To je eden od načinov za dodajanje barve v CSS, vendar je zelo omejujoč. Uporaba ključnih besed za črno in belo je preprosta, saj sta ti dve barvi zelo specifični, a kaj se zgodi, če uporabljate ključne besede, kot so "rdeča", "modra" ali "zelena"? Točno, kakšen odtenek rdečega, modrega ali zelenega boste dobili? S ključnimi besedami ne morete natančno določiti barvnega odtenka. Zato se namesto barvnih ključnih besed pogosto uporabljajo šestnajstiške vrednosti.
p {barva: # 000000; }
Ta slog CSS bi tudi barvo vaših odstavkov nastavil v črno, ker šestnajstiška koda # 000000 pretvori v črno. Lahko bi celo uporabili stenografsko sliko s to vrednostjo hexa in jo zapisali kot # 000 in dobili boste isto stvar.
Kot smo že omenili, hex vrednosti delujejo dobro, če potrebujete barvo, ki ni samo črna ali bela. Tukaj je primer:
p {barva: # 2f5687; }
Ta hex vrednost bi odstavke postavila v modro barvo, vendar v nasprotju s ključno besedo "modra" vam ta hex koda omogoča nastavitev zelo specifičnega sence modre barve - verjetno tistega, ki ga oblikovalec izbere med ustvarjanjem vmesnika za to spletno mesto. V tem primeru bi bila barva modra v obliki črte v sredini.
Končno lahko uporabite tudi barvne vrednosti RGBA za barve pisave. RGCA je zdaj podprt v vseh sodobnih brskalnikih, tako da jih lahko z malo skrbi uporabite, da jih v spletnem brskalniku ne bo podprto, lahko pa tudi nastavite enostaven povratni zagon.
p {barva: rgba (47,86,135,1); }
Ta vrednost RGBA je enaka barvi modre barve, ki je bila prej navedena. Prve 3 vrednosti določajo vrednosti rdeče, zelene in modre, končna pa je nastavitev alfa. Namenjen je "1", kar pomeni "100%", zato ta barva ne bi bila pregledna. Če to nastavite na decimalno številko, npr. .85, bi to pomenilo 85% motnosti in barva bi bila rahlo pregledna.
Če želite barvno zaščititi vaše barvne vrednosti, bi to naredili:
p {
barva: # 2f5687;
barva: rgba (47,86,135,1);
}
Ta sintaksa najprej nastavi šestnajsto kodo. Nato prepisuje to vrednost s številko RGBA. To pomeni, da bo vsak starejši brskalnik, ki ne podpira RGBA, dobil prvo vrednost in prezrl drugega. Sodobni brskalniki bi uporabili drugo na kaskado CSS.