کار با لیست ها

لیست ها در CSS

لیست ها عناصری با کاربرد های بسیار متنوع می باشند. از جمله برای بخش مسیریابی سایت و برای ایجاد کنترل های tab مورد استفاده قرار می گیرند. مسیریابی شامل لیستی از لینک ها می باشد که دارای ویژگی های بصری بوده و به نوعی مانع از خستگی بیننده می گردد. ما در این قسمت به سبک های مختلف و معرفی فهرست ها در CSS می پردازیم

خاصیت list-style-type

با کمک این خاصیت می توان برای لیست های مرتب و نامرتب bullet تعریف نمود که یکی از 14 مقدار زیر را می پذیرد.

1 disc , circle , square , decimal , decimal-leading-zero , lower-roman , upper-roman , lower-greek , lower-latin , upper-latin , armenian , georgian , none

مقدار پیش فرض برای لیست های نا مرتب (ul) : مقدار disc

مقدار پیش فرض برای لیست های مرتب (ol) : مقدار decimal

نکته : ممکن است در هنگام تعریف خصوصیات فوق،  bullet لیست های مرتب را برای لیست های نامرتب در نظر بگیریم و بر عکس.  توصیه فراوان می شود که این کار صورت نپذیرد و برای هر نوع از لیست ها bullet مخصوص به همان لیست را با توجه به معنای آن در نظر گرفته شود.

Bullet های مخصوص لیست های نامرتب (ul) عبارتند از : square ، circle و disc و none و بقیه bullet های مربوط به لیست های مرتب (ol) می باشد.

مثال:

کد HTML :

1 <h2> Web Design Tutorials </h2>
2 <ul>
3     <li>HTML
4         <ol class="html">
5             <li>HTML 1</li>
6             <li>HTML 2</li>
7             <li>HTML 3</li>
8             <li>HTML 4</li>
9             <li>HTML 5</li>
10             <li> XHTML</li>
11         </ol>
12     </li>
13     <li>CSS
14         <ol class="css">
15             <li>CSS 1</li>
16             <li>CSS 2</li>
17             <li>CSS 3</li>
18         </ol>
19     </li>
20     <li>JavaScript</li>
21     <li>jQuery</li>
22     <li>PHP</li>
23     <li>ASP</li>
24 </ul>

و کد CSS :

1 ul li {list-style-type: square;}
2 ul ol.html li {list-style-type: lower-alpha;}
3 ul ol.css li {list-style-type: upper-roman;}

نتیجه در مرورگر:

list style type <a  style=آموزش CSS (فصل هفتم) : کار با لیست ها" title="list-style-type" width="298" height="480" />

خاصیت list style image

این خاصیت یک عکس را برای استفاده به عنوان نشانه bullet در کنار عنصر لیست تعریف می کند. این عکس با نشانه تعریف شده در خاصیت list-style-type جایگزین می شود.

مثال :

1 ul li {list-style-image: url('images/green-bullet.png');}
2 ul ol.html li {list-style-image: url('images/blue-bullet.png');}
3 ul ol.css li {list-style-image: url('images/brown-bullet.png');}

list style image <a  style=آموزش CSS (فصل هفتم) : کار با لیست ها" title="list-style-image" width="298" height="480" />

list-style-position

این خاصیت موقعیت و نحوه ی قرار گرفتن bullet در کنار آیتم های لیست را مشخص می کند. و یکی از دو مقدار زیر را می گیرد :

  • Inside : مشخص می کند که bullet لیست باید در داخل آیتم های لیست قرار گیرد.
  • Outside : مشخص که bullet لیست باید در خارج از آیتم های لیست قرار گیرد.

مثال :

1 ul li {list-style-image: url('images/arrow.png');}
2 ul ol.html li {
3     list-style-image: url('images/arrow1.png');
4     list-style-position: inside;
5     background: #09f;
6 }
7 ul ol.css li {
8     list-style-image: url('images/arrow2.png');
9     list-style-position: outside;
10     background: #ff9;
11 }

list style position <a  style=آموزش CSS (فصل هفتم) : کار با لیست ها" title="list-style-position" width="305" height="467" />

می بینید که bullet زیر مجموعه ی گزینه ی HTML که به آن مقدار inside داده ایم در کنار داخل کادر قرار گرفته، اما bullet زیر مجموعه CSS که مقدار outside دارد، خارج از کادر قرار گرفته است.

کوتاه نویسی خاصیت list style

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

1 list-style: type position url('ImageAddress');

مثال :

1 li { list-style: square inside url('bullet1.png'); }

بسیار خب، تا اینجا به خصوصیات مربوط به استایل دهی به list ها آشنا شدیم، در جلسه بعد به positioning یا همان موقعیت عناصر در صفحه می پردازیم.

ارسال نظر