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

أوراق الأنماط المتتالية (بالإنجليزية: Cascading Style Sheets)‏ اختصارًا: سي إس إس (بالإنجليزية: CSS)‏؛ هي لغة تنسيق لصفحات الويب تهتم بشكل وتصميم المواقع، صممت خصيصا لعزل التنسيق (الألوان - الخطوط - الأزرار....) عن محتوى المستند المكتوب (بلغة مثلا إتش تي إم إل) وينطبق ذلك على الألوان والخطوط والصور والخلفيات التي تستخدم في الصفحات، بمرونة وسهولة تامة.

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

أطلقها مجلس وب رابطة الشبكة العالمية، كمواصفة قياسية لتوصيف مظهر وثائق وب من محددات للخطوط والألوان والتنسيق.

تاريخ

سي إس إس 1

هذا القسم فارغ أوغير مكتمل، ساهم بتحريره.

سي إس إس 2

هذا القسم فارغ أوغير مكتمل، ساهم بتحريره.

سي إس إس 2.1

هذا القسم فارغ أوغير مكتمل، ساهم بتحريره.

سي إس إس 3

هذا القسم فارغ أوغير مكتمل، ساهم بتحريره.

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

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

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

بنية شيفرات سي إس إس

تتألف شيفرة CSS من مجموعة من القواعد (rules)، والتي تتألف بدورها من مُحدِّد (selector) ثم قائمة بالخاصيات والقيم المُسنَدة إليها. فمثلًا لوأردنا تحديد جميع الفقرات (العنصر <p>) في مستند HTML وتحويل لونها إلى الأحمر (عبر الخاصية color) فسنخط الشيفرة الآتية:

