آموزش گام به گام CSS 2.0 بخش هجده

 

CSS Lists :
 
در HTML دو نوع لیست وجود دارد.
 
unordered lists : این لیستی است که با دایره توپر نمایش داده میشود.
 
ordered lists : این لیستی است که با عدد و یا حرف نمایش داده میشود.
 
برای استایل دهی این دو لیست از خاصیت list-style-type استفاده میکنیم. بمثال زیر توجه کنید:

Code:
<.!DOCTYPE html>
<.html>
<.head>
<.style>
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
<./style>
<./head>
<.body>
<.p>مثالی از UNORDER لیستها<./p>
<.ul class="a">
  <.li>Coffee<./li>
  <.li>Tea<./li>
  <.li>Coca Cola<./li>
<./ul>
<.ul class="b">
  <.li>Coffee<./li>
  <.li>Tea<./li>
  <.li>Coca Cola<./li>
<./ul>
<.p>مثالی از ORDER لیستها<./p>
<.ol class="c">
  <.li>Coffee<./li>
  <.li>Tea<./li>
  <.li>Coca Cola<./li>
<./ol>
<.ol class="d">
  <.li>Coffee<./li>
  <.li>Tea<./li>
  <.li>Coca Cola<./li>
<./ol>
<./body>
<./html>


برای قراردادن عکس بجای دایره تو پر یا حروف و عدد در لیستها از خاصیت list-style-image استفاده میشود.

Code:
<.!DOCTYPE html>
<.html>
<.head>
<.style>
ul
{
list-style-image:url('sqpurple.gif');
}
<./style>
<./head>
<.body>
<.ul>
<.li>Coffee<./li>
<.li>Tea<./li>
<.li>Coca Cola<./li>
<./ul>
<./body>
<./html>


در مثال فوق ممکن است در مرورگرهای IE و OPERA فاصله زیادی بین لیستها با مرورگرهای FIREFOX ,SAFARI ,CHROME داشته باشد برای اینکه این مشکل برطرف شود میتوان مثال فوق را به صورت زیر بهینه کرد.

Code:
<.!DOCTYPE html>
<.html>
<.head>
<.style>
ul
{
list-style-type:none;
padding:0px;
margin:0px;
}
ul li
{
background-image:url(sqpurple.gif);
background-repeat:no-repeat;
background-position:0px 5px;
padding-left:14px;
}
<./style>
<./head>
<.body>
<.ul>
<.li>Coffee<./li>
<.li>Tea<./li>
<.li>Coca Cola<./li>
<./ul>
<./body>
<./html>