Öğretmenler Forumu

Lütfen giriş yapın veya üye olun.

Kullanıcı adınızı, şifrenizi ve aktif kalma süresini giriniz
Gelişmiş Arama  

Haberler:

Gönderen Konu: Css Listeler  (Okunma sayısı 7764 defa)

Rindâne

  • Y
  • Tam
  • *****
  • Çevrimdışı Çevrimdışı
  • İleti: 228
    • Öğretmenler Forumu
Css Listeler
« : 30 Aralık 2009, 19:58:53 »

 Bazı web sayfalarında görüyoruz, bazen listeler kullanılıyor, Peki bu listeler nasıl yapılıyor. İşte bu sayfada bunu göreceğiz.

 Listeler
<ul>
<li></li>
</ul>

 kodları ile yapılır.
<li> </li> kodları arasına listelemek istediğiniz kelimeleri yazarız.

Örnek;
<ul>
<li>Ali</li>
<li>Veli</li>
<li>Selami</li>
<li>Ahmet</li>
<li>Mehmet</li>
</ul>


Yukarıda yazdığımız kodlar sayfada aynen aşağıdaki gibi görünecektir.

  • Ali
  • Veli
  • Selami
  • Ahmet
  • Mehmet

 Bazen de içi dolu yuvarlak yerine içi buş daire, kare, roman rakamı gibi simgeler de kullanılıyor. Peki bunlar nasıl yapılıyor? Elbette ki Css ile. css dosyamızı açıp hangi şekli istediğimizi yazmamız yeterlidir.

li { list-style-type : circle; } yazarsak içi boş daire olur
li { list-style-type : disc; } yazarsak içi dolu daire olur
li { list-style-type : square; } yazarsak içi dolu kare olur
li { list-style-type : upper-roman; } yazarsak Roman rakamı olur (Büyük rakam I II III IV gibi)
li { list-style-type : lower-roman; } yazarsak Roman rakamı olur (Küçük rakam i ii iii iv gibi)
li { list-style-type : upper-alpha; } yazarsak büyük harfer olur (A B C D gibi)
li { list-style-image : url (”resimadi.jpg”); } yazarsak simge yerine istediğimiz herhangi bir küçük resmi kullanabiliriz.
li { list-style-type : none; } yazarsak hiç bir simge olmaz.

Css ile listelere pozisyon, renk gibi çok çeşitli özellikler de verilebilir ama buradaki amacımız css ve html konularını hiç bilmeyen, yeni başlayanlar için kodların kullanım mantığını anlatabilmek. İleride çok daha ayrıntıya gireceğiz.
Kayıtlı
Öğretmenler, yeni nesil sizlerin eseri olacaktır.
Mustafa Kemal ATATÜRK