طراحی سایت, ساخت ربات تلگرام, آموزش php , سورس کد php ,سورس ربات تلگرام , سورس فروشگاه اینترنتی , آموزش طراحی وب

آموزش CSS – لیست ها در CSS


آموزش CSS

در جلسه قبل از آموزش CSS با نحوه استایل دهی لینک ها در CSS آشنا شدید. در این بخش قصد داریم شما را با نحوه استایل دهی لیست ها در CSS را آموزش بدیم.

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

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

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

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

استایل دهی لیست ها در CSS

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

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

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

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

به طور پیش فرض، ایتم هایی که در لیست مرتب قرار دارند با اعداد عربی همچون ۱و۲و۳ و غیره بیان می شوند. این در حالیست که در لیست unordered، آیتم ها با بولت های گرد نشانه گذاری می شوند.

حتما بخوانید  آموزش CSS – بخش آخر (متفرقه)

شما می توانید این موارد پیش فرض را به صورت دلخواه تغییر دهید. برای اینکار کافیست از خصوصیت list-style-type استفاده کنید:

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

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

مقادیری که این خصوصیت می گیرد در برگیرنده Inside و Outside است که مقدار Outside پیش فرض آن است.

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

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

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

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

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

زمانی که می خواهید به کمک خصوصیت list-style-image از تصویر به عنوان بولت استفاده کنید، در برخی از مرورگرها بولت ها با متن همتراز نخواهند بود.

حتما بخوانید  آموزش CSS - رنگ در CSS3

برای اینکه بتوانید چنین مشکلی را حل کنید، می توانید تصویر بولت را از طریق خصوصیت background-image تنظیم نمایید.

اول از هر کاری، لیست را به صورت No bullet تنظیم کنید. سپس یک تصویر پس زمینه Non-repeating را برای المان لیست خود تعریف نمایید.

مثال زیر نشانگر تصویر را در همه مرورگرها به یک شکل نشان می دهد.

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

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

به مثال زیر توجه کنید:

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

 

امیدوارم در این بخش آموزش CSS, از استایل دهی لیست ها در CSS نهایت استفاده را برده باشید.

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

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.

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

دیدگاه کاربران

avatar

دانلود رایگان (هدیه ویژه)

کتاب آموزش زبان برنامه نویسی PHP را دانلود و همین امروز یادگیری را شروع کن و به جمع برنامه نویسان ملحق شو ;)

دانلود رایگان کتاب

سورس فروشگاهی دیجی کالا

بخش کاربران

هنوز عضو نیستید ؟ کلیک کنید

مجوزهای ما

logo-samandehi

دانلود کتاب

عضویت رایگان خبرنامه

تخفیف 150 هزار تومانی برای سورس فروشگاهی دیجی کالا تا پایان خردادماه - کد تخفیف : np150
ثانیه
دقیقه
ساعت
روز
خرید محصول