لیست ها ( List ) در css

 

لیست ها در CSS – ما در آموزش CSS تنها نحوه نمایش دادن لیست ها را مورد بحث قرار می دهیم چون ساختن لیست ها در Html امکان پذیر می باشد.

به طور کلی دو نوع لیست وجود دارد :

1. لیست های مرتب :

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

2. لیست های نامرتب :

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

لیست ها در css دارای خاصیت های زیر می باشند.

list-style-type :

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

decimal : این مقدار کنار هر سطر از لیست اعداد را نمایش می دهد.

مثال) 1.آموزش کار بردی css3

2. انواع لیست ها

3. لیست های مرتب

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

مثال)

01 . آموزش css

02. انواع لیست ها

03. لیست های مرتب

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

مثال :

a. آموزش CSS

b. انواع لیست ها

c. لیست های مرتب

lower-greek : این مقدار کنار هر سطر از لیست حروف کوچک الفا بت را نمایش می دهد.

α. آموزش کار بردی css3

β. انواع لیست ها

γ. لیست های مرتب

lower-latin : این مقدار کنار هر سطر از لیست حروف کوچک لاتین را نمایش می دهد.

مثال:

a. آموزش کاربردی css3

b. انواع لیست ها

c. لیست های مرتب

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

مثال:

i. آموزش کار بردی css3

ii. انواع لیست ها

iii. لیست های مرتب

upper-latin : این مقدار کنار هر سطر از لیست حروف بزرگ لاتین را نمایش می دهد.

قاعده دستوری مقادیر بالا به شکل زیر می باشد.

{;Li{list-style-type:decimal | lower-greek | upper-greek

 

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

circle : این مقدار کنار هر سطر از لیست دایره میان خالی قرار می دهد.

مثال:

o. آموزش کار بردی css3

o. انواع لیست ها

o. لیست های مرتب

square : این مقدار کنار هر سطر از لیست مربع میان پر قرار می دهد.

disk : این مقدار کنار هر سطر از لیست دایره میان پر قرار می دهد.

مثال:

• . آموزش کار بردی css3

• انواع لیست ها

• لیست های مرتب

قاعده دستوری لیست های نا مرتب به شکل زیر می باشد.

{;Li{list-style:circle | sqare | disk

list-style-position :

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

این خاصیت دارای مقادیر زیر می باشد.

inside : این مقدار فاصله را داخل li قرار می دهد.

که حالت پیش فرض می باشد.

outside : این مقدار فاصله را خارج li قرار می دهد.

list-style-image :

با این خاصیت میتوان به جای فاصله از تصاویر دلخواهمان استفاده کنیم.

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

{;list-style-circle:URL{“bullet.gif

 

مثال از نحوه ساخت لیست:

دستورات Html :

<ul> <li> اموزش کاربردی css3 </li> <li> اموزش لیست ها </li> <li> اموزش لیست های نا مرتب </li> </ul>

 

دستورات css :

ul{ margin:0; padding:0; font:12px/30px tahoma; text-align:rigt; list-style:url{cd.gif} inside; } ul li{ margen:0; paddeng:0; }