CSS ile Liste Biçimleri

13.04.2017

Liste özelligi ilk olarak listeleme amaçli kullanilsa da simdilerde menü yapiminda kullanimi revaçtadir. Burada liste özellikleri yanisira display ve white-space özelliklerinden de bahsedilecektir.

  • list-style
  • list-style-type
  • list-style-image
  • list-style-position
  • white-space
  • display

list-style-type

Yapisi : list-style-type: (deger) Aldigi Degerler : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
Baslangiç degeri: disc
Uygulanabilen elementler: display degeri list-item alan elementler
Kalitsallik: Var

list-style-type özelligi list-item isaretinin tipini belirler. list-style-images özelligi none degeri aldiginda veya resim görüntülenemediginde kullanilir.

:::css
ul.arabalar {
	list-style-type: none
}

ol ol ol {
	list-style-type: lower-roman /* i ii iii iv v gibi. */
}

Tarayici Uyumu ** Firefox Chrome Safari Opera Internet Explorer **Mobil Tarayicilar iOS Safari Opera Mobile Android Browser

list-style-image

Yapisi : list-style-image: (deger) Aldigi Degerler : <url> | none
Baslangiç degeri: none
Uygulanabilen elementler: display degeri list-item alan elementler
Kalitsallik: Var

list-style-image özelligi list-style isaretinin yerine resim koymak için kullanilir.

:::css
ul{
	list-style-image: url(mavitop.gif)
}

Tarayici Uyumu ** Firefox Chrome Safari Opera Internet Explorer **Mobil Tarayicilar iOS Safari Opera Mobile Android Browser

list-style-position

Yapisi : list-style-position: (deger) Aldigi Degerler : inside | outside
Baslangiç degeri: outside
Uygulanabilen elementler: tüm elementler
Kalitsallik: Yok

list-style-position özelligi list-item isaretlerin metinin içinden(inside) veya soldan disinda(outside) mi olacagini belirler.

:::css
ul{
	list-style-position: inside
}

Tarayici Uyumu ** Firefox Chrome Safari Opera Internet Explorer **Mobil Tarayicilar iOS Safari Opera Mobile Android Browser

list-style

Yapisi : list-style: (deger) Aldigi Degerler : <list-style-type> |<list-style-position> | <url>
Baslangiç degeri:0
Uygulanabilen elementler: display degeri list-item alan elementler
Kalitsallik: Var

list-style özelligi list-style-type, list-style-position ve list-style-image özelliklerinin kisayoludur.

:::css
ul{
	list-style: disc outside
}

ol{
	list-style: decimal inside
}

Tarayici Uyumu ** Firefox Chrome Safari Opera Internet Explorer **Mobil Tarayicilar iOS Safari Opera Mobile Android Browser

white-space

Yapisi : white-space: (deger) Aldigi Degerler : normal | pre | nowrap
Baslangiç degeri: normal
Uygulanabilen elementler: Block-level elementler
Kalitsallik: Var

white-spaceözelligi elemetlerin bosluklarinin nasil islem görecegini belirler. deger alir. normal: birden fazla boslugu tek bosluk gibi sayar. pre : birden fazla boslugu birlestirmez. nowrap : 
etiketi hariç alt satira geçise izin vermez.

:::css
p {
	white-space: pre;
}

Tarayici Uyumu ** Firefox Chrome Safari Opera Internet Explorer **Mobil Tarayicilar iOS Safari Opera Mobile Android Browser

display

Yapisi : display: (deger) Aldigi Degerler : 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
Baslangiç degeri: inline
Uygulanabilen elementler: tüm elementler
Kalitsallik: Yok

displayözelligi elemetlere asagidaki dört degerden birini atamak için kullanilir: block: elementden önce ve sonra bir satir birakir. inline : elementden önce ve sonra bir satir birakmaz. nowrap : block gibidir tek fark list-item isareti eklemesidir. none: element görüntülenmez. Elementi gizler. Bir çok javascript uygulmasinda kullanilan bir özelliktir.

Bu dört özellik çok kullanildiklari için üzerinde duruldu.

:::css
p {
	display: inline;
}

em {
	display: block;
}

kaynak:http://fatihhayrioglu.com



Adınız Soyadınız
İçerik
Son Eklenenler Konular
  • E-Ticaret çalismasi Satis sitesi
  • 2017-2018 Normal Ögretim Konu Anlatim Listesi
  • Asp Net- Veritabani Olusturma ve GridView Ekleme Kayit
  • Asp Net-Master page ile admin paneli
  • Vize 2 Mesleki Yabanci Dil 1
  • Vize 2 için Ag temelleri
  • Vize2 Internet Programciligi I
  • Vize 2 için ödev listesi- Programlamanin Temelleri
  • Programlamanin Temelleri Akis Diyagramlari Örnekleri
  • Bilgisayar Aglari-Ag Temelleri
  • Bilgisayar Mesleki Yabanci Dil Dersi Için Kelimeler 1
  • 2015-2016 Staj Kabul Listesi
  • 2016-2017 Yaz Staji Yapacaklarin Listesi
  • ASP NET ile veritabanindaki alani gösterirken kisaltarak görüntüleme
  • ASP NET - Plesk ile veritabani olusturma ve MS SQL veritabani olusturma islemleri
  • Dreamveaver
  • ASP Net
  • CSS
  • Html
  • Visual Studio C# ve C Console
  • Programlamanin Temelleri-Algoritma
  • Mesleki Yabancı Dil
  • Windows Server 2012
  • Ag Temelleri-Bilgisayar Aglari
  • Staj
  • Copyright (c) Ferdi DOĞAN