p {
  color: red;

شفرة السي إس إس هي مجموعة من التعريفات لكل عنصر، وبالتالي يمكن حتىقد يكون لدينا 100 تعريف لـ 100 عنصر إلى غير ذلك

كل تعريف يبدأ باسم أوبتعريف العنصر (كـ id أوclass العنصر)

فمثلا لنأخذ العنصر div

الذي يخط بإتش تي إم إل كـ :

<div id="ar_wiki">اهلا وسهلا بالويكي العربي</div>

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

لأن جميع عنصر يتم تعريفه بـdivقد يكون قبله (#) وأي عنصر يتم تعريفه بclassقد يكون قبله نقطة (.) عند كتابته بصفحة الأنماط.

وبالتاليقد يكون الشكل التالي هوالتعريف لإعطاء العنصر اللون الأزرق:

#ar_wiki { color:blue;

والتالي هوشرح الشفرة:

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

الخلفيات

الخاصية	الوصف
`background`	الخاصية `background` المختصرة في CSS تسمح لنا بتعديل خيارات تنسيق الخلفية كلها دفعةً واحدةً، بما في ذلك اللون أوالصورة، والمبدأ والحجم، وكيفية التكرار، وغير ذلك من الميزات. يمكن استعمال الخاصية `background` لضبط قيم خاصية أوأكثر من الخاصيات الآتية: `background-clip`، و`background-color`، و`background-image`، و`background-origin`، و`background-position`، و`background-repeat`، و`background-size`، و`background-attachment`.
`background-attachment`	تُحدِّد إذا كان موضع الصورة (المُحدَّدة عبر الخاصية `background-image`) ثابتًا (fixed) ضمن إطار العرض (viewport) أوكان سيُمرَّر عند التمرير في العنصر (أوالصفحة) الحاوي له.
`background-blend-mode`	تصف كيف من الممكن أن يجب حتى تمتزج صور الخلفية مع بعضها بعضًا ومع لون الخلفية المُحدَّد للعنصر.
`background-clip`	تُحدِّد كيف من الممكن أن أين ستتوقف خلفية العنصر على حدود العنصر، سواءً كانت الخلفية لونًا `<color>` أوصورةً `<image>`.
`background-color`	تضبط لون الخلفية لأحد العناصر، ويكون لون الخلفية قيمةً لونيةً `<color>`.
`background-image`	تضبط صورةً أوأكثر على أنها خلفية للعنصر.
`background-origin`	تُحدِّد مبدأ صورة الخلفية المُحدَّدة عبر الخاصية `background-image`.
`background-position`	تضبط الموضع المبدئي لكل صورة خلفية، وذلك نسبةً إلى المبدأ المُعرَّف في الخاصية `background-origin`.
`background-repeat`	تُعرِّف كيف من الممكن أن ستتكرر صورة الخلفية؛ إذ يمكن حتى تتكرر صورة الخلفية على المحور الأفقي، أوعلى المحور الرأسي، أوعلى كلا المحوري، ويمكن ألّا تتكرر أبدًا.
`background-size`	تُحدِّد أبعاد صورة الخلفية للعنصر؛ ويمكن حتى تُترَك الأبعاد الابتدائية للصورة، أوتُغيّر إلى أبعاد جديدة، أويمكن ملء المساحة المتوافرة بها مع الحفاظ على نسبة الأبعاد.
`box-shadow`	تصف تأثير الظلال على العنصر، ويمكن إضافة ظل أوأكثر باستخدام هذه الخاصية.

الإطارات

شكل الإطار

الخاصية	الوصف
`border`	الخاصية `border` في CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات التي تتحكم بإطار العنصر في آنٍ واحد، وهي: `border-color` و`border-style` و`border-width`، وكما في جميع الخاصيات المختصرة، أيّ قيمة غير مُحدِّدة سيُعاد ضبطها إلى قيمتها الابتدائية، أضف إلى ذلك أنَّ الخاصية `border` لا يمكن حتى تُستخدَم لتحديد قيمة للخاصية `border-image` وإنما ستضبِط قيمتها إلى القيمة الابتدائية `none`.
`border-bottom`	الخاصية `border-bottom` في CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات `border-bottom-color` و`border-bottom-style` و`border-bottom-width`، هذه الخاصيات تصف كيفية عرض الإطار `border` السفلي للعنصر.
`border-bottom-color`	تُحدِّد لون الإطار السفلي الخاص بالعنصر. لاحظ أنَّه في أغلبية الحالات يُفضَّل استخدام خاصيات CSS المختصرة مثل `border-color` أو`border-bottom`.
`border-bottom-style`	تُحدِّد شكل خط الإطار السفلي الخاص بالعنصر.
`border-bottom-width`	تضبط عرض الإطار السفلي للعنصر.
`border-color`	تُحدِّد لون إطار العنصر على جميع وجوهه: العلوي (`border-top-color`) والأيمن (`border-right-color`) والسفلي (`border-bottom-color`) والأيسر (`border-left-color`).
`border-image`	تسمح برسم صورة على إطار العنصر، وهذا يجعل إنشاء عناصر لها مظهر مخصص أمرًا سهلًا. ستُستخدَم الخاصية `border-image` بدلًا من أشكال الإطارات التي يمكن تعريفها عبر الخاصية `border-style`.
`border-image-outset`	تُحدِّد كم ستمتد صورة الإطار بعد الحافة الخارجية للإطار.
`border-image-repeat`	تُعرِّف كيفية عرض الجزء الأوسط من صورة الإطار لكي تُطابِق أبعاد الإطار. ويمكن استعمال قيمة واحدة لهذه الخاصية لضبط سلوك جميع الحواف، أويمكن تحديد قيمتين لضبط سلوك الحواف الأفقية والرأسية كلًا على حدة.
`border-image-slice`	تُقسِّم الصورة المُحدَّدة عبر الخاصية `border-image-source` إلى تسع مناطق: الأركان الأربعة، والحواف الأربع، والوسط.
`border-image-source`	تُعرِّف صورةً `<image>` لتُستخدَم بدلًا من الإطار، وإذا ضُبِطَت هذه الخاصية إلى `none`، فسيُستخدَم الشكل المُعرَّف في الخاصية `border-style`.
`border-image-width`	تُعرِّف عرض صورة الإطار بتحديد بعدها عن حافة الإطار الخارجية، وإذا كانت قيمة الخاصية `border-image-width` أكبر من قيمة الخاصية `border-width`، فستمتد صورة الإطار إلى ما بعد حافة الحاشية (padding) أوحافة المحتوى (content).
`border-left`	الخاصية `border-left` في CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات `border-left-color` و`border-left-style` و`border-left-width`، هذه الخاصيات تصف كيفية عرض الإطار`border` الأيسر للعنصر.
`border-left-color`	تُحدِّد لون الإطار الأيسر الخاص بالعنصر. لاحظ أنَّه في أغلبية الحالات يُفضَّل استخدام خاصيات CSS المختصرة مثل `border-color` أو`border-left`.
`border-left-style`	تُحدِّد شكل خط الإطار الأيسر الخاص بالعنصر.
`border-left-width`	تضبط عرض الإطار الأيسر للعنصر.
`border-right`	الخاصية `border-right` في CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات `border-right-color` و`border-right-style` و`border-right-width`، هذه الخاصيات تصف كيفية عرض الإطار `border` الأيمن للعنصر.
`border-right-color`	تُحدِّد لون الإطار الأيمن الخاص بالعنصر. لاحظ أنَّه في أغلبية الحالات يُفضَّل استخدام خاصيات CSS المختصرة مثل `border-color` أو`border-right`.
`border-right-style`	تُحدِّد شكل خط الإطار الأيمن الخاص بالعنصر.
`border-right-width`	تضبط عرض الإطار الأيمن للعنصر.
`border-style`	تُحدِّد شكل خط الإطار الخاص بالعنصر لجميع وجوهه (الأيمن والأيسر والعلوي والسفلي).
`border-top`	الخاصية `border-top` في CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات `border-top-color` و`border-top-style` و`border-top-width`، هذه الخاصيات تصف كيفية عرض الإطار`border` العلوي للعنصر.
`border-top-color`	تُحدِّد لون الإطار العلوي الخاص بالعنصر. لاحظ أنَّه في أغلبية الحالات يُفضَّل استخدام خاصيات CSS المختصرة مثل `border-color` أو`border-top`.
`border-top-style`	تُحدِّد شكل خط الإطار العلوي الخاص بالعنصر.
`border-top-width`	تضبط عرض الإطار العلوي للعنصر.
`border-width`	الخاصية `border-width` المختصرة في CSS تضبط عرض إطار العنصر على جميع وجوهه: العلوي (`border-top-width`) والأيمن (`border-right-width`) والسفلي (`border-bottom-width`) والأيسر (`border-left-width`).

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

سي إس إس هي تقنية لتطوير الويب وكما أغلب التقنيات للويب، هذه التقنية نصية، أي حتى البرامج النصية كالمفكرة في ويندوز أوجي إديت في قابلة جنوم لينكس جنو، تقدر الكتابة بها بكل سهولة.

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

إصداراته

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

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

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

مراجع

^ "معلومات عن أوراق الأنماط المتتالية على مسقط id.loc.gov". id.loc.gov. مؤرشف من الأصل في 28 مايو2010.
^ "معلومات عن أوراق الأنماط المتتالية على مسقط psh.techlib.cz". psh.techlib.cz. مؤرشف من الأصل في 03 أبريل 2020.
^ "معلومات عن أوراق الأنماط المتتالية على مسقط snl.no". snl.no. مؤرشف من الأصل في 20 أكتوبر 2016.