التخطي إلى المحتوى
شرح دورة الـ CSS للمبتدئين – الدرس الثانى عشر
الخصائص او الاوامر المؤثره فى الرابط (Link) :-
1- link: هى الخاصيه التى تحدد لون الرابط الذى لم يتم زيارته بعد
a : link { Color : red ;}  Color لمراجعه ما هى القيم التلا تأخذها الخاصيه
———————————————————————————————
2- Visited : هى الخاصيه التى تحدد لون الرابط الذى تم زيارته
a : visited { Color : black ;}
———————————————————————————————
3- Hover : هى الخاصيه التى تحدد لون الرابط عند وضع المؤشر عليه فقط
a : hover { Color : orange ;}
———————————————————————————————-
4- Active :  هى الخاصيه التى تحدد لون الرابط فى حاله وجود المؤشر على اللينك و اثناء الضغط عليه ليتم فتحه
a : active { color : white ;}
———————————————————————————————
التطبيق ..سنذكر بعض الخصائص من دروس سابقه ..
كود ملف HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Minds</title>
<link rel="stylesheet" type="text/css" href="csss.css">
</head>
<body >
<p>
<img src=n.png width=200 height=200>

مدونه مايندز : هى مدونه عصريه موجهه للشباب
   

لعربى بجميع فئاته العمرية تحتوى على احدث
   
 
لمقالات والشروحات فى عالم التكنولوجيا والانترنت
   

غرضنا هو اثراء المحتوى العربى وتوفير مساحة كافي
   

من المعلومات الواضحة والسهله عن التكنولوجيا 
   

<a href=http://www.mindshci.com/> <h2>
Minds Human Captial </h2>
</a>
</p>
<h3>
 CSSدوره </h3>
<ul>
<li><a href=http://www.mindshci.com/2013/09/css.html> 
CSSمقدمه فى لغه </a> </li>
<li><a href=http://www.mindshci.com/2013/09/css1.html> 
 طرق كتابه الكود </a></li>
<li><a href=http://www.mindshci.com/2013/09/css-1.html>
 (Text)اوامرالمتحكمه فى النص</a></li>
<li><a href=http://www.mindshci.com/2013/10/css_12.html>
 (Font)خصائص او اوامر الخطوط</a></li>
<li><a href=http://www.mindshci.com/2013/11/css.html>
(Background )خصائص او اوامر المؤثره على الخلفيات</a> </li>
<li><a href=http://www.mindshci.com/2013/11/css_1774.html> 
(Unordered List)الخواص او الاوامر المؤثره فى القوائم الغير مرتبه</a></li>
</ul>
</body>
</html>

كود ملف الCSS

h3{color:blue;
font-style:Italic;
font-weight:bold;}

p{font-weight:bold;
   text-transform:Capitalize;
   font-style:Italic;}
   
 
ul{ list-style-type : square ;
 margin-left : 50px ;}
 
a:link {color:purple;}    
a:visited {color:black;} 
a:hover {color:green;}   
a:active {color:grey;}

نموذج النتيجه:

الآن .. أختبـــــــــــــــــــــــــــــ(ـنفسك)ــــــــــــــــــــــــــــــــــــــر..
1- انسخ الكود السابق .. وشاهد النتيجه بنفسك
2-لك مطلق الحريه فى تعديل الكود .. ويفضل تجربه نفس الكود بالطريقه الاولى لكتابه الكود و بالطرقه الثانيه لكتابه الكود

عن الكاتب

التعليقات

أضف تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

Shares