ALBORAQ TECH : التعريف بلغة السي اس اس css

التعريف بالسي اس اس :

صفحات الطرز المتراصة (بالإنجليزية سي إس إس CSS) هي لغة تنسيق لصفحات الويب تهتم بشكل وتصميم المواقع، صممت خصيصا لعزل التنسيق (الألوان - الخطوط - الأزرار....) عن محتوى المستند المكتوب (بلغة مثلا إتش تي إم إل) وينطبق ذلك على الألوان والخطوط والصور والخلفيات التي تستخدم في الصفحات، بمرونة وسهولة تامة.
هذه التقنية تعني بشكل صفحات المواقع؛ المظهر الكلي من ألوان وصور وغيره.و يمكن اضافته للصفحة بعدة طرق أفضلها التضمين الخارجي بكتابة كود السي إس إس في ملف منفصل. وقد تم تطورها لتصل حاليا إلى سي إس إس 3 والذي إضيف إلية عدة إضافات رائعة لم تكن متاحة في الإصدار السابق وكان إنجازها يتم فقط بجي كويري.
أطلقها مجلس وب W3C، كمواصفة قياسية لتوصيف مظهر وثائق وب من محددات للخطوط والألوان والتنسيق.

مميزات تقنية سي إس إس

تهدف تقنية سي إس إس إلى فصل محتوى الصفحات عن مظهرها بحيث يعطي عدة مكاسب:

• جعل الصفحة ابسط وتفيد فقط ماعملت من اجله بحيث تشمل المحتوى، اما الشكل فيكون في ملف الأنماط السي إس إس.
• جعل الصفحة قابله للتعامل مع عدة متصفحات أو شاشات عرض مختلفه ويمكن معالجة كل جهاز (حاسوب أو حتى هاتف نقال) أو متصفح على حده وبالتالي قابلية استخدام أكبر.
• يمكن وضع عدة مظاهر كل مظهر يلبي حاجة كل قارى فمثلا يمكن ضمان قابلية الاستخدام لذوي الاحتياجات الخاصة أو وضع عدة الوان لتلبيه اذواق شتى.
• يمكن لملف الأنماط ان يتم تضمينه في عدة صفحات وبالتالي عند تغيير شكل العرض فانك تحتاج لتعديل ملف واحد فقط وهذا يعني وقت اقل وتعديل أكبر واشمل.

نظم كتابة السي إس إس

كود السي إس إس هو مجموعة من التعريفات لكل عنصر، وبالتالي يمكن ان يكون لدينا 100 تعريف ل 100 عنصر وهكذا
كل تعريف يكون بادئ باسم أو تعريف العنصر (كـ id أو class العنصر)
فمثلا لنأخذ العنصر div
الذي يكتب بـ إتش تي إم إل كـ

<div id="alboraq_tech">أهلا بكم في البراق تك</div>

سنقوم بإعطاء هذا العنصر لونا أزرق، كما نرى بالأعلى ان عنصر ديف تم تعيين المعرف (id) ب‍alboraq_tech  وبالتالي يتم كتابته كـ #alboraq_tech بصفحة الأنماط
لان كل عنصر يتم تعريف يكون قبله (#) واي عنصر يتم تعريف بclass يكون قبله نقطة (.) عند كتابته بصفحة الأنماط.
وبالتالي يكون الشكل التالي هو التعريف لإعطاء العنصر اللون الأزرق:

#alboraq_tech { color:blue; } 

والتالي هو شرح الكود:

• #alboraq_tech: تعريف العنصر المراد تطبيق التنسيق عليه، وهو ماتم تعريف بصفحة ال إتش تي إم إل لعنصر div.
• {...} كل تنسيق يتم احاطته بهذه الأقواس المعكوفه لتوضيح تنسيق كل عنصر على حده.
• color: هي صفة التنسيق المراد تطبيقه على العنصر، وهنا تم وضع color اي اللون.
• (:): توضع النقطتين الرئسيتين لتوضح ان ما بعدها هو قيمة الصفة، وبالتالي هي فاصل بين الصفة وقيمتها.
• blue: قيمة للصفة وهنا تم وضع القيمة blue اي الأزرق للصفه color اللون.
• (;): يتم وضع النقطة المنقوطة بعد القيمة لأخبار المعالج ان القيمة انتهت وما سيأتي بعدها هو صفة أخرى وهكذا..

برامجة وتحريره

سي إس إس هي تقنية لتطوير الويب وكما أغلب التقنيات للويب، هذه التقنية نصية، اي ان البرامج النصية كـ نوتباد في ويندوز أو Gedit في واجهة جنوم لينكس جنو، يمكنك الكتابة بها بكل سهولة.
هناك برامج تسهل عملية الكتابة وتعطي خيارات أكثر، مثل دريم ويفر أو مايكروسوفت إكسبرشن التجاريان، ولكن يظل الخيار النصي للمطورين هو الأفضل، لان إنشاء هذه القيم تلقائيا غير محبب لمطوري الويب المهوسوون بمعايير الويب.

إصداراته

الإصدار العامل حاليا من تقنية سي إس إس هو الإصدار 3، الذي صمم ليتعامل مع إتش تي إم إل5

المتصفحات والدعم الخاص فيه

تدعم متصفحات وب المواصفة بدرجات مختلفة من الكفاءة والتوافقية؛ فبينما يدعم كل من فيرفكس ومتصفح أوبرا المواصفة بدرجة معقولة، وبالنسبة لمتصفح إنترنت إكسبلورر فيتوقع منه نسخة جديدة معدلة لتناسب وتلبي احتياجات الويب حاليا ومايكروسوفت أعلنت عند طرحها إصدارا جديدا من متصفح إنترنت إكسبلورر (IE7) مشتملا على الكثير من الإضافات التي تجعل تصفح الإنترنت أكثر أمانا، ومنها تطبيقات مضادة لبرامج التجسس (spyware) والفيروسات ومواقع الاحتيال حيث تم بالفعل إصدار النسخة السابعة من [متصفح إنترنت إكسبلورر] وتم بعده إصدار نسخة جديدة تحمل الرقم 8 ويجري في هذه الأوقات الاستعداد لإصدار نسخة جديدة منه حيث لاقت النسخ القديمة من المتصفح غضب العديد من الأشخاص والعديد من الشركات.

وصلات خارجية

صفحة التقنية على موقع دبليو3 كورس سي إس إس تعلم سي إس إس