المغربي الجديد
19-03-2011, 06:18 PM
قواعد أساسيه في تعريف وكتابة الأوامر
سنبدأ بتوضيح أولى القواعد الأساسية في كتابة وتعريف الأكواد التى تعتمد عليها هذه التقنيه ونبدأ مع مثال بسيط جدا لصفحه ويب كما نشاهدها هنا:
<!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> , عدلنا أيضاً إتجاه الصفحة من اليمين الى اليسار حتى تناسب طبيعة صفحات مواقعنا العربية.
لو شاهدتها على المتصفح تظهر لك بالشكل التالي
تم تلوينها باللون الأحمر ـ والحال نفسه سيكون مع كل فقرات الصفحة الأخرى حيث سيتم تطبيق هذا الأمر عليهم جميعاً
أول قاعدة في كتابة الأوامر
Selector : المكان الذى تريد تطبيق الخصائص عليه ، ويمكن ان تختار اى من وسوم html مثل الروابط <a> والفقرات <p> والجدوال <table> , <td> , <tr> وجسم الصفحه <body>وغيرها.
Property : الخصائص التى سوف تتحكم من خلالها في الوسوم المختلفة وهى تنتهي بنقطتين [ : ].
Value : القيم المختلفة لكل خاصية فلكل خاصية مجموعة قيم تحددها وهى تنتهي بفاصلة منقوطة [ ; ].
Declaration block : المكان المحتوي على كل من الخواص والقيم ومن خلاله يتم التصريح ببدء العمل أو الفعالية ويبدأ وينتهي بأقواس معقوفة [ { } ].
طريقة كتابة الامر نفسها لا تفرق إن كتبت بهذا الشكل
p { color:red; background-color: #333; }
أو هذا الشكل
p {
color:red;
background-color: #333;
}
او كانت كذلك
p
{
color:red;
background-color: #333;
}
ولكن لمزيد من التنسيق راعي أن تكون الأمر والخصائص مرتبه بشكل جيد حتى تتمكن بعد ذلك من التعديل عليها ومراجعتها بسهولة
سنبدأ بتوضيح أولى القواعد الأساسية في كتابة وتعريف الأكواد التى تعتمد عليها هذه التقنيه ونبدأ مع مثال بسيط جدا لصفحه ويب كما نشاهدها هنا:
<!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> , عدلنا أيضاً إتجاه الصفحة من اليمين الى اليسار حتى تناسب طبيعة صفحات مواقعنا العربية.
لو شاهدتها على المتصفح تظهر لك بالشكل التالي
تم تلوينها باللون الأحمر ـ والحال نفسه سيكون مع كل فقرات الصفحة الأخرى حيث سيتم تطبيق هذا الأمر عليهم جميعاً
أول قاعدة في كتابة الأوامر
Selector : المكان الذى تريد تطبيق الخصائص عليه ، ويمكن ان تختار اى من وسوم html مثل الروابط <a> والفقرات <p> والجدوال <table> , <td> , <tr> وجسم الصفحه <body>وغيرها.
Property : الخصائص التى سوف تتحكم من خلالها في الوسوم المختلفة وهى تنتهي بنقطتين [ : ].
Value : القيم المختلفة لكل خاصية فلكل خاصية مجموعة قيم تحددها وهى تنتهي بفاصلة منقوطة [ ; ].
Declaration block : المكان المحتوي على كل من الخواص والقيم ومن خلاله يتم التصريح ببدء العمل أو الفعالية ويبدأ وينتهي بأقواس معقوفة [ { } ].
طريقة كتابة الامر نفسها لا تفرق إن كتبت بهذا الشكل
p { color:red; background-color: #333; }
أو هذا الشكل
p {
color:red;
background-color: #333;
}
او كانت كذلك
p
{
color:red;
background-color: #333;
}
ولكن لمزيد من التنسيق راعي أن تكون الأمر والخصائص مرتبه بشكل جيد حتى تتمكن بعد ذلك من التعديل عليها ومراجعتها بسهولة