Web 
CSS'de Border Özelliğini Tanıyalım
Bu Dersimizde CSS'de benim çok kullandiğim ve gerekli gördüğüm bir konu olan Border özelliğini sizlere anlaticam.Öncelikle yine kendime göre borderi tanıtayım.Css'De Border ; Oluşturduğumuz bir katmanin sağında,solunda,altında,üstünde kalınlığını ve rengini belirleyebildiğimiz bir çizgi oluşturmaktir.
Border Kodlari
Arkadaslar Borderi katmani çerçevelemek amaçli kullanabileceğimiz gibi sadece sağ kısmını kenarlamak veya sadece üst kısmını kenarlamak içinde kullanabiliriz.Aynı işlemleri sol ve alt kısım içinde yapabiliriz tabi , bunun için yapicağımız işlem borderin kodlarini kullanmaktir.Bu kodları margin ve padding kodlarindada kullanmiştik.Bu dersimizi okuduysaniz okadarka karışık birsey olmadiğini anlarsiniz.
Border ==> Katmanin tamamini çerçeveler.
Border-right ==> Katmanin sağ kısmında bir çizgi oluşturur
Border-left ==> Katmanin sol kısmında bir çizgi oluşturur
Border-top ==>Katmanin üst kısmında bir çizgi oluşturur
Border-bottom ==>Katmanin alt kısmında bir çizgi oluşturur
Border Kalınlık Değeri
Katmanimizin sağında,solunda,üstünde ve alt kısmında oluşturduğumuz çizginin kalınlık değerini verdiğimiz koddur.Değerlerin 0dan baslayıp Sonsuza gidebileceğini düsünüyorum fakat bir süre sonra ekranın tamamini kaplayacağından değerlerin büyük olmamasi gerekir.Bu yüzden değerleri 0-4px arasinda verebiliriz.CSS de kullanimi Şöyledir;
Borderin kodu belirlenir " : " işareti konulur ve Borderin kalınlık değeri girilir Borderin şekli belinlenir ardından rengi belirlenir " ; " işareti ile kapatilir.
border: 1px solid #999999;
Border Şekilleri
Border sadece düz bir çizgi değildir şekilleri vardir.
#etiket {border-style: dotted;}dotted border Stili - Noktalı Çizgi
#etiket {border-style: dashed;}dashed border Stili - Kesik Çizgi
#etiket {border-style: solid;}solid border Stili - Düz Çizgi
#etiket {border-style: double;}double border Stili - Çift Düz Çizgi
#etiket {border-style: groove;}groove border Stili - İçe Kabarık Çizgi
#etiket {border-style: ridge;}ridge border Stili - Dışa Kabarık Çizgi
#etiket {border-style: inset;}inset border Stili - İçe Gömülü Çizgi
#etiket {border-style: outset;}outset border Stili - Dışa Gömülü Çizgi
Artık Nasıl Kullanicağımızı bildiğimze göre Bir Katman Oluşturup alt kısmını 2px; kalınlığında sağ kısmını 3px kalınlığında sol ve üst kısmınıda kesik çizgili (dashed) 1px kalınlığında çerçeveliyelim.Çizgilerin hepsine siyah renk verelim.
Kod ;
<style type="text/css">
<!--
#katmanadi {
border-top-width: 1px;
border-right-width: 3px;
border-bottom-width: 2px;
border-left-width: 1px;
border-top-style: dashed;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: dashed;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
}
-->
</style>
<div id="katmanadi"></div>Önizleme
Şimdi birde siyah renkte etrafini düz çizgi olarak 1px kalınlığında çizelim
Kod;
<style type="text/css">
<!--
#katmanadi2 {
border: 1px solid #000000;
}
-->
</style>
<div id="katmanadi2"></div>
Önizleme
Anlatim By Ali Mengü
Etiketler ; cssde kenarlik,cssde border, border nedir,border kodlari nelerdir,border nasıl kullanilir,çerçeve nasıl yapılır
Anasayfa