تگ ol در HTML

  /  فرانت اند   /  HTML   /  تگ ol در HTML

با استفاده از تگ ol در HTML یک لیست مرتب شده تعریف می کنیم.

مثال

در مثال زیر لیست اول ما از عدد یک شروع می شود و در لیست بعدی چون با استفاده از خاصیت start شروع عدد را روی 50 تنظیم کرده ایم ، شماره گذاری لیست از عدد 50 شروع می شود:

<ol>
<li>قهوه</li>
<li>چای</li>
<li>شیر</li>
</ol>

<ol start="50">
<li>قهوه</li>
<li>چای</li>
<li>شیر</li>
</ol>


تعریف و کاربرد

همانطور که در بالا اشاره شد از تگ ol در HTML برای ساخت لیست های مرتب شده استفاده میکنیم ، معمولاً این لیست ها بر اساس اعداد یا حروف الفبا مرتب می شوند.

از تگ <li> نیز برای تعریف موارد در لیست استفاده می کنیم ، این تگ درون تگ <ol> استفاده می شود.


پشتیبانی مرورگر ها

عنصر
<ol>بلهبلهبلهبلهبله

خواص

خاصیتمقدارتوضیحات
reversedreversedمشخص می کند که ترتیب لیست باید معکوس شود (9,8,7)
startnumberمقدار شروع لیست مرتب شده را مشخص می کند
type1
A
a
I
i
نوع نشانگر مورد استفاده در لیست را مشخص می کند

خواص عمومی

تگ ol از خواص عمومی در HTML پشتیبانی میکند.

رویداد های عمومی

تگ ol از رویداد های عمومی در HTML پشتیبانی میکند.

تنظیمات پیش فرض CSS

اکثر مرورگر ها عنصر ol در HTML را با تنظیمات پیش فرض زیر نمایش می دهند:

ol {
  display: block;
  list-style-type: decimal;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}

مثال های بیشتر

تعریف انواع لیست ها با CSS:

<ol style="list-style-type:upper-roman">
<li>قهوه</li>
<li>چای</li>
<li>شیر</li>
</ol>

<ol style="list-style-type:lower-alpha">
<li>قهوه</li>
<li>چای</li>
<li>شیر</li>
</ol>


در مثال زیر تمام انواع لیست ها را برای تگ <ol> با CSS مشخص کرده ایم:

<style>
ol.a {list-style-type: armenian;}
ol.b {list-style-type: cjk-ideographic;}
ol.c {list-style-type: decimal;}
ol.d {list-style-type: decimal-leading-zero;}
ol.e {list-style-type: georgian;}
ol.f {list-style-type: hebrew;}
ol.g {list-style-type: hiragana;}
ol.h {list-style-type: hiragana-iroha;}
ol.i {list-style-type: katakana;}
ol.j {list-style-type: katakana-iroha;}
ol.k {list-style-type: lower-alpha;}
ol.l {list-style-type: lower-greek;}
ol.m {list-style-type: lower-latin;}
ol.n {list-style-type: lower-roman;}
ol.o {list-style-type: upper-alpha;}
ol.p {list-style-type: upper-latin;}
ol.q {list-style-type: upper-roman;}
ol.r {list-style-type: none;}
ol.s {list-style-type: inherit;}
</style>

برای دسترسی به آموزش های بیشتر و ویدیو های من ، کلمه کلیدی متین برونسی را داخل گوگل سرچ کنید.

ارسال یک نظر