Kimyazar - Ben yazarım! - Css kenarlık özellikleri 3

Css kenarlık özellikleri 3

Bir HTML elementinin kenarlarına çizgi çekerken kullanacağımız kodlar şunlardır:

border-style
border-width
border-color

Ayrıca bunlarla birlikte şu konularda da bilgi vereceğiz:

Kenarlık kullanımının kısa yolu

border-style: Kenarlık Stili

Kenarların görünüşünün nasıl olacağı ile ilgili bilgi vermemizi sağlar.

Kullanabileceğiniz stiller:

none - Kenarlık yok

dotted - Noktalı

dashed - Kesik çizgili

solid - Çizgi

double - Çift çizgi

groove

ridge

inset

outset

Örnek bir kullanım:

.kutum { border-style: dotted; }

border-width: Kenarlık Boyutu

Kenar genişliğini belirtmemizi sağlar. ÖNCELİKLE MUTLAKA border-style belirtmemiz gerekir, aksi takdirde görüntülenmeyecektir.

Örnek bir kullanım:

.kutum { border-style: solid; border-width: 1px; }

border-color: Kenarlık Rengi

Kenarlık rengini bu komutla değiştirebiliriz. ÖNCELİKLE MUTLAKA border-style belirtmemiz gerekir, aksi takdirde görüntülenmeyecektir.

Renk kullanımı hakkında bilgi için buraya tıklayın.

Örnek bir kullanım:

.kutum {
border-style: solid;
border-width: 1px;
border-color: #0000CC;
}

Kenarları Ayrı Ayrı Şekillendirmek

İstiyorsak yukarı (top), aşağı (bottom), sağ (right) ve sol (left) kenarları ayrı ayrı biçimlendirebiliriz.

border-left-style - Sol kenarın şekli.
border-right-style - Sağ kenarın şekli.
border-top-style - Üst kenarın şekli.
border-bottom-style - Alt kenarın şekli.

Ayrıca border-style dört kenarın değerini de alacak şekilde yazılabilir. Örneğin:

border-style: dotted solid double dashed;

Üst kenar - dotted,
Sağ kenar - solid,
Alt kenar - double,
Sol kenar - dashed.

Farkettiyseniz border-style yazdıktan sonra sırasıyla saat yönünde kenarları ayrı ayrı belirttik.

border-style: dotted solid double;

Üst kenar - dotted,
Sağ ve Sol kenar - solid,
Alt kenar - double,

Bu kullanımda 4. kenarı yazmadık. Bu kenar solu işaret ettiği için tam tersi olan Sağ taraftaki özelliği alacaktır.

border-style: dotted solid;

Üst kenar ve alt kenar - dotted,
Sağ ve Sol kenar - solid,

Bu kullanımda Yukarı - Aşağı kenarlar ilk yazılan dotted, Sol ve Sağ kenarlar ikinci yazılan solid biçiminde olacaktır.

Kenar Belirtmenin Kısa Yolu

Sadece border kullanarak da border-width, border-color ve border-style değerlerini belirtmemiz mümkün. Örneğe bakalım:

.kutum {
border: 1px #0000CC solid;
}

Buradaki örnekte yer alan üç kodu tek bir kodda birleştirdik. Sırasıyla önce border-width değerini yazdık, sonra border-color ve en son border-style ile üç özelliği birlikte kullandık.

Bu kısayolu da kenarlara ayrı ayrı uygulamanız mümkün. Bu komutlar:

border-left - Sol kenar
border-right - Sağ kenar
border-top - Üst kenar
border-bottom - Alt kenar

Kaynaklar

Css.sitesi.web.tr

Ziyaretçi günlüğü

İp adresin: 18.119.127.177
Bugün ki ziyaretçi: 2
Bugün ki tıklanma:5
Toplam ziyaretçi: 3993
Toplam tıklanma:7278