آموزش CSS

آموزش CSS - لیست ها

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

انواع لیست های HTML:

سه نوع مختلف از لیست ها در HTML وجود دارد. این سه نوع لیست عبارتند از:

  • Unordered lists: لیستی از ایتم هاست که در آن هر ایتمی از لیست با بولت نشانه گذاری می شود.
  • Ordered lists: لیستی از ایتم هاست که در آن هر ایتمی از لیست با اعداد نشانه گذاری می شود.
  • Definition list: لیستی از ایتم ها با توضیح هر ایتم است.

سبک دهی لیست ها به کمک CSS:

زبان برنامه نویسی CSS خصوصیت های متعددی را برای سبک دهی لیست های unordered و ordered فراهم می کند. این خصوصیت ها به شما اجازه می دهند:

  • شکل یا ظاهر نشانگر را کنترل کنید.
  • تصویری را برای نشانگر مشخص نمایید.
  • فاصله بین نشانگر و متن را در لیست تنظیم کنید.
  • مشخص کنید که ایا نشانگر یا بولت باید در داخل یا خارج از جعبه حاوی ایتم های موجود نمایش داده شود.

در این مقاله درباره خصوصیت هایی صحبت خواهیم کرد که برای سبک دهی لیست ها مورد استفاده قرار می گیرد.

نوع سبک لیست:

به طور پیش فرض، ایتم هایی که در لیست ordered قرار دارند با اعداد عربی همچون 1و2و3 و غیره بیان می شوند. این در حالیست که در لیست unordered، آیتم ها با بولت های گرد نشانه گذاری می شوند. شما می توانید این موارد پیش فرض را به صورت دلخواه تغییر دهید. برای اینکار کافیست از خصوصیت list-style-type استفاده کنید:

ul {
    list-style-type: square;
}
ol {
    list-style-type: upper-roman;
}

تغییر موقعیت نشانگرهای لیست:

نشانگرهای لیست معمولا خارج از جعبه ایتم های لیست قرار می گیرند. با اینحال شما می توانید این موضوع را به کمک خصوصیت list-style-position تغییر دهید و مشخص کنید نشانگر یا بولت پوینت ها در داخل یا خارج از جعبه پیش فرض ایتم قرار گیرد. مقادیری که این خصوصیت می گیرد در برگیرنده Inside و Outside است که مقدار Outside پیش فرض آن است.

ul.in li {
    list-style-position: inside;
}
ul.out li {
    list-style-position: outside;
}

استفاده از تصویر به عنوان نشانگر لیست:

شما می توانید تصویر را به عنوان نشانگر لیست خود مورد استفاده قرار دهید. برای اینکار باید از خصوصیت list-style-image استفاده کنید. در مثال زیر، تصویر PNG شفافی به نام arrow.png به عنوان نشانگر لیست تمامی ایتم های موجود در لیست unordered مورد استفاده قرار گرفته است.

ul li {
    list-style-image: url("arrow.png");
}

مثال بالا خروجی یکسانی در تمامی مرورگرها نخواهد داشت. مرورگر اینترنت اکسپلورر و اپرا نشانگر تصویر را کمی بزرگتر از فایرفاکس، کروم و سفری نشان خواهند داد.

راه حل مرتبط با مشکلات مرورگرها در نشانگر تصویر:

زمانی که می خواهید به کمک خصوصیت list-style-image از تصویر به عنوان بولت استفاده کنید، در برخی از مرورگرها بولت ها با متن همتراز نخواهند بود. برای اینکه بتوانید چنین مشکلی را حل کنید، می توانید تصویر بولت را از طریق خصوصیت background-image تنظیم نمایید. اول از هر کاری، لیست را به صورت No bullet تنظیم کنید. سپس یک تصویر پس زمینه Non-repeating را برای المان لیست خود تعریف نمایید. مثال زیر نشانگر تصویر را در همه مرورگرها به یک شکل نشان می دهد.

ul {
    list-style-type: none;
}
ul li {
    background-image: url("arrow.png");
    background-position: 0px 5px;    /* X-pos Y-pos (from top-left) */
    background-repeat: no-repeat;
    padding-left: 20px;
}

خصوصیت مختصر نویسی list-style:

خصوصیت list-style یک خصوصیت مختصرنویسی شده است که برای تعریف خصوصیت های list-style-type، list-style-image و list-style-position یک لیست مورد استفاده قرار می گیرد. به مثال زیر توجه کنید:

ol {
    list-style: upper-latin inside;
}

زمانی که می خواهید از خصوصیت مختصرنویسی استفاده کنید، ترتیب مقادیر به صورت زیر خواهد بود:
list-style-type | list-style-position | list-style-image

در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش CSS

Learn CSS

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

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

لطفا چند لحظه منتظر بمانید ...