لیست ها در CSS

فصل چهارم : Properties در CSS

جلسه چهاردهم   : لیست ها در CSS

سلام به همراهان همیشگی مدرسه مجازی ایرانیان

دوستان تو این جلسه راجع به لیست ها در css صحبت می کنیم . خاصیت های مربوط به list رو بصورت کامل براتون توضیح میدم .

لیست ها در CSS

توسط لیست ها شما میتونید لیست های مرتب ، نامرتب و هرنوع لیستی که میخواین رو پیاده کنید . به عنوان مثال شما اگر بخواین ۱۰ خبر آخر رو تو سایتتون نمایش بدید ، از لیست ها استفاده می کنید . قبل از شروع آموزش یه توضیحی بدم راجع به اصطلاحی بنام bullet که موقع آموزش متوجه منظور من بشید .

Bullet : به شکلی یا طرحی که ابتدای هر سطر از لیست قرار میگیره و سطرهای لیست رو مجزا میکنه Bullet میگن .

خاصیت list-style

قاعده دستوری list-style :

قاعده ی دستوری این خاصیت بصورت بالا هست که مقادیر رو جایگزین می کنید ، حالا بریم ببینیم هر کدوم از این خاصیت ها چه کاری انجام میدن.

خاصیت 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 برای لیستتون قرار بدید . که به شکل زیر نوشته میشه :

حالا یه مثال میزنیم :

ما میخوایم لیستی رو ایجاد کنیم که bullet لیست تصویر   باشه . خوب حالا میایم اول کد html شو پیاده می کنیم :

حالا کد css زیر رو بهش اختصاص میدیم :

حالا نتیجه رو باهم میبینیم :

به همین راحتی 🙂

دوستان امیدوارم که مورد استفادتون قرار گرفته باشه .

موفق و پاینده باشید 🙂

تهیه شده در مدرسه مجازی ایرانیان

<< مشاهده مطلب قبلی

مشاهده مطلب بعدی >>