آموزش 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

متخصص وردپرس
قالب ها و پلاگین های حرفه ای وردپرس رو خودت بنویس! بازار طراحی قالب و پلاگین نویسی وردپرس به شدت داغه و اگر بلد باشید با برنامه نویسی اختصاصی، قالب ها و پلاگین های دلخواه بنویسید تو مارکت های مطرح دنیا و یا از طریق فریلنسری می تونید به درآمد بالا برید. دوره متخصص وردپرس سون لرن رو حتما ببینید: متخصص وردپرس arrow_back

این خاصیت یک عکس را برای استفاده به عنوان نشانه 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 دیدگاه کاربران
کیوان علی محمدی

سلام سجاد عزیز،آقا ممنون،خیلی خوب بود.

سوران

ممنون یادآوری خوبی بود

danjer

سلام خیلی ممنون از سایت خوبتون اگه میشه این چیزی که من می خوام یاد بدید حالا چطور میشه با چه تگی میشه به صورت لیست کرد

technolife

سلام
فایل های دانلود مقاله به صورت PDF درست نیستن
لطفا اون ها رو درست کنید
باتشکر

hamed_z2001

الان این list-style-position دقیقا چی کار میکنه؟؟ چه فایده ای داره؟؟

سجاد دریس

به مثال دقت کنید. متوجه کارش میشید.

hamed_z2001

آها ….. برای تنظیم مکان قرارگیری bullet هاست.درست فهمیدم؟؟ 🙄

سجاد دریس

بله

ارسال نظرات

کاربر گرامی، امکان ارسال نظر و پشتیبانی برای دوره های مجازی فقط برای دانشجویان این دوره امکان پذیر می باشد.