Bağlantı Linklerini Özelleştirmek (CSS text-decoration)

Gönderen Sistem

Bağlantı linklerini Özelleştirmek (CSS text-decoration)


Web sitelerinde yada bloglarda verilen bağlantıları daha belirgin yada anlaşılır yapmak için yazı dekorasyonu (text-decoration) tekniğini uygularız.





HTML (CSS) de tüm linklerin özelleştirme kodu :

overline  : Metin üstü çizgi
through : Üzeri çizili metin 
underline : Altı çizili metin 
none : Metin çizgisi yok
blink : Yanıp sönen metin

a:link : Normal, ziyaret edilmemiş bağlantı
a:visited : Bir bağlantı ziyaret edilmesi durumu
a:hover : Bir bağlantının üzerine fare getirildiğinde
a:active : Bir bağlantı  tıklandığı anda
Şimdi sitemizdeki tüm bağlantı linklerinin üzerine mause ile gelindiğinde altını çizelim

<style type="text/css">
a:hover{text-decoration:underline;}
</style>


Yada tüm bağlantı linklerinin altındaki çizgiyi kaldıralım

<style type="text/css">
a:hover{text-decoration:none; }
a:link { text-decoration: none; }
a:visited { text-decoration: none; }
</style>


Bunun dışında metin yada bağlantı linklerine diğer css özellikleri atayabiliriz örneğin arka fon rengi yazı karakteri gibi


<style>
a:link {
background-color: #B2FF99;
}
a:visited {
background-color: #FFFF85;
}
a:hover {
background-color: #FF704D;
}
a:active {
background-color: #FF704D;
}
a:link{
font-size:11px;
font-family:Arial, Helvetica, sans-serif;
font-style:normal;
}
</style>


gibi

Bu Kodlar <head> ile </head> tagları arasına eklenerek HTML yapısında çalışacaktır. Yani blogger için <head> den hemen sonra eklerseniz çalışacaktır.


CSS: Resme Veya Yazıya Kenarlık (Çerçeve) Rkleme




img {
padding:5px;
margin:5px;
border-width: 5px;
border-color: #CD0000;
border-style: single;
}

Dashed: Kesik Çizgili Border Oluşturmak İçin Kullanılır.
Dotted: Noktalı Border Oluşturmak İçin Kullanılır
Solid: Sürekli Çizili Kenarlık Oluşturmak İçin Kullanılır
Double: Çift Çizgili Border Oluşturmak İçin Kullanılır
Groove: Kabarık Border Oluşturmak İçin Kullanılır
Ridge: bir üstte yer alan Groovenin tam tersi işlem yapar.



<p style="border:solid green">Örnek</p>

<div style="border:solid green">Örnek</div>


Online CSS Buton, Menü Ve Çizelge Oluşturun

Kolayca CSS buton oluşturmanızı sağlayan yararlı bir araç

https://www.devdude.com/tools/css/button_text/

https://www.somacon.com/p334.php

https://csscreator.com/version2/pagelayout.php

http://www.maani.us/css_xml_timeline/index.php


Yorumlar

Yorum Gönder

🔺 YUKARI ÇIK 🔺