آموزش CSS (فصل هفتم) : کار با لیست ها

- visibility ٨ mode_comment

لیست ها در CSS

لیست ها عناصری با کاربرد های بسیار متنوع هستند. از جمله برای بخش navigation سایت و برای ایجاد کنترل های tab استفاده می شوند. Navigation معمولا شامل لیستی از لینک ها است، که دارای ویژگی های بصری می باشد و ثابت و خشک نیست، ما در این فصل به طریقه استایل دادن و معرفی خصوصیت هایی که برای کار با لیست ها در CSS استفاده میشود می پردازیم.

خاصیت list-style-type

با استفاده از این خاصیت می توان برای لیست های مرتب و نامرتب bullet تعریف کرد. و یکی از 14 مقدار زیر را می پذیرد.

مقدار پیشفرض برای لیست های نا مرتب (ul) : مقدار disc

مقدار پیشفرض برای لیست های مرتب (ol) : مقدار decimal

info نکته :

ممکن است در هنگام تعریف خصوصیات فوق، bullet لیست های مرتب را برای لیست های نامرتب در نظر بگیریم و بر عکس. شدیدا توصیه می شود که این کار انجام نشود و برای هر نوع از لیست ها bullet مخصوص به همان لیست را با توجه به معنای آن در نظر گرفت.

Bullet های مخصوص لیست های نامرتب (ul) عبارتنداز : square ،  circle و disc و none و بقیه bullet های مربوط به لیت های مرتب (ol) می باشد.

مثال:

کد HTML :

و کد CSS :

نتیجه در مرورگر:

خاصیت list style image

این خاصیت یک عکس را برای استفاده به عنوان نشانه bullet در کنار عنصر لیست تعریف می کند. این عکس با نشانه ی تعریف شده در خاصیت list-style-type جایگزین می شود.

مثال :

list-style-position

این خاصیت موقعیت و نحوه ی قرار گرفتن bullet در کنار آیتم های لیست را مشخص می کند. و یکی از دو مقدار زیر را می گیرد :

  • Inside : مشخص می کند که bullet لیست باید در داخل آیتم های لیست قرار گیرد.
  • Outside : مشخص که bullet لیست باید در خارج از آیتم های لیست قرار گیرد.

مثال :

می بینید که bullet زیر مجموعه ی گزینه ی HTML که به آن مقدار inside داده ایم در کنار داخل کادر قرار گرفته، اما bullet زیر مجموعه CSS که مقدار outside دارد، خارج از کادر قرار گرفته است.

کوتاه نویسی خاصیت list style

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

مثال :

بسیار خب، تا اینجا به خصوصیات مربوط به استایل دهی به list ها آشنا شدیم، در جلسه بعد به positioning یا همان موقعیت عناصر در صفحه می پردازیم.

comment دیدگاه کاربران
kiansoft2000

عالی بود

yoosef

سجاد جان واقعا خسته نباشید
از همه بچه های این سایت تشکر میکنم واسه خاطر زحمت هایی که میکشید

ممنون ، بندهه هم از شما و کاربران عزیزی که پیگیر مطالب سایت هستید تشکر می کنم .

صفحه هر چند ثانیه یه بار می پره بالا یا پایین. آدم دیونه می شه برا خوندن مطلب

چنین مشکلی وجود نداره دوست عزیز . مطمئنید ؟

1234567890

با سلام

3 ردیف با 4 عکس دارم ، وقتی که صفحه نمایش browser را کوچیک میکنم در هر ردیف 2 عکس قرار میگیرد . میخواستم بدونم اینو با media درست میکنن ؟ اگه آره ، چطوری میتونم تشخیص بدم که به width , height چه مقداری میتونم بدم ؟

با تشکر از آموزش ها و ایتکه وقتی برای پاسخگویی به ما قرار میدهید .

سید رضا

سلام. خسته نباشید.
لقمان جان ممکنه آموزش طراحی responsive design رو هم قرار بدین؟
ضمنا یه ایمیل از خودت بیزحمت بده چند تا سوال کوتاه ازت دارم میخوام تو میل ازت بپرسم.

لقمان آوند

به زودی یه اموزش طراحی قالب رسپانسیو خواهیم داشت
ایمیلم در صفحه نویسندگان وجود داره

بسیار ممنون

Mohammad Mirzaei

این اموزش واقعا به دردم خورد ممنون

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.
1 2