Cara Mengatur Warna Tautan

Daftar Isi:

Cara Mengatur Warna Tautan
Cara Mengatur Warna Tautan

Video: Cara Mengatur Warna Tautan

Video: Cara Mengatur Warna Tautan
Video: Belajar HTML Part 11: Cara Mengubah Tampilan Warna Tautan HTML 2024, Mungkin
Anonim

Jika browser pengunjung situs web tidak menemukan indikasi desain warna hyperlink dalam kode halaman, maka ia menggunakan nilai default. Nilai-nilai ini adalah biru untuk tautan pasif, merah untuk tautan aktif (saat melayang), dan warna magenta untuk tautan yang sudah dikunjungi. Skema warna ini tidak selalu dikombinasikan dengan skema warna desain halaman, oleh karena itu, blok deskripsi gaya tautan biasanya disertakan dalam kode.

Cara mengatur warna tautan
Cara mengatur warna tautan

instruksi

Langkah 1

Buat satu set instruksi untuk browser yang akan menjelaskan warna tautan dalam tiga status. Misalnya, dapat terlihat seperti ini: a: link {color: Red;}

a: dikunjungi {warna: Kuning;}

a: hover {color: Orange;} Di sini "a" di awal setiap baris disebut "selector" dan menentukan tag di mana browser harus menerapkan deskripsi gaya yang diapit kurung kurawal. "A" adalah tag hyperlink. Kata yang ditambahkan ke pemilih yang dipisahkan oleh titik dua disebut "kelas semu" -yang digunakan browser untuk menentukan status tautan mana yang dimiliki gaya dalam kurung kurawal. tautan cocok dengan tautan biasa, mengunjungi tautan yang telah dikunjungi, dan mengarahkan tautan saat kursor diarahkan ke atasnya. Warna yang ditetapkan untuk parameter warna di dalam kurung kurawal dapat ditentukan baik dengan nama bayangan warna atau dengan kode heksadesimalnya.

Langkah 2

Jika Anda perlu menetapkan warna yang berbeda untuk grup tautan yang berbeda pada halaman, maka tetapkan setiap grup penunjukannya sendiri ("kelas") dan buat deskripsi terpisah tentang gaya untuk masing-masing grup. Misalnya, beri nama satu grup LinksRed dan yang lainnya LinksGreen. Maka deskripsi gaya akan terlihat seperti ini: a. LinksRed: link {color: Red;}

a. LinksRed: dikunjungi {color: Yellow;}

a. LinksRed: hover {color: Orange;} a. LinksGreen: link {color: Green;}

a. LinksGreen: mengunjungi {color: DarkGreen;}

a. LinksGreen: hover {color: Lime;} Dan dalam tag link dari setiap grup, Anda harus menunjukkan kelas mana yang mereka miliki. Misalnya: Tautan merah

tautan hijau

Langkah 3

Instruksi ini ditulis dalam CSS (Cascading Style Sheets), sehingga harus ditempatkan di dalam tag gaya yang memisahkannya dari instruksi lain dalam kode sumber halaman, yang ditulis dalam HTML (HyperText Markup Language)):

a. LinksRed: link {warna: Merah;}

a. LinksRed: dikunjungi {color: Yellow;}

a. LinksRed: hover {color: Orange;} a. LinksGreen: link {color: Green;}

a. LinksGreen: mengunjungi {color: DarkGreen;}

a. LinksGreen: hover {color: Lime;}

Langkah 4

Tempatkan blok deskripsi gaya tautan yang disiapkan di bagian tajuk kode sumber halaman - dibatasi oleh tag and.

Direkomendasikan: