وش هذا وش يعني

القواعد النحوية للـ css تحتوي على ثلاث اجزاء : المقطع(selector) , الخاصية(property ) , القيمة(value) :




selector {property: value}




المقطع عادةً هي عنصر/وسم الذي تريد تعريفه , الخاصية هي الوصف الذي تريد تغيره , وكل خاصية تستطيع أخذ قيمة .


الخاصية والقيمة منفصلة بواسطة : ومحاطه بأقواس {}




body {color: black}






ملاحظة: اذا كانت القيمة كلمات متعدد ضع علامة تنصيص حول القيمة




p {font-family: “sans serif”}


ملاحظة: اذا كنت تريد تحديد اكثر من خاصية واحدة , يجب عليك ان تفصل كل خاصية بفاصلة منقوطة (;)


المثال في الأسفل يعرض كيفية تعريف فقرة متوسطه , ولون النص احمر




p {text-align:center;color:red}




لجعل تعاريف الانماط اكثر قراءة , تستطيع وصف خاصيه واحده في عده اسطر , مثل هذا






p


{


text-align: center;


color: black;


font-family: arial


}


تجميع




تستطيع تجميع المقاطع وتفصل بين كل مقطع بفاصله (,) , في هذا المثال اسفل قمنا بتجميع كل عناصر الرأس (header ) . كل عناصر الرأوس اصبحت ظاهرة في لون أخضر




h1,h2,h3,h4,h5,h6


{


color: green


}






تصنيف المقاطع




مع تصنيف المقاطع تستطيع تعريف انماط مختلفه في نفس النوع من عناصر الـ HTML




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




p.right {text-align: right}


p.center {text-align: center}




انت استخدمت تصنيف الخواص في مستند الـ html


<p class=”right”>


This paragraph will be right-aligned.


</p>




<p class=”center”>


This paragraph will be center-aligned.


</p>




ملاحظة: لتطبق اكثر من تصنيف لكل عنصر معطى , القاعده هي :




<p class=”center bold”>


This is a paragraph.


</p>


الفقرة في الأعلى سوف تصمم بواسطة تصنيف “center” وسط و “bold” ثقيل.


انت تستطيع ايضاً ان تحذف وسم الأسم (name) في المقطع لتعريف النمط الذي سوف يستخدم في كل عناصر الـ HTML التي لها مركز التصنيف .


في المثال الأسفل . كل عناصر الـ HTML مع


class=”center”


سوف تصبح في الوسط:




.center {text-align: center}






في الكود الاسفل كلاً من عنصر h1 و عنصر p تحتوي على


class=”center”


هذا يعني كلاً من العناصر تتبع القواعد في المقطع


“.center:”






<h1 class=”center”>


This heading will be center-aligned


</h1>




<p class=”center”>


This paragraph will also be center-aligned.


</p>




! لا تبدء بتصنيف الأسم مع الرقم ! انها لاتعمل في Mozilla/Firefox.






اضافة الأنماط الى العناصر مع خواص معينه






تستطيع ايضاً تطبيق انماط على عناصر الـ HTML مع خواص معينه . قواعد النمط في الاسفل تربط كل عناصر الادخال التي تحتوي على انواع معينه في قيمة النص “text“:


input[type=”text”] {background-color: blue}




هوية المقاطع (The id Selector)




تستطيع ايضاً تعريف انماط لعناصر الـ HTML مع هوية المقطع . هوية المقطع تعرف بواسطة #.


قواعد النمط في الاسفل تربط العناصر التي تحتوي على هوية معينه مع قيمة “green“:




#green {color: green}


قواعد النمط في الاسفل تربط عنصر p الذي يحوي هويه مع القيمة للـ “para1“:






p#para1


{


text-align: center;


color: red


}


! لاتبدء بهوية الاسم مع الرقم ! انها لاتعمل في Mozilla/Firefox.




التعليقات في الـ css


التعليقات تستخدم لتوضيح شفرتك (your code) و يمكن ان تساعدك عندما تقوم مستقبلاً بتحرير مصدر الشفرة في البيانات . التعليقات لاتظهر في المتصفحات. في الـ css التعليقات تبدء بـ “/*” وتنتهي بـ “*/”


كالتالي :


/* This is a comment */


p


{


text-align: center;


/* This is another comment */


color: black;


font-family: arial


}





شكرأ لكم ..