افتح القائمة الرئيسية

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

لغة وصفية لأنماط صفحات الويب
(بالتحويل من صفحات الطرز المتراصة)
أوراق الأنماط المتتالية
CSS.3.svg


ظهرت في 17 ديسمبر 1996; منذ 22 سنة (1996-12-17
صممها
التطوير
المطور فريق CSS
آخر إصدار 17 ديسمبر 1996  تعديل قيمة خاصية تاريخ النشر (P577) في ويكي بيانات
متفرقات
امتدادات الملفات .css
  • .صفحات الطرز المتراصة
  • .CSS3
موقع ويب الموقع الرسمي  تعديل قيمة خاصية موقع الويب الرسمي (P856) في ويكي بيانات

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

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

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

محتويات

تاريخعدل

سي إس إس 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).


برمجته وتحريرهعدل

سي إس إس هي تقنية لتطوير الويب وكما أغلب التقنيات للويب، هذه التقنية نصية، اي ان البرامج النصية كـ{[نوتباد} في ويندوز أو {Gedit} في واجهة جنوم لينكس جنو، يمكنك الكتابة بها بكل سهولة.

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

إصداراتهعدل

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

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

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

مراجععدل

  1. ^ "معلومات عن أوراق الأنماط المتتالية على موقع id.loc.gov". id.loc.gov. 
  2. ^ "معلومات عن أوراق الأنماط المتتالية على موقع psh.techlib.cz". psh.techlib.cz. 
  3. ^ "معلومات عن أوراق الأنماط المتتالية على موقع snl.no". snl.no. 

وصلات خارجيةعدل