Hogyan változtassuk meg a weboldal betűtípusainak színeit a CSS segítségével

A jó tipográfiai design fontos része egy sikeres weboldalnak. A CSS nagyszerűen szabályozza a weboldalakon megjelenő szöveg megjelenését az Ön által létrehozott weblapokon. Ez magában foglalja a használandó betűtípusok színének megváltoztatását.

A betűtípus színeit külső stíluslap , belső stíluslap segítségével lehet megváltoztatni, vagy módosítani lehet a HTML dokumentumon belüli inline stílus használatával. A legjobb gyakorlatok azt írják elő, hogy külső stíluslapot kell használnia a CSS stílusaihoz. A belső stíluslapot, amely közvetlenül a dokumentum "fején" íródott, általában csak kis, egyoldalas webhelyekhez használható. Az inline stílusokat el kell kerülni, mivel hasonlítanak a régi "font" címkékre, amelyekkel sok évvel ezelőtt foglalkozunk. Ezek az inline stílusok nagyon nehézkessé teszik a betűstílusok kezelését, mivel az inline stílushoz minden esetben meg kell változtatni őket.

Ebben a cikkben megtudhatja, hogyan változtathatja meg a betűtípus színét egy külső stíluslap és egy bekezdés címkéjén használt stílus használatával. Ugyanazt a stílustípust alkalmazhatja a betűtípus színének megváltoztatására a szövegen, beleértve a címkét is.

Stílusok hozzáadása a betűtípus színének megváltoztatásához

Ehhez a példához HTML-dokumentumot kell létrehoznia az oldalmegjelöléshez és a dokumentumhoz csatolt külön CSS-fájlhoz. A HTML dokumentum valószínűleg számos elemet tartalmazna benne. Az a cikk, amelyre aggodalmaskodunk, a bekezdéselem.

A külső stíluslap segítségével módosíthatja a szöveg betűszínét a bekezdéscímkék között.

A színértékek színes kulcsszavakként, RGB színszámokként vagy hexadecimális színszámként fejezhetők ki.

1. Adja hozzá a státusz attribútumot a bekezdés címkéjéhez:
   1. p {}
2. Helyezze el a színtárgyat a stílusban. Helyezzen egy kettőspontot az adott tulajdonság után:
   1. p {color:}
3. Ezután adja hozzá a színértéket a tulajdonság után. Győződjön meg arról, hogy az értéket félkörívben végződik:
   1. p {szín: fekete;}

Az oldalon lévő bekezdések most fekete színűek lesznek.

Ez a példa színes kulcsszót használ - "fekete". Ez az egyik módja annak, hogy színt adjon a CSS-ben, de nagyon korlátozó. A "fekete" és a "fehér" kulcsszavak használata egyszerű, hiszen ezek a két szín nagyon egyedi, de mi történik, ha olyan kulcsszavakat használsz, mint a "piros", "kék" vagy "zöld"? Pontosan milyen piros, kék vagy zöld árnyalatot kap? Nem tudja pontosan megadni, hogy melyik színárnyalatot kívánja kulcsszavakkal. Ezért használják a hexadecimális értékeket a színes kulcsszavak helyett.

p {szín: # 000000; }

Ez a CSS stílus a bekezdések színét is fekete színre állítja, mert a # 000000 hexakódja fekete színűre fordul. Még akkor is használhatsz rövidítést a hexadecimális értékkel, és csak # 000-et írhatsz, és ugyanazt kapod.

Mint már említettük, a hex értékek jól működnek, ha olyan színre van szüksége, amely nem egyszerűen fekete vagy fehér. Íme egy példa:

p {szín: # 2f5687; }

Ez a hex érték a bekezdéseket kék színnel állítja be, de a "kék" kulcsszóval ellentétben ez a hex kód megadja a képességét, hogy egy nagyon specifikus kék színt állítson be - valószínűleg a tervező által választott felület ezen a weboldalon. Ebben az esetben a szín közepes tartományú, pala színű kék.

Végül használhatja az RGBA színértékeket a betűkészletekhez is. Az RGCA-t ma minden modern böngészőben támogatják, így ezeket az értékeket kevés aggodalommal használhatja fel, hogy nem támogatják őket egy webböngészőben, de egyszerű biztonsági mentést is végezhet.

p {szín: rgba (47,86,135,1); }

Ez az RGBA érték megegyezik a korábban megadott palást kék színével. Az első 3 érték a piros, zöld és kék értékeket állítja be, és a végső szám az alfa beállítás. Ez az érték "1" -re van állítva, ami "100%" -ot jelent, így ez a szín nem lenne átlátható. Ha ezt egy decimális számra állította be, például a .85, 85% -os áttetszőséghez vezetne, és a szín kissé átlátszó lenne.

Ha meg akarja védeni a színértékeket, akkor ezt tenne:

p {
szín: # 2f5687;
szín: rgba (47,86,135,1);
}

Ez a szintaxis először a hexakódot állítja be. Ezt az értéket felülírja az RGBA számmal. Ez azt jelenti, hogy minden olyan régebbi böngésző, amely nem támogatja az RGBA-t, megkapja az első értéket, és figyelmen kívül hagyja a másodikat. A modern böngészők a másodikat a CSS kaszkádon használják.