دردشة  

منتديات - دروس css - دروس البي اتش بي - قوالب CSS - دروس السيرفر - العاب فلاشيه - برامج مهمه جدا للويندوز - برنامك فك تشفير مع الشرح - 

الدروس 1  2  3  4  5  6 

 

مكتبة دروس css

كاتب الدرس الاخ: كتوم ca2oom

الدرس الثاني

#2 قواعد أساسيه في تعريف وكتابة الأوامر

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS الأنماط الإنسابية</title>
</head>
<body>

<p>قواعد أساسية في تعريف وكتابة الأوامر</p>

</body>
</html>

صفحه عادية بلغه xhtml كما يتضح من أول سطر في الوسم <!DOCTYPE> وبعنوان "css الأنماط الإنسابية" وتحتوى على فقرة وحيدة بداخل الوسم <body> , عدلنا أيضاً إتجاه الصفحة من اليمين الى اليسار حتى تناسب طبيعة صفحات مواقعنا العربية.

تعال وشاهد نفس الصفحة ولكن مضاف اليها تعريف للفقرة حتى يتم تلوين الخط بداخلها ، وشاهد معى الصفحه والكود مرة أخرى

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS الأنماط الإنسابية</title>

<style type="text/css">
<!--
p { color:red; }
-->
</style>

</head>
<body>

<p>قواعد أساسية في تعريف وكتابة الأوامر</p>

</body>
</html>

 

 

تم تلوينها باللون الأحمر ـ والحال نفسه سيكون مع كل فقرات الصفحة الأخرى حيث سيتم تطبيق هذا الأمر عليهم جميعاً

أول قاعدة في كتابة الأوامر

Selector : المكان الذى تريد تطبيق الخصائص عليه ، ويمكن ان تختار اى من وسوم html مثل الروابط <a> والفقرات <p> والجدوال <table> , <td> , <tr> وجسم الصفحه <body>وغيرها.
Property : الخصائص التى سوف تتحكم من خلالها في الوسوم المختلفة وهى تنتهي بنقطتين [ : ].
Value : القيم المختلفة لكل خاصية فلكل خاصية مجموعة قيم تحددها وهى تنتهي بفاصلة منقوطة [ ; ].
Declaration block : المكان المحتوي على كل من الخواص والقيم ومن خلاله يتم التصريح ببدء العمل أو الفعالية ويبدأ وينتهي بأقواس معقوفة [ { } ].

 

طريقة كتابة الامر نفسها لا تفرق إن كتبت بهذا الشكل

كود PHP:
p { color:red; background-color: #333; }

أو هذا الشكل

 
كود PHP:
p
{
color:red;
background-color: #333; 
}
او كانت كذلك
 
كود PHP:
p
{
color:red;
background-color: #333; 
}

ولكن لمزيد من التنسيق راعي أن تكون الأمر والخصائص مرتبه بشكل جيد حتى تتمكن بعد ذلك من التعديل عليها ومراجعتها بسهولة