CSS Links

-

في هذا الدرس نتعرف على كيفية التعديل على الخاصية التي تسمىLink بحيث ممكن التحكم في كثير من الخصائص مثل الحجم اللون، النمط وغيرها. 

قبل ما نبدأ نتذكر ايش يعني link: هي عبارة عن كود HTML يستخدم للربط بين الصفحات، يعني حتى تتنقل الى صفحة ثانية اكيد انت بحاجة الى استخدام link 

هذه الخاصية تكتب بالشكل التالي:

<a href="default.asp" target="_blank">This is a link</a>
لاحظ انه طريقة الكتابة بدأت بحرف a وانتهت بحرف a وفي داخل هذا الحرف اضفنا href الي هو مسؤول عن استدعاء الصفحة المطلوبة، وبعدها كتبنا 
target="_balnk”
والي بيعني ان الصفحة المطلوبة بتم فتحتها في صفحة جديده وليس في نفس الصفحة.

تمام نعمل مثال حتى نفهم الموضوع بشكل أفضل:

نبدأ بإنشاء ملف HTML باسم  Links وبعدها نضيف الكود التالي: 

<!DOCTYPE html>
<html>
    <style>
       a {
  color: grey;
}
    </style>
<body>
    <h2>apply Style color  for a link </h2>
    <p><b><a href="page1.html" target="_blank">Open a Page</a></b></p>       
</body>
</html>

شغل الصفحة ونشوف النتيجة (الصورة)

 طيب نفهم الكود:
الكود التالي :

a {
  color: grey;
}

يتم تطبيق اللون gray  على a elements الموجودة في صفحة HTML 

في CSS يمكن تطبيق Style على link حسب الحالة، يوجد  4 حالات ل link وهي :
  • a:link : في حال لم تتم الزيارة (لم يتم الضغط على الرابط)
  • a:visited : بعد زيارة الرابط (الضغط على الرابط)
  • a:hover : عند وضع مؤشر mouse فوق الرابط
  • a:active : لحظة الضغط على الرابط.

نشوف المثال التالي (طبقنا الحالات الأربع السابقة) :

<!DOCTYPE html>
<html>
    <style>
 /* unvisited link */
a:link {
  color: red;
}
/* visited link */
a:visited {
  color: green;
}
/* mouse over link */
a:hover {
  color: gray;
}
/* selected link */
a:active {
  color: blue;
}
    </style>
<body>
    <h2>apply Style color  for a link </h2>
    <p><b><a href="page1.html" target="_blank">Open a Page</a></b></p>       
</body>
</html>
شغل الصفحة وحاول تتغير حالة الرابط وشوف النتيجة.
بعض القواعد :

 يجب أن يأتي a:hover بعد a:link و a:visited
 يجب أن يأتي a:active  بعد a:hover

خاصية Text Decoration
تستخدم هذه الخاصية للتحكم بالخط اسفل الرابط : 

طريقة الكتابة.
 
text-decoration: Value;

القيمة هنا تكون واحد من :

القيمة 
الوصف
none
إزالة الخط اسفل Link
underline
إضافة خط تحت Link
امثلة :

a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:active {
  text-decoration: underline;
}
خاصية Background Color

تستخدم هذه الخاصية لإضافة خلفية ل Link 
طريقة الكتابة.
 
background-color: Value;
نتعرف على القيم التي يمكن تطبيقها في parameter الي تستخدم هنا :

القيمة
الوصف
#RRGGBB

تطبيق لون باستخدام Hexadecimal

مثال :

p { background-color: #FF0000; }
rgb()

تطبيق لون باستخدام RGB 

مثال :

p { background-color: rgb(255,0,0); }

name

تطبيق لون باستخدام اسم اللون 

مثال :

p { background-color: red; }

inherit

سيرث element لون border من parent element

مثال :

p { background-color: inherit; }

عرض Link على شكل button
يمكن التحكم بشكل الرابط وعرضه على شكل Button بدل من النص، ولتحيق ذلك نحتاج الى دمج مجموعة من الخصائص مع بعض 
نشوف المثال التالي : 

<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
  background-color: green;
  color: black;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}
a:hover, a:active {
  background-color: gainsboro;
}
</style>
</head>
<body>
<h2>Apply Link Button</h2>
<p>Apply a link styled as a button:</p>
<a href="page.html" target="_blank">Call New Page</a>
</body>
</html>
شغل الصفحة وشوف النتيجة (بكون شكل الصفحة )
حاول تحرك mouse فوق Link وشوف كيف اللون بتغير، وسبب التغير هو إضافة الكود التالي :

a:hover, a:active {
  background-color: gainsboro;
}
مثال :

<!DOCTYPE html>
<html>
<head>
<style>
  a.Botton1:link,visited{
  background-color: green;
  color: black;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
   }
   a.Botton1:hover, a:active {
   background-color: gainsboro;
   }
  a.Botton2:link,visited{
  background-color: rgb(185, 7, 31);
  color: black;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
    }
  a.Botton2:hover, a:active 
  {
  background-color: rgb(214, 117, 117);
  }
</style>
</head>
<body>
<h2>Apply Link Buttons float</h2>
<a class="Botton1" href="page.html" target="_blank">Botton1</a>
<a class="Botton2" href="page.html" target="_blank">Botton2</a>
</body>
</html>
شغل الصفحة عند على المتصفح وشوف النتيجة(راسلنا اذا ما فهمت اشي)