1- CSS : أساسيات اللغة

بسم الله الرحمن الرحيم 

سنتحدث فى هذه المجموعة عن لغة CSS و هى من أهم الأجزاء فى إنشاء المواقع مع لغة HTML / XML 

أولا: عليك أن تتعرف على أساسيات لغة HTML / XML  من الدروس التالية

HTML :

  الدرس الأول HTML : أساسيات اللغة

  الدرس الثانى HTML : تابع أساسيات اللغة 

  الدرس الثالث HTML : تابع أساسيات لغة 

XML :

الدرس الأول XML : أساسيات اللغة

الدرس الثانى XML : تابع أساسيات اللغة

ثانيا: نبدأ شرح درس اللغة فى مجموعة من الدروس المتتالية

ما هى لغة CSS ؟؟

هى تعنى  Cascading Style Sheets النمط الورقى المتسلسل و تعنى كيفية عرض عناصر لغة HTML و تمت إضافتها لغة HTML لحل العديد من المشكلات الخاصة بطريقة العرض

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



تنسيق لغة CSS :

تتكون اللغة من جزئيين أساسين هما  العنصر المتخار selector و التتويج declaration
selector : و هى العنصر المتخار الذى سنضع له معلومات العرض الخاصة به
declaration : وهى معلومات العرض للعنصر و تتكون من جزئيين property و هى المتغيير (إنظر الامثلة) و تتكون من value و هى القيمة للمتغيير (إنظر الامثلة) .. إذا كان لدينا مقطع كالتالى

<p>مدونة عالم نت</p>

  فيكون ملف CSS كالتالى و يمكن أن يكتب بطريقتين

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

أو 

p {

    color: red;

    text align: left;

}

لاحظ color هى لون النص و text-align هى موضع النص

فتكون الناتج كالتالى

مدونة عالم نت

من مميزات اللغة أنه يمكنك أن تضع تعليقات خلالها لتساعدك عند محاولة تعديلها حتى لا تنسى أو لمساعدة غيرك أو للشرح و التوضيح و هى لا تظهر فى عملية العرض خلال الموقع و توضع هذه التعليقات بين العلامتين  /*    */   ... لاحظ

/*هذا نص*/

p {

    color: red;  /*هذا اللون*/

    text align: left;  /*هذا موضع النص*/

}

و الناتج تماما كما هو لا يتغير فيكون

مدونة عالم نت