Reka bentuk tipografi yang baik adalah bahagian penting laman web yang berjaya. CSS memberi anda kawalan yang hebat ke atas penampilan teks di laman web laman web yang anda bina. Ini termasuk keupayaan untuk menukar warna mana-mana fon yang anda gunakan.
Warna font boleh diubah menggunakan helaian gaya luaran , helaian gaya dalaman , atau ia boleh diubah menggunakan gaya inline dalam dokumen HTML. Amalan terbaik menentukan bahawa anda harus menggunakan lembaran gaya luaran untuk gaya CSS anda. Lembaran gaya dalaman, gaya yang ditulis secara langsung dalam "kepala" dokumen anda, pada umumnya hanya digunakan untuk laman web kecil, satu halaman. Gaya inline harus dielakkan kerana ia serupa dengan tag lama "font" yang kami berurusan dengan bertahun-tahun yang lalu. Gaya gaya inline menjadikannya sangat sukar untuk menguruskan gaya font kerana anda perlu mengubahnya di setiap contoh gaya inline.
Dalam artikel ini, anda akan belajar cara menukar warna fon menggunakan lembaran gaya luaran dan gaya yang digunakan dalam tag perenggan. Anda boleh memohon sifat gaya yang sama untuk menukar warna fon pada mana-mana tag yang mengelilingi teks, termasuk tag
.Menambah Gaya untuk Mengubah Warna Font
Untuk contoh ini, anda perlu mempunyai dokumen HTML untuk markup halaman anda dan fail CSS berasingan yang dilampirkan pada dokumen itu. Dokumen HTML mungkin akan membuat beberapa elemen di dalamnya. Yang kita bimbangkan untuk tujuan artikel ini adalah elemen perenggan.
Berikut ialah cara menukar warna fon teks di dalam tag perenggan menggunakan helaian luaran anda.
Nilai warna boleh dinyatakan sebagai kata kunci warna, nombor warna RGB, atau nombor warna heksadesimal.
- Tambah atribut gaya untuk tag perenggan:
- p {}
- Letakkan harta berwarna dalam gaya. Letakkan kolon selepas harta itu:
- p {color:}
- Kemudian tambahkan nilai warna anda selepas harta itu. Pastikan untuk mengakhiri nilai itu dengan separa kolon:
- p {color: black;}
Perenggan di halaman anda sekarang akan menjadi hitam.
Contoh ini menggunakan kata kunci berwarna - "hitam". Itulah satu cara untuk menambah warna dalam CSS, tetapi ia sangat membataskan. Menggunakan kata kunci untuk "hitam" dan "putih" adalah mudah kerana kedua-dua warna ini sangat spesifik, tetapi apa yang berlaku jika anda menggunakan kata kunci seperti "merah", "biru", atau "hijau"? Tepat apa warna merah, biru, atau hijau yang anda dapat? Anda tidak boleh menentukan warna warna yang anda mahukan dengan kata kunci. Inilah sebab mengapa nilai heksadesimal sering digunakan sebagai kata kunci warna.
p {color: # 000000; }
Gaya CSS ini juga akan menetapkan warna perenggan anda menjadi hitam, kerana kod hex # 000000 diterjemahkan kepada hitam. Anda juga boleh menggunakan singkatan dengan nilai hex dan menulis sebagai hanya # 000 dan anda akan mendapat perkara yang sama.
Seperti yang telah kami nyatakan, nilai hex berfungsi dengan baik apabila anda memerlukan warna yang bukan hanya hitam atau putih. Berikut adalah contohnya:
p {color: # 2f5687; }
Nilai hex ini akan menetapkan perenggan kepada warna biru, tetapi tidak seperti kata kunci "biru", kod hex ini memberikan anda keupayaan untuk menetapkan warna biru yang sangat spesifik - mungkin yang dipilih oleh pereka ketika mereka membuat antarmuka untuk laman web ini. Dalam kes ini, warna akan menjadi pertengahan, biru seperti batu tulis.
Akhirnya, anda boleh menggunakan nilai warna RGBA untuk warna fon juga. RGCA kini disokong dalam semua pelayar moden, jadi anda boleh menggunakan nilai-nilai ini dengan bimbang sedikit bahawa ia tidak akan disokong dalam pelayar web, tetapi anda juga boleh menetapkan sandaran yang mudah.
p {color: rgba (47,86,135,1); }
Nilai RGBA ini adalah sama dengan warna biru slate yang dinyatakan sebelum ini. Nilai 3 yang pertama menetapkan nilai Red, Green, dan Blue dan nombor akhir ialah tetapan alfa. Ia ditetapkan kepada "1", yang bermaksud "100%", jadi warna ini tidak mempunyai ketelusan. Sekiranya anda menetapkan itu kepada nombor perpuluhan, seperti .85, ia akan diterjemahkan kepada kelegapan 85% dan warna akan menjadi sedikit telus.
Jika anda ingin menembusi nilai warna anda, anda akan melakukan ini:
p {
warna: # 2f5687;
warna: rgba (47,86,135,1);
}
Sintaks ini menetapkan kod hex terlebih dahulu. Ia kemudian menimpa nilai itu dengan nombor RGBA. Ini bermakna bahawa mana-mana pelayar lama yang tidak menyokong RGBA akan mendapat nilai pertama dan mengabaikan yang kedua. Pelayar moden akan menggunakan kedua mengikut larian CSS.