تگ 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 از خواص عمومی در 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>

تست آنلاین کد