استایل لیست در CSS — آموزش CSS (بخش بیست و دوم)

۳۶۴ بازدید

آخرین به‌روزرسانی: ۱۸ شهریور ۱۴۰۲

زمان مطالعه: ۶ دقیقه

استایل لیست در CSS — آموزش CSS (بخش بیست و دوم)

لیست در CSS تا حدود زیادی رفتاری شبیه به بقیه متن دارد به جز این که برخی مشخصه‌های خاص دارد که باید با آن‌ها آشنا باشید و برخی رویه‌ها نیز وجود دارند که باید رعایت کنید. در این مقاله به توضیح روش تعیین استایل لیست در CSS می‌پردازیم. برای مطالعه بخش قبلی این سری مقالات روی لینک زیر کلیک کنید:

فهرست مطالب این نوشته

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

مدیریت فاصله‌بندی لیست

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

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

سخن پایانی

استایل مقدماتی متن و فونت در CSS — آموزش CSS (بخش بیست و یکم)

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

در آغاز به بررسی یک مثال ساده لیست می‌پردازیم. در سراسر این مقاله به بررسی لیست‌های نامرتب، مرتب و توصیفی خواهیم پرداخت. همه این‌ها قابلیت‌های استایل‌بندی مشابهی دارند و برخی موارد نیز استایل‌های خاص خود را دارند.

فیلم آموزش سی اس اس – طراحی وب سایت با CSS – مقدماتی در فرادرس

کلیک کنید

در این مقاله روی مثال زیر کار می‌کنیم:

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

کد بدون استایل آن به صورت زیر است:

1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title>Styling lists</title>
6  </head>
7  <body>
8    <h2>Shopping (unordered) list</h2>
9
10    <p>Paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference.</p>
11
12    <ul>
13      <li>Humous</li>
14      <li>Pitta</li>
15      <li>Green salad</li>
16      <li>Halloumi</li>
17    </ul>
18
19    <h2>Recipe (ordered) list</h2>
20
21    <p>Paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference.</p>
22
23    <ol>
24      <li>Toast pitta, leave to cool, then slice down the edge.</li>
25      <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
26      <li>Wash and chop the salad</li>
27      <li>Fill Pitta with salad, humous, and fried halloumi.</li>
28    </ol>
29
30    <h2>Ingredient description list</h2>
31
32    <p>Paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference.</p>
33
34    <dl>
35      <dt>Humous</dt>
36      <dd>A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.</dd>
37      <dt>Pitta</dt>
38      <dd>A soft, slightly leavened flatbread.</dd>
39      <dt>Halloumi</dt>
40      <dd>A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.</dd>
41      <dt>Green salad</dt>
42      <dd>That green healthy stuff that many of us just use to garnish kebabs.</dd>
43    </dl>
44
45
46  </body>
47</html>

این مثال هم اینک برخی استایل‌های پیش‌فرض به شرح زیر دارد:

عناصر <ul> و <ol> دارای margin بالا و پایین 16px یا 1em و padding-left به مقدار 40px یا 2.5em هستند.
آیتم‌های لیست هیچ Spacing پیش‌فرض ندارند.
عنصر <dl> دارای margin بالا و پایین برابر با 16px است اما padding تعیین نشده است.
عناصر <dd> دارای margin-left به میزان 40px هستند.
عناصر <p>که برای ارجاع در این جا قرار داده‌ایم، دارای margin به میزان 16px هستند که در انواع مختلف لیست یکسان است.

مدیریت فاصله‌بندی لیست

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

CSS مورد استفاده برای استایل‌بندی متن به صورت زیر است:

1/* General styles */
2
3html {
4  font-family: Helvetica, Arial, sans-serif;
5  font-size: 10px;
6}
7
8h2 {
9  font-size: 2rem;
10}
11
12ul,ol,dl,p {
13  font-size: 1.5rem;
14}
15
16li, p {
17  line-height: 1.5;
18}
19
20/* Description list styles */
21
22
23dd, dt {
24  line-height: 1.5;
25}
26
27dt {
28  font-weight: bold;
29}
30
31dd {
32  margin-bottom: 1.5rem;
33}

