آموزش CSS پیشرفته : استایل‌دهی به لیست‌ها

لیست‌ها در بیشتر موارد مانند هر متن دیگری رفتار می‌کنند، اما برخی از ویژگی‌های CSS مخصوص لیست‌ها وجود دارد که باید در مورد آنها بدانید، و همچنین برخی از بهترین شیوه‌ها را در نظر بگیرید. این مقاله همه چیز را توضیح می‌دهد.

یک مثال ساده از لیست

برای شروع، بیایید به یک مثال ساده از لیست نگاهی بیندازیم. در طول این مقاله، به لیست‌های نامرتب، مرتب و توصیفی خواهیم پرداخت - همه آنها ویژگی‌های استایل‌بندی مشابهی دارند، و همچنین برخی از آنها مختص به خودشان هستند. HTML مثال لیست ما به این شکل است:

HTML

یک مثال ساده از لیست اگر اکنون به مثال زنده بروید و عناصر لیست را با استفاده از ابزارهای توسعه‌دهنده مرورگر بررسی کنید، متوجه چند پیش‌فرض سبک‌بندی خواهید شد: عناصر و دارای حاشیه بالا و پایین 16 پیکسل (1em) و فاصله بین خطوط 40 پیکسل (2.5em) هستند. اگر ویژگی جهت‌دار dir برای عناصر ul و ol روی راست به چپ (rtl) تنظیم شده باشد، در این صورت فاصله بین خطوط اعمال می‌شود و مقدار پیش‌فرض آن 40 پیکسل (2.5em) است. عناصر لیست (عناصر ) هیچ پیش‌فرضی برای فاصله‌گذاری ندارند. عنصر دارای حاشیه بالا و پایین 16 پیکسل (1em) است، اما فاصله بین خطوط تنظیم نشده است. عناصر دارای حاشیه بین خطوط 40 پیکسل (2.5em) هستند. عناصر که برای مرجع قرار داده‌ایم، دارای حاشیه بالا و پایین 16 پیکسل (1em) هستند - مانند انواع مختلف لیست.

مدیریت فاصله‌گذاری لیست‌ها

هنگام استایل‌دهی به لیست‌ها، باید استایل‌های آنها را طوری تنظیم کنید که فاصله عمودی آنها با عناصر اطرافشان (مانند پاراگراف‌ها و تصاویر؛ که گاهی ریتم عمودی نامیده می‌شود) و فاصله افقی آنها با یکدیگر یکسان باشد. کد CSS مورد استفاده برای استایل‌دهی و فاصله‌گذاری متن به شرح زیر است:

CSS

قانون اول یک فونت سراسری سایت و اندازه فونت پایه ۱۰ پیکسل را تعیین می‌کند. این فونت‌ها توسط همه چیز در صفحه به ارث برده می‌شوند. قوانین ۲ و ۳ اندازه فونت نسبی را برای عنوان‌ها، انواع مختلف لیست (فرزندان عناصر لیست این فونت‌ها را به ارث می‌برند) و پاراگراف‌ها تعیین می‌کنند. این بدان معناست که هر پاراگراف و لیست اندازه فونت و فاصله بالا و پایین یکسانی خواهند داشت که به حفظ ریتم عمودی کمک می‌کند. قانون ۴ ارتفاع خط یکسانی را برای پاراگراف‌ها و آیتم‌های لیست تعیین می‌کند - بنابراین پاراگراف‌ها و هر آیتم لیست جداگانه فاصله بین خطوط یکسانی خواهند داشت. این همچنین به حفظ ریتم عمودی کمک می‌کند. قوانین ۵ و ۶ برای لیست توضیحات اعمال می‌شود. ما همان ارتفاع خط را برای عبارات و توضیحات لیست توضیحات مانند پاراگراف‌ها و آیتم‌های لیست تنظیم می‌کنیم. باز هم، ثبات خوب است! ما همچنین عبارات توضیحات را با فونت ضخیم تنظیم می‌کنیم تا از نظر بصری راحت‌تر به چشم بیایند.

سبک‌های خاص لیست

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

استایل‌های گلوله‌ای

همانطور که در بالا ذکر شد، ویژگی list-style-type به شما امکان می‌دهد نوع بولت مورد استفاده برای نقاط بولت را تعیین کنید. در مثال ما، لیست مرتب شده را طوری تنظیم کرده‌ایم که از اعداد رومی بزرگ با حروف بزرگ استفاده کند:

CSS

این به ما ظاهری شبیه به زیر می‌دهد:

با مراجعه به صفحه مرجع list-style-type می‌توانید گزینه‌های بسیار بیشتری پیدا کنید.

موقعیت گلوله

ویژگی list-style-position تعیین می‌کند که آیا بالت‌ها (bullets) قبل از شروع هر آیتم، داخل آیتم‌های لیست یا خارج از آنها ظاهر شوند. مقدار پیش‌فرض outside است که باعث می‌شود بالت‌ها (bullets) همانطور که در بالا مشاهده می‌کنید، خارج از آیتم‌های لیست قرار گیرند. اگر مقدار را روی inside تنظیم کنید، بالت‌ها داخل خطوط قرار می‌گیرند:

