ETİKETLER

css-border

İÇERİK TÜRLERİ

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.

Tablo Rengi

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.

Tablo Doldurma

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:

Metin Yerleştirme

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.

Abone ol css-border