مدخلك لعالم css

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

---

ماهي CSS ؟
CSS هي اختصار لـ Cascading Style Sheet و هي ما تعرف بالعربية بصفحات الأنماط الانسيابيه .. وهي المسؤله عن التحكم في كيفية ظهور و عرض عناصر صفحات الويب حيث يمكننا من خلالها التحكم في الخلفيات و الوان الخطوط وتحديد نوع الخط المستخدم وحجمه وتنسيقه و المسافة بين السطور و عرض و ارتفاع العناصر ….. و الكثير من الخصائص التي سنتناولها في دروس لاحقه باذن الله .

ما هي مميزات CSS ؟

• فصل المحتوى عن التصميم .
• توفير الكثير من الوقت عند تصميم و تعديل الصفحات .
• اتاحة الكثير من الخواص التي يمكن استخدامها في تنسيق العناصر.
• تقليل حجم الصفحات .
• التقليل من الوقت اللازم لظهور الصفحات .

ماذا احتاج لكتابة CSS ؟

اولا : ستحتاج محرر نصوص لكتابة أكوادك … هناك الكثير من البرامج التي يمكنك استخدامها مثل NotePad++ , topstyle , coda وغيرها من البرامج .
هذه الروابط قد تفيدك في اختيار المحرر الذي يناسبك :
CSS Editors Reviewed
CssEditors
Cascading Style Sheets Editors

ثانيا ستحتاج مستعرض ويب لمعاينة ما ستقوم بكتابته . الخيارات متعددة ولكن أنصحك باستخدام فايرفوكس حيث ان دعمه لمعايير CSS كبير كما ان هناك عدد من الاضافات التي يمكن تركيبها عليه ستفيدك اثناء معاينة الصفحات كاضافة FireBug
انصحك ايضا بعدم استخدام IE في بداية تعلمك ل CSS حيث انه فقير بعض الشئ في التعامل مع بعض خصائص css ويتعامل مع البعض الاخر بطريقة مختلفة عن بقية المتصفحات .

كيف أطبق CSS على الصفحات ؟
هناك ثلاث طرق لتطبيق خواص CSS على الصفحات ..
External Stylesheet :
وهي افضل طريقة لتطبيق سمات CSS على أكثر من صفحة ، حيث يتم كتابة اكواد CSS في ملف خارجي يحمل الامتداد css و يتم تضمينه في الملف عن طريق كتابه هذا السطر في الترويسه Head للصفحة المراد تضمين الملف فيها .
مثال :

او

حيث css/style.css هو مسار ملف CSS المراد تضمينه في الصفحة .

Internal Stylesheet
وتستخدم هذه الطريقة عند الرغبة في تطبيق مجموعه من السمات على صفحة واحده فقط و يتم ذلك عن طريق تضمين خواص CSS في الترويسه كالتالي :

Inline Styles
و تستخدم هذه الطريقة عند الرغبة في تطبيق خواص CSS على عنصر ما و تستخدم هذه الطريقة كالتالي :

أولوية تطبيق خواص CSS ?
اذا تعددت نفس الخواص المطبقة على عنصر ما .. فأولوية استخدام الخواص من قبل المستعرض ستكون بالشكل التالي ..

1. Inline Styles ( خواص css للعنصر )
2. Internal Stylesheet (خواص css الداخلية للملف )
3. External Stylesheet ملف css الخارجي
4. القيمة الافتراضية للخواص في المستعرض .

هيكلية كتابة أكواد CSS

selector : يمكنني تعريفه بانه مؤشر او دليل للعنصر الذي اريد ان اطبق عليه خواص CSS هذا المؤشر قد يشير صراحة للعنصر عن طريق كتابه اسمه مثال :

بالطريقة السابقة سيتم تطبيق خواص css الى كافه الفقرات ولكن ماذا اذا اردت ان أخصص فقرة معينه بخواص خاصه بها ..حسنا هنا سنلجأ لاستخدام class او id وهنا سيشير selector الى اسم class او id للعنصر لمزيد من التوضيح لنأخذ هذه الامثله .
مثال لاستخدام class :

لنأتي الان لتعريف الفقرة التي نريد ان نطبق هذه الخواص عليها بالشكل التالي :

مثال على استخدام id :

لنأتي الان لتعريف الفقرة التي نريد ان نطبق هذه الخواص عليها بالشكل التالي :

هل لا حظت الفرق في طريقة تعريف class و id في css ؟ … نعم يسبق اسم id رمز (#) اما class فيسبقها نقطه ( . ) … سنعرف الفرق بين class و id و متى نستخدم اي منهما في درس قادم ان شاء الله .

property : وهي اسم الخاصية التي نريد تطبيقها على العنصر .
value : وهي القيمة التي يتم اسنادها الى الخاصية property .

ملاحظات :

• تكتب الخواص بين اقواس معقوفة }{
• يتم الفصل بين property و value بواسطة نقطين ( : )
• عند الرغبة في وضع أكثر من property للعنصر يجب ان يتم الفصل بينهم عن طريق وضع فاصلة منقوطة (;) بعد القيمة
• عند استخدام قيمة مكونة من اكثر من شطر يجب ان توضع بين علامتي تنصيص كالتالي :
  
  p { font-family: "Times New Roman" }

  1 2 3 4 5

  p  { font-family: "Times New Roman" }

• عند استخدام اكثر من قيمة لخاصية واحدة يجب ان نفصل بين كل منهم بفاصله (,) كالتالي :
  
  p { font-family:Arial, Helvetica, sans-serif }

  1 2 3 4 5

  p  { font-family:Arial, Helvetica, sans-serif }

• عند استخدام احدى الخواص و التي تاخذ قيمة عددية يجب الا تترك مسافة بين العدد و الوحدة المستخدمة (px , pt ,% ….) مثال .
  p { margin-right: 5px; /* صياغه صحيحه */ margin-top: 10 px; /* صياغه خاطئة */ }

  1 2 3 4 5 6

  p { margin-right: 5px; /* صياغه صحيحه */ margin-top: 10  px; /* صياغه خاطئة */ }

منح اكثر من عنصر نفس الخواص ( Grouping ) :
عند الرغبة في منح أكثر من عنصر نفس الخواص يتم الفصل بينهم بفاصله ( , ) مثال :

النعليقات في CSS :
تستخدم التعليقات لشرح اكوادك او لتذكيرك بشئ ما عند العودة للتعديل عليها .. التعليقات سيتم تجاهلها من قبل المستعرض .. تبدأ التعليقات في css بـ ” /* ” و تنتهي بـ ” */ ”
مثال :

انتهت المقدمة … مقدمة دسمه اليس كذلك ؟ :D
الى اللقاء في الدرس القادم .