لینک ها (links) در CSS

P O U R I A

P O U R I A

مدیر مهندسی شیمی مدیر تالار گفتگوی آزاد
مدیر تالار
فهرست مطالب:

  1. تغییر ویژگی های لینک ها (links)، در CSS
  2. تغییر ویژگی های یک لینک (link)، در صورتی که کاربر قبلا به آدرس مربوط به آن مراجعه کرده باشد، در CSS
  3. تغییر ویژگی های یک لینک (link)، در لحظه کلیک کاربر بر روی آن، در CSS
  4. تغییر ویژگی های یک لینک (link) هنگامی که کاربر موس خود را بر روی آن می برد، در CSS
  5. حذف خط زیر لینک ها (links)، با استفاده از مشخصه text-decoration در CSS


منبع: kelidestan
 
P O U R I A

P O U R I A

مدیر مهندسی شیمی مدیر تالار گفتگوی آزاد
مدیر تالار
تغییر ویژگی های لینک ها (links)، در CSS

تغییر ویژگی های لینک ها (links)، در CSS

با استفاده از مشخصه زیر، می توانیم ویژگی های لینک ها (links) در صفحه را تغییر بدهیم :
کد: 
[COLOR=#000000][FONT=Tahoma][FONT=monospace]a[COLOR=#00AA00]:[/COLOR]link[/FONT]
[/FONT][/COLOR]
به مثال زیر توجه کنید :مثال :

با کدهای CSS ، تعیین می کنیم که تمامی لینک های (links) موجود در صفحه، به رنگ سبز (رنگ معادل کد #9F6) نمایش داده شوند :
کد: 
[COLOR=#000000][FONT=Tahoma][FONT=monospace]<html[COLOR=#00AA00]>[/COLOR]
<head[COLOR=#00AA00]>[/COLOR]
<style type[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"text/css"[/COLOR][COLOR=#00AA00]>[/COLOR]
a[COLOR=#3333FF]:link [/COLOR][COLOR=#00AA00]{[/COLOR]
        [B]color[/B][COLOR=#00AA00]:[/COLOR][COLOR=#CC00CC]#9F6[/COLOR][COLOR=#00AA00];[/COLOR]
[COLOR=#00AA00]}[/COLOR]
</style[COLOR=#00AA00]>[/COLOR]
</head[COLOR=#00AA00]>[/COLOR]

<body[COLOR=#00AA00]>[/COLOR]

<a href[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"http://www.[/COLOR][/FONT][/FONT][/COLOR][COLOR=#FF0000][FONT=monospace]iran-eng[/FONT][/COLOR][COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#FF0000].com/adobe-photoshop/index.php"[/COLOR][COLOR=#00AA00]>[/COLOR]لینک اول</a[COLOR=#00AA00]>[/COLOR]

<br /[COLOR=#00AA00]>[/COLOR]

<a href[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"http://www.[/COLOR][/FONT][/FONT][/COLOR][COLOR=#FF0000][FONT=monospace]iran-eng[/FONT][/COLOR][COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#FF0000].com/mathematics/index.php"[/COLOR][COLOR=#00AA00]>[/COLOR]لینک دوم</a[COLOR=#00AA00]>[/COLOR]

</body[COLOR=#00AA00]>[/COLOR]
</html[COLOR=#00AA00]>[/COLOR][/FONT]
[/FONT][/COLOR]
نتیجه :

Untitled.jpg
دقت کنید که در صورتی لینک ها (links) را به رنگ تعیین شده (یعنی رنگ سبز) خواهید دید که قبلا آدرس های مربوط به آنها را مشاهده نکرده باشید (در مرورگر اینترنت خود، آن صفحات را ندیده باشید)، در غیر این صورت، ((رنگ مربوط به لینک های قبلا دیده شده))، نمایش داده خواهد شد (معمولا رنگ بنفش) :

مشاهده پیوست 627.png
 
P O U R I A

P O U R I A

مدیر مهندسی شیمی مدیر تالار گفتگوی آزاد
مدیر تالار
تغییر ویژگی های یک لینک (link)، در صورتی که کاربر قبلا به آدرس مربوط به آن مراجعه کرده باشد، در CSS

تغییر ویژگی های یک لینک (link)، در صورتی که کاربر قبلا به آدرس مربوط به آن مراجعه کرده باشد، در CSS

با استفاده از مشخصه زیر، می توانیم ویژگی های مربوط به لینک هایی (links) که کاربر قبلا به آنها مراجعه کرده است (صفحه مربوط به آنها را قبلا در مرورگر اینترنت خود دیده است)، تغییر بدهیم :
کد: 
[COLOR=#000000][FONT=Tahoma][FONT=monospace]a[COLOR=#00AA00]:[/COLOR]visited[/FONT]
[/FONT][/COLOR]
به مثال زیر توجه کنید :


مثال :

با کدهای CSS ، تعیین می کنیم که تمامی لینک هایی (links) که کاربر قبلا به آنها مراجعه کرده است (صفحه مربوط به آنها را قبلا در مرورگر اینترنت خود دیده است)، به رنگ سبز (رنگ معادل کد #9F6) نمایش داده شوند :
کد: 
[COLOR=#000000][FONT=Tahoma][FONT=monospace]<html[COLOR=#00AA00]>[/COLOR]
<head[COLOR=#00AA00]>[/COLOR]
<style type[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"text/css"[/COLOR][COLOR=#00AA00]>[/COLOR]
a[COLOR=#3333FF]:visited [/COLOR][COLOR=#00AA00]{[/COLOR]
    [B]color[/B][COLOR=#00AA00]:[/COLOR][COLOR=#CC00CC]#9F6[/COLOR][COLOR=#00AA00];[/COLOR]
[COLOR=#00AA00]}[/COLOR]
</style[COLOR=#00AA00]>[/COLOR]
</head[COLOR=#00AA00]>[/COLOR]

<body[COLOR=#00AA00]>[/COLOR]

<a href[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"http://www.www.www.iran-eng.ir/adobe-photoshop/index.php"[/COLOR][COLOR=#00AA00]>[/COLOR]لینک اول</a[COLOR=#00AA00]>[/COLOR]

<br /[COLOR=#00AA00]>[/COLOR]

<a href[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"http://www.[/COLOR][/FONT][/FONT][/COLOR][COLOR=#FF0000][FONT=monospace]iran-eng[/FONT][/COLOR][COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#FF0000].com/mathematics/index.php"[/COLOR][COLOR=#00AA00]>[/COLOR]لینک دوم</a[COLOR=#00AA00]>[/COLOR]

</body[COLOR=#00AA00]>[/COLOR]
</html[COLOR=#00AA00]>[/COLOR][/FONT]
[/FONT][/COLOR]
نتیجه :

Untitled.jpg
بر روی یکی از لینک ها کلیک کنید و دوباره به این صفحه بازگردید تا ببینید که رنگ سبز (رنگ معادل کد #9F6) برای آن لینک نمایش داده می شود (زیرا قبلا صفحه مربوط به آن را مشاهده کرده اید).
 
P O U R I A

P O U R I A

مدیر مهندسی شیمی مدیر تالار گفتگوی آزاد
مدیر تالار
تغییر ویژگی های یک لینک (link)، در لحظه کلیک کاربر بر روی آن، در CSS

تغییر ویژگی های یک لینک (link)، در لحظه کلیک کاربر بر روی آن، در CSS

با استفاده از مشخصه زیر، می توانیم ویژگی های مربوط به لینک ها (links) را در لحظه ای که کاربر بر روی آنها کلیک می کند، تغییر بدهیم :
کد: 
[COLOR=#000000][FONT=Tahoma][FONT=monospace]a[COLOR=#00AA00]:[/COLOR]active[/FONT]
[/FONT][/COLOR]
به مثال زیر توجه کنید :

[h=4]مثال :[/h]با کدهای CSS ، تعیین می کنیم که در لحظه کلیک کاربر بر روی هر یک از لینک های صفحه، آن لینک به رنگ سبز (رنگ معادل کد #9F6) نمایش داده شود :


کد: 
[COLOR=#000000][FONT=Tahoma][FONT=monospace]<html[COLOR=#00AA00]>[/COLOR]
<head[COLOR=#00AA00]>[/COLOR]
<style type[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"text/css"[/COLOR][COLOR=#00AA00]>[/COLOR]
a[COLOR=#3333FF]:active [/COLOR][COLOR=#00AA00]{[/COLOR]
    [B]color[/B][COLOR=#00AA00]:[/COLOR][COLOR=#CC00CC]#9F6[/COLOR][COLOR=#00AA00];[/COLOR]
[COLOR=#00AA00]}[/COLOR]
</style[COLOR=#00AA00]>[/COLOR]
</head[COLOR=#00AA00]>[/COLOR]

<body[COLOR=#00AA00]>[/COLOR]

<a href[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"http://www.www.www.iran-eng.ir/adobe-photoshop/index.php"[/COLOR][COLOR=#00AA00]>[/COLOR]لینک اول</a[COLOR=#00AA00]>[/COLOR]

<br /[COLOR=#00AA00]>[/COLOR]

<a href[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"http://www.www.www.iran-eng.ir/mathematics/index.php"[/COLOR][COLOR=#00AA00]>[/COLOR]لینک دوم</a[COLOR=#00AA00]>[/COLOR]

</body[COLOR=#00AA00]>[/COLOR]
</html[COLOR=#00AA00]>[/COLOR][/FONT]
[/FONT][/COLOR]
[h=4]نتیجه :[/h]
Untitled.jpg
 
P O U R I A

P O U R I A

مدیر مهندسی شیمی مدیر تالار گفتگوی آزاد
مدیر تالار
تغییر ویژگی های یک لینک (link) هنگامی که کاربر موس خود را بر روی آن می برد، در CSS

تغییر ویژگی های یک لینک (link) هنگامی که کاربر موس خود را بر روی آن می برد، در CSS

با استفاده از مشخصه زیر، می توانیم ویژگی های مربوط به لینک ها (links) را در هنگامی که کاربر موس خود را بر روی آنها می برد، تغییر بدهیم :
کد: 
[COLOR=#000000][FONT=Tahoma][FONT=monospace]a[COLOR=#00AA00]:[/COLOR]hover[/FONT]
[/FONT][/COLOR]
به مثال زیر توجه کنید :

[h=4]مثال :[/h]با کدهای CSS ، تعیین می کنیم که در هنگامی که کاربر موس خود را بر روی هر یک از لینک های صفحه می برد، آن لینک به رنگ سبز (رنگ معادل کد #9F6) نمایش داده شود :
کد: 
[COLOR=#000000][FONT=Tahoma][FONT=monospace]<html[COLOR=#00AA00]>[/COLOR]
<head[COLOR=#00AA00]>[/COLOR]
<style type[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"text/css"[/COLOR][COLOR=#00AA00]>[/COLOR]
a[COLOR=#3333FF]:hover [/COLOR][COLOR=#00AA00]{[/COLOR]
    [B]color[/B][COLOR=#00AA00]:[/COLOR][COLOR=#CC00CC]#9F6[/COLOR][COLOR=#00AA00];[/COLOR]
[COLOR=#00AA00]}[/COLOR]
</style[COLOR=#00AA00]>[/COLOR]
</head[COLOR=#00AA00]>[/COLOR]

<body[COLOR=#00AA00]>[/COLOR]

<a href[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"http://www.www.www.iran-eng.ir/adobe-photoshop/index.php"[/COLOR][COLOR=#00AA00]>[/COLOR]لینک اول</a[COLOR=#00AA00]>[/COLOR]

<br /[COLOR=#00AA00]>[/COLOR]

<a href[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"http://www.www.www.iran-eng.ir/mathematics/index.php"[/COLOR][COLOR=#00AA00]>[/COLOR]لینک دوم</a[COLOR=#00AA00]>[/COLOR]

</body[COLOR=#00AA00]>[/COLOR]
</html[COLOR=#00AA00]>[/COLOR][/FONT]
[/FONT][/COLOR]
 
P O U R I A

P O U R I A

مدیر مهندسی شیمی مدیر تالار گفتگوی آزاد
مدیر تالار
حذف خط زیر لینک ها (links)، با استفاده از مشخصه text-decoration در CSS

حذف خط زیر لینک ها (links)، با استفاده از مشخصه text-decoration در CSS

با استفاده از مشخصه text-decoration در CSS ، می توانیم خط زیر لینک ها (links) را حذف کنیم. برای این منظور، باید مشخصه text-decoration زا به صورت زیر به کار ببریم :
کد: 
[COLOR=#000000][FONT=Tahoma][FONT=monospace][B]text-decoration[/B][COLOR=#00AA00]:[/COLOR][COLOR=#993333]none[/COLOR][COLOR=#00AA00];[/COLOR][/FONT]
[/FONT][/COLOR]
به مثال زیر توجه کنید :

[h=4]مثال :[/h]
کد: 
[COLOR=#000000][FONT=Tahoma][FONT=monospace]<html[COLOR=#00AA00]>[/COLOR]
<head[COLOR=#00AA00]>[/COLOR]
<style type[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"text/css"[/COLOR][COLOR=#00AA00]>[/COLOR]
[COLOR=#CC00CC]#myID[/COLOR] [COLOR=#00AA00]{[/COLOR]
        [B]text-decoration[/B][COLOR=#00AA00]:[/COLOR][COLOR=#993333]none[/COLOR][COLOR=#00AA00];[/COLOR]
[COLOR=#00AA00]}[/COLOR]
</style[COLOR=#00AA00]>[/COLOR]
</head[COLOR=#00AA00]>[/COLOR]

<body[COLOR=#00AA00]>[/COLOR]

<a href[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"http://www.www.www.iran-eng.ir/adobe-photoshop/index.php"[/COLOR][COLOR=#00AA00]>[/COLOR]لینک اول</a[COLOR=#00AA00]>[/COLOR]

<br /[COLOR=#00AA00]>[/COLOR]

<a id[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"myID"[/COLOR] href[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"http://www.www.www.iran-eng.ir/mathematics/index.php"[/COLOR][COLOR=#00AA00]>[/COLOR]لینک دوم</a[COLOR=#00AA00]>[/COLOR]

</body[COLOR=#00AA00]>[/COLOR]
</html[COLOR=#00AA00]>[/COLOR][/FONT]
[/FONT][/COLOR]
[h=4]نتیجه :[/h]
Untitled.jpg
 
برای ارسال پاسخ شما باید وارد سیستم شوید.
Similar threads
Thread starter عنوان تالار پاسخ ها تاریخ
T رفع غلط املایی اشتباهات برنامه نویسی css html jquery php asp HTML , XHTML , CSS 0
T رفع غلط املایی اشتباهات برنامه نویسی css html jquery php asp HTML , XHTML , CSS 0
T رفع غلط املایی اشتباهات برنامه نویسی css html jquery php asp HTML , XHTML , CSS 0
A قالب استاتیک وب سایت Apital (Html+Css,...) HTML , XHTML , CSS 0
A اسکریپت CSS فرم Flat Forms Pack از وب سایت HTML , XHTML , CSS 0

Similar threads

بالا