CSS Dersleri Bölüm 10 – Border / Çerçeve – kenar
CSS Border Özelliği
CSS border özelliği bir elementin dış hatlarının rengini ve stilini belirlemeye olanak sağlar.
Border Style
border-style özelliği nasıl bir kenarlığın gösterileceğini tanımlamamızı sağlar.
Not; border-style özelliğini belirtmediğiniz sürece hiçbir border tanımlaması işe yaramaz!
border-style değerleri:
none: Çerçevesiz hal
dotted: Noktalı bir çerçeve
dashed: Tirelenmiş kenarlık
solid: Sade, tek renk ve tek çizgi halinde olan kenarlık
double: Çift kenarlık. border-width değerindeki genişlik değeri ile aynı değere sahip iki çerçeve de.
groove: 3 boyutlu oluklu kenarlık. Efektler border-color değerine bağlıdır.
ridge:3D kabarık çizgi. border-color değerine bağlı.
inset: 3d ilave kenar. border-color değerine bağlı.
outset: 3d ilave kenar. border-color değerine bağlı.
Kendiniz deneyin: Kenarın değerini ayarlama
Kenar genişliği
border-width kenarların genişliğini ayarlamak için kullanılır.
Genişlik piksel olarak veya thin, medium ve thick olarak 3 tanımlı kenar genişliğini kullanabilirsiniz.
Not: The “border-width”tek başına kullanıldığında çalışmaz. “border-style” özelliği ile kenarlar ayarlanmalı ilk önce.
Örnek
|
Kenar rengi
border-color kenarlara renk vermek için kullanılır. Renkler de:
- name -belirli bir renk adı ile,mesela “red”
- RGB – belirli bir rgb değeri ile, mesela “rgb(255,0,0)”
- Hex – belirli bir hex değeri ile,mesela “#ff0000”
Kenar renklerini transparan/”transparent” da yapabilirsiniz.
Not: “border-color” tek başına kullanıldığında çalışmaz. “border-style” özelliği ile kenarlar ayarlanmalı ilk önce.
Örnek
|
Tek tek kenarlar
Farklı kenarlar için farklı kenar özellikleri kullanabilirsiniz CSS’te:
Örnek:
|
Yukarıdaki örnek, tek bir özellikte de belirtilebilinir:
Örnek
|
border-style özelliği, birden dörde kadar özellik alabilir dört kenar olduğundan.
- border-style:dotted solid double dashed;
- üst kenar noktalı
- sağ kenar düz
- alt kenar çift
- sol kenar şerit
- border-style:dotted solid double;
- üst kenar noktalı
- sağ ve sol kenar düz
- alt kenar çift
- border-style:dotted solid;
- üst ve alt kenar noktalı
- sağ ve sol kenar düz
- border-style:dotted;
- tüm kenarlar noktalı
Yukarıdaki örneklerde border-style kullanımını gördünüz. Bununla beraber,border width ve border-color için de aynı kural geçerli olduğundan, rahatlıkla yazabilirsiniz.
Border – Shorthand property
Yukarıdaki örnekte görüldüğü üzere, kenarlar ile uğraşırken düşünülmesi gereken birçok özellik vardır.
Kodu kısaltarak tüm özelliklerin değerlerini tek bir satıda yazmak mümkün olur. Buna kısayazım özelliği denir.
Kenar özelliğinin kısa yazımı için kullanılacak css özelliği “border”‘dır:
Örnek
|
border özelliğini kullandığınızda, verilen değerlerin sırası:
- border-width
- border-style
- border-color
Yukarıdakilerden birinin eksik olması sorun değil sıraya bağlı kaldığınız müddetçe (yine de, border-style ‘i vermek gerekli).
Daha fazla uygulama↓ |
Tek bildirimde tüm css özellikleri üst kenar için Üst kenar için kısa yazım tekinği gösterilmekte.
Alt kenarın stillendirilmesi Alt kenarın nasıl biçimlendiğini gösterir.
sol kenarın genişliği Sol kenarın genişliğinin ayarlanması.
Dort kenarın renginin verilmesi
Dört kenarın csste renklerinin verilmesi.
Sağ kenarın renginin verilmesi
Sağ kenarın renginin nasıl verildiğini gösterir.
Tüm Css’in kenar özellikleri
Özellik | Tanımı |
---|---|
border | tek bir bildirimde tüm css kenar özellikleri |
border-bottom | tek bildirimde alt kenar özellikleri |
border-bottom-color | alt kenar özellikleri |
border-bottom-style | alt kenar stili |
border-bottom-width | alt kenar genişliği |
border-color | dört kenarın rengi |
border-left | tek bildirimde sol kenar özellikleri |
border-left-color | sol kenarın rengi |
border-left-style | sol kenar stili |
border-left-width | sol kenar genişliği |
border-right | tek bildirimde sağ kenar özellikleri |
border-right-color | sağ kenar rengi |
border-right-style | sağ kenar stili |
border-right-width | sağ kenar genişliği |
border-style | tüm kenarların stilli |
border-top | tek bildirimde üst kenar özellikleri |
border-top-color | üst kenar rengi |
border-top-style | üst kenar stili |
border-top-width | Sets the width of the top border |
border-width | Sets the width of the four borders |