تگ 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 است.

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

ویژگی 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	نقاط کنار آیتم ها نمایش داده نمی شوند.

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

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

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

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

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

لیست های تو در تو-Nested

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

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

<ul>
    <li>HTML
        <ul>
            <li>a tag</li>
            <li>img tag</li>
        </ul>
    </li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

خلاصه درس

در این بخش با لیست های نامنظم آشنا شدید.
به بررسی ویژگی list-style-type پرداختیم.
همچنین لیست های تو در تو (nested) را مورد بررسی قرار دادیم.

تمرین

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

مشاهده پاسخ

قبلی بعدی

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

احسان اسلامی