Konuyu Oyla:
  • Derecelendirme: 0/5 - 0 oy
  • 1
  • 2
  • 3
  • 4
  • 5
Css ile listelere özellik ekleme
#1
istelerde kullandığımız madde imlerini biçimlendirirken CSS'den faydalanabiliriz.

CSS üç bakımdan işimize yarar:

Sıralı listelerdeki numaraların görünüşünü değiştirebiliriz.
Maddelenmiş listelerdeki imlerin şekillerini değiştirebiliriz.
Madde imi yerine belirlediğimiz bir resim kullanabiliriz.
Listelerde biçimlendirme yaparken sıklıkla kullanılan komutlar:

list-style-type
list-style-image
list-style-position
list-style (Birleştirilmiş)
list-style-type: Listeleme Şekli Tipi

Bir listenin stilini belirlememizi sağlar. Aşağıdaki örnekte madde işaretleri kare (square) olacaktır:


ul { list-style-type: square; }



Aşağıdaki şekilde görünecektir:

HTML Görünümü
Listeleme Şekilleri

Maddelenmiş Liste
Numaralanmış Liste

UL (maddeli) ve OL (numaralı) listelerde farklı farklı stiller kullanılabilir.

Örneğin numaralı listemizdeki numaraların roma rakamı olmasını istiyorsak:

ol.a { list-style-type: upper-roman; }


Alfabedeki küçük harflerin listelenmesini istiyorsak:

ol.b { list-style-type: lower-alpha; }


İçi boş daireleri madde imi yapmak istiyorsak:

ul.c { list-style-type: circle; }


Görüldüğü gibi birçok şekli var. Kullanabileceklerinizin tamamı:

OL (numaralı liste) için: armenian, decimal, decimal-leading-zero, lower-alpha, lower-greek, lower-latin, lower-roman, none (boş bırak), upper-alpha, upper-latin, upper-roman.

UL (maddeli liste) için: circle (içi boş yuvarlak), disc (yuvarlak), square (kare), none (boş bırakır - göstermez).

list-style-image: Madde İşareti Yerine Resim Kullanmak

Küçük bir resim belirterek onun madde imi yerine kullanılmasını sağlayabiliriz.

ul { list-style-image: url('madde.gif'); }


Bu durumda madde.gif resmi her maddenin başında kullanılacak madde imimiz olacaktır.

list-style-position: Madde İmi Nerede Olacak?

Madde iminin maddenin içinde mi dışında mı olacağını belirtir. inside içinde, outside dışında olacak demektir.

ul { list-style-position: inside; }


Bu durumda madde.gif resmi her maddenin başında kullanılacak madde imimiz olacaktır.

list-style: Kısa Yoldan Kullanım

Yukarıda belirtilen tüm özellikleri tek bir kod ile de kullanabiliriz. Aşağıdaki örneğe bakalım:

ul { list-style: square url("madde.gif"); }


Örneğe bakılırsa madde imimiz kare biçimli olacak ve üzerine madde.gif işlenecektir. Yani önce list-style-type belirttik sonra list-style-image belirttik.

CSS ÖZELLİK EKLEME.

İndir:http://www.dosya.tc/server33/gi4sDc/CSSileListelere_zelliklerEkleme.rar.html
En büyük acizlik,kendinden başkası gibi görünmektir.
Beğenenler: '[D3F@C4R]
#2
ELine Sağlık
Beğenenler:
#3
Diline sağlık
En büyük acizlik,kendinden başkası gibi görünmektir.
Beğenenler:

Konu ile Alakalı Benzer Konular
Konular Yazar Yorumlar Okunma Son Yorum
  İndex'e müzik ekleme [En kolay yol] TurKLoJeN 15 1,321 03-03-2016, Saat: 02:10
Son Yorum: H4YLAZ
  Html Arkadaş Ekleme Kodu ByMuh4mm3d 1 295 06-11-2015, Saat: 18:07
Son Yorum: Moreİnfo
  Indexe Resim Ekleme Kodu KingSkrupellos 0 510 26-09-2014, Saat: 11:39
Son Yorum: KingSkrupellos
  Indexe Müzik Ekleme Kodu ( Testere Filmi Müziği ) KingSkrupellos 0 2,479 26-09-2014, Saat: 11:27
Son Yorum: KingSkrupellos
Anahtar Kelimeler

Css ile listelere özellik ekleme indir, Css ile listelere özellik ekleme Videosu, Css ile listelere özellik ekleme Online izle, Css ile listelere özellik ekleme Bedava indir, Css ile listelere özellik ekleme Yükle, Css ile listelere özellik ekleme Hakkında, Css ile listelere özellik ekleme Nedir, Css ile listelere özellik ekleme Free indir, Css ile listelere özellik ekleme Oyunu, Css ile listelere özellik ekleme Download


1 Ziyaretçi