CSS Kutu Modeli – Kenarlık(border) Özellikleri
Kenarlık(border), içerik alanı ve padding etrafındaki bir veya daha fazla
çizgiye denir.
- boder-style
- border-top-style, border-right-style, border-bottom-style, border-left-style
- border-width
- border-top-width, border-right-width, border-bottom-width, border-left-width
- border-color
- border-top-color, border-right-color, border-bottom-color, border-left-color
- border
Sırasıyla incelersek:
border-style
Aldığı Değerler : [ none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ]{1,4} | inherit
Başlnagıç değeri: tanımlama yok
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok
border-style özelliği kenarlık stilini belirlememizi sağlar.(Örn: dotted(noktalı), double(çift) vd.) 10 farklı değeri CSS desteklemektedir. Bu özellik kenarlığın görünmesi için
tanımlanması gereklidir. Bir veya dört değer alabilir eğer dört değer alırsa
sırasıyla üst, sağ, alt ve sol kenarlık stilini belirler. Eğer tek değeri
varsa tüm kenarlık değeri ataması yapılmış demektir. Eğer iki veya üç değer
ataması yapılmış ise margin‘de gördüğümüz sıralama söz konusudur.
p.yeni {
border-style: solid;
}
Internet Explorer 4+
Netscape 4+
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0
border-top-style, border-right-style, border-bottom-style, border-left-style
Aldığı Değerler : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
Başlangıç değeri: tanımlama yok
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok
border-top-style, border-right-style, border-bottom-style, border-left-style border-style özelliğinin her kenara ayrı ayrı atamasını yapabilmek için kullanılır.
h1{
border-style: solid;
border-left-style: none;
}
Internet Explorer 4+(kısmen),6+ (tam)
Netscape 4+(kısmen), 6+ (tam)
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0
border-width
Aldığı Değerler : [ thin | medium | thick | <uzunluk değeri > ]{1,4} | inherit
Başlnagıç değeri: tanımlama yok
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok
İlk olarak stili belirledikten sonra kenarlık kalınlığını belirlemek için border-width değeri kullanılır.
border-width yüzde değeri alamaz.
p {
margin: 5px;
background-color: silver;
border-style: solid;
border-width: 1px;
}
</ol>
Internet Explorer 4+
Netscape (kısmen), 6+(tam)
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0
border-top-width, border-right-width, border-bottom-width, border-left-width
Aldığı Değerler : thin | medium | thick | <uzunluk değeri > | inherit
Başlnagıç değeri: tanımlama yok
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok
border-top-width, border-right-width, border-bottom-width, border-left-width border-width özelliğinin her kenara ayrı ayrı atamasını yapabilmek için kullanılır.
h2 {
border-left-width: medium;
border-style: solid;
}
Internet Explorer 4+ (kısmen), 6+(tam)
Netscape 4+(kısmen), 6+ (tam)
Opera 3.6, 4+
W3C’s CSS Level 1+
CSS Profile 1.0
border-color
Aldığı Değerler : [ <renk> | transparent ]{1,4} | inherit
Başlnagıç değeri: tanımlama yok
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok
border-color özelliği kenarlık rengini belirler. (X)html’deki bordercolor ile benzerdir.
p {
border-style: solid;
border-color: gray;
}
Tek değer tüm kenarlık renklerini belirler, her kenar için ayrı renk tanımlamasıda
yapılabilir.
Internet Explorer 4+
Netscape 4+(kısmen), 6+(tam)
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0
border-top-color, border-right-color, border-bottom-color, border-left-color
Aldığı Değerler : [ <renk> | transparent ]{1,4} | inherit
Başlnagıç değeri: tanımlama yok
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok
border-color özelliğinin her kenara ayrı ayrı atamasını yapabilmek için kullanılır.
Not: Bir kenarlığı yok etmek için kalınlık değeri veririz. Birde CSS2 ile
birlikte gelen transparent özelliği vardır ki bu kenarlığı yok etmez sadece
görünmez yapar.
p {
border-style: solid;
border-color: gray;
}
Tek değer tüm kenarlık renklerini belirler, her kenar için ayrı renk tanımlamasıda
yapılabilir.
Internet Explorer 4+
Netscape 4+(kısmen), 6+(tam)
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0
border
Yapısı : border: <deger>
Aldığı Değerler : <border-width> | <border-style> | <renk>
Başlnagıç değeri: tanımlama yok
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok
border yukarıda sıraladığımız özellikleri tek sefer de tanımlamak için kullanılır. Bir kısaltmadır.
h1 {
border: thick silver solid;
}
Bu özellikleri tek tek atamak isteseydik şöyle bir kod yazmamız gerekecekti.
h1 {
border-top: thick silver solid;
border-bottom: thick silver solid;
border-right: thick silver solid;
border-left: thick silver solid;
}
Internet Explorer 4+
Netscape 4+(kısmen), 6+(tam)
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0
Tasarımla uzaktan yakından alakam yoktu. Sadece Blogger'ın CSS şablonlarının olduğunu biliyordum. Sitenizdeki makalelere rastlayınca kafamda bir şeyler canlandı. Baştan sona kendi temamı oluşturmaya karar verdim ve denemelerim gayet başarılı.
Bunları yaptığınız işe küçük bir ayna tutmak için yazdım. Emekleriniz için çok teşekkürler.
tşkler hocam.
Css ile ilgili sorunlarım da daha çok takip edebileceğim bir site, teşekkürler.
merhabalar sitenin içeriğini yerleştireceğim büyük bir rounded rectangle çizmek istiyorum kenarlığı rounded yapabilme imkanımız varmı nekadar aradımsada bulamadım yardımcı olursanız çok sevinirim.
Merhaba. Ben yüzde kullanarak div genişliklerini tanımladım. Yaptığım sitenin tasarımı tamamen yüzdeli. Fakat border ekleyince kenarlardan taşma oluyor.
Kodu ekliyorum.
<div style="width:50%;
background-color:#66FFCC;
height:200px;">
<div style="width:100%;
background-color: #FFFF99;
height:150px;
border-style:solid;
border-width:1px;">
</div>
</div>
Bu kod IE'da düzgün gözüküyor. Ama firefoxta bozuk. Sebebini yazınızdan anladım. Ama çözüm nasıl olacak?
ben kodlara baktım bi fark göremedim.
hocam bişe soracam.ben kenarlıkta dashed kullandım.sayfayı aşağı doğru indiriyorum internet explorer ile daha sonra tekrar yukarı cıkarınca dashed olan yerler solid oluyor tamamen deil yarısı bu sorunu nasıl çöözerim yardım edin kötü görünüyor
[...] Internet Explorer ve W3C standartları’nda farklı yorumlanan CSS Kutu Modeli yer alıyor. Kutu Modeli hakkında daha fazla bilgiye Fatih Hayrioğlu‘nun CSS Dersleri’nden ulaşabilirsiniz. [...]
@Mehmet Nevresoğlu önerinizi dikkate alacağım. Teşekkürler
Merhaba Fatih bey. Ben tasarıma merakı olan bir yazılımcıyım. İşimin gereği kodlara gömülüyorum ve çoğunlukla ekranda satırlar dolusu kod yazıyor ve görüyorum. Her ne kadar bundan keyif alsamda bir süre sonra insanı sıkıyor. Bazı durumlarda benimde tasarımla ilgilenmem gerekiyor özellikle CSS ilgimi çekiyor ve yazılarınızı takip etmeye başladım. Oldukça faydalı olduklarını düşünüyorum daha önce dile getirilmişti hatırladığım kadarıyla ama ben yine de tekrar söylemek istiyorum. Yazılarda biraz daha görsellik olması gerektiğini düşünüyorum. Adım adım yazılan yazılarda adımları resimler ile desteklemenin çok faydalı olacaktır. Bu özellikle uzun yazılarda yazıyı takip etme, yazıya konsantre olup örnekleri sonuna kadar tatbik etmekte bizim gibi yeni öğrenen arkadaşlarımız için çok daha etkili olur kanımca. Yeni yazılarınızı bekliyor ve başarılarınızın devamını diliyorum saygılarımla..
yazılarınızı beğenerek okuyorum çalışmalarınızda başarılar diliyorum fatih bey.