قاعده اول یک فونت سراسری تعیین می‌کند و اندازه پایه فونت را روی 10px تنظیم می‌کند. این موارد از سوی همه عناصر صفحه ارث‌بری می‌شوند.
قواعد 2 و 3 اندازه‌های فونت را برای عناوین، انواع مختلف لیست و پاراگراف‌ها بازیابی می‌کنند. این بدان معنی است که هر پاراگراف و لیست، اندازه فونت و فاصله‌بندی بالا و پایین یکسانی خواهد داشت که ریتم کلی صفحه حفظ شود.
قاعده 4 اقدام به تعیین line-height یکسانی روی پاراگراف و آیتم‌های لیست می‌کند بنابراین پاراگراف‌ها و همه آیتم‌های لیست فاصله‌بندی یکسانی بین خطوط خواهند داشت. این کار نیز موجب حفظ ریتم عمودی صفحه می‌شود.
قواعد 5 و 6 روی لیست توصیفی اعمال می‌شوند. مقدار line-height روی آیتم‌های لیست توصیفی اعمال می‌شود. این کار در مورد آیتم‌های لیست و پاراگراف‌ها نیز انجام یافت. در این مورد نیز حفظ انسجام کار مناسبی است. همچنین بندهای توصیف را با فونت درشت ارائه کردیم تا از نظر بصری برجستگی بیشتری پیدا کنند.

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

در این بخش به بررسی تکنیک‌های خاص فاصله‌بندی در لیست می‌پردازیم و برخی مشخصه‌های خاص لیست را بررسی می‌کنیم. سه مشخصه وجود دارند که در آغاز باید حتماً آن‌ها را بشناسید و می‌توانند روی عناصر <ul> یا <ol> اعمال شوند:

فیلم آموزش طراحی وب با سی اس اس CSS3 – تکمیلی در فرادرس

کلیک کنید

list-style-type – نوع Bullet‌-هایی که باید روی لیست استفاده شود را تعیین می‌کند. مثلاً می‌توان از Bullet-های دایره‌ای یا مربعی روی یک لیست نامرتب، یا اعداد یا حرف یا اعداد رومی روی یک لیست مرتب استفاده کرد.
list-style-position – نمایش Bullet-ها درون آیتم‌های لیست یا خارج از آن و پیش از آغاز هر آیتم را تعیین می‌کند.
list-style-image – امکان استفاده از یک تصویر سفارشی برای Bullet را به جای یک مربع یا دایره ساده فراهم می‌سازد.

استایل‌های Bullet

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

1ol {
2  list-style-type: upper-roman;
3}

بدین ترتیب لیست زیر به دست می‌آید:

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

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

گزینه‌های Bullet

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

1ol {
2  list-style-type: upper-roman;
3  list-style-position: inside;
4}

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

استفاده از تصویر سفارشی برای Bullet

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

1ul {
2  list-style-image: url(star.svg);
3}

با این حال، این مشخصه برحسب کنترل کردن موقعیت، اندازه و موارد دیگر Bullet کمی محدود است. بهتر است از مشخصه‌های خانواده background استفاده کنید. در مثال کامل شده لیست نامرتب را به صورت زیر استایل‌بندی کرده‌ایم:

1ul {
2  padding-left: 2rem;
3  list-style-type: none;
4}
5
6ul li {
7  padding-left: 2rem;
8  background-image: url(star.svg);
9  background-position: 0 0;
10  background-size: 1.6rem 1.6rem;
11  background-repeat: no-repeat;
12}

در کد فوق کارهای زیر انجام یافته است:

padding-left مربوط به <ul> از مقدار پیش‌فرض 40px به 20px کاهش یافته است و سپس همین مقدار روی آیتم‌های لیست تنظیم شده است. بدین ترتیب آیتم‌های لیست همچنان با آیتم‌های لیست دیگر و توضیحات لیست توصیفی همخوان می‌مانند، اما آیتم‌های لیست دارای مقداری padding برای تصاویر پس‌زمینه هستند. اگر این کار را انجام ندهیم، تصاویر پس‌زمینه روی متن آیتم لیست می‌روند که ظاهر لیست را خراب می‌کند.
مقدار list-style-type را روی none تنظیم می‌کنیم، به طوری که به صورت پیش‌فرض هیچ bullet نمایش نیابد. ما می‌خواهیم از مشخصه‌های background برای مدیریت این Bullet-ها استفاده کنیم.
یک Bullet درون هر آیتم لیست نامرتب درج می‌شود. مشخصه‌های مرتبط به شرح زیر هستند:
- background-image – به مسیری که به فایل تصویر مورد استفاده به جای Bullet مربوط است اشاره می‌کند.
- background-position – محل نمایش در پس‌زمینه عنصر انتخابی را تعیین می‌کند. در این مورد از مقدار 0 0 استفاده شده است که یعنی Bullet در گوشه چپ-بالای هر آیتم لیست نمایش یابد.
- background-size - اندازه تصویر پس‌زمینه را تعیین می‌کند. به طور معمول بهتر است از همان اندازه آیتم لیست استفاده کنیم. ما از اندازه 1.6rem یا 16px استفاده کرده‌ایم که ترکیب خوبی با padding به میزان 20px ایجاد می‌کند. فاصله 16 به علاوه 4 پیکسل بین Bullet و متن آیتم لیست نیز ظاهر خوبی دارد.
- background-repeat – به صورت پیش‌فرض تصاویر پس‌زمینه تا زمانی که کل فضای پس‌زمینه را پر کنند تکرار می‌شوند. ما می‌خواهیم یک تصویر در این مورد درج شود. از این رو باید این مشخصه را روی مقدار no-repeat تنظیم کنیم.

