الأرشيف ٢٠٠٨ - ٢٠١٢

مدخلك لعالم 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 للعنصر يجب ان يتم الفصل بينهم عن طريق وضع فاصلة منقوطة (;) بعد القيمة
  • عند استخدام قيمة مكونة من اكثر من شطر يجب ان توضع بين علامتي تنصيص كالتالي :
  • عند استخدام اكثر من قيمة لخاصية واحدة يجب ان نفصل بين كل منهم بفاصله (,) كالتالي :
  • عند استخدام احدى الخواص و التي تاخذ قيمة عددية يجب الا تترك مسافة بين العدد و الوحدة المستخدمة (px , pt ,% ….) مثال .

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

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

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

الوسوم

‫۲۷ تعليقات

  1. شيء رااائع أخي الكريم بالفعل مقدمة راائعة و أنا تعاملت مع اللغة بشكل بسيط و هي لغة مش صعبة و جميلة و بإنتظار المزيد .

    تحياتي
    فراس

  2. شكرا لك اخي علي المقدمة المفيدة حقا
    هل يمكنك ان ترشح لي مصدر الكتروني (كتاب مثلا) لتعلم الـ XHTML / CSS بشكل مفصل؟
    ملاحظة : كيف يمكنني مراسلتك للاتفاق علي امر تجاري ؟

  3. اهلا بكم اخواني الكرام …

    Mahmoud
    اخي محمود اذا اردت تعلم المبادء و الاساسيات لـ html/css فعليك بموقع w3schools فهو يقدم المعلومة بشكل واضح واسلوب سهل
    تعلم html
    تعلم xhtml
    تعلم css

    بخصوص الاعمال التجارية يمكنك مراسلتي على
    www[at]mo3aser.com

  4. الله يعطيك العافية اخوي

    مقدمة و لا أروع
    و انا ناوي اتعلمCss

    و لقيت مدونتك >إضافة>للمفضلة

    و بإنظار الدورس القادمة يا غلاي

  5. أخوي المُعاصر

    انا سمعت انه اللي لازم يتعلن css لازم يكون يعرف xhtml

    و انا الصراحة جديد بلغات البرمجة يعني ما اعرف شئ

    يا ليت تفيدني لا هنت يا بعدي

  6. شكرا اخي علي نصائحك
    هل من الافضل تعلم لغة html اولا ثم xhtml ام يمكنني التوغل في الاخيره بدون مشاكل؟
    انا ابحث عن القياسية قدر المستطاع

    راسلتك علي بريدك المذكور بالاعلي منذ قليل وبانتظار ردك

  7. Mahmoud
    الفرق بين xhtml و html ليس بالكبير بل هي بعض القواعد فقط مثل احاطة كل القيم ب( ” ” ) و اغلاق كل الوسوم و بعض القواعد البسيطة الاخرى يمكنك الاطلاع على التغيرات و التطويرات التي تمت في xhtml ثم تعلم html على ضوء هذه التعديلات .

    لم يصلني اي بريد عزيزي ارجو التاكد من البريد الذي راسلتني عليه .

    بالتوفيق

  8. صالح الطالح
    الملف ذو الامتداد css هو ملف يحتوي على خواص وأنماط لتحديد شكل وطريقة عرض العناصر وعند ربط هذا الملف بملفات html يتم تطبيق هذه الانماط على العناصر في الصفحة ويتم تخصيص طرق عرض العناصر بشكل مختلف باستخدام classes و id’s كما ذكرت في الشرح

    1. اهلا اختي الكريمة ..

      يمكن ربط ملف css بملفات asp.net بدون مشاكل ولا يوجد اختلاف فقط ضعي كود الربط في راس الصفحات التي تريدين تطبيق الخواص عليها كما شرحت في الأعلى …

      بالتوفيق

  9. السلام عليكم.
    وجزاك الله خيرا.

    انا جديد على الcss
    لكن في مراحل الجامعه قد احب وممتاز بالبرمجه كما انني تعلمت بعض الشيء من لغة الhtml

    اريد ان اتعلم لغة برجمه مثل asp او php

    فهل الcss لها علاقة بهما وما مدى هذه العلاقة؟ وشكرا

  10. جزاك الله خير على هذه المدونة المميزة والمفيدة ,,

    حبيت اسالك عن كذا حاجه ..

    اللحين انا انتهيت من برمجة موقع ويب بلغة asp.net وربطته بقاعدة بيانات sql server 2012 express
    هل أحتاج لبرنامج dreamweaver وذلك لتصميم الموقع بصورة احترافية ؟!
    وهل احتاج لاستخدام هذي التقنية CSS في موقعي ؟؟

    ارجو منك الاجابة على سؤالي ,,

    أعتذر منك على الازعاج ,, وشاكره لك تعاونك معي ,,

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

إقرأ أيضاً

زر الذهاب إلى الأعلى
إغلاق