Cara Mengubah Warna Hyperlink

Daftar Isi:

Cara Mengubah Warna Hyperlink
Cara Mengubah Warna Hyperlink

Video: Cara Mengubah Warna Hyperlink

Video: Cara Mengubah Warna Hyperlink
Video: Mengubah Warna Hyperlink di Microsoft Word, Excel, dan PowerPoint 2024, Mungkin
Anonim

Atribut Cascading Style Sheets (CSS) paling sering digunakan untuk mengubah warna hyperlink di halaman web. Solusi yang kurang fungsional untuk masalah ini ada dalam bahasa HTML (HyperText Markup Language - "hypertext markup language").

Cara mengubah warna hyperlink
Cara mengubah warna hyperlink

Itu perlu

Pengetahuan dasar tentang bahasa HTML dan CSS

instruksi

Langkah 1

Siapkan blok gaya untuk hyperlink. Dalam bentuknya yang paling sederhana, mungkin terlihat seperti ini: a {color: Green} Di sini "a" disebut "selector", yang menunjukkan bahwa deskripsi gaya dalam tanda kurung harus diterapkan ke semua tag tautan dalam dokumen. Hijau mendefinisikan warna tautan; ini adalah definisi warna yang sangat kasar dan jarang digunakan. Lebih sering, "kelas semu" ditambahkan ke pemilih "a" - ini adalah label yang memungkinkan Anda menentukan gaya tautan dalam tiga status berbeda.

Langkah 2

Gunakan pseudo-class link untuk menata status normal (tidak aktif) link. Mungkin terlihat seperti ini, misalnya: a: link {color: Green}

Langkah 3

Gunakan hover kelas semu untuk menentukan bagaimana tautan akan muncul saat melayang. Misalnya: a: hover {color: Lime}

Langkah 4

Gunakan kelas semu yang dikunjungi untuk menggambarkan gaya tautan yang sudah dikunjungi. Misalnya: a: mengunjungi {color: DarkGreen}

Langkah 5

Gabungkan ketiga status menjadi satu blok deskripsi gaya. Tampilan kode HTML yang berisi deskripsi gaya CSS dapat, misalnya, terlihat seperti ini:

a: tautan {warna: Hijau}

a: mengunjungi {color: DarkGreen}

a: hover {warna: Jeruk Nipis}

Di sini, tag gaya HTML pembuka dan penutup memberi tahu browser di mana deskripsi gaya dimulai dan diakhiri, dan di antaranya adalah deskripsi perilaku tautan di tiga status.

Langkah 6

Sampel yang digunakan di atas hanya menunjukkan karakteristik warna, tetapi atribut lain dapat dimasukkan dalam deskripsi. Misalnya, jika desain halaman mengharuskan tautan tidak digarisbawahi dalam keadaan normal (tidak aktif), tetapi digarisbawahi saat kursor diarahkan, maka kode dapat dimodifikasi sebagai berikut:

a: tautan {warna: Hijau; dekorasi teks: tidak ada;}

a: dikunjungi {color: DarkGreen; dekorasi teks: tidak ada;}

a: hover {warna: Jeruk; dekorasi teks: garis bawah;}

Langkah 7

Jika Anda ingin mengubah warna hanya beberapa tautan di halaman, dan membiarkan sisanya dengan pengaturan default, tambahkan atribut kelas ke tag setiap tautan yang diubah. Misalnya, beri nama kelas hyperlink ini newLinks. Kemudian tag tautan mungkin terlihat seperti ini: tautan teks Nama kelas yang sama harus ditambahkan ke deskripsi gaya:

a.newLinks: tautan {warna: Hijau; dekorasi teks: tidak ada;}

a.newLinks: dikunjungi {color: DarkGreen; dekorasi teks: tidak ada;}

a.newLinks: hover {warna: Jeruk Nipis; dekorasi teks: garis bawah;}

Langkah 8

Tempatkan kode deskripsi gaya yang disiapkan dari contoh yang dijelaskan di atas di header halaman - di antara tag dan. Jika perlu, tambahkan atribut kelas ke tag tautan dengan nama yang digunakan dalam deskripsi gaya. Kemudian simpan halaman yang dimodifikasi dan prosedur untuk mengubah warna hyperlink akan selesai.

Direkomendasikan: