تگ ol در HTML

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

تگ ol چیست؟

تگ ol که اشاره به عبارت Ordered Lists دارد برای ایجاد لیست های مرتب به کار می رود.

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

این تگ با <ol> شروع شده و با </ol> پایان می یابد.

<ol></ol>

صفات تگ ol

در این بخش با صفات تگ ol آشنا خواهید شد.

صفت reversed

برای شماره گذاری معکوس آیتم های لیست به کار می رود.

به عنوان مثال اگر نوع شماره گذاری بر اساس اعداد باشد شمارش لیست به جای شروع از عدد 1 از عدد آخر لیست آغاز می شود..

<ol reversed></ol>

صفت start

شماره شروع آیتم های لیست را مشخص می کند.

به عنوان مثال اگر مقدار این صفت را بر روی عدد 30 قرار دهیم شمارش لیست به جای شروع از عدد 1 از عدد 30 آغاز خواهد شد.

<ol start="30"></ol>

صفت type

نوع مرتب سازی آیتم های لیست را مشخص می کند.

<ol type="1-A-a-I-i"></ol>

مقدار 1

مرتب سازی لیست بر اساس اعداد انجام می شود.

مقدار A

مرتب سازی لیست بر اساس حروف انگلیسی بزرگ انجام می شود.

مقدار a

مرتب سازی لیست بر اساس حروف انگلیسی کوچک انجام می شود.

مقدار I

مرتب سازی لیست بر اساس اعداد یونانی بزرگ انجام می شود.

مقدار i

مرتب سازی لیست بر اساس اعداد یونانی کوچک انجام می شود.

مثال تگ ol

کد:

<ol>
  <li>سفید</li>
  <li>قرمز</li>
  <li>آبی</li>
  <li>سبز</li>
  <li>زرد</li>
</ol>

اجرا

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

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

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

سازگاری با مرورگرها

تگ ol با مرورگرهای زیر سازگار است:

• گوگل کروم
• فایرفاکس
• اج
• اپرا
• سافاری
• گوگل کروم اندروید
• فایرفاکس اندروید
• اپرا اندروید
• سافاری iOS