Desain tipografi sing apik minangka bagean penting saka situs web sing sukses. CSS menehi kontrol gedhe babagan katon teks ing kaca web kaca web sing mbangun. Iki kalebu kemampuan kanggo ngowahi warna sembarang font sing sampeyan gunakake.
Werna font bisa diowahi nggunakake sheet gaya eksternal , sheet style internal , utawa diganti nganggo styling inline ing dokumen HTML. Praktik paling apik ndhikte sampeyan kudu nggunakake sheet gaya njaba kanggo gaya CSS sampeyan. Lembaran gaya internal, sing gaya ditulis langsung ing "kepala" dokumen, umume mung digunakake kanggo situs cilik, siji halaman. Gaya inline kudu dicegah amarga padha karo tag "font" lawas sing ditangani taun kepungkur. Gaya-gaya sing inline nggawe banget angel kanggo ngatur gaya font awit sampeyan kudu ngganti saben jinis gaya inline.
Ing artikel iki, sampeyan bakal ngerti carane ngganti werna font nggunakake sheet gaya eksternal lan gaya sing digunakake ing tag paragraf. Sampeyan bisa nggunakake properti gaya sing padha kanggo ngganti werna font ing sembarang tag sing ngubengi teks, kalebu tag
.Nambahake Gaya Ngganti Warna Font
Contone, sampeyan kudu nduwe dokumen HTML kanggo markup kaca lan file CSS sing kapisah ing dokumen kasebut. Dokumen HTML bakal nggawe sawetara elemen kasebut. Salah siji sing dikarepake kanggo tujuan artikel iki yaiku unsur paragraf.
Punika cara ngganti werna font teks ing tag paragraf kanthi nggunakake lembar gaya eksternal.
Nilai werna bisa ditulis minangka tembung kunci werna, nomer werna RGB, utawa nomer werna heksadesimal.
- Nambah atribut gaya kanggo tag paragraf:
- p {}
- Selehake werna ing gaya. Nyelehake tandha titik sawise properti kasebut:
- p {color:}
- Banjur nambahake nilai werna sawise properti. Priksa manawa kanggo mungkasi nilai kasebut kanthi titik koma:
- p {color: black;}
Paragraf ing kaca sampeyan bakal dadi ireng.
Contone, nganggo tembung kunci werna - "ireng". Iku salah siji cara kanggo nambah werna ing CSS, nanging iku banget matesi. Nganggo tembung kunci kanggo "ireng" lan "putih" iku tegese wiwit warna loro iku khusus banget, nanging apa sing kedadeyan yen sampeyan nggunakake tembung kunci kaya "abang", "biru", utawa "ijo"? Apa apa sing bakal dadi warna abang, biru, utawa ijo? Sampeyan ora bisa nemtokake manéka warna sing dikarepake karo tembung kunci. Iki sebabe angka heksadesimal kerep digunakake ing panggonan werna-werna tembung kunci.
p {color: # 000000; }
Gaya CSS iki uga nyetel warna paragraf dadi ireng, amarga kode heks # 000000 diterjemahna ireng. Sampeyan bisa uga nggunakake shorthand karo nilai hex lan nulis minangka mung # 000 lan sampeyan bakal njaluk padha.
Minangka kita wis disebutake, nilai hex bisa becik yen sampeyan butuh werna sing ora mung ireng utawa putih. Punika conto:
p {color: # 2f5687; }
Nilai hex iki bakal nyetel paragraf menyang werna biru, nanging ora kaya tembung kunci "biru", kode hex iki menehi sampeyan kemampuan kanggo ngesetake warna biru sing spesifik banget - kamungkinan sing dipilih dening desainer nalika nggawe antarmuka kanggo situs iki. Ing kasus iki, werna bakal dadi werna abu-abu, biru kaya slate.
Pungkasan, sampeyan bisa nggunakake werna-werna werna RGBA kanggo werna font uga. RGCA saiki wis didhukung ing kabeh browser modern, supaya sampeyan bisa nggunakake nilai-nilai iki kanthi bimbang yen ora bakal didhukung ing browser web, nanging sampeyan uga bisa nyetel mundur gampang.
p {color: rgba (47,86,135,1); }
Nilai RGBA iki padha karo werna biru slate sing kasebut sadurunge. Nilai 3 sing pertama nyetel nilai Red, Hijau, lan Biru lan nomer pungkasan minangka setelan alfa. Iki disetel dadi "1", sing artine "100%", supaya warna iki ora nduweni transparansi. Yen sampeyan nyetel sing menyang nomer desimal, kaya .85, bakal diterjemahake kanggo opacity 85% lan werna bakal rada transparan.
Yen sampeyan pengin bulletproof nilai werna sampeyan, sampeyan bakal nindakake iki:
p {
werna: # 2f5687;
warna: rgba (47,86,135,1);
}
Sintaks iki nyetel kode hex dhisik. Iku banjur nimpa nilai kasebut karo nomer RGBA. Iki tegese manawa browser lawas sing ora ndhukung RGBA bakal entuk nilai sing kapisan lan ora ditolak. Browser modern bakal nggunakake sing kapindho ing kaskuser CSS.