این آموزش در تاریخ ۱۴۰۲/۰۶/۲۶ آپدیت شده است.
آموزش کار با لیست ها در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با لیست ها در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
آموزش کار با لیست ها در CSS
اگه یادتون باشه تو آموزش زبان HTML ما با لیست ها و انواع آنها و نحوه استفاده از آنها آشنا شدیم، یه لیست نامرتب که با استفاده از تگ UL ایجاد می شود و دیگری لیست مرتب که با استفاده از تگ OL ایجاد می شود.
حال همین لیست هارو ما در CSS میتوانیم با استفاده از یکسری ویژگی باهاشون کار کنیم، مثلا ویرایششون کنیم یا از نظر ظاهری تغییراتی درشون ایجاد کنیم.
در ادامه میخواهیم با ویژگی های زیر در CSS که مرتبط با لیست ها هستند کار کنیم :
- list-style-type : نوع شماره گذاری آیتم ها
- list-style-image : عکس بجای شماره گذاری آیتم ها
- list-style-position : موقعیت قرار گیری آیتم ها
Free-Learn
تغییر نوع شماره گذاری آیتم ها
با استفاده از ویژگی list-style-type میتوان نوع شماره گذاری آیتم های یک لیست ( چه مرتب شده یا نامرتب ) را مشخص کرد.
از مقادیر زیر میتوان در این ویژگی برای لیست های نامرتب استفاده کرد :
- circle
- disc
- square
- none
و از مقادیر زیر برای لیست های مرتب شده :
- armenian
- cjk-ideographic
- decimal
- decimal-leading-zero
- georgian
- hebrew
- hiragana
- hiragana-iroha
- katakana
- katakana-iroha
- lower-alpha
- lower-greek
- lower-latin
- lower-roman
- upper-alpha
- upper-greek
- upper-latin
- upper-roman
- none
مثال شماره ۱ : در این مثال تمامی مقادیر بالا بکار گرفته شده است
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<style> /* لیست نامرتب */ ul.a {list-style-type: circle;} ul.b {list-style-type: disc;} ul.c {list-style-type: square;} /* لیست مرتب */ ol.d {list-style-type: armenian;} ol.e {list-style-type: cjk-ideographic;} ol.f {list-style-type: decimal;} ol.g {list-style-type: decimal-leading-zero;} ol.h {list-style-type: georgian;} ol.i {list-style-type: hebrew;} ol.j {list-style-type: hiragana;} ol.k {list-style-type: hiragana-iroha;} ol.l {list-style-type: katakana;} ol.m {list-style-type: katakana-iroha;} ol.n {list-style-type: lower-alpha;} ol.o {list-style-type: lower-greek;} ol.p {list-style-type: lower-latin;} ol.q {list-style-type: lower-roman;} ol.r {list-style-type: upper-alpha;} ol.s {list-style-type: upper-greek;} ol.t {list-style-type: upper-latin;} ol.u {list-style-type: upper-roman;} ol.v {list-style-type: none;} </style> |
مثال شماره ۲ : سفارشی سازی شکل علامت گذاری آیتم های لیست
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<style> ul.MyList{ list-style-type:none; padding:0; margin:0; } ul.MyList li{ padding-left:10px; } ul.MyList li::before{ content:"»"; padding-right:5px; color:red; } </style> |
Free-Learn
گذاشتن تصویر بجای شکل علامت گذاری آیتم ها
در CSS با استفاده از ویژگی list-style-image میتوانیم یک تصویر / عکس رو بجای شماره گذاری آیتم های لیست ها بگذاریم ، به گونه ای که آیتم های لیست با تصویر نمایش داده شوند.
نحوه استفاده از این ویژگی بصورت زیر می باشد :
|
1 |
list-style-image: url('MyImage_File'); |
مثال :
|
1 2 3 4 5 6 7 |
<style> ul.MyList{ list-style-image: url('files/tick.png'); } </style> |
Free-Learn
موقعیت قرار گیری آیتم های لیست
با استفاده از ویژگی list-style-position میتوان موقعیت قرار گیری شکل علامت گذاری آیتم های یک لیست را مشخص کرد، این ویژگی ۲ مقدار زیر را میتواند بپذیرد :
- Outside : بصورت پیش فرض این گزینه فعال است
- Inside : شکل علامت گذاری در داخل لیست قرار میگیرد
مثال : استفاده از ۲ مقدار Outside و Inside
|
1 2 3 |
ul.a{ ist-style-position: outside; } |
Free-Learn
خلاصه نویسی ویژگی list-style
شکل کلی برای خلاصه نویسی ویژگی list-style بصورت زیر می باشد :
|
1 |
list-style: List-Style-Type List-Style-Position List-Style-Image ; |
مثال : خلاصه نویسی ویژگی list-style
|
1 2 3 4 5 6 7 |
<style> ul.MyList{ list-style:square inside url('files/tick.png'); } </style> |
