» » » انواع لیست ها در html
انواع لیست ها در html

یکی از مهم ترین تگ های html در طراحی سایت تگ ul و ترکیب آن با تگ Li است. از css برای استایل دادن به تگ ul و تگ Li می توان استفاده کرد. 

انواع لیست هایی که می توان در طراحی سایت استفاده کرد شامل:

 

  1. لیست های ترتیبی (Ordered List) 
  2. لیست های غیر ترتیبی (Unordered List)
  3. لیست های تعریفی (Description List) 
 
1) شروع لیست های ترتیبی با تگ ul و شروع هر آیتم در لیست با تگ Li است که بصورت پیش فرض استایل آیتم ها بصورت دایره های کوچک توپر هستند. 

 

 

<ul>
  <li>Html</li>
  <li>Css</li>
  <li>javascript</li>
<ul/>

 

نوع نمایش صفت list-style-type را می توان به چهار نوع زیر تغییر داد:

- disc: که بصورت پیش فرض استایل آیتم ها بصورت دایره های توپر نمایش داده می شود.

- circle: استایل آیتم ها بصورت دایره های توخالی نمایش داده می شود.

- square: استایل آیتم ها به صورت مربع های توپر نمایش داده می شود

- none: آیتم ها بدون هیچ استایلی نمایش داده می شود.


2) شروع لیست های غیر ترتیبی با تگ <ol> و شروع هر آیتم با تگ <li> است. 

 

<ol>
  <li>Html</li>
  <li>Css</li>
  <li>javascript</li>
<ol/>

نوع نمایش صفت list-style-type را می توان به چهار نوع زیر تغییر داد:

-  "1"= type : که بصورت پیش فرض استایل آیتم ها بصورت عدد نمایش داده می شود و شروع آن از عدد یک است.

- "type = "A : استایل آیتم ها بصورت حروف بزرگ الفبای انگلیسی نمایش داده می شود.

"type = "a :  استایل آیتم ها بصورت حروف کوچک الفبای انگلیسی نمایش داده می شود.

"type = "I :  ایتم ها به صورت اعداد رومی بزرگ شماره گذاری خواهد شد.

"type = "i :  ایتم ها به صورت اعداد رومی کوچک شماره گذاری خواهد شد. 

3) لیست های تعریفی شامل لیستی از تعاریف می باشد که هر آیتم را توصیف می کند. شروع لیست های تعریفی با تگ <dl> است که داخل آن لیستی از تعاریف در مورد موضوعات مختلف است. در تگ <dt> عنوان موضوعی که قصد توصیفش را داریم قرار میگیرد و داخل <dd> توضیح عنوانی که در تگ <dt> قرار گرفته است داده می شود.

 

<dl>
  <dt>Html</dt>
<dd/> - زبان استاندارد در طراحی صفحات وب است. <dd>
  <dt>Css</dt>
  <dd/> - زبان استایل دهی صفحات وب است.<dd>
<dl/>

 
خروجی لیست بالا به صورت زیر می باشد:
Html
  -  زبان استاندارد در طراحی صفحات وب است.
Css
 - زبان استایل دهی صفحات وب است.

 

مقالات مشابه