Serkan Çamur
okunma
145
1
2
0
yorum yaz
geri

CSS Border ile Kenar Çizgileri

CSS Border ile Kenar Çizgileri

HTML nesnelerine kenar çizgileri veriyoruz..

Web tasarım meraklılarına yeniden merhabalar :)

Yeni bir CSS makalesinde yine birlikteyiz ve bugünkü konumuz DOM nesnelerine kenarlık çizgilerini verebilmemizi sağlayan CSS Border olacak.

CSS Border, özellikle Div gibi HTML nesnelerine Microsoft Excel'deki hücrelerin kenarlıklarına çizgiler verme şekline
oldukça benzemekte ancak biraz daha işlevseldir.
Bu CSS özelliği oldukça esnek bir kullanıma sahiptir çünkü kenar çizgisi verilecek nesnenin istediğimiz kısımlarına ayrı
ayrı biçimler verebildiğimiz gibi sadece bir kenarına çizgi ataması gerçekleştirebiliyoruz.

Çok fazla kullanım şekline sahip olan bu CSS özelliğinin genel formatı ise;
border-yön-özellik
şeklindedir.

Şimdi sırasıyla tüm alt özellikleri görebilmek adına Dreamveawer'imizi açıyor ve yeni boş bir HTML belgesi oluşturuyoruz.
HTML belgemizi oluşturduktan sonra body tagları arasına Div nesnesi oluşturup kendisine ait CSS sınıfı oluşturuyor ve stil biçimlerini yazıyoruz:

CSS-Class

HTML-Div

Artık Div nesnemizi oluşturduk ve şimdi CSS Border konusuna geçebiliriz :)

Border-Style:

HTML nesnesinin herhangi bir kenarına stil vermemizi sağlar; 4 alt özelliği vardır:

Border-top-style: Üst kenarlığa,
Border-left-style: Sol kenarlığa,
Border-right-style: Sağ kenarlığa,
Border-bottom-style: Alt kenarlığa,
Border-style: Tüm kenarlara stil uygulanmasına olanak sağlar.

Her kenar için farklı stil çeşitleri vardır:

CSS-Border

Bu örneğimizde ise üst kenara solid (katı) seçimini uygulayarak kalın bir düz çizgi kenar oluşturalım,sağ kenara ise 
kesik çizgiler için dashed seçimini uygulayacağız:

CSS-Border-Style

Border-Style

Görüldüğü gibi style seçimi ile kenarlara istenilen stilleri uygulayabiliyoruz :)

Border-Color:

HTML nesnesine atanmış border stillerine renk vermemize olanak tanır ve kullanım formatı:
Border-Yön-Color
şeklindedir.Yazım biçimi ise hemen hemen border-style ile aynıdır diyebiliriz.

Örneğimizde ise üst kenarı kırmızı,sağ kenarı ise mavi renge bürüyelim:

CSS-Border-Color

Border-Color

Border-Width:

Border özelliği tanımlanmış kenarların genişliğini daha doğrusu kalınlığını belirlememize olanak sağlar,istenilen CSS ölçü
birimi kullanılabilir.Formatı ise önceki border formatlarıyla çok benzerdir:
Border-Yön-Width

Örneğimizde üst kenarlığın boyutunu 10px,sağ kenarlığın boyutunu ise 8px yapalım:

CSS-Border-Width

Border-Width

Tüm kenarlıkların border özelliklerini tek seferde vermek için;
border:genişlik stil renk
formatını kullanabiliriz.Örneğin tüm kenarları 5px boyutunda düz siyah renkte ayarlamak için;
border:5px solid #F00
yapmamız yeterlidir.

CSS Border kullanımı ile ilgili bilmemiz gerekenler şimdilik bu kadar yeterlidir diye umuyorum,diğer kullanmadığımız
özellikleri kendi kendinize uygulayarak pratik tecrübenizi artırmanızı öneririm.

Bir sonraki makalemizde görüşmek üzere hoşçakalın :)

Bu yorumumla birlikte

e-posta adresime her yeni makale yazıldığında bildirim gelmesini de istiyorum.

CSS Border ile Kenar Çizgileri Makalesine Ait Yorumlar :
X

Her yeni makale yayınlandığında

olan e-posta adresime bildirim gelmesini istiyorum.

...

Ataturk E-Mail