أساسيات اللغة CSS

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

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

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]




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


ما هى لغة CSS ؟؟

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

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



تنسيق لغة CSS :

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

مدونة عالم نت

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

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

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

لاحظ color هى لون النص و text-align هى موضع النص
فتكون الناتج كالتالى
مدونة عالم نت

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

/*هذا نص*/
p {
    color: red;  /*هذا اللون*/
    text align: left;  /*هذا موضع النص*/
}

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