19-07-2008 ercani css notları
Önceki yazıda birazda olsa css in bir html elemanına nasıl baktığını gördük. Şimdide bu bakışın tanımlamalarını yazarak örneklendirelim.
PADDİNG (kenar içi boşluk): Genel olarak şu tanımlamaları alır.
- Üst kenar içi boslugu(padding-top)
- Sag kenar içi boslugu (padding-right)
- Alt kenar içi boslugu (padding-bottom)
- Sol kenar içi boslugu (padding-left)
- Kenar içi boslugu (padding)
sadece padding {2em;} diye tanımlanırsa tüm özellikleri aynı anda 2 em olarak kullanır.
veya kısa olarak
padding{2em 4em 3em 1em;} diye tanımlanarak 4 özellik atanmış olur. Aslında tüm tanımlamalar için genel özelik ataması şu şekilde işler.
Eğer tek bir değer belirtilmişse, bu değer tüm kenarlara uygulanır.
İki değer belirtilmişse, ilk değer alt ve üst kenarların, ikinci değer ise sol ve sağ
kenarların iç boşluk genişlikleri olarak ele alınır.
Üç değer belirtilmişse,
birinci üst kenarın, ikinci sol ve sağ kenarın, üçüncü ise alt kenarıniç boşluk genişliği
için belirtilmiş sayılır.
Eğer dört değer belirtilmişse bunlar sırayla üst, sağ, alt ve sol kenar iç boşluk
genişlikleri olarak ele alınır.
Bunu tüm tanımlamalar için düşünebiliriz.
padding ve margin de tüm uzunluk değerlerini kullanabiliriz. (px,in,em,ex..)
MARGİN(kenardışı boşluğu). aynen padding teki gibi değerler alır. aşağıdaki bir örnekteki gibi.
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em;
BORDER(kenar çizgisi): aşağıdaki gibi 3 özellik tanımlanabilir.
Kenar çizgisi sitili (boder-style);
border-top-style, border-right-style, border-bottom-style, borderleft-
style diye 4 tanımlama yapılabilir.ve şu değerleri alır.
none: Kenar çizgisi yoktur. dotted:Kenar çizgisi belirli aralıklarla
dizilmiş noktalardan oluşur.
dashed:Kenar çizgisi belirli aralıklarla dizilmiş çizgi parçalarından oluşur.
solid:Kenar çizgisi tek parça olarak çizilir.
double:Kenar çizgisi çift çizgili çizilir.
groove:Kenar çizgisi tuvale oyulmuş gibi görünür.
ridge:groove'un zıddı Kenar çizgisi kabartma gibi görünür.
inset:Kenar çizgisi çerçevenin tamamının tuvale gömülü gibi görünmesine sebep olur.
outset:inset'in zıddı: Kenar çizgisi çerçevenin tamamının kabartma gibi görünmesine
sebep olur.
örnek: p{border-style:solid;}
Kenar çizgisi genisligi (border-width)
border-top-width, border-right-width, border-bottom-width, borderleft-
width tanımlamaları yapılabilir. ve şu değerleri alır;
uzunluk değerleri.
thin [ince]:İnce kenar çizgisi.
medium[orta]:Orta kalınlıkta kenar çizgisi.
thick[kalın]:Kalın kenar çizgisi.
örnek table{border-width:1px;}
· Kenar çizgisi rengi (border-color)
· border-top-color, border-right-color, border-bottom-color, borderleft-
color olarak tanımlanır. ve tüm renk değerlerini alabilir.
kolay gelsin

