أوراق الأنماط المتتالية

أوراق الأنماط المتتالية
صفحات التنسيق النمطية اختصارًا: سي إس إس ؛ هي لغة تنسيق لصفحات الويب تهتم بشكل وتصميم المواقع، صممت خصيصا لفصل التنسيق (الألوان - الخطوط - الأزرار....) عن محتوى المستند المكتوب (بلغة مثلا إتش تي إم إل ) وينطبق ذلك على الألوان والخطوط والصور والخلفيات التي تستخدم في الصفحات، بمرونة وسهولة تامة.
هذه التقنية تعنى بالمظهر الكلي لصفحات مواقع الويب من ألوان وصور وغيره. ويمكن إضافته للصفحة بعدة طرق أفضلها التضمين الخارجي بكتابة شفرة السي إس إس في ملف منفصل.
وقد تم تطويرها لتصل حاليا إلى سي إس إس 3 والذي أضيف إليه عدة إضافات لم تكن متاحة في الإصدار السابق وكان إنجازها يتم فقط بـجي كويري.
أطلقها مجلس وب رابطة الشبكة العالمية، كمواصفة قياسية لتوصيف مظهر وثائق وب من محددات للخطوط والألوان والتنسيق.
مميزات تقنية سي إس إس
تهدف تقنية سي إس إس إلى فصل محتوى الصفحات عن مظهرها بحيث يعطي عدة مكاسب:
جعل الصفحة أبسط وتفيد فقط ما عملت من أجله بحيث تشمل المحتوى، أما الشكل فيكون في ملف الأنماط السي إس إس.
جعل الصفحة قابلة للتعامل مع عدة متصفحات أو شاشات عرض مختلفة ويمكن معالجة كل جهاز (حاسوب أو حتى هاتف نقال) أو متصفح على حدة وبالتالي قابلية استخدام أكبر.
يمكن وضع عدة مظاهر كل مظهر يلبي حاجة كل قارئ فمثلا يمكن ضمان قابلية الاستخدام لذوي الاحتياجات الخاصة أو وضع عدة ألوان لتلبية أذواق شتى.
يمكن لملف الأنماط أن يتم تضمينه في عدة صفحات وبالتالي عند تغيير شكل العرض فإنك تحتاج لتعديل ملف واحد فقط وهذا يعني وقت أقل وتعديل أكبر وأشمل.
بنية شيفرات سي إس إس
تتألف هذه الشيفرة من مجموعة من القواعد ، والتي تتألف بدورها من مُحدِّد ثم قائمة بالخاصيات والقيم المُسنَدة إليها. فمثلًا لو أردنا تحديد جميع الفقرات (العنصر <p>) في مستند HTML وتحويل لونها إلى الأحمر (عبر الخاصية color) فسنكتب الشيفرة الآتية:
p {
color: red;
}
شفرة السي إس إس هي مجموعة من التعريفات لكل عنصر، وبالتالي يمكن أن يكون لدينا 100 تعريف لـ 100 عنصر وهكذا
كل تعريف يبدأ باسم أو بتعريف العنصر (كـ id أو class العنصر)
فمثلا لنأخذ العنصر div
الذي يكتب بإتش تي إم إل كـ :
<div id="ar_wiki">اهلا وسهلا بالويكي العربي</div>
سنقوم بإعطاء هذا العنصر لونا أزرق، كما نرى بالأعلى أن عنصر ديف تم تعيين المعرف ب‍ar_wiki وبالتالي يتم كتابته كـ #ar_wiki بصفحة الأنماط
لأن كل عنصر يتم تعريفه بـdiv يكون قبله (#) وأي عنصر يتم تعريفه بclass يكون قبله نقطة (.) عند كتابته بصفحة الأنماط.
وبالتالي يكون الشكل التالي هو التعريف لإعطاء العنصر اللون الأزرق:
#ar_wiki { color:blue; }
والتالي هو شرح الشفرة:
#ar_wiki: تعريف العنصر المراد تطبيق التنسيق عليه، وهو ما تم تعريف بصفحة الإتش تي إم إل لعنصر div.
{...} كل تنسيق يتم إحاطته بهذه الأقواس المعكوفة لتوضيح تنسيق كل عنصر على حده.
color: هي صفة التنسيق المراد تطبيقه على العنصر، وهنا تم وضع color أي اللون.
(:): توضع النقطتين الرئيسيتين لتوضح إن ما بعدها هو قيمة الصفة، وبالتالي هي فاصل بين الصفة وقيمتها.
blue: قيمة للصفة وهنا تم وضع القيمة blue أي الأزرق للصفة color اللون.
: يتم وضع النقطة المنقوطة بعد القيمة لإخبار المعالج أن القيمة انتهت وما سيأتي بعدها هو صفة أخرى وهكذا.
تعريف الصفة class وإضافة خواص لها
تكون هذه الخاصية لمجموعة من العناصر في الصفحة مثلاً.myclass { color:red; font-size:20px; }
<p class="myclass">يمكن تكرار هذه الخاصية بالصفحة لعناصر متعددة</p>
<p class="myclass">هذا سطر اخر بنفس الخاصية</p>الناتج سيكون تغير لون الفقرة إلى اللون الأحمر وضبط الخط إلى مقاس 20px
الخلفيات
الإطارات
شكل الإطار
برمجته وتحريره
سي إس إس هي تقنية لتطوير الويب وكما أغلب التقنيات للويب، هذه التقنية نصية، أي أن البرامج النصية كالمفكرة في ويندوز أو جي إديت في واجهة جنوم لينكس جنو، يمكنك الكتابة بها بكل سهولة.
هناك برامج تسهل عملية الكتابة وتعطي خيارات أكثر، مثل دريم ويفر أو مايكروسوفت إكسبرشن التجاريان، ولكن يظل الخيار النصي للمطورين هو الأفضل، لأن إنشاء هذه القيم تلقائيا غير محبب لمطوري الويب المهووسون بمعايير الويب.
إصداراته
الإصدار العامل حاليا من تقنية سي إس إس هو الإصدار 3، الذي صمم ليتعامل مع إتش تي إم إل5
المتصفحات والدعم الخاص فيه
تدعم متصفحات ويب المواصفة بدرجات مختلفة من الكفاءة والتوافقية؛ فبينما يدعم كل من فايرفوكس ومتصفح أوبرا المواصفة بدرجة معقولة، وبالنسبة لمتصفح إنترنت إكسبلورر فيتوقع منه نسخة جديدة معدلة لتناسب وتلبي احتياجات الويب حاليا ومايكروسوفت أعلنت عند طرحها إصدارا جديدا من متصفح إنترنت إكسبلورر (IE7) مشتملا على الكثير من الإضافات التي تجعل تصفح الإنترنت أكثر أمانا، ومنها تطبيقات مضادة لبرامج التجسس (spyware) والفيروسات ومواقع الاحتيال حيث تم بالفعل إصدار النسخة السابعة من متصفح إنترنت إكسبلورر وتم بعده إصدار نسخة جديدة تحمل الرقم 8 وفي وقتٍ لاحق تم إصدار نسخة باسم مايكروسوفت إيدج تزامنا مع إصدار ويندوز 10.
مراجع
وصلات خارجية
صفحة التقنية على موقع دبليو3
تنسيقات مفتوحة
استحداثات متعلقة بالحواسيب في 1996
تصميم الويب
صفحات الطرز المتراصة
معايير رابطة الشبكة العالمية