تعلم CSS – كيفية كتابة أكواد الـ CSS

نبذة عامة

في هذا الدرس سنتعلم كيف نقوم بكتابة أكواد الـ CSS والبنية الصحيحة لذلك  .

كيف تعمل الـ CSS

بشكل مختصر جداََ ، في الـ CSS كل ما عليك فعله هو تحديد العنصر او مجموعة العناصر من ثم كتابة الخصائص الخاصة بالـ CSS التي تريد تطبيقها على هذه العناصر ، سواء كانت الخصائص عبارة عن لون العنصر او تغير خلفيته وسنتعرف على جميع هذه العناصر في هذه السلسلة

ما المقصود بخصائص الـ CSS

على سبيل المثال لدى هذه الفقرة وأريد تغيرها إلى لون الأحمر من خلال الـ CSS

<p> This Is Paragraph </p>

بكل بساطة في الـ CSS أولاََ على تحديد العنصر الذي أريد تطبيق عليه خاصية اللون الأحمر ، من ثم تطبيق الخاصية نفسها .

selector {
	property: value
}

• Selector ( المحدد ) : يتم كتابة في هذا المكان من هو العنصر الذي تريد تطبيق عليه تنسيقات الـ CSS .
• Property ( الخاصية ): يتم كتابة إسم الخاصية التي تريد تطبيقها على العنصر ، ممكن أن تكون اسم الخاصة عبارة عن color ، bacground-color  .. وهكذا .
• Value ( القيمة ): وهي قيمة الخاصية التي قمت بكتابتها ، فلو قمت بكتابة اسم الخاصية color في القيمة ستقوم بكتابة قيمة هذه الخاصة في هذه الحال ممكن أن تكون القيمة أحمر أو أخضر أو أصفر.

ولجعل الفقرة السابقة باللون الأحمر نقوم بكتابته هكذا :

p {
	color: red
}

توضيح بنية الـ CSS بشكل أكبر

القاعدة (Rule Set)

الأسطر السابقة بالصورة التي بالأعلى تسمي جميعها بالـ Ruleset ويمكن ان نقول عنها Rule فملف الـ CSS يتكون من مجموعة من الـ Rules وهي الـ Block  بالكامل التي تحتوي على الـ Selector والـ Declaration .

المحدد (Selector)

نقوم هنا بتحديد العنصر المراد تطبيق عليه خصائص الـ CSS ويتم كتابته قبل قوس البداية ( } )  ويسمي هذا القوس  left curly brace ، ويوجد أشكال مختلفة من المحددات وسيتم توضيحها بشكل مفصل .

بلوك الإعلان التصريح ( Declaration )

وهذا البلوك يحدد مجموعة الخصائص وقيمها التي تريد تطبيقها على المحدد ، ويجب أن يبدأ هذا البلوك بقوس البداية ( } )  وينتهي بقوس النهاية ( { ) ويسمى قوس النهاية right curly brace ويمكن وضع أكثر من خاصية من خصائص الـ CSS في داخل هذا البلوك ( التصريح ) مع فصل بين كل خاصية وخاصية بـ ( ; ) semicolon في حال كانت الخاصية أخر سطر بإمكانك عدم وضع  semicolon ويفضل في حال كان هذا البلوك يحتوى على العديد من الخصائص أن نقوم بكتابة كل خاصية على سطر لوحدها .

التصريح الإعلان   ( Declaration )

يكون التصريح عبارة عن إسم الخاصية ( Property ) وايضاََ قيمة هذه الخاصية (  Value ) ويكون مفصول بينهما بنقطتين ( : ) وتسمي هاتين النقطتين بـ colon ويجب الفصل بين كل تصريح وتصريح ب  semicolon  إذا لم يكن السطر الأخير :)

الخاصية (Property)

وهي خاصية من خصائص الـ CSS التي تقوم بالتأثير على العنصر الذي قمت بتحديدة من خلال المحدد ، من أحدى هذه الخصائص كمثال خاصية الـ Color بمجرد كتابتها سيتم التأثير على العنصر المختار وتغير لونه .

القيمة (Value)

كما ان هناك خصائص للـ CSS ويجب أن يكون لكل خاصية من هذه الخصائص قيمة ، والـ Value هنا هي قيمة الخاصية التي ستقوم بتطبيقها على المحدد التي قمت بتحديدة

بعض الصور في هذا الدرس مأخودة من هذا الموقع