css-border

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:

• 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.

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:

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.

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:

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) ö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.

Tablo renklerini istediğiniz gibi değiştirebilirsiniz. Bu eğitimimizde göreceğiniz üzere sınır renkleri, metin ve zemin rengi atamaları, <th> elemanının içinde gerçekleştirilmektedir:

table, td, th {
    border: 2px solid yellow;
}

th {
    background-color: pink;
    color: white;
}

background-color ve color özellikleriyle arka zemin ve yazı renklerini kolayca ayarlayabilirsiniz. Dilerseniz, tablonun border özelliğini kullanarak çerçevenin kalınlığı ve renginin nasıl değiştirildiğini de deneyebilirsiniz.

Bir tablonun sınırı ile içerik arasındaki boşluğu ayarlamak için td ve th elemanları üzerinde padding özelliği kullanılır. Şimdi örneğimizle içerideki boşluğu 17 piksel (px) yapalım. Bunun için aşağıda gördüğünüz gibi, istediğimiz boşluk miktarını td parametresinin içinde padding özelliğine piksel cinsinden söyleyebiliriz:

td {
    padding: 17px;
}

Şimdi HTML dosyasında nasıl kullandığımıza bakalım:

Tabloya metin yerleştirmek için, text-align ve vertical-align özellikleri kullanılır. text-align özelliği, yatay yerleştirmeyi belirler; değerleri, left (sol), right (sağ) ya da center (merkez, ortala) olabilir.

td {
    text-align: right;
}

Vertical-align özelliğiyse hücre içinde düşey doğrultudaki atamayı gerçekleştirir; değerler, top (üstte), bottom (altta) veya middle (ortada) olabilir.