القواعد النحوية
القواعد النحوية للـ 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
}
شكرأ لكم ..
Filed under: CSS | Leave a comment »
تــــعلّـــم مــعـــي 