Home / آموزش css / جلسه دهم از آموزش های css تنظیم لیست ها CSS Styling List

جلسه دهم از آموزش های css تنظیم لیست ها CSS Styling List

جلسه دهم از آموزش های css تنظیم لیست ها CSS Styling List

css
جلسه دهم از آموزش های css تنظیم لیست ها CSS Styling List

سلام خدمت شما عزیزان و همراهان سون پلاگین بدون حاشه میریم سراغ آموزش تنظیم لیست در css

لیست UL و LI در سی اس اسدر این بخش از آموزش css ، تنظیم لیست ها را آموزش میدهیم.

ویژگی هایی که برای یک لیست در css وجود دارد به ما این امکان را میدهد که  List را در ۳ حالت زیر نمایش دهیم.

  • تنظیم لیست یه صورت مرتب
  • تنظیم لیست به صورت نامرتب
  • تنظیم تصویر برای نشانگر لیست

در HTML  دو نوع ار انواع لیست وجود دارد

  • unordered lists     آیتم های لیست با یک نشانگرد گرد شکل مشکی ، نمایش داده میشوند
  • ordered lists     آیتم های لیست با اعداد یا حروف ، نشانه گذاری میشوند.

Css  این انعطاف پپذیری را به شما میدهد که نشانگر آیتم های لیست خود را به یک تصویر مدل دهید،که برای زیبایی طراحی سایت شما موثر میباشد.
با
ویژگی list-style-type  شما میتوانید marker  لیست خود را به
شکل مورد نظر خود تغییر دهید، این ویژگی شامل مقادیر زیر میباشد.

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’);
}

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

ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}

برای اینکه تمام این ویژگی ها را در یک خط اعمال کنید از مثال زیر
میتوانید استفاده کنید ، که به ترتیب ۱ list-style-image -3
list-style-position -2 list-style-type  مقداردهی میشوند.

ul
{
list-style: square url(“sqpurple.gif”);
}

 

لینک کوتاه مطلب : http://7plugin.ir/?p=1064

درباره وحید باقری

وحید باقری علاقمند به توسعه وردپرس و ارائه آموزش های مفید برای شما عزیزان هستم و تا جایی هم که از دستم بر بیاد برای کمک کردن و مشاوره دادن به شما سروران گرامی دریغ نمی کنم

ببینید حتما

آموزش ساخت برگه دوطرفه (Flipping Animation)

با سلام خدمت تمامی دوستان گرامی . امروز براتون یک آموزش بسیار بسیار کاربردی رو …

دیدگاهتان را بنویسید

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

سوال امنیتی * لطفا معادله امنیتی را مجددا بارگذاری کنید