HTML Image Map b2s1 Ek4 Ek 6 Ek5 b8s1 b1s1  Ek7 Nitelikler b5s1.htm Ek2 b3s1 Ek3 b7s1 Ek7 Elementler Ek1 b4s1 b6s1  Ek7 Catalogue index previous next

Katlı Stil Sayfaları (Sürüm 3)

Kenar (Border)

Sayfa 1 / 4


 

Kenarlar için Genel Bilgi

 

CSS kuramında, her element, içiçe geçmiş kutulardan oluştuğu varsayılan, kutu modeline (box model) göre, görüntülenir. Kutu modelini incelerken de üstünde duracağımız gibi, kutunun en dış sınırı, bir elamanı komşu elemanlardan ayıran kısım "marj", ondan bir içerisi de kenar (border) dir. Kenar alanının içinde gezinti-yolu (padding), onun da içinde içerik (content) bölgesi bulunmaktadır. Marj alanı daima saydamdır. Bu durumda, bir elementi çevreleyen kutu sisteminde ilk görüntülenecek olan alan, sınır alanı niteliği taşıyan öğe, elementin kenarıdır. Her elementin bir görüntülenme kutusu olduğundan, her elementin bir kenarı bulunmaktadır. Bu bölümde, elemntlerin kenarlarının görüntü özellikleri üzerinde durulacaktır.

Uzay geometrisinde bir küp olarak belirlenen elementin görüntü kutusunun, monitör düzlemindeki kesiti bir kare'dir. Bu karenin dört kenarı vardır. üst kenar, 'border-top', sağ kenar, 'border-left', alt kenar, 'border-bottom', sol kenar da 'border-left' olarak adlandırılır. Güncel belge çözümleyicilerin tümünde desteklenen CSS3 kuralları, element kenarlarını geniş bir seçenek şablonundan yararlanarak görüntülemeye ve renklendirmeye olanak sağlarlar. Aşağıda ayrıntıları ile bu yöntemleri inceleyecek ve örnekler yaparak uygulamaya çalışacağız.

 

Kenar Stilinin Belirtilmesi

 

İlk inceleyeceğimiz kenar-stili özelliğinin dört variantı bulunmaktadır. Bir elementin her dört kenarı için ayrı bir kenar-stili özelliği tanımı bulunmaktadır. Burada ilk olarak üst-kenar-stili 'border-top-style' özelliğini inceleyeceğiz. Bu özellik aynı zamanda, diğer kenar özellikleri için de bir temel yöntem oluşturacaktır.

 

Üst-kenar-stili, 'border-top-style' Özelliği (IE 6.02 SP2 desteği var)

Üst-kenar-stili, 'border-top-style' özelliği, aşağıda verildiği gibi tanımlanmıştır:

 

İsim:'border-top-style'

Değer: <border-style>

Başlangıç Değeri: none

Uygulanabilecek Elementler:tüm elementler

Kalıtım:hayır

Yüzde: bildirilmemiştir

Medya:görsel (visual)

Hesaplanan Değer :bildirilen değer

Değerlerin açıklanması :

none

Kenar çizgisi yok. Renk gözardı edilir. Kenar kalınlığı (border-width) değeri 0 olarak kabul edilir.

hidden

<none> ile aynı. Bazı durumlarda tabloların kenar çizgilerini iptal etmek için kullanılır.

dashed

Küçük çizgiler halinde gösterilir.

dotted

Noktalar halinde gösterilir.

solid

Sürekli çizgi.

double

İki paralel ve arlarında bir boşluk alanı olan çizgi. Boşluk bölgesinin genişliği belirtilmemiştir ce belge çözümleyiciye göre değişir, sadece çizgiler ve boşluk alanının kalınlığının toplamı, 'border-width' değeri kadar olacaktır.

dot-dash

Bir nokta, bir küçük çizgi birbirleri ardından çizilecektir.

dot-dot-dash

Bir nokta, onu takip eden ikinci bir nokta, onun ardından bir küçük çizgi, birbirleri ardından çizilecektir.

wawe

Sinus dalgası şelinde bir sürekli çizgi halinde görüntülenme.

groove

Kanaviçeye kakma gibi içerlek görünen süreli çizgi. Kakma etkisi genel olarak 'border-color' renginden daha koyu ve daha açık iki rengin yanyana kullanımı ile "gölge etkisi" oluşturarak ile elde edilir.

ridge

Kanaviçeden yükselti şeklinde görüntü oluşturan bir sürekli çizgi.

inset

Kanaviçeden daha düşük yükseltide görünen bir sürekli çizgi. Tabololar için daha değişik bir görüntü oluşturabilir.

outset

Kanaviçeden daha yüksek yükseltide görünen bir sürekli çizgi. Tabololar için daha değişik bir görüntü oluşturabilir.

Bu özelliğe ait bir uygulama, border-top-style.htm dosyasında incelenebilir. Bu dosyada görüldüğü gibi, paragraf gibi akla gelmeyen bir elementin dahi, kenarları sınır çizgileri ile belirtilebilmektedir.

Uygulamalarda, bir elementin her kenarının kenar-stilinin ayrı ayrı CSS3 özelliklerinin belirtilmesi yerine, 'border-style' kısayol özelliğinin kullanılması daha kullanışlı olacaktır.

'border-style' Özelliği, sadece, kenar-alanı şekli ile ilgilidir. Art-alan (background) rengi ile etkileşim sonucu, kenar-alanı şekli görünmez veya çok silik olabilir. Bu durumun önlenmesi için, denemeler sonunda uygun bulunacak bir kenar-alanı renginin açık (expicit) bir kural ile belirtilmesi sağlık verilir.

