تگ ul در HTML

قبلی بعدی

برای ایجاد لیست نامنظم باید از تگ ul استفاده کنیم که مخفف unordered list هست.

برای ایجاد آیتم های آن باید از تگ li استفاده کنیم.

ساختار تگ ul به صورت زیر است:

<ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
</ul>

ویژگی list-style-type

یکی از ویژگی هایی که تگ ul دارد، ویژگی list-style-type است.

این ویژگی مشخص می کند که لیست با چه علامتی نمایش داده شود.

این ویژگی، یک ویژگی CSS یا CSS Property است.

<ul style="list-style-type: circle;">
   <li>1</li>
   <li>2</li>
   <li>3</li>
</ul>

در جدول زیر مقدار هایی که این ویژگی دریافت می کند را می بینید:

مقدار	توضیحات
disc	نقاط کنار آیتم ها به صورت دایره توپر نمایش داده می شوند. (پیشفرض)
circle	نقاط کنار آیتم ها به صورت دایره توخالی نمایش داده می شوند.
square	نقاط کنار آیتم ها به صورت مربع نمایش داده می شوند.
none	نقاط کنار آیتم ها نمایش داده نمی شوند.

مثالی از مقدار disc :

<ul style="list-style-type: disc;">
   <li>1</li>
   <li>2</li>
   <li>3</li>
</ul>

مثالی از مقدار circle :

<ul style="list-style-type: circle;">
   <li>1</li>
   <li>2</li>
   <li>3</li>
</ul>

مثالی از مقدار square :

<ul style="list-style-type: square;">
   <li>1</li>
   <li>2</li>
   <li>3</li>
</ul>

مثالی از مقدار none :

<ul style="list-style-type: none;">
   <li>1</li>
   <li>2</li>
   <li>3</li>
</ul>

برای درک بهتر، به آموزش مربوط به لیست ها در CSS مراجعه کنید.

لیست های نامنظم HTML به صورت تو در تو نیز نوشته می شوند.

یعنی اینکه می توانیم در یک لیست نامنظم ، از لیست های نامنظم دیگر استفاده کنیم.

<ul>
  <li>motorcycle</li>
  <li>Car
    <ul>
      <li>Benz</li>
      <li>BMW</li>
    </ul>
  </li>
  <li>bicycle</li>
</ul>

یک لیست نامنظم با ویژگی list-style-type بسازید.

مشاهده پاسخ

قبلی بعدی

توسعه دهندگان

احسان اسلامی