آموزش کار با لیست ها list در css و تنظیمات مربوط به لیست در صفحات وب

در ادامه سری آموزش های css، امروز درباره لیست ها list در css صحبت خواهیم کرد.

لیست ها در زیباتر کردن ظاهر بصری سایت و همچنین منظم کردن مطالب موجود در صفحه،کاربرد زیادی دارند.

لیست ها همچنین در ساخت منوهای آبشاری نیز استفاده زیادی دارند.

در این آمورس همراه ما باشید.

با سلامت شما همراهان همیشگی سایت پرنیان طرح

لیست ها listیکی از بخش های مهم در css و طراحی سایت هستند.

لیست ها list میتوانند در ایجاد منوهای ساده و آبشاری به یاری شما بشتابند.

همچنین میتوانید از لیست ها برای مرتب سازی عناصر موجود در صفحه استفاده کنید. امروز در این آموزش قصد داریم کار با لیست list در css را به شما آموزش دهیم.

با ما همراه باشید.

list

به طور کلی در css، دو گروه لیست وجود دارد:

1- <unordered lists) <ul): لیست های مرتب نشده: لیست هایی هستند که با یک علامت در کنارشان (bullet)نمایش داده می شوند. مثلا دایره های توخالی یا توپر، مربع،و… لیست هایی که با تگ <ul> کدنویسی می شود.

2- <ordered lists ) <ol) : لیست های مرتب شده: این لیست ها به ترتیب عدد هستند. یعنی برای نمایش آنها از اعداد استفاده می شود. لیست هایی که با تگ <ol> کدنویسی می شود.

تنظیماتی که css برای لیست ها در اختیار شما قرار می دهد عبارتند از :

میتوانید علامت های مختلفی را برای لیست های مرتب نشده انتخاب کنید.
میتوانید علامت های مختلفی را برای لیست های مرتب شده انختاب کنید.
میتوانید از عکس دلخواه برای علامت گذاری لیست ها استفاده کنید.
میتوانید رنگ پس زمینه برای لیست ها و زیرلیست ها انتخاب کنید.

علامت های مختلف برای لیست ها

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

[php]
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;
}
[/php]
نتایج را از اینجا مشاهده کنید.

[cdb_icon_box icon_style=”icon-font” icon=”fa fa-pencil-square-o” icon_position=”left” icon_type=”normal” icon_size=”icon-box-medium” title=”نکته” title_text_transform=”” title_text_font_weight=”” icon_color=”#1e73be”]بعضی از علامت ها مخصوص لیست های مرتب شده هستند. و برخی دیگر مخصوص لیست های نامرتب.[/cdb_icon_box]

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

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

کدنویسی برای این کار، به شکل زیر خواهد بود:

[php]
ul {
list-style-image: url(‘sqpurple.gif’);
}
[/php]

نتیجه را از اینجا مشاهده کنید.

محل قرارگیری علامت لیست

ویژگی list-style-position به شما کمک میکند محل قرارگیری علامت را درلیست تعیین کنید. در ادامه و با تمرین کد زیر شما میتوانید تفاوت ها را مشاهده کنید:

[php]
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
[/php]

list-style-position: outside; یعنی علامت لیست در بیرون از آیتم ها لیست قرار خواهد گرفت

و list-style-position: inside; یعنی علامت لیست، در کنار آیتم های لیست قرا میگیرد.

شما میتوانید تفاوت این دو حالت را از اینجا مشاهده کنید.

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

ویژگی list-style-type:none به شما این امکان را می دهد که علامت ها را حذف کنید. توجه داشته باشید که لیست ها به طور پیشفرض میتوانند دارای margin و padding باشند.برای حذف این تنظیمات، شما میتوانید مقادیر آنها را برابر با صفر قراردهید. این تنظیمات هم برای لیست های UL و هم برای ol قابل مقداردهی هستند.

برای مثال :
[php]
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
[/php]
نتایج را از اینجا مشاهده کنید.

ویژگی کوتاه نویسی در list

عنصر لیست را میتوانید در کدنویسی ها به طور مختصر نویسی هم مقداردهی کنید. برای مثال:
[php]
ul {
list-style: square inside url(“sqpurple.gif”);
}
[/php]
نتیجه را ببینید.

[cdb_icon_box icon_style=”icon-font” icon=”fa fa-check-square-o” icon_position=”left” icon_type=”circle” icon_size=”icon-box-large” title=”یک نکته حرفه ای” title_text_transform=”” title_text_font_weight=”” icon_color=”#1e73be” icon_background_color=”#e8c1b2″]زمانی که از ویژگی کوتاه نویسی استفاده می کنید . موارد قابل تنظیم که در دسترس هستند، به شرح زیر است:

list-style-type:اگر برای علامت لیست، یک تصویر تعرف کرده باشید ، ممکن است گاهی این تصویر نمایش داده نشود. در این صورت متنی که در این دستور می نویسید به جای تصویر نشان داده خواهد شد.
list-style-position: مشخص می کند که آیا علامت های لیست در داخل متن و یا خارج از آن نمایش داده شوند. تعیین inside و outside بودن علامت لیست
list-style-image: یک تصویر را به عنوان علامت لیست تعیین می کند.

[/cdb_icon_box]

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

شما میتوانید لیست ها را با رنگ نیز استایل دهی کنید. با این کار لیست های شما جذاب تر خواهند شد.( میتوانید آموزش کار با رنگ ها را از سایت پرنیان طرح در این لینک مطالعه کنید.)

[cdb_icon_box icon_style=”icon-font” icon=”fa fa-check-square-o” icon_position=”left” icon_type=”circle” icon_size=”icon-box-large” title=”یک نکته بسیار مهم” title_text_transform=”” title_text_font_weight=”” icon_color=”#1e73be” icon_background_color=”#e8c1b2″]هر چیزی که به برچسب <ol> یا <ul> اضافه شده است ، بر کل لیست تاثیر می گذارد. اما ویژگی های اضافه شده به برچسب <li> بر روی آیتم های لیست فردی تاثیر می گذارد[/cdb_icon_box]

مثال زیر به خوبی نکته بالا را توضیح می دهد:

[php]
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;
}
[/php]

نتیجه این کد تصویر زیرخواهد بود:

از این لینک تمرین کنید و نتیجه را ببینید.

تمرینات بیشتر :