CSS Dış Çizgileri
Dış çizgi (outline) denilince, elemanların etrafına (sınır çizgileri dışına) çizilecek çizgiler anlaşılır; bundan amaç dikkati buraya çekmektir. Atanacak olan outline özellikleri, bir dış çizginin genişliği, rengi ve stilini belirler.
Örneğimizle konu daha iyi anlaşılacaktır:
Sınır - Kısayol Özelliği
Sınır (Border) özelliğinin aşağıda açıklandığı gibi kısayol tanımlama olanağı da vardır.
- border-width
- border-style (required)
- border-color
nitelikleri tek bir sınır özelliğine aşağıdaki gibi atanabilir:
p {
border: 6px solid pink;
}
Şimdi bunu nasıl kullanacağımıza bakalım:
Farklı Sınır Özellikleri Nasıl Tanımlanır?
- border-style: dotted solid double dashed;
Stilini denediğinizde, üst sınır nokta nokta, sağ sınır katı, alt sınır çift çizgi, sol sınır kesikli çizgi şeklinde olur.
- border-style: dotted solid double;
Stilini denediğinizde, üst sınır noktalı, sağ ve sol sınırlar katı çizgi, alt sınır çift çizgi şeklinde olur.
Farklı Kenarlar
CSS'de elemanların farklı kenarları farklı özelliklerde olabilir.
Aşağıdaki örnekte <p> elemanı için belirlenen sınırlarda farklı özellikler tanımlanmış durumda:
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dashed;
border-left-style: solid;
}
Şimdi örneğimizle nasıl yapıldığını görelim:
Sınır Çizgisi Rengi
CSS kodlamada border-color özelliği, sınır çizgisinin rengini atamak için kullanılır. Renk aşağıdaki yollardan biriyle atanır:
- name: renk adı (red,blue) kullanılarak renk atamak.
- RGB: Red-Green-Blue renk uzayı ile renk atamak: "rgb(255,111,30)" gibi.
- Hex: hexadecimal (onaltılık) değer ile renk atamak: "#ff0ec0" gibi.
Sınır çizgisini dilerseniz şeffaf yani "transparent" olarak da atayabilirsiniz.
Sınır Genişliği
CSS kodlamada border-width özelliği, sınır çizgisinin genişliğini atamak için kullanılır.
Genişlik piksel cinsinden atanır ya da önceden tanımlanmış üç değerden biri olarak atanabilir. Bu üç değer, thin (ince), medium (orta) ve thick (kalın) şeklindedir.
p.one {
border-style: dashed;
border-width: 6px;
}
p.two {
border-style: dashed;
border-width: medium;
}
Şimdi bu tanımlamayı bir örnekle nasıl kullandığımıza bakalım:
Sınır Biçimi (Border Style)
Border-style özelliği, hangi tür sınır çizgisinin görüntüleneceğini belirler.
CSS kodu içindeki border-style değerlerini tanımlarken aşağıdaki özellikleri kullanabilirsiniz:
CSS Sınır (Border) Özelliği
CSS Sınır (border) özellikleri, bir elemanın sınırlarına ait biçim (stil), boyut ve renkleri belirler.
Bu eğitim içeriğimizin devamında sınır stillerini nasıl değiştereceğinizi, renk, genişlik gibi özellikleri nasıl kullanacağınızı göreceksiniz.
Tarayıcı Uyumluluğu
Internet Explorer 8 ve önceki sürümlerde boşluk (padding) ve sınır (border), genişlik özelliği içine katılıyordu. Internet Explorer 8 ve öncesi sürüm web tarayıcılarla uyum probleminden kaçınmak için, HTML sayfasına <!DOCTYPE html> ifadesini ekleyiniz.
Örnek bir <!DOCTYPE html> ifadesini aşağıda bulabilirsiniz:
CSS Bir Elemanın Genişliği ve Yüksekliği
Bir elemanın genişlik ve yüksekliğinin bütün tarayıcılarda doğru çalışmasını garantilemek için kutu modelinin nasıl çalıştığını bilmek gerekir. Bunun için aşağıdaki örnek üzerinden bir hesaplama yapalım:
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
padding: 0;
}
Burada biraz uzun bir toplama işlemi gerekecek:
320px (width) + 20px (left + right padding) + 10px (left + right border) + 0px (left + right padding) = 350px