01242017Sal
Last updateÇrş, 09 Kas 2016 12pm


CSS DERSLERİ

CSS UL, CSS OL, Sınıflandırma-Liste Özellikleri

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.

1 ul.arabalar {
2 list-style-type: none
3 }
4 ol ol ol {
5 list-style-type: lower-roman /* i ii iii iv v gibi. */
6 }
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.

1 ul{
2 list-style-image: url(mavitop.gif)
3 }
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.

1 ul{
2 list-style-position: inside
3 }
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.

1 ul{
2 list-style: disc outside
3 }
4 ol{
5 list-style: decimal inside
6 }
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.

1 p {
2 white-space: pre;
3 }
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.

1 p {
2 display: inline;
3 }
4 em {
5 display: block;
6 }
Browser Uyumu:
Internet Explorer 5.5+
Netscape 4+
Opera 4+
W3C?s CSS Level 2+
CSS Profile 1.0

Kaynak : Fatih HAYRİOĞLU, CSS dersleri

Yorum ekle


Güvenlik kodu
Yenile

FACEBOOK'TA TAKİP EDİN