CSS Bilgileri -10- CSS Çerçeveler
Merhaba,
HTML öğelerinin dikdörtgen modelinde olduğunu belirtmiştik. Bu sayede üst, alt, sağ ve sol kenarları olmak üzere 4 çerçeve alanına sahiplerdir. Tek seferde tüm kenarlara veya ayrı ayrı kenarlara çerçeve uygulamak mümkündür.
Çerçeveler 3 özelliğe sahiptir:
border-type
: Çerçeve tipidir. solid , dashed, dotted gibi tipler seçilebilir.
border-color
: Çerçeve rengidir. Renk birimleri kullanılabilir.
border-width
: Çerçeve kalınlığını belirti. Ölçü birimleri kullanılabilir.
Ve 4 ayrı alana uygulanabilir:
border-top
: Üst çerçeveyi belirtir.
border-bottom
: Alt çerçeveyi belirtir.
border-left
: Sol çerçeveyi belirtir.
border-right
: Sağ çerçeveyi belirtir.
Örnek kullanım:
.cerceve { border-color: red; border-style: dashed; border-width: 1px; }
Bu classı kullandığımız öğe, kırmızı, çizikli, 1px genişliğinde bir çerçeveye sahip olur. Bunu tek bir css kodu ile de tanımlayabilirdik:
.cerceve{ border: 1px dashed red; }
Bu şekilde de aynı sonucu alabiliriz. Hiç bir fark olmayacaktır.
İkisinden birini seçip aşağıdaki HTML kodumuza uygulayalım:
<p class="cerceve">Bu yazımız çerçeveli olacak.</p>
Görünümü:
Veya sadece bir kenara ekleyebiliriz:
.cerceve{ border-bottom: 1px dashed red; }
Görünümü:
Veya sadece bir kenarı hariç tutabiliriz:
.cerceve{ border: 1px dashed red; border-bottom:none;}
Görünümü:
Kullanacağınız yere göre istediğiniz şekilde kullanmakta özgürsünüz.