آموزش سی اس اس CSS

در زبان HTML دو نوع لیست وجود دارد: unordered lists و ordered lists

Unordered Lists:

Ordered Lists:

HTML Listها و پراپرتی های CSS List

در زبان HTML دو نوع لیست وجود دارد:

• unordered lists (ul) - آیتم های لیست با بولت مشخص میشوند
• ordered lists (ol) - آیتم های لیست با عدد یا حرف مشخص میشوند

پراپرتی های سی اس اس به شما این اجازه را میدهند که:

• برای ordered listها نشانگرهای مختلفی تعیین کرد
• برای unordered listها نشانگرهای مختلفی تعیین کرد
• برای نشانگر لیست عکس تعیین کرد
• برای لیست ها و آیتم های لیست رنگ پس زمینه تعیین کرد

List Item Markerهای مختلف

پراپرتی list-style-type نوع نشانگر آیتم های لیست را تعریف میکند.

مثال های زیر برخی از نشانگرهای (markers) موجود برای آیتم های لیست را نشان میدهد:

 
ul.a {
    list-style-type: circle;
}
ul.b {
    list-style-type: square;
}
ol.c {
    list-style-type: upper-roman;
}
ol.d {
    list-style-type: lower-alpha;
}
 

تصویر بعنوان نشانگر آیتم های لیست

با پراپرتی list-style-image میتوان تصویر را بعنوان نشانگر آیتم لیست تعیین کرد:

 
ul {
    list-style-image: url('sqpurple.gif');
}
 

Position The List Item Markers

پراپرتی list-style-position جای نشانگر آیتم های لیست را مشخص میکند.

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

list-style-position: inside به معنای آن است که بولت ها داخل آیتم لیست قرار بگیرد. بولت ها بعنوان بخشی از متن خواهند بود و متن را کمی جلو تر از متن میبرد:

 
ul.a {
    list-style-position: outside;
}
ul.b {
    list-style-position: inside;
}
 

حذف تنظیمات پیش فرض

پراپرتی list-style-type:none برای حذف نشانگر/بولت استفاده میشود. توجه داشته باشید که لیست ها margin و padding پیش فرض نیز دارند. برای حذف آن margin:0 و padding:0 را به ul یا ol اضافه کنید:

 
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
 

List

میتوان کدهای لیست را کوتاه کرد و تمامی پراپرتی های را داخل یک پراپرتی آورد.

پراپرتی کوته شده لیست list-style نام دارد.

 
ul {
    list-style: square inside url("sqpurple.gif");
}
 

زمانی که از پراپرتی کوتاه شده لیست استفاده میکنید ترتیب مقادیر باید بصورت زیر باشد:

• list-style-type (اگر تصویری برای لیست تعریف شده باشد و به هر علتی آن تصویر لود نشود این مقدار نمایش داده میشود)
• list-style-position (مشحص میکند که آیتم های لیست درون یا بیرون محتوا قرار بگیرند)
• list-style-image (یک تصویر را بعنوان نشانگر آیتم لیست تعیین میکند.)

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

استایل دادن لیست با رنگ ها

میتوان لیست ها را با رنگ استایل داد تا آنها کمی جذاب تر بنظر برسند.

اگر استایلی به ol یا ul اضافه شود کل لیست را تحت تاثیر قرار خواهد داد، درحالی که اگر استایل به li اضافه شود تنها آیتم های لیست تحت تاثیر قرار خواهند گرفت.

 
ol {
 background: #ff9999;
 padding: 20px;
}
ul {
 background: #3399ff;
 padding: 20px;
}
ol li {
 background: #ffe5e5;
 padding: 5px;
 margin-left: 35px;
}
ul li {
 background: #cce5ff;
 margin: 5px;
}