آموزش CSS (فصل هفتم) : کار با لیست ها

دسته بندی: آموزش
زمان مطالعه: 3 دقیقه
۲۴ آذر ۱۳۹۱

فهرست محتوای این مقاله

لیست‌ها در CSS

لیست‌ها عناصری با کاربرد‌های بسیار متنوع هستند. از جمله برای بخش navigation سایت و برای ایجاد کنترل‌های tab استفاده می‌شوند. Navigation معمولا شامل لیستی از لینک‌ها است، که دارای ویژگی‌های بصری می‌باشد و ثابت و خشک نیست، ما در این فصل به طریقه استایل دادن و معرفی خصوصیت هایی که برای کار با لیست‌ها در CSS استفاده میشود می‌پردازیم.

خاصیت list-style-type

با استفاده از این خاصیت می‌توان برای لیست‌های مرتب و نامرتب bullet تعریف کرد. و یکی از 14 مقدار زیر را می‌پذیرد.

disc , circle , square , decimal , decimal-leading-zero , lower-roman , upper-roman , lower-greek , lower-latin , upper-latin , armenian , georgian , none

مقدار پیشفرض برای لیست‌های نا مرتب (ul) : مقدار disc

مقدار پیشفرض برای لیست‌های مرتب (ol) : مقدار decimal

نکته :

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

Bullet‌های مخصوص لیست‌های نامرتب (ul) عبارتنداز : square ،  circle و disc و none و بقیه bullet‌های مربوط به لیت‌های مرتب (ol) می‌باشد.

مثال:

کد HTML :

<h2> Web Design Tutorials </h2>
<ul>
<li>HTML
<ol class="html">
<li>HTML 1</li>
<li>HTML 2</li>
<li>HTML 3</li>
<li>HTML 4</li>
<li>HTML 5</li>
<li> XHTML</li>
</ol>
</li>
<li>CSS
<ol class="css">
<li>CSS 1</li>
<li>CSS 2</li>
<li>CSS 3</li>
</ol>
</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>PHP</li>
<li>ASP</li>
</ul>

و کد CSS :

ul li {list-style-type: square;}
ul ol.html li {list-style-type: lower-alpha;}
ul ol.css li {list-style-type: upper-roman;}

نتیجه در مرورگر:

خاصیت list style image

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

مثال :

ul li {list-style-image: url('images/green-bullet.png');}
ul ol.html li {list-style-image: url('images/blue-bullet.png');}
ul ol.css li {list-style-image: url('images/brown-bullet.png');}

list-style-position

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

  • Inside : مشخص می‌کند که bullet لیست باید در داخل آیتم‌های لیست قرار گیرد.
  • Outside : مشخص که bullet لیست باید در خارج از آیتم‌های لیست قرار گیرد.

مثال :

ul li {list-style-image: url('images/arrow.png');}
ul ol.html li {
list-style-image: url('images/arrow1.png');
list-style-position: inside;
background: #09f;
}
ul ol.css li {
list-style-image: url('images/arrow2.png');
list-style-position: outside;
background: #ff9;
}

می بینید که bullet زیر مجموعه ی گزینه ی HTML که به آن مقدار inside داده ایم در کنار داخل کادر قرار گرفته، اما bullet زیر مجموعه CSS که مقدار outside دارد، خارج از کادر قرار گرفته است.

کوتاه نویسی خاصیت list style

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

list-style: type position url('ImageAddress');

مثال :

li { list-style: square inside url('bullet1.png'); }

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

چه امتیازی به این مقاله می دید؟
نویسنده طاها دریس

جلسات دوره

نظرات کاربران

hamed_z2001

الان این list-style-position دقیقا چی کار میکنه؟؟ چه فایده ای داره؟؟

سجاد دریس

به مثال دقت کنید. متوجه کارش میشید.

hamed_z2001

آها ….. برای تنظیم مکان قرارگیری bullet هاست.درست فهمیدم؟؟ 🙄

سجاد دریس

بله

technolife

سلام
فایل های دانلود مقاله به صورت PDF درست نیستن
لطفا اون ها رو درست کنید
باتشکر

danjer

سلام خیلی ممنون از سایت خوبتون اگه میشه این چیزی که من می خوام یاد بدید حالا چطور میشه با چه تگی میشه به صورت لیست کرد

سوران

ممنون يادآوري خوبي بود

کیوان علی محمدی

سلام سجاد عزیز،آقا ممنون،خیلی خوب بود.

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.