آموزش CSS
همانطور که می‌دانید، در HTML امکان ایجاد لیست‌های ترتیبی (ol)، غیر ترتیبی (ul) و توصیفی (dl) وجود دارد. در این درس، قصد داریم در مورد استایل‌دهی به انواع لیست‌ها صحبت کنیم و با پراپرتی‌های list-style-type، list-style-position و list-style-image که به این منظور معرفی شده‌اند، آشنا شویم. یک پراپرتی اختصاری با نام list-style هم وجود دارد که امکان مقداردهی همزمان سه پراپرتی قبلی را فراهم می‌کند.
آیتم‌های یک لیست ترتیبی (یعنی لیستی که با عنصر ol ایجاد می‌شود) به‌صورت شماره‌گذاری‌شده و آیتم‌های یک لیست غیرترتیبی (لیست‌هایی که با عنصر ul ایجاد می‌شوند) به همراه یک نشانگر (bullet) نمایش داده می‌شوند. پراپرتی list-style-type روش شماره‌گذاری را برای لیست‌های ترتیبی و نوع نشانگر را برای لیست‌های غیرترتیبی مشخص می‌کند.
برای پراپرتی list-style-type مقادیر زیادی قابل انتخاب است. جدول زیر تعدادی از مرسوم‌ترین مقادیر ممکن این پراپرتی را برای لیست‌های ترتیبی و غیرترتیبی به همراه نتیجه‌ی حاصل از هر مقدار ارائه داده است. سه مقدار اول به لیست‌های غیر ترتیبی و سایر مقادیر به لیست‌های ترتیبی اختصاص دارند و البته آخرین مقدار یعنی none برای هر دو نوع لیست قابل تنظیم است و باعث حذف شماره‌گذاری یا نشانگر می‌شود.
| مقدار پراپرتی list-style-type | مارکر(ها) |
|---|---|
| disc | ● |
| circle | ⃝ |
| square | ￭ |
| decimal | 1, 2, 3, 4, …. |
| decimal-leading-zero | 01, 02, 03, 04, …. |
| upper-alpha | A, B, C, D, …. |
| lower-alpha | a, b, c, d, …. |
| uper-roman | I, II, III, IV, …. |
| lower-roman | i, ii, iii, iv, …. |
| upper-greek | Α, Β, Γ, Δ, …. |
| lower-greek | α, β, γ, δ, …. |
| lower-latin | a, b, c, d, ... |
| armenian | Ա, Բ, Գ, Դ,…. |
| georgian | |
| none |
در کد زیر، دو مورد از مقادیر جدول بالا را برای پراپرتی list-style-type آزمایش کرده‌ایم. مثال را اجرا کنید و سایر مقادیر را نیز امتحان کنید.
CSS
ul{
list-style-type: upper-roman;
}
ol{
list-style-type: square;
}پراپرتی list-style-position موقعیت نشانگر را نسبت به محتوای آیتم‌های لیست مشخص می‌کند. این پراپرتی دارای مقدار پیش‌فرض outside است که باعث می‌شود نشانگر بیرون از محتوای آیتم قرار بگیرد. اما می‌توانیم مقدار inside را به این پراپرتی بدهیم تا نشانگر را درون محتوای آیتم قرار دهد. مثال زیر را ببینید.
CSS
ul{
list-style-type: square;
list-style-position: inside;
}پراپرتی list-style-image به ما امکان می‌دهد که از یک تصویر دلخواه به عنوان نشانگر لیست استفاده کنیم. این پراپرتی سینتکس بسیار ساده‌ای دارد و آدرس تصویر مورد نظر را به عنوان مقدار دریافت می‌کند.
CSS
ul{
list-style-image: url(star.svg);
}پراپرتی list-style یک راه میانبر برای تنظیم هر سه پراپرتی مربوط به لیست‌هاست. ترتیب مقادیر اهمیتی ندارد جون ابهامی در این مورد وجود ندارد. در ضمن، از هر یک از مقادیر نیز می‌توان صرف‌نظر کرد که در این صورت، مقدار پیش‌فرض آن پراپرتی در نظر گرفته می شود. دو قاعده‌ی زیر با نتیجه‌ی یکسانی همراه هستند:
CSS
ul{
list-style-type: square;
list-style-image: url(star.png);
list-style-position: inside;
}
ul{
list-style: square url(star.png) inside;
}