آموزش استایل دهی به لیست‌های ol در HTML

استفاده از لیست ها در صفحات وب امری کاملا مرسوم هست که از طراح قالب تا یک نویسنده عادی از آن استفاده می کند. پس اگر به فکر زیبا سازی سایت باشید – حتما باید به استایل دهی این مورد هم توجه داشته باشید.

مقدمه

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

ul برای ایجاد لیست های غیرسفارشی

ol برای ایجاد لیست های سفارشی که ترتیب مهم بوده و مد نظر می باشد.

مرورگرها به طور معمول خودشان برای این تگ ها استایل های پیش فرضی در نظر گرفته اند که برای نمایش ul از دایره های توپُور (•) و برای ol از اعداد (۱,۲,۳,…) استفاده می کنند. که نمونه اولیه در تصویر زیر مشخص می باشد.

در داخل متون مطالب شاید نیاز آنچنانی به استایل دهی این لیست ها نباشد اما در طراحی قالب شاید این مورد خوشایند نباشد. پس اگر به فکر تغییر ظاهر لیست های html هستید در آخر مطلب را دنبال کنید.

استایل دهی به لیست ها

درحالت عادی برای استایل دهی لیست ها چند حالت css وجود دارد که می توانید از انها استفاده کنید، که به شرح زیر می باشد:

list-style-type جهت مشخص نموندن نوع لیست. برای مثال با مقدار دهی این گزینه با decimal لیست های ul را همانند ol به صورت شماره دار نشان دهید و برعکس.
list-style-image که از نماش پیداست برای نمایش تصویر به جای عدد و یا علامت می باشد. برای مثال در قالب فعالی همین سایت برای استایل دهی لیست لینک های مرتبط از این کد استفاده شده است.
و در نهایت list-style-position برای مشخص نموندن مکان لیست ها می باشد. مرورگرهای به صورت پیش فرض این گزینه را با outside مقدار دهی می کنند. پس شما برای این گزینه فقط یک انتخاب دیگر دارید که inside است. جهت درک بهتر این گزینه ۲ تصویر زیر فکر کنم کافی باشد. (در این تصاویر یک تغییر هم اعمال شده است، فهمیدی؟)

(لیست با list-style-position پیشفرض)

(لیست با list-style-position داخلی)

شاید ۳ گزینه ای که در بالا به آنها اشاره شد برای شما کاربردی نداشته باشند و به دنبال استایل دهی طبق نیاز و خواسته های خودتان هستید نه تنها یکسری مواردی که شما را محدود می کنند!

برای مثال شاید دوست دارید رنگ اعداد موجود در لیست قرمز باشند. اگر در این فکر هستید که کد color:red را می توان استفاده کرد هم درست فکر کرده اید و هم اشتباه!

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

پس راه حل چیه…؟

این همه مقدمه چینی و به قول معروف قلم فرسایی کردم تا به اینجا برسیم! و در اصل هدف از ارسال پست صرفا اشاره به همین راه حل بود.

ol.circles-list {
    list-style-type: none;
    margin: 0;
    margin-right: 4em;
    padding: 0;
    counter-reset: li-counter;
}
ol.circles-list > li{
    position: relative;
    padding-right: 0.5em;
    min-height: 3em;
}
ol.circles-list > li:before {
    position: absolute;
    top: 0;
    right: -1.33em;
    width: 1em;
    height: 1em;
    font-size: 2em;
    line-height: 1;
    text-align: center;
    color: #f5f5f5;
    border: 3px solid #c5c5c5;
    border-radius: 50%;
    background-color: #464646;
    content: counter(li-counter);
    counter-increment: li-counter;
}
ol.circles-list > li:hover:before{color:yellow}

کدهای فوق چیزی هست که بهش نیاز دارید. که موارد نیاز رو تک به تک توضیح خواهم داد.

در سطر اول ما کلاسی به نام circles-list تعریف می کنیم که برای لیست های شماره دار هست. پس به یاد داشته باشید که این کلاس فقط برای لیست های ol قابل استفاده است.

در سطر بعدی list-style-type که بالاتر در مورد آن صحبت شد با مقدار none به حالت عدم نمایش و مخفی می رود. به عبارتی اعدادی که در ابتدای لیست درج می شدند با این کد حذف می شوند.

و در نهایت به این تیکه کد ol.circles-list > li:before که در سطر ۱۳ می باشد میرسیم. دستور before: در این خط اشاره به همان اعداد مقابل لیست هست. در کدهای همین لیست content با مقدار counter(li-counter) مشخص کننده محتویات است که به شمارنده ارجاع داده می شود و سرانجام در سطر ۲۷ کد counter-increment وظیفه شمارش اعداد لیست را برعهده دارد.

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

← مشاهده نتیجه نهایی