Liste özelliği ilk olarak listeleme amaçlı kullanılsa da şimdilerde menü yapımında kullanımı revaçtadır. Burada liste özellikleri yanısıra display ve white-space özelliklerinden de bahsedilecektir.
list-style
list-style-type
list-style-image
list-style-position
white-space
display
list-style-type
Yapısı : list-style-type: <deger>
Aldığı Değerler : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
Başlangıç değeri: disc
Uygulanabilen elementler: display değeri list-item alan elementler
Kalıtsallık: Var
list-style-type özelliği list-item işaretinin tipini belirler. list-style-images özelliği none değeri aldığında veya resim görüntülenemediğinde kullanılır.
ul.arabalar {
list-style-type: none
}
ol ol ol {
list-style-type: lower-roman /* i ii iii iv v gibi. */
}
Browser Uyumu:
Internet Explorer 4+
Netscape 4+
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0
list-style-image
Yapısı : list-style-image: <deger>
Aldığı Değerler : <url> | none
Başlangıç değeri: none
Uygulanabilen elementler: display değeri list-item alan elementler
Kalıtsallık: Var
list-style-image özelliği list-style işaretinin yerine resim koymak için kullanılır.
ul {
list-style-image: url(mavitop.gif)
}
Browser Uyumu:
Internet Explorer 4+
Netscape 6+
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0
list-style-position
Yapısı : list-style-position: <deger>
Aldığı Değerler : inside | outside
Başlangıç değeri: outside
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok
list-style-position özelliği list-item işaretlerin metinin içinden(inside) veya soldan dışında(outside) mı olacağını belirler.
ul {
list-style-position: inside
}
Browser Uyumu:
Internet Explorer 4+
Netscape 6+
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0
list-style
Yapısı : list-style: <deger>
Aldığı Değerler : <list-style-type> |<list-style-position> | <url>
Başlangıç değeri:0
Uygulanabilen elementler: display değeri list-item alan elementler
Kalıtsallık: Var
list-style özelliği list-style-type, list-style-position ve list-style-image özelliklerinin kısayoludur.
ul {
list-style: disc outside
}
ol {
list-style: decimal inside
}
Browser Uyumu:
Internet Explorer 4+
Netscape 6+
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0
white-space
Yapısı : white-space: <deger>
Aldığı Değerler : normal | pre | nowrap
Başlangıç değeri: normal
Uygulanabilen elementler: Block-level elementler
Kalıtsallık: Var
white-space özelliği elemetlerin boşluklarının nasıl işlem göreceğini belirler. değer alır.
normal: birden fazla boşluğu tek boşluk gibi sayar.
pre : birden fazla boşluğu birleştirmez.
nowrap : <br> etiketi hariç alt satıra geçişe izin vermez.
p {
white-space: pre;
}
Browser Uyumu:
Internet Explorer 5.5+
Netscape 4+
Opera 4+
W3C’s CSS Level 2+
CSS Profile 1.0
display
Yapısı : display: <deger>
Aldığı Değerler : none | inline | block | inline-block | list-item | run-in | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | inherit
Başlangıç değeri: inline
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok
display özelliği elemetlere aşağıdaki dört değerden birini atamak için kullanılır:
block: elementden önce ve sonra bir satır bırakır.
inline : elementden önce ve sonra bir satır bırakmaz.
nowrap : block gibidir tek fark list-item işareti eklemesidir.
none: element görüntülenmez. Elementi gizler. Bir çok javascript uygulmasında kullanılan bir özelliktir.
Bu dört özellik çok kullanıldıkları için üzerinde duruldu.
p {
display: inline;
}
em {
display: block;
}
Browser Uyumu:
Internet Explorer 5.5+
Netscape 4+
Opera 4+
W3C’s CSS Level 2+
CSS Profile 1.0
border-style
Yapısı : border-style: <deger>
Aldığı Değerler : [ none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ]{1,4} | inherit
Başlnagıç değeri: tanımlama yok
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok
border-style özelliği kenarlık stilini belirlememizi sağlar.(Örn: dotted(noktalı), double(çift) vd.) 10 farklı değeri CSS desteklemektedir. Bu özellik kenarlığın görünmesi için
tanımlanması gereklidir. Bir veya dört değer alabilir eğer dört değer alırsa
sırasıyla üst, sağ, alt ve sol kenarlık stilini belirler. Eğer tek değeri
varsa tüm kenarlık değeri ataması yapılmış demektir. Eğer iki veya üç değer
ataması yapılmış ise margin‘de gördüğümüz sıralama söz konusudur.
p.yeni {
border-style: solid;
}
Browser Uyumu:
Internet Explorer 4+
Netscape 4+
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0
border-top-style, border-right-style, border-bottom-style, border-left-style
Yapısı : border-[top,left,right,bottom]-style: <deger>
Aldığı Değerler : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
Başlangıç değeri: tanımlama yok
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok
border-top-style, border-right-style, border-bottom-style, border-left-style border-style özelliğinin her kenara ayrı ayrı atamasını yapabilmek için kullanılır.
h1{
border-style: solid;
border-left-style: none;
}
Browser Uyumu:
Internet Explorer 4+(kısmen),6+ (tam)
Netscape 4+(kısmen), 6+ (tam)
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0
border-width
Yapısı : border-width: <deger>
Aldığı Değerler : [ thin | medium | thick | <uzunluk değeri > ]{1,4} | inherit
Başlnagıç değeri: tanımlama yok
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok
İlk olarak stili belirledikten sonra kenarlık kalınlığını belirlemek için border-width değeri kullanılır.
border-width yüzde değeri alamaz.
p {
margin: 5px;
background-color: silver;
border-style: solid;
border-width: 1px;
}
Browser Uyumu:
Internet Explorer 4+
Netscape (kısmen), 6+(tam)
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0
border-top-width, border-right-width, border-bottom-width, border-left-width
Yapısı : border-[top,left,right,bottom]-width: <deger>
Aldığı Değerler : thin | medium | thick | <uzunluk değeri > | inherit
Başlnagıç değeri: tanımlama yok
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok
border-top-width, border-right-width, border-bottom-width, border-left-width border-width özelliğinin her kenara ayrı ayrı atamasını yapabilmek için kullanılır.
h2 {
border-left-width: medium;
border-style: solid;
}
Browser Uyumu:
Internet Explorer 4+ (kısmen), 6+(tam)
Netscape 4+(kısmen), 6+ (tam)
Opera 3.6, 4+
W3C’s CSS Level 1+
CSS Profile 1.0
border-color
Yapısı : border-color: <deger>
Aldığı Değerler : [ <renk> | transparent ]{1,4} | inherit
Başlnagıç değeri: tanımlama yok
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok
border-color özelliği kenarlık rengini belirler. (X)html’deki bordercolor ile benzerdir.
p {
border-style: solid;
border-color: gray;
}
Tek değer tüm kenarlık renklerini belirler, her kenar için ayrı renk tanımlamasıda
yapılabilir.
Browser Uyumu:
Internet Explorer 4+
Netscape 4+(kısmen), 6+(tam)
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0
border-top-color, border-right-color, border-bottom-color, border-left-color
Yapısı : border-[top,left,right,bottom]-color: <deger>
Aldığı Değerler : [ <renk> | transparent ]{1,4} | inherit
Başlnagıç değeri: tanımlama yok
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok
border-color özelliğinin her kenara ayrı ayrı atamasını yapabilmek için kullanılır.
Not: Bir kenarlığı yok etmek için kalınlık değeri veririz. Birde CSS2 ile
birlikte gelen transparent özelliği vardır ki bu kenarlığı yok etmez sadece
görünmez yapar.
p {
border-style: solid;
border-color: gray;
}
Tek değer tüm kenarlık renklerini belirler, her kenar için ayrı renk tanımlamasıda
yapılabilir.
Browser Uyumu:
Internet Explorer 4+
Netscape 4+(kısmen), 6+(tam)
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0
border
Yapısı : border: <deger>
Aldığı Değerler : <border-width> | <border-style> | <renk>
Başlnagıç değeri: tanımlama yok
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok
border yukarıda sıraladığımız özellikleri tek sefer de tanımlamak için kullanılır. Bir kısaltmadır.
h1 {
border: thick silver solid;
}
Bu özellikleri tek tek atamak isteseydik şöyle bir kod yazmamız gerekecekti.
CSS Sınıflandırma-Liste Özellikleri
Normal
