Html - Lists-Listeler

Ogrenmesi oldukca kolay bir konu ve CSS konusunda da bir hayli kullanacagimiz blok duzeyinde html elementleridir(ul,ol). Dersin sonunda listeleri kullanarak bir menu yapacagiz,bu sekilde html/css bilgimizi 1 adim daha oteye tasimis olacagiz.

1-Html Sirasiz Listeler

ul icerisinde li kullandigimiza dikkat!
<ul>
  <li>Comodo</li>
  <li>Eset</li>
  <li>Avast</li>
  <li>Bitdefender</li>
  <li>Norton</li>
  <li>Kaspersky</li>
  <li>Panda</li>
  <li>Bullguard</li>
  <li>Avira</li>
</ul>
  • Comodo
  • Eset
  • Avast
  • Bitdefender
  • Norton
  • Kaspersky
  • Panda
  • Bullguard
  • Avira
Evet sonuca baktigimizda her liste elemani varsayilan kucuk siyah dairelerle basliyor.
Asagdaki ornekte ise liste basindaki simgelerin degisik kullanim bicimleri gosteriliyor.

CSS,list-style-type

/*Varsayilan kullanim bicimi yukardaki ornekte oldugu gibi*/
<ul style="list-style-type:disc;">
  <li>Comodo</li>
  <li>Eset</li>
  <li>Avast</li>
  <li>Bitdefender</li>
</ul>
  • Comodo
  • Eset
  • Avast
  • Bitdefender

<ul style="list-style-type:circle;">
  <li>Comodo</li>
  <li>Eset</li>
  <li>Avast</li>
  <li>Bitdefender</li>
</ul>
  • Comodo
  • Eset
  • Avast
  • Bitdefender

<ul style="list-style-type:square;">
 <li>Comodo</li>
 <li>Eset</li>
 <li>Avast</li>
 <li>Bitdefender</li>
</ul>
  • Comodo
  • Eset
  • Avast
  • Bitdefender

<ul style="list-style-type:none;">
 <li>Comodo</li>
 <li>Eset</li>
 <li>Avast</li>
 <li>Bitdefender</li>
</ul>
  • Comodo
  • Eset
  • Avast
  • Bitdefender
Bu kullanim biciminde liste basinda bir simge istemedik!
ul style="list-style-type:circle;"
kullanim biciminde css'den faydalandik fakat
ul type="circle"
seklinde de kullanabilirdik.

2-Html Sirali Listeler

Isminden de anlasilacagi uzere bir sirali duzenle liste gosterilebilir. (ol icinde li kullandigimiza dikkat)
Varsayilan Kullanim bicimi.
<ol>
 <li>Comodo</li>
 <li>Eset</li>
 <li>Avast</li>
 <li>Bitdefender</li>
</ol>
  1. Comodo
  2. Eset
  3. Avast
  4. Bitdefender

Simdi de diger kullanim bicimlerini gorelim.
/*Varsayilan*/
<ol type="1">
 <li>Comodo</li>
 <li>Eset</li>
 <li>Avast</li>
 <li>Bitdefender</li>
</ol>
  1. Comodo
  2. Eset
  3. Avast
  4. Bitdefender

<ol type="A">
 <li>Comodo</li>
 <li>Eset</li>
 <li>Avast</li>
 <li>Bitdefender</li>
</ol>
Alfabetik ve buyuk Harf
  1. Comodo
  2. Eset
  3. Avast
  4. Bitdefender

<ol type="a">
 <li>Comodo</li>
 <li>Eset</li>
 <li>Avast</li>
 <li>Bitdefender</li>
</ol>
Alfabetik ve Kucuk Harf
  1. Comodo
  2. Eset
  3. Avast
  4. Bitdefender

<ol type="I">
 <li>Comodo</li>
 <li>Eset</li>
 <li>Avast</li>
 <li>Bitdefender</li>
</ol>
Roma Rakamiyla ve buyuk
  1. Comodo
  2. Eset
  3. Avast
  4. Bitdefender

<ol type="i">
 <li>Comodo</li>
 <li>Eset</li>
 <li>Avast</li>
 <li>Bitdefender</li>
</ol>
Roma Rakamiyla ve Kucuk
  1. Comodo
  2. Eset
  3. Avast
  4. Bitdefender

Asagdaki kullanim bicimleride bazen ise yarayabilir.

Html-ol-reversed

<ol type='1' reversed>
 <li>Comodo</li>
 <li>Eset</li>
 <li>Avast</li>
 <li>Bitdefender</li>
</ol>
  1. Comodo
  2. Eset
  3. Avast
  4. Bitdefender

Html-ol-start

<ol start='2016'>
 <li>Comodo</li>
 <li>Eset</li>
 <li>Avast</li>
 <li>Bitdefender</li>
</ol>
  1. Comodo
  2. Eset
  3. Avast
  4. Bitdefender

Ic ice liste Kullanimi

<ul>
 <li>Antivirusler
    <ul">
      <li>Comodo</li>
      <li>Eset</li>
      <li>Avast</li>
      <li>Bitdefender</li>
    </ul>
 </li>
  <li>Baska Kategori</li>
</ul>
  • Antivirusler
    • Comodo
    • Eset
    • Avast
    • Bitdefender
  • Baska Kategori

Yukardaki ornekte yaptigimiz gibi,listler icinde baska listeler,resimler... vs kullanilabilir!

Html/Css Liste Ornegi

Asagdaki ornegi dikkatle incelemeizi istiyorum,cunku css konusunda daha once kullanmadigimiz yeni ve onemli bilgiler de ogrencegiz.
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Html/Css List</title>
  <style>
body{
  background-color:rgba(0,0,0,.1);
}
#solmenu ul{
  list-style-type: none;/*Liste baslarindaki simgeler olmasin*/
  margin:0px;
  padding:0px;
  width: 200px;
  overflow: hidden;
}
#solmenu ul li a{
  font-family:Verdana;
  text-decoration: none; /*Linklerin alti cizili olmasin*/
  display: block;        /*a elementi satir ici bir element,fakat burda blok elementi yaptik*/
  background-color: rgba(0,0,0, 0.5);
  color:white;
  padding:8px 10px;     /*ust-alt=8px ve sag-sol=10px*/
  border-bottom:1px solid rgba(200,200,200,.1);
}
/*imlec ogenin ustune gelince uygulanacak css*/
#solmenu ul li a:hover{
  background-color:rgba(0,0,0, 0.6);
}
  </style>
</head>
<body>
  <div id="solmenu">
    <ul>
      <li><a href="#">Eset</a></li>
      <li><a href="#">Avast</a></li>
      <li><a href="#">Bitdefender</a></li>
      <li><a href="#">Norton</a></li>
      <li><a href="#">Kaspersky</a></li>
      <li><a href="#">Panda</a></li>
      <li><a href="#">Bullguard</a></li>
    </ul>
  </div>
</body>
</html>

Yukardaki css kodunda asagdaki guncellemeyi yaparsak ne degisir?
body{
  background-color:rgba(0,0,0,.1);
  padding:0px;
  margin:0px;
}

Bu derse ait gorus ve onerilerinizi yada farkettigniz hatalari Lutfen bana bildirin!
birbyte.net@gmail.com