Kenarlık (Border) Özellikleri
Bu dersimizde HTML etiketleri üzerinde kenarlık özelliklerin nasıl atandığını, çeşitlerini ve kullanım şekillerinin anlatılarak öğrenilmesi hedeflenmektedir. Örnekte verilen index.html dosyası üzerine yine örnekleri verilen style.css dosyaları tanımlanarak kendi tarayıcınızda sonuçları gözlemleyebilirsiniz.
<!DOCTYPE html> <html> <head> <title>Kenar (Border) Özellikleri</title> <link rel="stylesheet" type="text/css" href="style.css"> <meta charset="utf-8"> </head> <body> <!-- border-style (kenarlık şekli) --> <h2>border-style (kenarlık şekli)</h2> <p class="solid">Bu bir düz çizgili kenarlık</p> <p class="dotted">Bu bir noktalı kenarlık</p> <p class="dashed">Bu bir kesik çizgili kenarlık</p> <p class="double">Bu bir çift çizgili kenarlık</p> <p class="groove">Bu bir oluklu kenarlık</p> <p class="ridge">Bu bir kabartma kenarlık</p> <p class="inset">Bu bir içe gömülü efektli kenarlık</p> <p class="outset">Bu bir dışa çıkmış efektli kenarlık</p> <p class="hidden">Bu bir gizlenmiş kenarlı kenarlık</p> <p class="none">Bu paragrafta border yok</p> <p class="b-style">Bu paragrafın herbir kenarın şekli ayrı ayrı tanımlandı</p> <p class="b-style1">Bu paragrafın herbir kenarın şekli kısa yazımla ayrı ayrı tanımlandı</p> <p class="b-style2">Şekli belirtilmeyen kenarlar karşı kenarın şeklini kullanır</p> <!-- border-width (kenarlık kalınlığı) --> <h2>border-width (kenarlık kalınlığı)</h2> <p class="border-width">Bu paragrafın kenarlık kalınlarını stil dosyası ile 5 pixel belirlendi</p> <p class="medium">Bu paragrafın kenarlıklarına medium kenarlık ölçüsü uygulandı</p> <p class="thick">Bu paragrafın kenarlıkları kalın (thick) olarak stil ataması yapıldı</p> <p class="thin">Bu paragrafın kenarlıkları ince (thin) olarak stil ataması yapıldı</p> <p class="width">Bu paragrafın her bir kanarının kalınlığı ayrı ayrı belirtildi.</p> <!-- border-color (kenarlık rengi) --> <h2>border-color (kenarlık rengi)</h2> <p class="b-color">Bu paragrafın kenarları kırmızı renge sahip</p> <p class="b-color1">Bu paragrafın herbir kenarı ayrı ayrı tanımlanmıştır.</p> <p class="b-color2">Bu paragrafın kenar renkleri üstten başlayarak saat yönünde oluşur</p> <p class="b-color3">Bu paragrafın kenar renkleri üstten başlayarak saat yönünde oluşur. Yazılmayan kenarlar karşı kenarın renk değerini alır.</p> <!-- border kısa tanımlama --> <h2>border kısa tanımlama</h2> <p class="kisa">Bu paragrafa kısa css kullanımı ile stil ataması yapılmıştır</p> <!-- border-radius (köşeleri yuvarlama) --> <h2>border-radius (köşeleri yuvarlama)</h2> <p class="radius">Bu paragrafın kenarlıklarına ait köşeler yuvarlatıldı</p> <p class="radius1">Bu paragrafın sol alt ve sağ üst köşeleri yuvarlatıldı</p> <p class="radius2">Kısa yazım ile köşelerin herbirini belirli büyüklükte yuvarlama</p> <p class="radius3">Köşeler sol üst köşeden başlayarak saat yönünde değer alır yazılmayanlar çapraz karşı köşenin değerini alır.</p> <p class="radius4">Köşeler sol üst köşeden başlayarak saat yönünde değer alır yazılmayanlar çapraz karşı köşenin değerini alır. 3 değer yazıldığındada bu şekilde olacaktır.</p> <h1>deneme</h1> </body> </html>
Kenarlık Çeşitleri (border-style)
HTML üzerinde elementlere bir çok çeşitte ve yöntemle border ataması yapabiliriz. Kullanılacak olan border çeşitlerini veya border stillerini border-style deklarasyonu ile tanımlıyoruz. Border-style deklarasyonunun alacağı değerler;
- solid (düz çizgi kenarlık)
- dotted (noktalı kenarlık)
- dashed (kesik çizgili kenarlık)
- double (çift çizgi kenarlık)
- groove (oluklu kenarlık)
- ridge (kabartılı kenarlık)
- inset (kenarlıklara içe gömülmüş bir çerçeve efekti verir)
- outset (kenarlıklara dışa çıkıntılı bir çerçeve efekti verir)
- hidden (gizlenmiş kenarlık)
- none (kenarlık uygulanmış bir etiketin kenarlıklarının kaldırılması )
p.solid{border-style: solid;}
p.dotted{border-style: dotted;}
p.dashed{border-style: dashed;}
p.double{border-style: double;}
p.groove{border-style: groove;}
p.ridge{border-style: ridge;}
p.inset{border-style: inset;}
p.outset{border-style: outset;}
p.hidden{border-style: hidden;}
p.none{border-style: none;}
Herbir Kenara Tek Tek Stil Atama
HTML etiketleri kenarlık atanırken herbir kenara ayrı ayrı stil ataması yapılabilir. Ataması yapılacak kenarları pozisyonu olarak Üst (top), Sağ (right), Alt (bottom), Sol (left) yönleri kullanılır.
p.b-style{
border-top-style: solid;
border-right-style: dotted;
border-bottom-style: dashed;
border-left-style: double;
}
Bu stil atamalarının yapılmasının kısa yol ve yöntemleri bulunur. Yukarıdaki örneğin aynı sonucunu aşağıdaki örnekteki gibi de belirleyebiliriz.
p.b-style1{
border-style: solid dotted dashed double;
/*border-style: üst sağ alt sol; Üst kenardan başlar saat yönünde döner*/
}
Yukarıdaki örnekte border-style deklarasyonunda aralarında boşluk bırakılarak 4 adet kenarlık stili tanımlanmış. Bu sitiller herhangi bir etikette öncelikle üst kenarlıktan başlayarak saat yönü istikametinde dönerek değer alır. Yukarıdaki örnekte border-style: üstkenar sağkenar altkenar solkenar olarak verilmiştir.
Eğer 2 veya 3 değer yazılmış olsa sonuç ne olurdu? CSS’te bir çok elementin işleyişi saat yönünde değer alır. Bu bir renk özelliği de olabilir, bir köşe özelliği de olabilir. Değerleri girilmemiş durumdaki argümanların seçtiği yöntem karşı kenarın değeri kullanmaktır. Yani üst kenar ve sağ kenar argümanları tanımlanmış fakat alt ve sol argümanların tanımlanmamış olması durumunda üst argümana verilen değer aynı şekilde alt argüman için de uygulanır. Aynı şekilde sağ, sol için uygulanır.
p.b-style2{
border-style: solid dotted;
}
border-style: üst sağ; Üst kenardan başlar saat yönünde döner üst kenar düz çizgi, sağ kenar noktalı olarak tanımlanmış tanımlanmayan alt kenar üstün değerini alarak düzçizgi olur, sol taraf ise sağ tarafın değerini alarak noktalı gözükür.
Kenar Genişlik/Kalınlıkları (border-width)
HTML elementlerine eklenen kenarlıkların (border) kalınlıklarını (genişliklerini) ayarlamak CSS’de son derece kolaydır. Bu işlem için border-width deklarasyonu kullanılır. Deklarasyon px, in, pt, cm, em, etc gibi ölçü birimlerde değer olabilir. Genellikle pixel (px) kullanımı yaygındır. Girilecek ölçü birimlerinden farklı olarak standart ölçüye sahip thin (ince), thick (kalın) ve medium (orta) değerleri ile kenar genişliği atamak ta mümkündür. Dikkat edilmesi gereken bir husus kalınlık belirtmeden önce border-style atamasının yapılmış olmasıdır.
p.border-width{
border-style: solid;
border-width: 5px;
}
p.medium{
border-style: solid;
border-width: medium;
}
p.thick{
border-style: solid;
border-width: thick;
}
p.thin{
border-style: solid;
border-width: thin;
}
CSS’de genişlikler kısa yazım ile her bir kenara ayrı ayrı uygulamak mümkündür. Border-width özelliği 4 argüman taşıyabilir. Argümanlar üst kenardan başlayarak saat yönünde dönerek değer alır. Yazılmamış veya yazılmayan değerler kendisine karşı olan kenarın değerleri atanmış olur.
p.width{
border-style: solid;
border-width: 3px 6px 6px 4px;
}
Yukarıdaki örnek incelendiğinde ilk argüman üst kanarı ifade eder ve saat yönünde dönerek sağ kenar, alt kenar ve sol kenar olarak deklare edilmesi sebebiyle üst kenar genişliği 3px, sağ ve alt kenara 6 px değeri verilmiştir. Sol kenar ise 4 px olarak belirlenmiştir. Eğer argümanlar eksik verilmiş olsaydı; kenarlar kendisine karşı kenarın değerlerini kullanır.
p.width{
border-style: solid;
border-width: 3px 6px 6px;
}
Yukarıdaki örnekte border-width deklarasyonu 3 argüman taşımaktadır. İlk argüman üst kenarın genişliği 3px’dir, ikinci argüman saat yönü kuralıyla sağ kenarı işaret eder ve değeri 6px tanımlanmıştır. 3ncü argüman ise alt kenarı işaret eder ki değeri 6px atanmıştır. Deklare edilmeyen sol kenar karşı kenar olan sağ kenarın değerini alır ki buda 6px olacaktır.
Kenarlık Renkleri (border-color)
HTML etiketlerine eğer kenarlık atanmışsa, buna renk stili uygulamak border-color: deklarasyonu ile mümkündür. Daha önceki derslerde de anlatılan renk özelliklerinin aynı özelliklerini taşır. Her zamanki gibi en yaygın kullanımı HEX renk değerleri olmasına rağmen doğrudan renk ismi kullanımı ve RGB renk skalası kullanımıda mümkündür.
p.b-color{
border-style: solid;
border-width: 5px;
border-color: red;
/* border-color: #ff0000; Hex olarak kırmızı rengi verir*/
/* border-color: rgb(255,0,0); RGB scalasında kırmızı rengi işaret eder*/
}
Border-color: deklarasyonunda verilen değer tüm kenarlara uygulanır. Her bir kenara ayrı ayrı renk tanımlamakta mümkündür. Border-hangi kenar-color: deklarasyonu ile tanımlanır.
p.b-color1{
border-style: solid;
border-width: 5px;
padding: 10px;
border-top-color: red; /*üst kenar*/
border-right-color: blue; /*sağ kenar*/
border-bottom-color: yellow; /*alt kenar*/
border-left-color: green; /*sol kenar*/
}
Her bir kenara kısa yazım metoduyla da renk stili uygulamak mümkündür. Yukarıdaki özelliklerdeki gibi saat yönü kuralı burada da geçerlidir. Aşağıdaki örnekteki p.b-color2 seçicisindeki border-color deklarasyonunu incelediğimizde 4 farklı renk verildiğini görmekteyiz. İlk argüman üst kenara, saat yönünde ilerleyerek ikinci argüman sağ kenara, üçüncü alt kenara ve dördüncü argüman sol kenara uygulanır.
p.b-color3 seçicisindeki border-color deklarasyonunu incelediğimizde sadece 2 argüman ve değerlerini, red, blue olarak görüyoruz. Geçerli kuraldan yine bahsetmek gerekirse, üst kenara ilk argüman olan red (kırmızı) rengi uygulanır, sırasıyla sağ kenara da blue (mavi) rengi atanmış olur. Argümanda bulunmayan 3ncü ve 4ncü değerler karşı kenarların renk değerlerini alırlar. Böylelikle 3ncü argüman alt kenar olması gerekirken verilmemiş ve üst kenar rengi olan kırmızı alt kenara da uygulanır. 4ncü argüman sol kenara uygulanması gerekirken deklarasyonda belirtilmediği için karşı kenarı olan sağ kenarın değerini alır ki o da, 2nci argümanda belirtilmiş olan blue (mavi) renktir.
p.b-color2{
border-style: solid;
border-width: 5px;
padding: 10px;
border-color: red blue green gray;
/*üst kenar KIRMIZI sağ kenar MAVİ alt kenar YEŞİL sol kenar GRİ olacaktır*/
}
p.b-color3{
border-style: solid;
border-width: 5px;
padding: 10px;
border-color: red blue; /*border-color: üstkenar sağ kenar;*/
/*Yazılmayan kenarlar karşı kenarının rengini alırlar. üstkenar KIRMIZI sağkenar MAVİ
yazılmayan alt kenar karşı kenarı olan üstkenarın rengi olan KIRMIZI'yı alır.
Yazılmayan sol kenar ise karşı kenar rengi olan MAVİ olacaktır.
*/
}
Border (Kenarlık) Deklarasyonunun Kısa Kullanımı
Yukarıdaki anlatılan deklarasyonun hepsini tüm kenarlara aynı değer uygulanacaksa kısa yazım metodunu kullanmak yerinde olacaktır. Border deklarasyonu; border: | border-width (genişlik) | border-style (kenarlık şekli) | border-color (kenarlık rengi); şeklinde tanımlanır. DİKKAT: bu deklarasyonda 2nci argüman olan border-style mutlaka belirtilmelidir. Eğer birinci argüman olan border-width belirtilmezse ve ilk olarak border-style verilirse varsayılan (default) kenar genişliği kullanılır. 3ncü argüman olan renk belirtilmezse varsayılan olan siyah renk uygulanır.
p.kisa{
/* border: border-width border-style (zorunlu yazılmalı) border-color*/
border: 5px solid red;
/* border: solid; bu deklarasyonda varsayılan genişlik ve varsayılan renk kullanılır. */
}
Kenar Köşelerini Yuvarlama (border-radius)
HTML deki etiketlere kenarlık stilleri uygulanmasında estetik bir görünüm kazandırılması maksadıyla kenar köşeleri yuvarlanarak yumuşatılır. Bu stili uygulamak için border-radius: deklarasyonu kullanılır. Değer olarak genellikler px cinsinden değer belirtilir.
p.radius{
border: 2px solid green;
padding: 10px; /* yazının textin kenarlıklardan olan uzaklığı*/
border-radius: 10px; /* tüm köşelere 10px lik bir yuvarlatma uyguladı*/
}
Yukarıdaki örneği incelediğimizde 2px kalınlığında düz çizgi şeklinde (solid) ve yeşil (green) renkte olan kenarlık p.radius seçicisine uygulanmış. Ayrıca daha ileride detaylı anlatacağımız padding deklarasyonu kullanılmış. Padding bu örnekte paragraf seçicisine kullanılmasından dolayı metnin (text) sınırlarından kenarlara 4 bir taraftan (üst,sağ,alt,sol) olan uzaklığını ifade eder ki sadece köşe yumuşatmalarının daha iyi gözlemlenmesi için belirtilmiştir. Konumuz olan border-radius bu örnekte 10px olarak uygulanmıştır.
Köşe yumuşatmaları tek bir argümanla tüm kenarlık köşelerine uygulanacağı gibi her bir kenar köşesine ayrı ayrı stil ataması yapmak mümkündür. Bu deklarasyonun alacağı argümanlar border-birincikenar-ikincikenar-radius: şeklinde belirtilir. Köşelere uygulanacağı için iki kenarın kesişimi bize köşeyi vereceği için argümanlarda iki kenar kullanılmıştır.
p.radius1{
/* Kenarlık köşelerini ayrı ayrı yuvarlatma*/
border: 2px solid green;
padding: 10px; /* yazının textin kenarlıklardan olan uzaklığı*/
border-bottom-left-radius: 10px; /* alt sol köşeye 10px lik bir yuvarlama uygulandı*/
border-top-right-radius: 5px; /* üst sağ köşeye 10px lik bir yuvarlama uygulandı*/
}
Diğer bir kullanım şekli ise kısa yazım metodunu kullanmaktır. Her zamanki saat yönü kuralımız burada da geçerlidir. Başlangıcımız sol üst köşedir. Deklarasyonda sırasıyla sol-üst köşe, sağ-üst köşe, sağ-alt köşe, sol-alt köşe şeklinde saat yönü takip edilerek stil uygulaması yapılır. Aşağıdaki ikinci örnekte (seçici p.radius3) deklarasyona sadece 2 argüman belirtilmiştir. İlk argüman sol-üst köşe için uygulanır. ikinci argüman ise sağ-üst köşe için uygulanır. Bu sıra saat yönünde devam eder. Argümanda verilmeyen sağ-alt ve sol-alt köşelerin alacağı değerler çapraz olarak karşı köşelerin değerleri olacaktır. Kısaca sağ-alt köşe, sol-üst köşenin değerini (1nci argüman), sol-alt köşe sağ-üst köşenin (2nci argüman) aldığı değeri alacaktır.
p.radius2{
border: 2px solid green;
padding: 10px; /* yazının textin kenarlıklardan olan uzaklığı*/
/*border-radius: sol üst köşe | sağ üst köşe | sağ alt köşe | sağ sol köşe*/
border-radius: 4px 6px 8px 10px;
/*Köşelerin posizyonu sol üst köşeden başlar saat yönünde döner*/
}
p.radius3{
border: 2px solid green;
padding: 10px; /* yazının textin kenarlıklardan olan uzaklığı*/
border-radius: 8px 16px;
/*
Eğer 3 köşe değeri girilirse (border-radius: 8px 15px 4px;) sol-üst-köşe=8px
sağ-üst-köşe=15px sağ-alt-köşe=4px olur yazılmayan sol-alt-köşe karşı çapraz köşesi olan
sağ-üst-köşenin 15px lik değerini alır
*/
}
Bir önceki CSS3 ve HTML Dersleri | Arkaplan (Background) Özellikleri konulu yazıma ulaşmak için tıklayınız…
Son Yorumlar