IE 6 SP2 border-top-style özelliğini desteklemektedir.

 

Sağ-kenar-stili, 'border-right-style' Özelliği (IE 6.02 SP2 bu özelliği desteklemektedir)

 

Sağ-kenar-stili, 'border-right-style' özelliği, aşağıda verildiği gibi tanımlanmıştır:

 

İsim:'border-right-style'

Değer: <border-style>

Başlangıç Değeri: none

Uygulanabilecek Elementler:tüm elementler

Kalıtım:hayır

Yüzde: bildirilmemiştir

Medya:görsel (visual)

Hesaplanan Değer :bildirilen değer

Bu özelliğe ait bir uygulama, border-right-style.htm dosyasında incelenebilir.

Uygulamalarda, bir elementin her kenarının kenar-stilinin ayrı ayrı CSS3 özelliklerinin belirtilmesi yerine, 'border-style' kısayol özelliğinin kullanılması daha kullanışlı olacaktır.

'border-style' Özelliği, sadece, kenar-alanı şekli ile ilgilidir. Art-alan (background) rengi ile etkileşim sonucu, kenar-alanı şekli görünmez veya çok silik olabilir. Bu durumun önlenmesi için, denemeler sonunda uygun bulunacak bir kenar-alanı renginin açık (expicit) bir kural ile belirtilmesi sağlık verilir.

 

IE 6 SP2 border-right-style özelliğini desteklemektedir.

 

Alt-kenar-stili, 'border-bottom-style' Özelliği (IE 6.02 SP2 bu özelliği desteklemektedir)

 

Alt-kenar-stili, 'border-bottom-style' özelliği, aşağıda verildiği gibi tanımlanmıştır:

 

İsim:'border-bottom-style'

Değer: <border-style>

Başlangıç Değeri: none

Uygulanabilecek Elementler:tüm elementler

Kalıtım:hayır

Yüzde: bildirilmemiştir

Medya:görsel (visual)

Hesaplanan Değer :bildirilen değer

Uygulamalarda, bir elementin her kenarının kenar-stilinin ayrı ayrı CSS3 özelliklerinin belirtilmesi yerine, 'border-style' kısayol özelliğinin kullanılması daha kullanışlı olacaktır.

'border-style' Özelliği, sadece, kenar-alanı şekli ile ilgilidir. Art-alan (background) rengi ile etkileşim sonucu, kenar-alanı şekli görünmez veya çok silik olabilir. Bu durumun önlenmesi için, denemeler sonunda uygun bulunacak bir kenar-alanı renginin açık (expicit) bir kural ile belirtilmesi sağlık verilir.

 

IE 6 SP2 bu özelliği desteklemektedir.

 

Sol-kenar-stili, 'border-left-style' Özelliği (IE 6.02 SP2 bu özelliği desteklemektedir)

 

Üst-kenar-stili, 'border-left-style' özelliği, aşağıda verildiği gibi tanımlanmıştır:

 

İsim:'border-left-style'

Değer: <border-style>

Başlangıç Değeri: none

Uygulanabilecek Elementler:tüm elementler

Kalıtım:hayır

Yüzde: bildirilmemiştir

Medya:görsel (visual)

Hesaplanan Değer :bildirilen değer

Uygulamalarda, bir elementin her kenarının kenar-stilinin ayrı ayrı CSS3 özelliklerinin belirtilmesi yerine, 'border-style' kısayol özelliğinin kullanılması daha kullanışlı olacaktır.

'border-style' Özelliği, sadece, kenar-alanı şekli ile ilgilidir. Art-alan (background) rengi ile etkileşim sonucu, kenar-alanı şekli görünmez veya çok silik olabilir. Bu durumun önlenmesi için, denemeler sonunda uygun bulunacak bir kenar-alanı renginin açık (expicit) bir kural ile belirtilmesi sağlık verilir.

 

IE 6 SP2 'border-left-style' özelliğini desteklemektedir.

 

Kenar Stillerinin Kısayol Bildirimi, 'border-style' Özelliği (IE 6.02 SP2 bu özelliği desteklemektedir)

 

Kenar-stili özellikleri, belki de en pratik olarak 'border-style' kısayol özelliği ile belirtilebilir.

Kısayol kenar-stili bildirimi , 'border-style' özelliği, aşağıda verildiği gibi tanımlanmıştır:

 

İsim:'border-style'

Değer: <border-style>{1,4}

Başlangıç Değeri: Her özellik için ayrı

Uygulanabilecek Elementler:tüm elementler

Kalıtım:hayır

Yüzde: bildirilmemiştir

Medya:görsel (visual)

Hesaplanan Değer: Kendi özelliklerine bakınız

Bu özelliğin değerleri, kenar stili özelliklerinin üst kenardan başlanarak saat yönünde belirtilmesi ile yapılır (üst sağ alt sol). Değerler, birbirlerinden boşluk ile ayrılmış bir liste olarak bildirilir. Bu konuda bir örnek, borderstylehortcut.htm dosyasında incelenebilir.

IE 6.02 SP2 'border-style' özelliğini tam olarak desteklemektedir. Art-alan (background) rengi ile etkileşim sonucu, kenar-alanı şeklinin görünmez veya çok silik olması durumunda, denemeler sonunda uygun bulunacak bir kenar-alanı renginin, örnekte de görüldüğü gibi, açık (expicit) bir 'border-color" kuralı ile belirtilmesi, etkileşimi engelleyerek görünmezliği ortadan kaldıracaktır.

 

IE 6 SP2 kısayol 'border-style' tanımını desteklemektedir.

Thursday, October 6, 2005 20:25

validate in W3C !