آموزش طراحی وب

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

دسته بندی موضوعات
سفارش تبلیغات

لیست ها در CSS

CSS

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

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

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

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

 

لیست ها در CSS

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

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

 

خاصیت list-style

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

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

 

خاصیت list-style-type

این خاصیت نوع bullet کنار لیست رو مشخص می کنه ، شامل ۱۹ مورد میشه که تمامی این موارد کاربرد ندارن ، مثلا یه نوع bullet حروف ژاپنی هست که کنار لیست ها قرار میگیره ، برای همین مواردی که کاربرد داره براتون لیست می کنم :

Decimal : کنار هر سطر از لیست اعداد رو لحاظ می کنه .

1

decimal-leading-zero : کنار هر سطر از لیست اعداد رو همراه با صفر لحاظ می کنه .

2

lower-alpha : کنار هر سطر از لیست حروف کوچک انگلیسی رو لحاظ می کنه .

3

lower-greek : کنار هر سطر از لیست حروف کوچک آلفابت ریاضی رو لحاظ می کنه .

4

lower-latin : کنار هر سطر از لیست حروف کوچک لاتین (انگلیسی) رو لحاظ می کنه .

3

lower-roman : کنار هر سطر از لیست حروف کوچک رومی رو لحاظ می کنه .

5

none : هیچ bullet ی قرار نمیده .

6

upper-alpha : کنار هر سطر از لیست حروف بزرگ انگلیسی رو لحاظ می کنه .

7

upper-latin : کنار هر سطر از لیست حروف بزرگ لاتین (انگلیسی) رو لحاظ می کنه .

7

upper-roman : کنار هر سطر از لیست حروف بزرگ رومی رو لحاظ می کنه .

8

برای عنصر ul بیشتر این مقادیر استفاده میشه :

Circle : یک دایره توخالی به عنوان bullet قرار میده .

Square : یک مربع توپر به عنوان bullet قرار میده .

Disk : یک دایره توپر به عنوان  bullet قرار میده .

 

خاصیت list-style-position

با استفاده از این خاصیت موقعیت مکانی bullet رو مشخص می کنید . میتونید تعیین کنید bullet درون li قرار بگیره یا خارج از li قرار بگیره . مقادیر این خاصیت :

Inside : bullet رو داخل li قرار میده ، البته بصورت پیشفرض bullet ما داخل li قرار داره .

Outside : Bullet رو خارج از li قرار میده .

9

خاصیت list-style-image

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

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

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

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

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

10

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

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

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

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

<<

>>

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید



سفارش تبلیغات

گردآوری و تالیف : میترا رحیمی

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مدرس و مسلط به برنامه نویسی سمت سرور با PHP MVC و برنامه نویسی سمت کلاینت با html 5 , css3 , jquery , مبانی سئو و سیستم مدیریت محتوای وردپرس

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

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

  • فرهاد

    با این لیست ها چجوری میشه منوهای آبشاری و… ساخت ؟ 🙂

    لطفا در این زمینه هم آموزشی بزارید.

    با تـــــــشـــــــــــکــــــــــر

    • میترا رحیمی

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

  • امین

    سلام ، من با روش شما پیش میرم ولی دایره هایی که باید سمت راست متن باشه سمت چپ متن فارسی قرار میگیره

    • میترا رحیمی

      سلام دوست عزیز
      به استایلتون direction: rtl; اضافه کنید .
      مرسی که عنوان کردید ، در مطلب هم ویرایش شد .
      موفق باشید .

وبلاگ مدرسه

مختصری درباره ما
مدرسه مجازی ایرانیان در زمینه آموزش علوم و فنون طراحی و برنامه نویسی صفحات وب اعم از آموزش زبان های برنامه نویسی و کدنویسی و همچنین آموزش طراحی گرافیک توسط نرم افزارهای گرافیکی پیکسلی و برداری فعالیت دارد .
ورود به وبلاگ

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

آخرین پرسش و پاسخ ها

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