القواعد النحوية

القواعد النحوية للـ 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

}

شكرأ لكم ..

ماذا نقصد بـ Css ؟

هي اختصار لـ Cascading Style Sheets

وهي تعني : صفحات الأنماط المتعاقبة

ونستطيع بأستخدام هذه التقنيه فصل تنسيق الصفحة عن محتواها

اي نقوم بأرفاق جمل الـ CSS لنستطيع عرض عناصر الـ html بالتنسيق الذي نريد

قبل البدء يجب انت تعلم على الأقل القواعد الأساسية لأستخدام الـ html\xhtml

الأنماط ساعدت في حل المشاكل المشتركه :

اوسمه الـ html تستخدم عادة لتعريف محتويات الصفحة ، اي انه عندما نريد ان نقول “This is a header”, “This is a paragraph”, “This is a table”

نستخدم الاوسمه مثل:<h1>, <p>, <table>

لذا فإن تخطيط الصفحة احتمال ان يتغير بتغير المتصفح.

ولقد قامت المتصفحات الرئيسية أمثال: Netscape – Internet Explorer بأضافة العديد من الأوسمه والخواص للـ html الأصلية لذا صار من الصعب جداً انشاء صفحات متوافقه في التخطيط في جميع المتصفحات .

لحل هذه المشكلة قام اتحاد نظام الشبكة الآلية the World Wide Web Consortium بتوحيد قياسي يعمل على جميع المتصفحات ويرفق بالـ html

صفحات الأنماط تستطيع حفظ الكثير من العمل:

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

عن طريق صفحة نمط واحده تستطيع تنسيق وتخطيط كيفية عرض الصفحات الموجوده في موقعك بأكمله !

الـ CSS تقنيه عظيمة في تصميم المواقع لأنها تسمح للمطورين بالتحكم في تخطيط صفحات الانترنت , وأنت كمطور للموقع تستطيع تغير تنسيق كل عناصر الصفحه او بعضها لتحدث تغير عام في الموقع كما تريد.

أي نمط نستخدم عندما يكون هناك اكثر من نمط محدد من عناصر الـhtml؟

بشكل عام نستطيع القول بأن كل الأنماط “تختفي” وتصبح في نمط “افتراضي” جديد بالقواعد التالية .. نبدأ بالأولوية الأعلى :

1. النمط الموجود في عناصر الـ html.
2. نمط صفحة الأنترنت ( داخل وسم الرأس <head>).
3. صفحة الأنماط الخارجية.
4. المتصفح الأفتراضي.

أذن ، اذا وجد الأولوية الاعلى يتم التجاوز عن التنسيقات ذات الأولوية الأقل.

هناك طرقتين لأستخدام جمل الـ CSS :

• داخلي

نقوم بوضع الجمل في الأعلى في نفس الملف الذي يحوي جمل html.

• خارجي

نقوم بوضع ملف آخر يحوي جمل الـ CSS فقط ويكون امتداده css.

ايهم أفضل ؟

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

اتمنى انكم استفدتوا من الدرس الأول

اذا وجد خطأ مني الرجاء ابلاغي في الحال