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.
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;
}
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.