آموزش CSSآموزش طراحی سایت

استایل List در CSS

در ادامه آموزش های استایل css به استایل دهی لیست ها  در css میرسیم . برای یادگیری آنچه از لیست ها در سی اس اس نمیدانید ، تا انتهای مقاله با ما همراه باشید .

استایل عناصر در CSS

 

استایل لیست ها در css

 

خاصیت های لیست در CSS به شما قابلیت های زیر را ارائه می دهد.

  • به شما امکان می دهد نشانگرهای مختلف برای آیتم های فهرست ویژه ی لیست های رده بندی یا دارایترتیب ( ordered ) انتخاب کنید.
  • به شما اجازه می دهد نشانگرهای مختلف برای آیتم های فهرست ویژه ی لیست های که با عدد یا حروفرده بندی یا نشانه گذاری نشده اند ( unordered ) انتخاب کنید
  • همچنین به شما این امکان را می دهد تصویر به عنوان نشانگر آیتم لیست انتخاب کنید

 

انواع لیست ها

در HTML ، دو نوع متفاوت لیست وجود دارد.

  • (unordered lists (<ul> – تمامی اقلام یا آیتم های لیست با علامت Bullets نشانه گذاریشده اند.
  • (ordered lists (<ol> – آیتم های لیست با عدد یا حروف علامت گذاری شده اند

اگر آشنایی با HTML ندارید لطفا مقالات مربوط به آموزش HTML را مطالعه فرمایید، با بهره گیری از امکاناتی که CSS در اختیار طراح وب قرار می دهد، می توان سبک دهی به فهرست ها ولیست ها را وارد مرحله ی تازه ای کرد، برای مثال از تصاویر به مثابه ی نشانگرهای آیتم های یک لیستاستفاده کرد .

نشانگرهای مختلف آیتم های لیست ( list item marker )

نوع نشانگر آیتم های لیست به وسیله ی خاصیت list-style-type تعیین می گردد.

ul.a {

list-style-type: circle;

}

ul.b {

list-style-type: square;

}

ol.c {

list-style-type: upper-roman;

}

ol.d {

list-style-type: lower-alpha;

}

برخی از مقادیر مثال بالا برای لیست های دارای ترتیب حروفی و عددی و برخی دیگر مختص فهرست هایفاقد ترتیب عددی / حروفی است .

انتخاب یک تصویر به عنوان نشانگر آیتم مورد نظر در لیست

برای این منظور انتخاب تصویر به عنوان نشانگر آیتم در لیست(، کافی است از خاصیت list-style-image) بهره بگیرید

ul {

list-style-image: url('sqpurple.gif');

}

مثالی که در بالا مشاهده می کنید در کلیه ی مرورگرها به طور مشابه نمایش داده نمی شوند . IE وOpera هر دو image-marker (تصویر نشانگر) را کمی بالاتر نسبت به مرورگرهای Firefox ، Chromeو Safari نمایش می‌دهد .

اگر می خواهید image-marker در تمامی مرورگرها در مکانی یکسان جاگذاری و نمایش داده شود، میتوانید از مثال زیر کمک بگیرید که در آن image-marker در چندین مرورگر مختلف به طور مشابه و درموقعیتی یکسان قرار گرفته است .

ul {

list-style-type: none;

padding: 0px;

margin: 0px;

}

ul li {

background-image: url(sqpurple.gif);

background-repeat: no-repeat;

background-position: 0px center;

padding-left:15px;
}

 

توضیح کد ها

برای <ul>

به منظور حذف نشانگر آیتم لیست، list-style-type را روی none تنظیم کنید .هر دو خصوصیت padding (ویژگی padding میزان فاصله و حاشیه ی محتوای درون یک بلاک را مشخص می‌کند) و margin (فاصله دو بلاک یا دو لایه را در صفحات وب تعیین می کند( را به 0px تنظیم کنید) بنا به دلایل سازگاری یا compatibility جهت پشتیبانی از چندین مرورگر / سازگاری یک صفحه وب وکدهای آن با مرورگرهای گوناگون).

برای تمامی <li> در <ul>

URL تصویر مربوطه را انتخاب کرده و آن را تنها یکبار نمایش می دهد (بدون هیچ تکراری).تصویر مورد نظر را هرجا که مایلید قرار دهید( left 0px و vertical value center.) نوشته را در لیست با padding-left جای گذاری کنید

آموزش خاصیت List – Shorthand

 

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

خاصیت های لیست تنها در یک تعریف ) declaration ( استفاده می شود .

ul {

list-style: square inside url("sqpurple.gif");

}

در حین استفاده از خاصیت یا ویژه گی مختصر نویسی، توجه داشته باشید که ترتیب مقادیر property هابه ترتیب زیر هستند.

 

  • list-style-type چنانچه (  list-style-image مشخص شده باشد، مقدار این خاصیت در صورت عدم امکاننمایش تصویر (به هر دلیلی)، نشان داده می شود) .
  • ist-style-position (مشخص می کند آیا نشانگرهای آیتم های لیست باید داخل یا خارج گردش محتوا( content flow ) نمایش داده شوند)
  • list-style-image (یک تصویر را به عنوان نشانگر آیتم لیست انتخاب می کند).

در صورت عدم وجود یا در دسترس نبودن یکی از مقادیر property های فوق، مقدار پیش فرض برایخصوصیتی که در دسترس نیست درج می شود .

 

در بخش بعدی که بخش آخر از آموزش استایل عناصر در سی اس اس می باشد به بررسی جداول در css میپردازیم . با ما همراه باشید تا این بخش از آموزش را به پایان برسانیم .

آموزش CSS طبق اصول ارائه شده توسط w3schools دسته بندی شده‌اند.

برچسب ها

پوریا آریافر

اولین کسب و کار آنلاین خودم را در فیسبوک راه‌اندازی کردم و در سال ۲۰۱۱ یکی از پرتعامل‌ترین صفحات فارسی با ۸۰ هزار فالور فعال را داشتم. سپس وارد دنیای شبکه شدم و در انتهای سال ۲۰۱۲ مدرک MCSE مایکروسافت را دریافت کردم، در دوران خدمت سربازی مسئول بهینه سازی یک وبسایت خبری معتبر شدم و آشنایی با سئو را آموختم و در سال ۲۰۱۴ توانستم به رتبه ۴۰۰ الکسا نزدیک کنم. برخلاف میل درونی، وارد دانشگاه شدم و سه ساله در مقطع کارشناسی IT فارغ التحصیل شدم، در همان سال بزرگ‌ترین کانال تلگرامی IT با ۴۰ هزار عضو را داشتم، که فروختم تا بتوانم تمرکز را فقط بر روی سئو بگذارم، فعالیت‌های سئو به شکل تخصصی بنده در قالب پروژه‌های مختلف و آموزش‌های حضوری و غیرحضوری در دفتر میزفا و دانشگاه علامه طباطبایی تهران صورت ‌می‌گیرد، تجربه بهینه سازی موفقی در بهبود UX و CRO پروژه‌های سئو کسب کرده‌ام. در همه ابزارهای گوگل به جز adwords تسلط کاملی دارم. عاشق کسب تجربه های جدید هستم. راز پیشرفت در هر کاری را یادگیری و یاددادن می‌دانم و میزفا که در اواخر ۲۰۱۶ راه‌اندازی شده، می‌تواند چنین بستر مناسبی را فراهم کند. نقد و بازخوردهای سازنده شما، جوهر تلاش‌های مستمر ماست تا یک قدم خودمون بهبود بدیم. منتظریم ...

نوشته های مشابه

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
یک چیز متفاوت تجربه کنید
کاراکتر اشاره گر
دوره سئو، رایگان شد.
یک چیز متفاوت تجربه کنید
کاراکتر اشاره گر