Hogyan változtassuk meg a weboldal betűtípusának színét CSS-sel

Mit kell tudni

  • Színes kulcsszó: Egy HTML fájlba írja be p {szín: fekete;} minden bekezdés színének megváltoztatásához, ahol fekete a választott színre utal.
  • Hexadecimális: Egy HTML fájlba írja be p {color: # 000000;} a szín megváltoztatásához, hol 000000 a választott hexa értékre vonatkozik.
  • RGBA: Egy HTML fájlba írja be p {szín: rgba (47,86,135,1);} a szín megváltoztatásához, hol 47,86,135,1 a választott RGBA értékre vonatkozik.

A CSS vezérli a szöveg megjelenését az Ön által létrehozott és kezelt weboldalakon. Ebben az útmutatóban bemutatjuk, hogyan lehet megváltoztatni a betűszíneket a CSS-ben színes kulcsszavak, hexadecimális színkódok vagy RGB színszámok használatával.

A CSS-stílusok használata a betűszín megváltoztatásához

A színértékek kifejezhetők színes kulcsszavakként, hexadecimális színszámokként vagy RGB színszámokként. Ehhez a leckéhez rendelkeznie kell egy HTML-dokumentummal a CSS-változások és a külön CSS fájl, amely csatolva van az adott dokumentumhoz. Konkrétan a bekezdést elemezzük.

watch instagram stories

A Színes kulcsszavak használatával módosíthatja a betűtípus színét

Ha módosítani szeretné a HTML-fájl minden bekezdésének szövegszínét, lépjen a külső stíluslapra, és írja be p {}. Helyezze a szín tulajdonság a stílusban, amelyet kettőspont követ, például p {szín:}. Ezután adja hozzá a színértéket a tulajdonság után, pontosvesszővel zárva. Ebben a példában a bekezdés szövege fekete színűre változik:

p {
fekete szín;
}
Illusztráció egy személyről, aki CSS-t használ a weboldal színeinek megváltoztatására
Ashley Nicole DeLeon / Lifewire

A betűszín megváltoztatásához használja a hexadecimális értékeket

Ha színes kulcsszavakat használ a szöveg pirosra, zöldre, kékre vagy más alapszínre változtatására, akkor nem kapja meg azt a pontosságot, amelyet a színek különböző árnyalatainak létrehozásakor kereshet. Erre szolgálnak a hexadecimális értékek.

Ez a CSS stílus használható a bekezdések feketére színezésére, mert a # 000000 hexakód fekete színre vált. Akár használhatja a rövidítést ezzel a hexa értékkel, és ugyanezzel az eredménnyel # 000-gyel írhatja.

p {
szín: # 000000;
}

A Hex értékek akkor működnek jól, ha olyan színre van szüksége, amely nem egyszerűen fekete vagy fehér. Például ez a hexakód lehetővé teszi a kék egy nagyon meghatározott árnyalatának beállítását - középkategóriás, pala-szerű kék:

p {
szín: # 2f5687;
}

A Hex úgy működik, hogy egy szín RGB (piros, zöld, kék) értékeit külön-külön, alap-tizenhat értékkel állítja be. Ezért tartalmazzák a betűket A keresztül F a számjegyek mellett 0 keresztül 9.

Minden szín, a piros, a zöld és a kék, megkapja a maga kétjegyű értékét. 00 a lehető legalacsonyabb érték, míg FF a legmagasabb. A színek RGB-sorrendben, hatszögben vannak felsorolva, így az első két számjegy a piros értéket képviseli stb.

Használja az RGBA színértékeit a betűtípus színeinek megváltoztatásához

Végül az RGBA színértékekkel szerkesztheti a betűtípus színeit. Az RGCA minden modern böngészőben támogatott, így ezeket az értékeket bátran használhatja, hogy a legtöbb néző számára működni fog, de beállíthat egy könnyű tartalékot is.

Ez az RGBA érték megegyezik a fent megadott palakék színnel:

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

Az első három érték a piros, a zöld és a kék értéket állítja be, az utolsó szám pedig az átlátszóság alfa-beállítása. Az alfa beállítás 1-re van állítva, ami 100 százalékot jelent, ezért ennek a színnek nincs átlátszósága. Ha ezt az értéket tizedesjegyre állítja, például .85, ez 85 százalékos átlátszatlanságot jelent, és a színe kissé átlátszó lenne.

Ha golyóállóvá akarja tenni a színértékeit, másolja ezt a CSS-kódot:

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

Ez a szintaxis először a hexakódot állítja be, majd felülírja ezt az értéket 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 a másodikat figyelmen kívül hagyja.

Fontos szem előtt tartani, hogy a színtulajdonság a CSS bármely HTML szövegelemén működik. Megváltoztathatja például az összes link színét. Ez a példa a linkjeit élénkzöldé teszi:

a {
szín: # 16c616;
}

Ez egyszerre több elemmel is működik. Minden címszintet egyszerre állíthat be. Például ez az összes címelemet éjfélkék színre állítja:

h1, h2, h3, h4, h5, h6 {
szín: # 020833;
}

A színeinek hex vagy RGBA értéke nem mindig egyszerű. A legtöbb webdesigner képszerkesztő programot használ, például a Photoshop vagy a GIMP, a pontos kódok előállításához. Az interneten is megtalálhatja a kényelmes színválasztó eszközöket, például ez a w3iskolákból származik.

A HTML-oldal stílusának egyéb módjai

A betűtípus színeit megváltoztathatja külső stíluslap, belső stíluslap vagy belső stílus a HTML dokumentumban. A bevált gyakorlatok azonban előírják, hogy külső stíluslapot kell használnia a CSS-stílusokhoz.

A belső stíluslapokat, amelyek a dokumentum "fejébe" írt stílusok, általában csak kicsi, egyoldalas weboldalaknál használják. Kerülni kell a beillesztett stílusokat, mivel ezek hasonlítanak a régi "font" címkékhez, amelyekkel sok évvel ezelőtt foglalkoztunk. Azok a beágyazott stílusok nagyon megnehezítik a betűstílus kezelését, mivel a beillesztett stílus minden példányánál meg kell változtatni őket.

instagram story viewer