CSS

استفاده از تصویر گلوله شخصی ساز

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

CSS

با این حال، این ویژگی از نظر کنترل موقعیت، اندازه و غیره گلوله‌ها کمی محدود است. بهتر است از خانواده ویژگی‌های پس‌زمینه استفاده کنید که در درس قبلی پس‌زمینه‌ها و حاشیه‌ها با آنها آشنا شدید. در مثال نهایی خود، لیست نامرتب را به این صورت (علاوه بر آنچه در بالا دیده‌اید) استایل‌دهی کرده‌ایم:

CSS

در اینجا موارد زیر را انجام داده‌ایم: میزان padding-left عنصر را از مقدار پیش‌فرض ۴۰ پیکسل به ۲۰ پیکسل کاهش داده و سپس همین مقدار را برای آیتم‌های لیست تنظیم کنید. این کار به این صورت انجام می‌شود که در کل، آیتم‌های لیست همچنان با آیتم‌های لیست مرتب و توضیحات لیست هم‌ردیف باشند، اما آیتم‌های لیست مقداری padding برای تصاویر پس‌زمینه داشته باشند تا درون آنها قرار گیرند. اگر این کار را نمی‌کردیم، تصاویر پس‌زمینه با متن آیتم لیست همپوشانی داشتند که ظاهری نامرتب به خود می‌گرفت. list-style-type را روی none تنظیم کردیم تا به طور پیش‌فرض هیچ bullet ای ظاهر نشود. در عوض، از ویژگی‌های background برای مدیریت bullet ها استفاده خواهیم کرد. یک bullet روی هر آیتم لیست نامرتب قرار دادیم. ویژگی‌های مربوطه به شرح زیر است: background-image: این به مسیر فایل تصویری که می‌خواهید به عنوان bullet استفاده کنید اشاره می‌کند. background-position: این مشخص می‌کند که تصویر در کجای پس‌زمینه عنصر انتخاب شده ظاهر شود - در این حالت ما می‌گوییم ۰ ۰، به این معنی که bullet در سمت چپ بالای هر آیتم لیست ظاهر می‌شود. background-size: این پارامتر اندازه تصویر پس‌زمینه را تنظیم می‌کند. در حالت ایده‌آل می‌خواهیم که بولت‌ها هم‌اندازه‌ی آیتم‌های لیست باشند (یا کمی کوچک‌تر یا بزرگ‌تر). ما از اندازه‌ی ۱.۶rem (16px) استفاده می‌کنیم که به خوبی با padding 20px که برای قرار گرفتن بولت در نظر گرفته‌ایم، مطابقت دارد - ۱۶px به علاوه‌ی ۴px فاصله بین بولت و متن آیتم لیست به خوبی کار می‌کند. background-repeat: به طور پیش‌فرض، تصاویر پس‌زمینه تا زمانی که فضای پس‌زمینه‌ی موجود را پر کنند، تکرار می‌شوند. ما فقط می‌خواهیم یک کپی از تصویر در هر مورد درج شود، بنابراین این پارامتر را روی مقدار no-repeat تنظیم می‌کنیم. این پارامتر نتیجه‌ی زیر را به ما می‌دهد:

خلاصه نویسی به سبک لیست

سه ویژگی ذکر شده در بالا را می‌توان با استفاده از یک ویژگی مختصرنویسی واحد، list-style، تنظیم کرد. برای مثال، CSS زیر:

CSS

میشه با این جایگزین کرد:

CSS

مقادیر را می‌توان به هر ترتیبی فهرست کرد و می‌توانید از یک، دو یا هر سه استفاده کنید (مقادیر پیش‌فرض مورد استفاده برای ویژگی‌هایی که شامل نمی‌شوند disc، none و outside هستند). اگر هم نوع و هم تصویر مشخص شده باشند، در صورتی که تصویر به هر دلیلی قابل بارگذاری نباشد، از نوع به عنوان جایگزین استفاده می‌شود.

کنترل شمارش لیست

گاهی اوقات ممکن است بخواهید در یک لیست مرتب، شمارش متفاوتی داشته باشید - مثلاً از عددی غیر از ۱ شروع کنید، یا به صورت معکوس بشمارید، یا در مراحلی بیش از ۱ بشمارید. HTML و CSS ابزارهایی برای کمک به شما در اینجا دارند.

start

ویژگی شروع به شما امکان می‌دهد شمارش لیست را از عددی غیر از ۱ شروع کنید. مثال زیر:

HTML

reversed

ویژگی reversed شمارش لیست را به جای شروع به افزایش، به سمت پایین شروع می‌کند. مثال زیر:

HTML

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

value

ویژگی value به شما امکان می‌دهد تا آیتم‌های لیست خود را با مقادیر عددی خاص تنظیم کنید. مثال زیر:

HTML

حتی اگر از یک نوع داده‌ی غیر عددی list-style-type استفاده می‌کنید، همچنان باید از مقادیر عددی معادل در ویژگی value استفاده کنید.