css الدرس الخامس فى

Links

-سنتعلم فى هذا الجزء ضبط شكل ومظهر اللينكات واللينكات فى لغة (css) لها اربع خواص وهى:

استخدامها

property

تستخدم فى ضبط لون اللينك ويظهر تاثير اللون قبل الضغط علي اللينك بالماوس اى فى الحالة العادية لة.

a:link {color:#FF0000;}

تستخدم فى ضبط لون اللينك ويظهر تاثير اللون بعد الضغط علي اللينك بالماوس وزيارة الصفحة المرتبطة بهذا اللينك.

a:visited {color:#00FF00;}

تستخدم فى ضبط لون اللينك ويظهر تاثير اللون عند تحريك الماوس على اللينك ويختفى التاثير باختفاء الماوس.

a:hover {color:#FF00FF;}

تستخدم فى ضبط لون اللينك ويظهر تاثير اللون اثناء الضغط علي اللينك بالماوس.

a:active {color:#0000FF;}

ملاحظة: عند استخدامك للاربعة خواص السابقة راعى الترتيب الموجود بالاعلى.

– والمثال التالى يشرح الخواص السابقة:

<!DOCTYPE html>

<html>

<head>

<style>

a:link {color:#FF0000;}

a:visited {color:#00FF00;}

a:hover {color:#FF00FF;}

a:active {color:#0000FF;}

</style>

</head>

<body>

<a href=”default.php” target=”_blank”>This is a link</a>

</body>

</html>

والان جرب المثال بنفسك لتتعرف على الفرق بينهم.

– ويمكن استخدام خواص اخرى مع اللينكات كخاصية

(background-color, text-decoration) والتى درسناها سابقا وتكون كالتالى:

<!DOCTYPE html>

<html>

<head>

<style>

a:link {color:#FF0000; background-color:#B2FF99; text-decoration:underline;}

a:visited {color:#00FF00; background-color:#FFFF85; text-decoration:overline;}

a:hover {color:#FF00FF; background-color:#FF704D; text-decoration:line-through;}

a:active {color:#0000FF; background-color:#FF704D; text-decoration:underline;}

</style>

</head>

<body>

<a href=”default.php” target=”_blank”>This is a link</a>

</body>

</html>

ولاحظ ان الفرق بين(color)فى انة يضبط لون اللينك نفسة اما( background-color) فيستخدم فى ضبط لون الخلفية الموجود عليها اللينك.

.

Advertisements

4 responses

  1. رووووووووعة
    شكراا على هذه الدروس

  2. بارك الله فيكم

ضع تعليقك هنا

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: