Css derslerine devam ediyoruz.Bu deste border kodlarını görecez.Öncelikle border ne işe yarar ordan başlayalım.border bir nesneye çerçeve vermemizi sağlar.
Şimdi kodlara geçelim
border:kalınlık sitil renk;
örnek olrak da
.buton{border:2px solid #000;}
Kalınlık ve rengi anlatmaya gerek yok zaten diğer derslerde baya değindim.
Stillere bakalım. En çok kullanılan 3 tane var.Bular :
solid=düz çizgi
dotted=noktalı
dashed:kutu kutu
yukarda solid verdik 4 tarafını 2 px kalınlığında siyah bir çizgi çevirecek.
Tek tarflı border vermek isteye biliriz. O zaman ne edecez diyosanız onun içinde kodlar var.
border-left //sol tarafa
border-right//sağ tarafa
border-top//üst tarafa
border-bottom//alt tarafa border vermek için
bunların kullanımıda yukardakiye aynı
border-top:kalınlık sitil renk;
tabi bu teklileri aynı objeye verip 2 veya 3 tarafınıda çevirme yapabiliriz.
Şimdi genel bir örnek ile işi daha iyi kavrayalım.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.kutu1{width:100px;height:100px;background:red;border:3px solid #666;}
.kutu2{width:100px;height:100px;background:blue;border-left:5px dotted green;border-bottom:2px dashed #000;}
</style>
</head>
<body>
<div class="kutu1"></div>
<div class="kutu2"></div>
</body>
</html>
UstaDerslik