بدین ترتیب نتیجه زیر حاصل می‌شود:

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

مشخصه‌ اختصاری list-style

سه مشخصه‌ای که در بخش قبل اشاره کردیم را می‌توان با استفاده از یک مشخصه اختصاری منفرد به صورت list-style تنظیم کرد. به مثال زیر توجه کنید:

1ul {
2  list-style-type: square;
3  list-style-image: url(example.png);
4  list-style-position: inside;
5}

این کد را می‌توان به صورت زیر نیز نوشت:

1ul {
2  list-style: square url(example.png) inside;
3}

این مقادیر می‌توانند به هر ترتیبی استایل‌بندی شوند و می‌توان از یک، دو یا هر سه مشخصه استفاده کرد. اگر از هر دو مشخصه type و image استفاده شده باشد نوع به عنوان fallback در موارد عدم بارگذاری تصویر به هر دلیلی مورد استفاده قرار می‌گیرد.

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

گاهی اوقات لازم است که شمارش یک لیست نامرتب به روش متفاوتی انجام شود، مثلاً شماره‌ها از عددی به جز 1 آغاز شود یا شماره‌ها معکوس باشد و یا گام‌های شمارش بیش از 1 باشند. در HTML و CSS ابزارهایی به این منظور داریم.

فیلم آموزش کاربردی HTML5، CSS3 و jQuery در طراحی وب – بخش یکم در فرادرس

کلیک کنید

Start

خصوصیت start امکان آغاز شمارش یک لیست از عددی به جز 1 را فراهم می‌سازد. به مثال زیر توجه کنید:

1<ol start="4">
2  <li>Toast pita, leave to cool, then slice down the edge.</li>
3  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
4  <li>Wash and chop the salad.</li>
5  <li>Fill pita with salad, hummus, and fried halloumi.</li>
6</ol>

کد فوق خروجی زیر را تولید می‌کند:

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

Reversed

خصوصیت reversed شمارش لیست را از به صورت معکوس انجام می‌دهد. در مثال زیر:

1<ol start="4" reversed>
2  <li>Toast pita, leave to cool, then slice down the edge.</li>
3  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
4  <li>Wash and chop the salad.</li>
5  <li>Fill pita with salad, hummus, and fried halloumi.</li>
6</ol>

خروجی زیر تولید می‌شود:

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

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

Value

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

1<ol>
2  <li value="2">Toast pita, leave to cool, then slice down the edge.</li>
3  <li value="4">Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
4  <li value="6">Wash and chop the salad.</li>
5  <li value="8">Fill pita with salad, hummus, and fried halloumi.</li>
6</ol>

خروجی زیر تولید می‌شود:

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

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

سخن پایانی

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

فیلم مجموعه آموزش طراحی سایت با HTML و CSS – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

در بخش بعدی این سری مقالات در مورد تکنیک‌های استایل لینک در CSS صحبت خواهیم کرد. برای مطالعه بخش بعدی این سری مقالات روی لینک زیر کلیک کنید:

استایل لینک در CSS --- آموزش CSS (بخش بیست و سوم)

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

بر اساس رای ۱ نفر

آیا این مطلب برای شما مفید بود؟

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

ثبت نظر

منابع:

developer.mozilla

میثم لطفی (+)

«میثم لطفی» در رشته‌های ریاضیات کاربردی و مهندسی کامپیوتر به تحصیل پرداخته و شیفته فناوری است. وی در حال حاضر علاوه بر پیگیری علاقه‌مندی‌هایش در رشته‌های برنامه‌نویسی، کپی‌رایتینگ و محتوای چندرسانه‌ای، در زمینه نگارش مقالاتی با محوریت نرم‌افزار با مجله فرادرس همکاری دارد.