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