Sebelumnya saya sudah pernah menulis tentang CSS atau Cascading Style Sheet. Tapi kali ini saya akan sharing trik penggunaan script CSS untuk menghilangkan garis bawah pada Link Text, dan menhhilangkan border pada Link Gambar.
Menghilangkan Garis Bawah Semua Link pada Halaman Web
Pada dasarnya sebuah link otomatis akan mempunyai garis bawah. Tapi dengan menggunakan CSS/Cascading Style Sheet, garis bawah itu bisa dihilangkan dengan mudah. Caranya, tempatkan script CSS berikut di bagian <head>...</head> halaman web yang Anda buat (bersama title, description, dan keyword). Dengan menggunakan kode ini, garis bawah pada seluruh link di halaman web Anda akan hilang.
<html>
<head>
<title>menghilangkan garis bawah pada link</title>
<style type="text/css">
a {text-decoration:none;}
</style>
</head>
<body>
<a href=" http://catment.blogspot.com">Link belajar web programing</a>
</body>
</html>
Menghilangkan Garis Bawah Sebagian Link pada Halaman Web
Jika hanya ingin menghilangkan garis bawah pada link-link tertentu, bukan pada seluruh link seperti yang terjadi kalau memakai kode di atas, anda dapat menyisipkan kode script ke dalam style Link atau memanggilnya dengan class. Contoh dan kodenya seperti yang berikut ini.
<html>
<head>
<title>menghilangkan garis bawah pada link</title>
</head>
<body>
<a href=" http://catment.blogspot.com" style="text-decoration:none;">Link belajar web programing</a>
</body>
</html>
Atau
<html>
<head>
<title>menghilangkan garis bawah pada link</title>
<style type="text/css">
.tanpaGarisBawah {text-decoration:none;}
</style>
</head>
<body>
<a href="http://catment.blogspot.com" class="tanpaGarisBawah">Link belajar web programing</a>
</body>
</html>
Menghilangkan Border Semua Link Gambar pada Halaman Web
Pada dasarnya apabila kita membuat Link Gambar akan terdapat border di sekeliling gambar yang di buat Link, tapi ada sebagian browser yang tidak memunculkan border tersebut. Apabila anda pengguna Opera dan Firefox, border tersebut muncul pada browser Opera dan Firefox. Dengan CSS border tersebut dapat dihilangkan,caranya sisipkan kode CSS ke tag <head>...</head>.contoh scriptnya sebagai berikut:
<html>
<head>
<title>menghilangkan garis bawah pada link</title>
<style type="text/css">
img {border:0;}
</style>
</head>
<body>
<a href="catment.blogspot.com"><img src="catment.jpg" /></a>
</body>
</html>
Menghilangkan Border tertentu pada Link Gambar pada Halaman Web
Anda juga bisa menghilangkan border di bagian Link gambar tertentu saja, caranya sama denga menghilangkan garis pada Text Link tertentu di atas yaitu dengan cara menyisipkan sript CSS pada tag <img>. Untuk contoh bisa di lihat pada script di bawah ini:
<html>
<head>
<title>menghilangkan garis bawah pada link</title>
</head>
<body>
<a href="catment.blogspot.com"><img src="catment.jpg" style="border:0;" /></a>
</body>
</html>
No comments:
Post a Comment