Bona tipografia desegno estas grava parto de prospera retejo. CSS donas al vi grandan kontrolon pri la aspekto de teksto sur la retpaĝoj de la retpaĝoj, kiujn vi konstruas. Ĉi tio inkluzivas la eblecon ŝanĝi la koloron de iuj tiparoj, kiujn vi uzas.
Fontaj koloroj povas esti ŝanĝitaj per ekstera stilo-folio , interna stilo-folio , aŭ ĝi povas esti ŝanĝita uzante inline-stilon ene de la HTML-dokumento. Plej bonaj praktikoj diktas, ke vi devas uzi eksterajn foliojn por viaj CSS-stiloj. Interna stilo-folio, kiu estas stiloj skribitaj rekte en la "kapo" de via dokumento, ĝenerale nur estas uzataj por malgrandaj, unu-paĝaj ejoj. Inlinaj stiloj devas esti evititaj pro tio ke ili estas simila al la malnovaj "tiparoj" etikedoj, kiujn ni traktis antaŭ multaj jaroj. Tiuj enlinaj stiloj malfacilas administri tiparon, ĉar vi bezonos ŝanĝi ilin en ĉiu kazo de la inlinea stilo.
En ĉi tiu artikolo, vi lernos kiel ŝanĝi la tiparon kun ekstera stilo-folio kaj stilo uzata en alinea etikedo. Vi povas apliki la saman stilon proprieton por ŝanĝi la tiparon de koloro en ajna etikedo kiu ĉirkaŭas tekston, inkluzive de la
etikedo.Aldonante Stiloj por ŝanĝi Font-Koloron
Por ĉi tiu ekzemplo, vi bezonus havi HTML-dokumenton por via paĝo-marko kaj aparta CSS-dosiero, ligita al tiu dokumento. La HTML-dokumento verŝajne faros multajn elementojn en ĝi. Tiu, kiun ni koncernas por la celo de ĉi tiu artikolo, estas la paragrafo.
Jen kiel ŝanĝi la tiparon de teksto ene de alineaj etikedoj per via ekstera stilo.
Koloraj valoroj povas esti esprimitaj kiel koloraj ŝlosilvortoj, RGB-koloraj nombroj aŭ heksadektaj koloraj nombroj.
- Aldonu la stilon atribuon por la alinea etikedo:
- p {}
- Metu la kolor- posedaĵon laŭ la stilo. Meti kolonon post tiu posedaĵo:
- p {koloro:}
- Tiam aldonu vian kolorvaloron post la posedaĵo. Certigu, ke vi finu tiun valoron per duonkolon:
- p {koloro: nigra;}
La alineoj en via paĝo nun estos nigraj.
Ĉi tiu ekzemplo uzas kolorŝlosilvorton - "nigra". Tiu estas unu maniero aldoni koloron en CSS, sed ĝi estas tre limiga. Uzante ŝlosilvortojn por "nigra" kaj "blanka" estas simpla, ĉar tiuj du koloroj estas tre specifaj, sed kio okazas se vi uzas ŝlosilvortojn kiel "ruĝa", "blua" aŭ "verda"? Ĝuste, kian ombro de ruĝa, blua aŭ verda vi ricevos? Vi ne povas precize specifi, kian koloron, kiun vi volas kun ŝlosilvortoj. Ĉi tiu estas la kialo, ke heksadekvaloraj uzoj ofte uziĝas anstataŭ koloraj ŝlosilvortoj.
p {koloro: # 000000; }
Ĉi tiu CSS-stilo ankaŭ agordus la koloron de viaj alineoj al nigra, ĉar la heksa kodo de # 000000 tradukas al nigra. Vi eĉ povus uzi taĉigadon kun tiu heksa valoro kaj skribu ĝin kiel nura nombro kaj vi ricevos la saman aferon.
Kiel ni jam menciis, la heksaj valoroj funkcias bone kiam vi bezonas koloron, kiu ne estas simple nigra aŭ blanka. Jen ekzemplo:
p {koloro: # 2f5687; }
Ĉi tiu heksa valoro starigus la alineojn al blua koloro, sed kontraste kun la ŝlosilvorto "blua", ĉi tiu heksa kodo donas al vi la kapablon agordi tre specifan ombron de bluo - verŝajna, ke la elektisto elektas kiam ili kreis la interfacon por ĉi tiu retejo. En ĉi tiu kazo, la koloro estus meza gamo, skribtabulo.
Fine, vi povas uzi RGBA-kolorvalorojn por tiparaj koloroj ankaŭ. RGCA nun estas subtenata en ĉiuj modernaj foliumiloj, do vi povas uzi ĉi tiujn valorojn kun malmulte da zorgado, ke ĝi ne estos subtenata en retumilo, sed vi ankaŭ povas facile fiksi.
p {koloro: rgba (47,86,135,1); }
Ĉi tiu RGBA-valoro estas la sama kiel la ardeza blua koloro specifita antaŭe. La unuaj 3 valoroj agordas la Ruĝajn, Verdajn kaj Bluajn valorojn kaj la fina nombro estas la alfa fikso. Ĝi estas fiksita al "1", kio signifas "100%", do ĉi tiu koloro ne havus travideblecon. Se vi agordas tion al dekuma nombro, kiel .85, ĝi tradukus al 85% de opakeco kaj la koloro estus iomete travidebla.
Se vi volas kuglokigi viajn kolorvalorojn, vi farus ĉi tion:
p {
koloro: # 2f5687;
koloro: rgba (47,86,135,1);
}
Ĉi tiu sintakso unue fiksas la heksan kodon. Ĝi tiam superskribas tiun valoron kun la RGBA-nombro. Ĉi tio signifas, ke iu pli malnova retumilo, kiu ne subtenas RGBA, ricevos la unuan valoron kaj ignoros la sekundon. Moderna retumiloj uzus la sekundon per la CSS-akvofalo.