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

مبحث چهارم : لینک ها ( links )

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

1.حالت عادی: این حالت ،حالت عادی لینک که به صورت پیش فرض به رنگ آبی نمایش داده می شود. اما می توان دیزاین را تغییر داد،که البته این کار را می توان به دو صورت انجام داد.

{;A:link{color:#ff0000
{;A{color:#ff0000

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

2- حالت hover : این حالت ،حالتی است که شما نشانگر pointer را از بالای لینک عبور می دهید.که البته این حالت به صورت پیش فرض غیر فعال می باشد ام می توانید مانند دستور زیر به آن دیزاین تعریف کنید :

{;A:hover{color:#8b4513

3- حالت active: حالتی که با  pointer روی لینک کلیک می کنیم و بعد از رها کردن کلیک دوباره به حالت قبل بر میگردد.

{;A:active{color:#00ffff

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

4- حالت visited: حالتی است که شما از لینک دیدن کردید با این حالت میتوانید تعیین کنید که بعد از دیده شدن لینک رنگ ان به چه رنگی تغییر کند.

{;A:visited{color:#00ffff

بصورت پیش فرض لینک دارای زیر خطی می باشد که میتوان ان را تغییر داد.

none: با این حالت می توان زیر خط را حذف کرد.

underline : با این حالت زیر خط نمایش داده میشود.

overline : با این حالت خط بالای متن ارتباط داده می شود.

line-through : با این مقدار خط در وسط متن نمایش داده میشود.

{;A{text-decoration:none

مبحث پنجم : لیست ها ( List ) 

لیست ها در 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;
}

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