حسین همت یار
فصل چهارم : Properties در CSS
جلسه چهاردهم : لیست ها در CSS
سلام به همراهان همیشگی مدرسه مجازی ایرانیان
دوستان تو این جلسه راجع به لیست ها در css صحبت می کنیم . خاصیت های مربوط به list رو بصورت کامل براتون توضیح میدم .
لیست ها در CSS
توسط لیست ها شما میتونید لیست های مرتب ، نامرتب و هرنوع لیستی که میخواین رو پیاده کنید . به عنوان مثال شما اگر بخواین ۱۰ خبر آخر رو تو سایتتون نمایش بدید ، از لیست ها استفاده می کنید . قبل از شروع آموزش یه توضیحی بدم راجع به اصطلاحی بنام bullet که موقع آموزش متوجه منظور من بشید .
Bullet : به شکلی یا طرحی که ابتدای هر سطر از لیست قرار میگیره و سطرهای لیست رو مجزا میکنه Bullet میگن .
خاصیت list-style
قاعده دستوری list-style :
|
۱ |
list-style: list-style-type list-style-position list-style-image |
قاعده ی دستوری این خاصیت بصورت بالا هست که مقادیر رو جایگزین می کنید ، حالا بریم ببینیم هر کدوم از این خاصیت ها چه کاری انجام میدن.
خاصیت list-style-type
این خاصیت نوع bullet کنار لیست رو مشخص می کنه ، شامل ۱۹ مورد میشه که تمامی این موارد کاربرد ندارن ، مثلا یه نوع bullet حروف ژاپنی هست که کنار لیست ها قرار میگیره ، برای همین مواردی که کاربرد داره براتون لیست می کنم :
Decimal : کنار هر سطر از لیست اعداد رو لحاظ می کنه .
decimal-leading-zero : کنار هر سطر از لیست اعداد رو همراه با صفر لحاظ می کنه .
lower-alpha : کنار هر سطر از لیست حروف کوچک انگلیسی رو لحاظ می کنه .
lower-greek : کنار هر سطر از لیست حروف کوچک آلفابت ریاضی رو لحاظ می کنه .
lower-latin : کنار هر سطر از لیست حروف کوچک لاتین (انگلیسی) رو لحاظ می کنه .
lower-roman : کنار هر سطر از لیست حروف کوچک رومی رو لحاظ می کنه .
none : هیچ bullet ی قرار نمیده .
upper-alpha : کنار هر سطر از لیست حروف بزرگ انگلیسی رو لحاظ می کنه .
upper-latin : کنار هر سطر از لیست حروف بزرگ لاتین (انگلیسی) رو لحاظ می کنه .
upper-roman : کنار هر سطر از لیست حروف بزرگ رومی رو لحاظ می کنه .
برای عنصر ul بیشتر این مقادیر استفاده میشه :
Circle : یک دایره توخالی به عنوان bullet قرار میده .
Square : یک مربع توپر به عنوان bullet قرار میده .
Disk : یک دایره توپر به عنوان bullet قرار میده .
خاصیت list-style-position
با استفاده از این خاصیت موقعیت مکانی bullet رو مشخص می کنید . میتونید تعیین کنید bullet درون li قرار بگیره یا خارج از li قرار بگیره . مقادیر این خاصیت :
Inside : bullet رو داخل li قرار میده ، البته بصورت پیشفرض bullet ما داخل li قرار داره .
Outside : Bullet رو خارج از li قرار میده .
خاصیت list-style-image
با استفاده از این خاصیت شما میتونید تصاویر دلخواهتون رو به عنوان bullet برای لیستتون قرار بدید . که به شکل زیر نوشته میشه :
|
۱ |
list-style-image:url(bullet.gif'); |
حالا یه مثال میزنیم :
ما میخوایم لیستی رو ایجاد کنیم که bullet لیست تصویر 
باشه . خوب حالا میایم اول کد html شو پیاده می کنیم :
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ |
<ul> <li> مدرسه مجازی ایرانیان</li> <li> آموزش طراحی وب </li> <li>از مبتدی تا حرفه ای</li> <li>به همراه سامانه پرسش و پاسخ</li> </ul> |
حالا کد css زیر رو بهش اختصاص میدیم :
|
۱ ۲ ۳ |
ul{margin: ۰; padding: ۰; font: ۱۲px/۳۰px tahoma; direction: rtl; text-align: right; list-style: url(bullet.png) inside } ul li{margin: ۰; padding: ۰;} |
حالا نتیجه رو باهم میبینیم :
به همین راحتی 🙂
دوستان امیدوارم که مورد استفادتون قرار گرفته باشه .
موفق و پاینده باشید 🙂
تهیه شده در مدرسه مجازی ایرانیان
غدیره مرادی
با این لیست ها چجوری میشه منوهای آبشاری و… ساخت ؟ 🙂
لطفا در این زمینه هم آموزشی بزارید.
با تـــــــشـــــــــــکــــــــــر
سلام دوست عزیز
بله حتما در رابطه با منوهای آبشاری هم یه جلسه صحبت می کنیم . در پروژه ی عملی بخش html هم تو قالب پیاده می کنیم .
موفق و پاینده باشید .
سلام ، من با روش شما پیش میرم ولی دایره هایی که باید سمت راست متن باشه سمت چپ متن فارسی قرار میگیره
سلام دوست عزیز
به استایلتون direction: rtl; اضافه کنید .
مرسی که عنوان کردید ، در مطلب هم ویرایش شد .
موفق باشید .