آموزش تگ OL در HTML
یکی از تگهای مهم در HTML که برای ساخت لیستهای شمارهدار کاربرد دارد، تگ OL است. این تگ در هنگام نوشتن مقالات و مطالب آموزشی پر اهمیت است و به صورت خودکار، فهرست ردیفهایی که در آن قرار بگیرند را با یک شماره پیشوند میکند.
هر تگ OL میتواند دارای چندین تگ LI باشد. همچنین امکان استفادهی تو در تو این تگ وجود دارد. به مثال زیر توجه کنید:
|
1 2 3 4 5 |
<ol> <li>ردیف اول</li> <li>ردیف دوم</li> <li>ردیف سوم</li> </ol> |
خروجی کدهای بالا به صورت زیر خواهد بود:
- ردیف اول
- ردیف دوم
- ردیف سوم
برای درج شمارنده به صورت تو در تو، لیست دوم مستقیم داخل تگ OL اصلی قرار میگیرد:
|
1 2 3 4 5 6 7 8 9 10 |
<ol> <li>ردیف اول</li> <ol> <li>فرزند اول</li> <li>فرزند دوم</li> </ol> <li>ردیف سوم</li> </ol> |
خروجی کدهای بالا به صورت زیر دیده میشود:
- ردیف اول
- فرزند اول
- فرزند دوم
- ردیف سوم
ویژگیهای مهم تگ OL
مهمترین ویژگی تگ OL عدد شروع لیست است که با متغیر start مشخص میشود:
|
1 2 3 4 |
<ol start="3"> <li>ردیف سوم</li> <li>ردیف چهارم</li> </ol> |
همان طور که میبینید، لیست به جای عدد ۱ با عدد ۳ شروع شده است.
- ردیف سوم
- ردیف چهارم
ویژگیهای CSS لیست شمارهدار
لیستهای شمارهدار یا Ordered List چند ویژگی CSS مهم دارند که در نسخههای جدید HTML و CSS قابل استفاده است. مهمترین ویژگی که در زبان فارسی کاربرد دارد، نمایش عددها به زبان فارسی است که به شکل زیر انجام میشود:
|
1 2 3 |
ol { list-style-type: persian; } |
با درج کد بالا در بخش CSS، عددهای لیست به جای حالت پیشفرض انگلیسی به صورت فارسی نمایش داده میشوند.
در صورتی که بخواهید شکل نمایش لیستهای تو در تو را تغییر دهید با درج دو selector پی در پی میتوانید تغییرات مورد نظر را انجام دهید:
|
1 2 3 |
ol ol { color: red; } |
با استفاده از قطعه کد بالا، لیستهای ردیف دوم به بعد به رنگ قرمز نمایش داده میشوند.