Kenarlık temelleri
border-width, border-style ve border-color özelliklerini öğrenirsin.
Kenarlık nedir?
Bir kenarlık (border), kutunun içerik ve iç boşluk katmanının dışına çizilen çerçevedir. Üç temel özellik birlikte çalışır: border-width kalınlığı, border-style çizgi tipini ve border-color rengi belirler.
Üç özellikten yalnızca border-style zorunludur. Tip none olursa kalınlık ve renk verilmiş olsa bile kenarlık çizilmez. Bu yüzden görünür bir kenarlık için önce bir tip seçersin.
border-style değerleri
border-style en sık kullanılan birkaç değer alır. solid tek kesintisiz çizgi, dashed kısa çizgiler, dotted noktalar, double iki paralel çizgi çizer.
İki özel değer daha vardır: none kenarlığı tamamen kaldırır, hidden ise onu gizler ama yine de tablo hücrelerinde çakışma çözer. Çoğu durumda solid en temiz sonucu verir.
Uygulama Düğmeye kenarlık ver
.button seçicisi için bir bildirim bloğu yaz. İçine border-width, border-style ve border-color bildirimlerini ekle. Örneğin border-width: 2px, border-style: solid ve border-color: #3366cc.
Örnek çözümü göster
/* düğme kenarlığını ekle */
.button {
border-width: 2px;
border-style: solid;
border-color: #3366cc;
}Kendini test et
-
Kenarlığın çizgi tipini (solid, dashed, dotted) hangi özellik belirler?
- border-color
- border-style
- border-width
- background-color
Cevabı göster
border-style — Doğru. border-style çizgi tipini belirler; solid, dashed, dotted gibi değerler alır.
-
Kesintisiz kenarlık tipini yaz
.box { border-width: 2px; border-style: ____; border-color: #444; }Cevabı göster
.box { border-width: 2px; border-style: solid; border-color: #444; } -
Özelliği göreviyle eşleştir
- border-width
- Kenarlık kalınlığı
- border-style
- Çizgi tipi
- border-color
- Kenarlık rengi