آموزش تگ OL در HTML

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

html5

هر تگ OL می‌تواند دارای چندین تگ LI باشد. همچنین امکان استفاده‌ی تو در تو این تگ وجود دارد. به مثال زیر توجه کنید:

خروجی کدهای بالا به صورت زیر خواهد بود:

  1. ردیف اول
  2. ردیف دوم
  3. ردیف سوم

برای درج شمارنده به صورت تو در تو، لیست دوم مستقیم داخل تگ OL اصلی قرار می‌گیرد:

خروجی کدهای بالا به صورت زیر دیده می‌شود:

  1. ردیف اول
    1. فرزند اول
    2. فرزند دوم
  2. ردیف سوم

ویژگی‌های مهم تگ OL

مهم‌ترین ویژگی تگ OL عدد شروع لیست است که با متغیر start مشخص می‌شود:

همان طور که می‌بینید، لیست به جای عدد ۱ با عدد ۳ شروع شده است.

  1. ردیف سوم
  2. ردیف چهارم

ویژگی‌های CSS لیست شماره‌دار

لیست‌های شماره‌دار یا Ordered List چند ویژگی CSS مهم دارند که در نسخه‌های جدید HTML و CSS قابل استفاده است. مهم‌ترین ویژگی که در زبان فارسی کاربرد دارد، نمایش عددها به زبان فارسی است که به شکل زیر انجام می‌شود:

با درج کد بالا در بخش CSS، عددهای لیست به جای حالت پیش‌فرض انگلیسی به صورت فارسی نمایش داده می‌شوند.

در صورتی که بخواهید شکل نمایش لیست‌های تو در تو را تغییر دهید با درج دو selector پی در پی می‌توانید تغییرات مورد نظر را انجام دهید:

با استفاده از قطعه کد بالا، لیست‌های ردیف دوم  به بعد به رنگ قرمز نمایش داده می‌شوند.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

مشاوره رایگان تلفنی
۶۵ ۸۹ ۹۶ ۸۸ - ۰۲۱
۹۱ ۸۴ ۹۶ ۸۸ - ۰۲۱