الدرس الثالث .. قواعد أساسيه في تعريف وكتابة الأوامر css
سنبدأ بتوضيح أولى القواعد الأساسية في كتابة وتعريف الأكواد التى تعتمد عليها هذه التقنيه ونبدأ
مع مثال بسيط جدا لصفحه ويب كما نشاهدها هنا:
كود PHP:
<!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> , عدلنا أيضاً إتجاه الصفحة من اليمين
الى اليسار حتى تناسب طبيعة صفحات مواقعنا العربية.
لو شاهدتها على المتصفح تظهر لك بالشكل التالي
http://www.new-style.ws/upload/uploa...3e4d280403.gif
تعال وشاهد نفس الصفحة ولكن مضاف اليها تعريف للفقرة حتى يتم تلوين الخط بداخلها ، وشاهد
معى الصفحه والكود مرة أخرى
كود PHP:
<!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>
http://www.new-style.ws/upload/uploa...6775713d8e.gif
تم تلوينها باللون الأحمر ـ والحال نفسه سيكون مع كل فقرات الصفحة الأخرى حيث سيتم تطبيق
هذا الأمر عليهم جميعاً
أول قاعدة في كتابة الأوامر
http://www.new-style.ws/upload/uploa...151b9cc88b.gif
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;
}
ولكن لمزيد من التنسيق راعي أن تكون الأمر والخصائص مرتبه بشكل جيد حتى تتمكن بعد ذلك
من التعديل عليها ومراجعتها بسهولة
