Cara Menggunakan CSS Untuk Menautkan Hyperlink Pada Halaman Web

Mungkin 17, 2024

Jika Anda terbiasa dengan HTML, Anda tahu bahwa Anda dapat mengontrol warna teks dan hyperlink pada halaman web. Tetapi dengan Cascading Style Sheets Anda dapat melakukan lebih banyak lagi. Tag tertentu seperti tag anchor hyperlink memiliki apa yang disebut kelas semu yang terkait dengan berbagai kondisi tag. Misalnya, tag hyperlink memiliki empat status; tautan, dikunjungi, arahkan dan aktifkan.

Ketika tautan tidak digunakan (tidak dipilih), itu adalah tautan tautan pseudo-class atau state. Itu dikunjungi status setelah tautan digunakan. Itu melayang negara adalah ketika mouse melewati tautan dan aktif negara adalah ketika Anda mengklik tautan. Keajaiban CSS adalah bahwa setiap keadaan tautan dikontrol secara independen melalui pseudo-class. Jadi, Anda dapat mengatur properti yang berbeda untuk setiap negara. Anda dapat menggunakan properti apa pun yang terkait dengan tag anchor hyperlink di CSS.

Pada contoh di bawah ini, kita akan mengatur status tautan menjadi merah, status yang dikunjungi menjadi ungu (# 400040), hover dan status aktif menjadi merah, bergaris bawah dan miring.

Catatan--Panah

menunjukkan bahwa kode tersebut dibungkus dengan baris kedua dan harus benar-benar berada pada satu baris.

Seperti yang Anda lihat, kami telah menetapkan properti warna menjadi merah untuk semua negara kecuali untuk negara yang dikunjungi, yang kami atur menjadi ungu. Karena kami hanya ingin hyperlink digarisbawahi untuk hover dan status aktif, kami telah menetapkan properti dekorasi teks menjadi tidak ada untuk dua negara lainnya. Terakhir, kami telah mengatur gaya font menjadi miring untuk hover dan status aktif, yang akan menyebabkan teks menjadi miring saat Anda melewati atau mengklik tautan, dan kami telah mengatur dekorasi teks kembali ke garis bawah. Ini hanya contoh sederhana. Anda dapat membuat gaya Anda sesederhana atau semewah yang Anda inginkan. Namun, ada beberapa hal yang perlu diingat.

Browser web berbeda dalam cara mereka menangani ini. Biasanya, jika Anda menetapkan properti ke nilai tertentu, itu akan diwarisi oleh (diteruskan ke) setiap negara yang terdaftar setelah itu. Dalam contoh kami di atas, status pertama yang tercantum dalam kode kami adalah status tautan dan kami menyetel properti warna menjadi merah. Sebagian besar waktu, ini akan diturunkan ke tiga negara bagian lain kecuali kita mengubahnya dengan kode, seperti yang kita lakukan untuk negara yang dikunjungi. Juga, jika kita tidak mengatur dekorasi teks kembali ke garis bawah, teks untuk hover dan status aktif tidak akan digarisbawahi karena kita mematikannya di keadaan pertama. Tetapi Anda tidak dapat mengandalkan semua browser untuk melakukan ini. Oleh karena itu, yang terbaik adalah mengatur semua properti untuk setiap negara secara individual.

Saat Anda mendesain tautan mewah, jangan membuat perubahan besar di antara kondisi seperti membuat ukuran teks meningkat secara dramatis. Ini akan menyebabkan browser web memuat ulang halaman dan pengunjung Anda akan menjadi sangat kesal dengan Anda.

Urutan di mana Anda membuat daftar kode untuk pseudo-class ini dipengaruhi oleh urutan kaskade. Kami akan membahas urutan kaskade di tutorial selanjutnya. Untuk sekarang hanya ingat bahwa untuk mencegah konflik, kode negara dalam urutan yang kami gunakan di atas; tautan, dikunjungi, arahkan dan aktifkan.

Petunjuk Video: Cara membuat Link Internal dan Link Eksternal pada Blog ✅ (Mungkin 2024).

Cara Menggunakan CSS Untuk Gaya Hyperlink Pada Halaman Web, HTML, pseudo-class yang terkait dengan berbagai status tag, pseudo-class, hyperlink, pengkodean hyperlink dalam CSS, CSS pseudo-class, status CSS, keadaan tag, tautan mewah pada halaman web dengan CSS, tautan mewah

Artikel Sebelumnya

Artikel Berikutnya

Garis Waktu dan Lapisan Flash

Mungkin 2024

Dalam tutorial terakhir kami, kami diperkenalkan FlashR Timeline, menambahkan frame ke Timeline dan menggambar persegi panjang di Panggung. Sekarang kita memiliki lapisan latar belakang hijau yang...

komputer

Merancang untuk Web dan Tablet - Desain Responsif

Mungkin 2024

Istilah Responsif telah berada di garis depan untuk sementara waktu tetapi apa sebenarnya artinya? Internet telah banyak berubah selama bertahun-tahun, dari platform yang sebagian besar berbasis teks...