سي اس اس

هذه المقالة بحاجة إلى التحديث . الرجاء المساعدة في تحديث هذه المقالة لتعكس الأحداث الأخيرة أو المعلومات المتوفرة حديثًا. ( نوفمبر 2024 )

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

أيقونة لـ CSS3 [1]
مثال على الكود المصدر CSS
امتداد اسم الملف	.css
نوع الوسائط على الإنترنت	نص/css
معرف النوع الموحد (UTI)	ملف css عام
تم التطوير بواسطة	اتحاد شبكة الويب العالمية (W3C)
الإصدار الأولي	17 ديسمبر 1996 ؛ منذ 27 عامًا ( 1996-12-17 )
أحدث إصدار	يتم تطوير CSS 3 كوحدات منفصلة متعددة. تلخص اللقطات المنتظمة حالتها. 7 ديسمبر 2023 ؛ منذ 11 شهرًا ( 2023-12-07 )
نوع التنسيق	لغة ورقة الأنماط
حاوية ل	قواعد الأسلوب لعناصر HTML (العلامات)
يحتوي عليه	مستندات HTML
تنسيق مفتوح ؟	نعم
موقع إلكتروني	w3.org/TR/CSS/#css

CSS ( Cascading Style Sheets ) هي لغة ورقة أنماط تستخدم لتحديد عرض وتصميم مستند مكتوب بلغة ترميز مثل HTML أو XML (بما في ذلك لهجات XML مثل SVG أو MathML أو XHTML ). ^[2] CSS هي تقنية أساسية للويب العالمي ، إلى جانب HTML و JavaScript . ^[3]

تم تصميم CSS لتمكين فصل المحتوى عن العرض ، بما في ذلك التخطيط والألوان والخطوط . ^[4] يمكن أن يؤدي هذا الفصل إلى تحسين إمكانية الوصول إلى المحتوى ، حيث يمكن كتابة المحتوى دون الاهتمام بعرضه؛ وتوفير المزيد من المرونة والتحكم في تحديد خصائص العرض؛ وتمكين صفحات الويب المتعددة من مشاركة التنسيق من خلال تحديد CSS ذات الصلة في ملف .css منفصل، مما يقلل من التعقيد والتكرار في المحتوى الهيكلي؛ وتمكين تخزين ملف .css مؤقتًا لتحسين سرعة تحميل الصفحة بين الصفحات التي تشترك في الملف وتنسيقه.

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

يأتي اسم "التتابع" من مخطط الأولوية المحدد لتحديد الإعلان الذي ينطبق إذا تطابق أكثر من إعلان لخاصية مع عنصر معين. مخطط الأولوية المتتالي هذا يمكن التنبؤ به.

يتم صيانة مواصفات CSS بواسطة اتحاد شبكة الويب العالمية (W3C). تم تسجيل نوع الوسائط على الإنترنت ( نوع MIME ) text/cssللاستخدام مع CSS بواسطة RFC 2318 (مارس 1998). تدير W3C خدمة مجانية للتحقق من صحة CSS لمستندات CSS. ^[6]

بالإضافة إلى HTML، تدعم لغات الترميز الأخرى استخدام CSS بما في ذلك XHTML و XML البسيط و SVG و XUL . كما يتم استخدام CSS في مجموعة أدوات GTK .

يتمتع CSS بتركيب نحوي بسيط ويستخدم عددًا من الكلمات الأساسية باللغة الإنجليزية لتحديد أسماء خصائص النمط المختلفة.

تتكون ورقة الأنماط من قائمة من القواعد . تتكون كل قاعدة أو مجموعة قواعد من محدد واحد أو أكثر وكتلة إعلان .

في CSS، تقوم المحددات بالإعلان عن أي جزء من العلامات ينطبق عليه النمط من خلال مطابقة العلامات والسمات في العلامات نفسها.

يمكن للمختارين التقدم إلى ما يلي:

• جميع العناصر من نوع معين، على سبيل المثال، عناوين المستوى الثاني h2
• العناصر المحددة بواسطة السمة ، على وجه الخصوص:
  • معرف : معرف فريد داخل المستند، يتم الإشارة إليه في لغة التحديد بواسطة بادئة تجزئة مثل#id
  • الفئة : معرف يمكنه التعليق على عناصر متعددة في مستند، يتم الإشارة إليه بواسطة بادئة نقطة على سبيل المثال .classname(عبارة "فئة CSS"، على الرغم من استخدامها في بعض الأحيان، فهي تسمية خاطئة، حيث أن فئات العناصر - المحددة بسمة فئة HTML - هي ميزة ترميز مميزة عن نظام CSS الفرعي للمتصفحات ومعايير W3C/WHATWG ذات الصلة التي تعمل على أنماط المستندات؛ راجع RDF و microformats لمعرفة أصول نظام "الفئة" لنموذج محتوى الويب)
• العناصر اعتمادًا على كيفية وضعها بالنسبة إلى العناصر الأخرى في شجرة المستند .

الفئات والمعرفات حساسة لحالة الأحرف، وتبدأ بالأحرف، ويمكن أن تتضمن أحرفًا أبجدية رقمية وعلامات وصل وشرطات سفلية. يمكن تطبيق الفئة على أي عدد من حالات أي عنصر. لا يمكن تطبيق المعرف إلا على عنصر واحد.

يتم استخدام الفئات الزائفة في محددات CSS للسماح بالتنسيق بناءً على المعلومات غير الموجودة في شجرة المستند.

أحد الأمثلة على الفئة الزائفة المستخدمة على نطاق واسع هي ، والتي تحدد المحتوى فقط عندما "يشير" المستخدم إلى العنصر المرئي، عادةً عن طريق وضع مؤشر الماوس فوقه. يتم إضافتها إلى محدد كما في أو . :hovera:hover#elementid:hover

تصنف الفئة الزائفة عناصر المستند، مثل أو ، بينما يقوم العنصر الزائف بإجراء تحديد قد يتكون من عناصر جزئية، مثل أو . ^[7] لاحظ التمييز بين تدوين النقطتين المزدوجتين المستخدم للعناصر الزائفة وتدوين النقطتين المفردتين المستخدم للفئات الزائفة. :link:visited::first-line::first-letter

يمكن ربط محددات بسيطة متعددة باستخدام مجموعات لتحديد العناصر حسب الموقع أو نوع العنصر أو المعرف أو الفئة أو أي مجموعة منها. ^[8] ترتيب المحددات مهم. على سبيل المثال، ينطبق على جميع عناصر الفئة myClass الموجودة داخل عناصر div، بينما ينطبق على جميع عناصر div الموجودة داخل عناصر الفئة myClass. لا ينبغي الخلط بين هذا والمعرفات المتسلسلة مثل التي تنطبق على عناصر div من الفئة myClass. div .myClass {color: red;}.myClass div {color: red;}div.myClass {color: red;}

يوفر الجدول التالي ملخصًا لقواعد نحوية المحدد التي تشير إلى الاستخدام وإصدار CSS الذي قدمه. ^[9]

تتكون كتلة الإعلان من زوج من الأقواس ( {}) التي تحيط بقائمة من الإعلانات مفصولة بفاصلة منقوطة . ^[10]

يتكون كل إعلان بحد ذاته من خاصية وعلامة نقطتين ( :) وقيمة . يمكن أن تكون هناك مسافة بيضاء اختيارية حول كتلة الإعلان والإعلانات والعلامات النقطية والفاصلات المنقوطة لسهولة القراءة. ^[11]

يتم تحديد الخصائص في معيار CSS. كل خاصية لها مجموعة من القيم المحتملة. يمكن لبعض الخصائص أن تؤثر على أي نوع من العناصر، والبعض الآخر ينطبق فقط على مجموعات معينة من العناصر. ^{[12] [13]}

يمكن أن تكون القيم عبارة عن كلمات رئيسية، مثل "مركز" أو "وراثة"، أو قيم عددية، مثل 200px(200 بكسل)، 50vw(50 بالمائة من عرض منفذ العرض) أو 80% (80 بالمائة من عرض العنصر الرئيسي).

يمكن تحديد قيم الألوان باستخدام الكلمات الأساسية (على سبيل المثال " red")، أو القيم السداسية العشرية (على سبيل المثال ، والتي يتم اختصارها أيضًا باسم )، أو قيم RGB على مقياس من 0 إلى 255 (على سبيل المثال )، أو قيم RGBA التي تحدد كل من اللون وشفافية ألفا (على سبيل المثال )، أو قيم HSL أو HSLA (على سبيل المثال ، ). ^[14]#FF0000#F00rgb(255, 0, 0)rgba(255, 0, 0, 0.8)hsl(0 100% 50%)hsl(0 100% 50% / 0.8)

يجب أن تتضمن القيم الرقمية غير الصفرية التي تمثل المقاييس الخطية وحدة طول، وهي إما رمز أبجدي أو اختصار، كما في 200pxأو 50vw؛ أو علامة نسبة مئوية، كما في 80%. بعض الوحدات - cm( سنتيمتر )؛ in( بوصة )؛ mm( ملليمتر )؛ pc( بيكا )؛ و pt( نقطة ) - مطلقة ، مما يعني أن البعد المرسوم لا يعتمد على بنية الصفحة؛ والبعض الآخر - em( em )؛ ex( ex ) و px( بكسل ) ^{[ يحتاج إلى توضيح ]} - نسبي ، مما يعني أن عوامل مثل حجم الخط لعنصر الأصل يمكن أن تؤثر على القياس المرسوم. كانت هذه الوحدات الثماني ميزة من ميزات CSS 1 ^[15] وتم الاحتفاظ بها في جميع المراجعات اللاحقة. ستوفر وحدة القيم والوحدات CSS المقترحة المستوى 3، إذا تم اعتمادها كتوصية W3C، سبع وحدات طول أخرى: ch؛ Q؛ rem؛ vh؛ vmax؛ vmin؛ و vw. ^[16]

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

على سبيل المثال، يتم تعريف العناوين ( العناصر h1) والعناوين الفرعية ( h2) والعناوين الفرعية الفرعية ( h3) وما إلى ذلك، هيكليًا باستخدام HTML. في الطباعة وعلى الشاشة، يكون اختيار الخط والحجم واللون والتأكيد على هذه العناصر عرضيًا .

قبل CSS، كان مؤلفو المستندات الذين يريدون تعيين مثل هذه الخصائص المطبعية ، على سبيل المثال، لجميع h2العناوين، مضطرين إلى تكرار ترميز العرض HTML لكل ظهور لهذا النوع من العناوين. أدى هذا إلى جعل المستندات أكثر تعقيدًا وأكبر حجمًا وأكثر عرضة للخطأ وصعوبة في الصيانة. يسمح CSS بفصل العرض عن البنية. يمكن لـ CSS تحديد اللون والخط ومحاذاة النص والحجم والحدود والتباعد والتخطيط والعديد من الخصائص المطبعية الأخرى، ويمكنه القيام بذلك بشكل مستقل للعرض على الشاشة والمطبوعة. يحدد CSS أيضًا الأنماط غير المرئية، مثل سرعة القراءة والتأكيد لقراء النصوص السمعية. أوقفت W3C الآن استخدام جميع ترميز العرض HTML. ^[17]

على سبيل المثال، في HTML ما قبل CSS، سيتم كتابة عنصر العنوان المحدد بنص أحمر على النحو التالي:

< h1 >< font  color = "red" > الفصل الأول. </ font ><</ h1 >

باستخدام CSS، يمكن ترميز نفس العنصر باستخدام خصائص النمط بدلاً من سمات العرض HTML:

< h1  style = "color: red;" > الفصل الأول. </ h1 >

قد لا تكون مزايا هذا واضحة على الفور، لكن قوة CSS تصبح أكثر وضوحًا عندما يتم وضع خصائص النمط في عنصر نمط داخلي أو، والأفضل من ذلك، ملف CSS خارجي. على سبيل المثال، افترض أن المستند يحتوي على عنصر النمط:

<style> h1 { اللون : أحمر ؛ } </style>​​
​​     
         
    

ستتحول جميع h1العناصر في المستند تلقائيًا إلى اللون الأحمر دون الحاجة إلى أي تعليمات برمجية صريحة. إذا أراد المؤلف لاحقًا تحويل h1العناصر إلى اللون الأزرق، فيمكن القيام بذلك عن طريق تغيير عنصر النمط إلى:

<style> h1 { اللون : أزرق ؛ } </style>​​
​​     
         
    

بدلاً من البحث المجهد في المستند وتغيير اللون لكل h1عنصر على حدة.

يمكن أيضًا وضع الأنماط في ملف CSS خارجي، كما هو موضح أدناه، وتحميلها باستخدام بناء جملة مشابه لما يلي:

< الرابط  href = "path/to/file.css"  rel = "stylesheet"  النوع = "text/css" >

يؤدي هذا إلى فصل التصميم عن مستند HTML بشكل أكبر ويجعل من الممكن إعادة تصميم مستندات متعددة ببساطة عن طريق تحرير ملف CSS خارجي مشترك.

تقدم CSS، أو Cascading Style Sheets، طريقة مرنة لتصميم محتوى الويب، مع أنماط تنشأ من الإعدادات الافتراضية للمتصفح أو تفضيلات المستخدم أو مصممي الويب. يمكن تطبيق هذه الأنماط بشكل مضمّن أو داخل مستند HTML أو من خلال ملفات .css خارجية لتحقيق اتساق أوسع. لا يعمل هذا على تبسيط تطوير الويب من خلال تعزيز إمكانية إعادة الاستخدام والصيانة فحسب، بل إنه يحسن أيضًا من أداء الموقع لأنه يمكن تفريغ الأنماط في ملفات .css مخصصة يمكن للمتصفحات تخزينها مؤقتًا. بالإضافة إلى ذلك، حتى إذا تعذر تحميل الأنماط أو تم تعطيلها، فإن هذا الفصل يحافظ على إمكانية الوصول إلى المحتوى وقابليته للقراءة، مما يضمن إمكانية استخدام الموقع لجميع المستخدمين، بما في ذلك ذوي الإعاقة. يضمن نهجها المتعدد الأوجه، بما في ذلك الاعتبارات الخاصة بتحديد المحدد وترتيب القواعد وأنواع الوسائط، أن تكون مواقع الويب متماسكة بصريًا وقابلة للتكيف عبر الأجهزة المختلفة واحتياجات المستخدم، مما يحقق التوازن بين نية التصميم وإمكانية وصول المستخدم.

يمكن استيراد أوراق أنماط متعددة. ويمكن تطبيق أنماط مختلفة حسب جهاز الإخراج المستخدم؛ على سبيل المثال، يمكن أن تكون نسخة الشاشة مختلفة تمامًا عن النسخة المطبوعة، وبالتالي يمكن للمؤلفين تخصيص العرض بشكل مناسب لكل وسيلة.

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

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

تشير الخصوصية إلى الأوزان النسبية للقواعد المختلفة. ^[18] وهي تحدد الأنماط التي تنطبق على عنصر عندما يمكن تطبيق أكثر من قاعدة واحدة. بناءً على المواصفات، فإن محددًا بسيطًا (مثل H1) له خصوصية 1، ومحددات الفئة لها خصوصية 1,0، ومحددات المعرف لها خصوصية 1,0,0. ولأن قيم الخصوصية لا تنتقل كما هو الحال في النظام العشري، يتم استخدام الفواصل لفصل "الأرقام" ^[19] (قاعدة CSS التي تحتوي على 11 عنصرًا و11 فئة سيكون لها خصوصية 11,11، وليس 121).

وبالتالي فإن محددات القاعدة التالية تؤدي إلى الخصوصية المشار إليها:

خذ بعين الاعتبار هذا الجزء من HTML:

<!DOCTYPE html> 
< html > 
    < head > 
        < meta  charset = "utf-8" > 
        < style > 
# xyz { color : blue ; } </ style > </ head > < body > < p id = "xyz" style = "color: green;" > لتوضيح الخصوصية </ p > </ body > </ html >                
        
    
    
          
    

في المثال أعلاه، يتغلب الإعلان الموجود في styleالسمة على الإعلان الموجود في <style>العنصر لأنه يتمتع بخصوصية أعلى، وبالتالي، تظهر الفقرة باللون الأخضر:

الوراثة هي ميزة أساسية في CSS؛ فهي تعتمد على علاقة السلف بالذرية للعمل. الوراثة هي الآلية التي يتم من خلالها تطبيق الخصائص ليس فقط على عنصر محدد ولكن أيضًا على أحفاده. ^[18] تعتمد الوراثة على شجرة المستند، وهي التسلسل الهرمي لعناصر XHTML في الصفحة بناءً على التعشيش. قد ترث العناصر المنحدرة قيم خصائص CSS من أي عنصر سلف يحيط بها. بشكل عام، ترث العناصر المنحدرة خصائص متعلقة بالنص، لكن خصائصها المتعلقة بالمربع لا ترث. الخصائص التي يمكن توريثها هي اللون والخط وتباعد الحروف وارتفاع السطر ونمط القائمة ومحاذاة النص والمسافة البادئة للنص وتحويل النص والرؤية والمسافة البيضاء ومسافة الكلمات. الخصائص التي لا يمكن وراثتها هي الخلفية، والحدود، والعرض، والطفو والمسح، والارتفاع، والعرض، والهامش، والحد الأدنى والأقصى للارتفاع والعرض، والمخطط التفصيلي، والفيض، والحشو، والموضع، وتزيين النص، والمحاذاة الرأسية، ومؤشر z.

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

لا يعد الوراثة في CSS مثل الوراثة في لغات البرمجة القائمة على الفئة ، حيث من الممكن تعريف الفئة B على أنها "مثل الفئة A، ولكن مع التعديلات". ^[20] مع CSS، من الممكن تصميم عنصر بـ "الفئة A، ولكن مع التعديلات". ومع ذلك، ليس من الممكن تعريف فئة CSS B على هذا النحو، والتي يمكن استخدامها بعد ذلك لتصميم عناصر متعددة دون الحاجة إلى تكرار التعديلات.

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

ص { اللون : وردي ؛ } 
    

افترض أن هناك عنصر ap مع عنصر التأكيد ( <em>) بداخله:

< p > 
   هذا لتوضيح الميراث < / p >​​​
​​

إذا لم يتم تعيين لون لعنصر em، فإن الكلمة المميزة "illustrate" ترث لون العنصر الأصلي، p. تحتوي ورقة الأنماط p على اللون الوردي، وبالتالي، فإن عنصر em وردي أيضًا:

يتم تجاهل المسافة البيضاء بين الخصائص والمحددات. مقتطف التعليمات البرمجية هذا:

الجسم { الفائض : مخفي ؛ الخلفية : #000000 ؛ صورة الخلفية : عنوان URL ( images/bg.gif )؛ تكرار الخلفية : عدم التكرار ؛ موضع الخلفية : أعلى اليسار ؛} 

يعادل هذا وظيفيًا:

الجسم { الفائض : مخفي ؛ لون الخلفية : #000000 ؛ صورة الخلفية : عنوان URL ( images/bg.gif )؛ تكرار الخلفية : عدم التكرار ؛ موضع الخلفية : أعلى اليسار ؛ } 
    
    
    
    
     

إحدى الطرق الشائعة لتنسيق CSS لسهولة القراءة هي وضع مسافة بادئة لكل خاصية وإعطائها سطرًا خاصًا بها. بالإضافة إلى تنسيق CSS لسهولة القراءة، يمكن استخدام خصائص الاختزال لكتابة الكود بشكل أسرع، والذي تتم معالجته أيضًا بشكل أسرع عند عرضه: ^[21]

الجسم { الفائض : مخفي ؛ الخلفية : #000 عنوان URL ( images/bg.gif ) بدون تكرار أعلى اليسار ؛ } 
    
        

في بعض الأحيان، يتم إدراج قيم خصائص متعددة في سطر خاص بها:

@ font-face { عائلة الخطوط : 'Comic Sans' ؛ حجم الخط : 20 بكسل ؛ المصدر : url ( 'first.example.com' )، url ( 'second.example.com' )، url ( 'third.example.com' )، url ( 'fourth.example.com' )؛ } 
    
    
    
        
        
        

يحدد CSS 2.1 ثلاثة مخططات تحديد المواقع:

التدفق الطبيعي

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

عوامات

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

التموضع المطلق

لا يوجد مكان للعنصر الذي يتم وضعه بشكل مطلق في التدفق الطبيعي للعناصر الأخرى، ولا يؤثر عليه. فهو يشغل موضعه المخصص في الحاوية الخاصة به بشكل مستقل عن العناصر الأخرى. ^[22]

هناك خمس قيم محتملة للخاصية position. إذا تم وضع عنصر بطريقة مختلفة عن static، فسيتم استخدام الخصائص الإضافية top، bottom، left، و rightلتحديد الإزاحات والمواضع. لا يتأثر العنصر الذي له موضع ثابت بالخصائص top، bottom، leftأو right.

القيمة الافتراضية تضع العنصر في التدفق الطبيعي .

يتم وضع العنصر في التدفق الطبيعي ، ثم يتم نقله أو إزاحته من هذا الموضع. يتم وضع عناصر التدفق اللاحقة كما لو لم يتم نقل العنصر.

يحدد الموضع المطلق . يتم وضع العنصر بالنسبة لأقرب سلف غير ثابت له.

يتم وضع العنصر بشكل مطلق في موضع ثابت على الشاشة حتى أثناء تمرير بقية المستند ^[22]

floatقد يكون للخاصية واحدة من ثلاث قيم. لا يمكن تعويم العناصر المحددة أو الثابتة بشكل مطلق . تتدفق العناصر الأخرى عادةً حول العناصر العائمة، ما لم تمنعها خاصيتها من القيام بذلك. clear

غادر

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

يمين

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

واضح

يجبر العنصر على الظهور أسفل العناصر العائمة ('مسح') إلى اليسار ( ) أو اليمين ( ) أو كلا الجانبين ( ). ^{[22] [23]}clear:leftclear:rightclear:both

تم اقتراح CSS لأول مرة بواسطة Håkon Wium Lie في 10 أكتوبر 1994. ^[24] في ذلك الوقت، كان Lie يعمل مع Tim Berners-Lee في CERN . ^[25] تم اقتراح العديد من لغات أوراق الأنماط الأخرى للويب في نفس الوقت تقريبًا، وأسفرت المناقشات على قوائم البريد العامة وداخل اتحاد شبكة الويب العالمية عن إصدار أول توصية CSS لـ W3C (CSS1) ^[26] في عام 1996. على وجه الخصوص، كان اقتراح Bert Bos مؤثرًا؛ أصبح مؤلفًا مشاركًا في CSS1، ويُعتبر أحد المشاركين في إنشاء CSS. ^[27]

كانت أوراق الأنماط موجودة بشكل أو بآخر منذ بدايات لغة ترميز النصوص القياسية المعممة ( SGML ) في الثمانينيات، وتم تطوير CSS لتوفير أوراق الأنماط للويب. ^[28] كان أحد متطلبات لغة أوراق الأنماط للويب هو أن تأتي أوراق الأنماط من مصادر مختلفة على الويب. لذلك، لم تكن لغات أوراق الأنماط الموجودة مثل DSSSL و FOSI مناسبة. من ناحية أخرى، تسمح CSS لأسلوب المستند بالتأثر بأوراق أنماط متعددة من خلال الأنماط "المتتالية". ^[28]

مع نمو HTML، أصبح يشمل مجموعة متنوعة من القدرات الأسلوبية لتلبية متطلبات مطوري الويب . أعطى هذا التطور المصمم مزيدًا من التحكم في مظهر الموقع، على حساب HTML أكثر تعقيدًا. جعلت الاختلافات في تنفيذات متصفح الويب ، مثل ViolaWWW و WorldWideWeb ، ^[29] المظهر المتسق للموقع صعبًا، وكان لدى المستخدمين سيطرة أقل على كيفية عرض محتوى الويب. كان المتصفح/المحرر الذي طوره تيم بيرنرز لي يحتوي على أوراق أنماط تم ترميزها في البرنامج. وبالتالي لا يمكن ربط أوراق الأنماط بالمستندات الموجودة على الويب. ^{[25] أراد} روبرت كايو ، أيضًا من سيرن، فصل البنية عن العرض بحيث يمكن لأوراق الأنماط المختلفة وصف عرض مختلف للطباعة والعروض التقديمية القائمة على الشاشة والمحررين. ^[29]

كان تحسين قدرات عرض الويب موضوعًا مثيرًا للاهتمام للعديد من أفراد مجتمع الويب وتم اقتراح تسع لغات مختلفة لأوراق الأنماط على قائمة بريدية www-style. ^[28] من بين هذه المقترحات التسعة، كان اثنان مؤثرين بشكل خاص على ما أصبح CSS: أوراق أنماط HTML المتتالية ^[24] واقتراح أوراق الأنماط المستندة إلى التدفق (SSP). ^{[27] [30]} عمل متصفحان كمنصة اختبار للمقترحات الأولية؛ عمل لي مع إيف لافون لتنفيذ CSS في متصفح Arena الخاص بـ Dave Raggett . ^{[31] [32] [33]} نفذ بيرت بوس اقتراحه الخاص لأوراق الأنماط في متصفح Argo . ^[27] بعد ذلك، عمل لي وبوس معًا لتطوير معيار CSS (تم إزالة الحرف "H" من الاسم لأن أوراق الأنماط هذه يمكن أيضًا تطبيقها على لغات ترميز أخرى إلى جانب HTML). ^[25]

تم تقديم اقتراح لي في مؤتمر "Mosaic and the Web" (الذي سمي لاحقًا WWW2) في شيكاغو، إلينوي في عام 1994، ومرة ​​أخرى مع بيرت بوس في عام 1995. ^[25] في هذا الوقت تقريبًا، كانت W3C قد تأسست بالفعل واهتمت بتطوير CSS. وقد نظمت ورشة عمل لتحقيق هذه الغاية برئاسة ستيفن بيمبرتون . أدى هذا إلى إضافة W3C للعمل على CSS إلى مخرجات مجلس مراجعة تحرير HTML (ERB). كان لي وبوس الموظفين الفنيين الأساسيين في هذا الجانب من المشروع، مع مشاركة أعضاء إضافيين، بما في ذلك توماس ريدون من Microsoft. في أغسطس 1996، قدمت شركة Netscape Communication Corporation لغة جدول أنماط بديلة تسمى JavaScript Style Sheets (JSSS). ^[25] لم يتم الانتهاء من المواصفات أبدًا، وهي قديمة. ^[34] بحلول نهاية عام 1996، كانت CSS جاهزة لتصبح رسمية، وتم نشر توصية CSS المستوى 1 في ديسمبر.

كان تطوير HTML وCSS و DOM يتم في مجموعة واحدة، وهي هيئة مراجعة تحرير HTML (ERB). في أوائل عام 1997، تم تقسيم ERB إلى ثلاث مجموعات عمل: مجموعة عمل HTML ، برئاسة دان كونولي من W3C؛ ومجموعة عمل DOM، برئاسة لورين وود من SoftQuad ؛ ومجموعة عمل CSS ، برئاسة كريس ليلي من W3C.

بدأت مجموعة عمل CSS في معالجة المشكلات التي لم يتم تناولها في CSS المستوى 1، مما أدى إلى إنشاء CSS المستوى 2 في 4 نوفمبر 1997. وتم نشره كتوصية W3C في 12 مايو 1998. لا يزال CSS المستوى 3، الذي بدأ في عام 1998، قيد التطوير اعتبارًا من عام 2014 ^[update].

في عام 2005، قررت مجموعات عمل CSS فرض متطلبات المعايير بشكل أكثر صرامة. وهذا يعني أن المعايير المنشورة بالفعل مثل CSS 2.1 وCSS 3 Selectors وCSS 3 Text تم سحبها من مستوى Candidate Recommendation إلى مستوى Working Draft.

تم الانتهاء من مواصفات CSS 1 في عام 1996. تم إصدار متصفح Internet Explorer 3 من Microsoft ^{[25] في ذلك العام، والذي يتميز ببعض الدعم المحدود لـ CSS. أضاف} IE 4 و Netscape 4.x المزيد من الدعم، لكنه كان غير مكتمل عادةً وكان به العديد من الأخطاء التي منعت اعتماد CSS بشكل مفيد. لقد مر أكثر من ثلاث سنوات قبل أن يحقق أي متصفح ويب التنفيذ الكامل تقريبًا للمواصفات. كان Internet Explorer 5.0 لجهاز Macintosh ، الذي تم شحنه في مارس 2000، أول متصفح يتمتع بدعم CSS 1 الكامل (أفضل من 99 بالمائة)، ^[35] متجاوزًا Opera ، الذي كان الرائد منذ تقديمه لدعم CSS قبل خمسة عشر شهرًا. تبعته متصفحات أخرى بعد ذلك بفترة وجيزة، وقام العديد منها أيضًا بتنفيذ أجزاء من CSS 2.

ومع ذلك، حتى عندما بدأت متصفحات الويب "الإصدار 5" اللاحقة في تقديم تنفيذ كامل إلى حد ما لـ CSS، كانت لا تزال غير صحيحة في مناطق معينة. كانت محفوفة بالتناقضات والأخطاء وغيرها من العيوب . كان لدى Microsoft Internet Explorer 5.x لنظام التشغيل Windows ، على عكس IE المختلف تمامًا لنظام التشغيل Macintosh ، تنفيذًا معيبًا لنموذج CSS box ، مقارنةً بمعايير CSS. جعلت مثل هذه التناقضات والاختلافات في دعم الميزات من الصعب على المصممين تحقيق مظهر متسق عبر المتصفحات والمنصات دون استخدام الحلول البديلة المسماة اختراقات ومرشحات CSS . كانت أخطاء نموذج IE box لنظام التشغيل Windows خطيرة للغاية لدرجة أنه عندما تم إصدار Internet Explorer 6 ، قدمت Microsoft وضعًا متوافقًا مع الإصدارات السابقة لتفسير CSS (" وضع العيوب ") إلى جانب "وضع المعايير" البديل المصحح. كما قدمت متصفحات أخرى غير Microsoft إمكانيات تبديل الوضع. لذلك، أصبح من الضروري لمؤلفي ملفات HTML التأكد من أنها تحتوي على علامة مميزة خاصة "CSS مخصصة متوافقة مع المعايير" لإثبات أن المؤلفين قصدوا أن يتم تفسير CSS بشكل صحيح، وفقًا للمعايير، على عكس أن تكون مخصصة لمتصفح IE5/Windows الذي عفا عليه الزمن منذ فترة طويلة . بدون هذه العلامة، ستقوم متصفحات الويب التي تتمتع بإمكانية تبديل "وضع الغرائب" بتحديد حجم الكائنات في صفحات الويب كما يفعل IE 5 على Windows، بدلاً من اتباع معايير CSS.

أدت المشاكل المتعلقة بالتبني غير المنتظم لـ CSS والأخطاء في المواصفات الأصلية إلى قيام W3C بمراجعة معايير CSS 2 إلى CSS 2.1، والتي اقتربت من لقطة عمل لدعم CSS الحالي في متصفحات HTML. تم إسقاط بعض خصائص CSS 2 التي لم ينفذها أي متصفح بنجاح، وفي حالات قليلة، تم تغيير السلوكيات المحددة لجعل المعيار متوافقًا مع التنفيذات الحالية السائدة. أصبح CSS 2.1 توصية مرشحة في 25 فبراير 2004، ولكن تم سحب CSS 2.1 إلى حالة المسودة العاملة في 13 يونيو 2005، ^[36] ولم يعد إلى حالة التوصية المرشحة إلا في 19 يوليو 2007. ^[37]

بالإضافة إلى هذه المشاكل، .cssتم استخدام الامتداد بواسطة منتج برمجي يستخدم لتحويل ملفات PowerPoint إلى ملفات عرض شرائح مضغوطة، ^[38] لذلك قامت بعض خوادم الويب بخدمة جميع .css^[39] أنواع الملفات كنوع MIME application/x-pointplus^[40] وليس text/css.

في بعض الأحيان، كان بائعو المتصفحات الفردية يقدمون معلمات جديدة قبل التوحيد القياسي والتعميم. ولمنع التدخل في التنفيذات المستقبلية، أضاف البائعون أسماء فريدة للمعلمات، مثل -moz-Mozilla Firefox ، -webkit-الذي سمي على اسم محرك التصفح الخاص بـ Apple Safari ، -o-ومتصفح Opera ، و Microsoft Internet Explorer-ms- والإصدارات المبكرة من Microsoft Edge التي تستخدم EdgeHTML.

في بعض الأحيان، يكون للمعلمات التي تحمل بادئات البائع مثل -moz-radial-gradientو -webkit-linear-gradientقواعد نحوية مختلفة قليلاً مقارنة بنظيراتها التي لا تحمل بادئات البائع. ^[41]

تصبح الخصائص ذات البادئات قديمة بحلول وقت التوحيد القياسي. تتوفر برامج لإضافة البادئات تلقائيًا للمتصفحات القديمة والإشارة إلى الإصدارات القياسية للمعلمات ذات البادئات. نظرًا لأن البادئات مقتصرة على مجموعة فرعية صغيرة من المتصفحات، فإن إزالة البادئة تسمح للمتصفحات الأخرى برؤية الوظيفة. الاستثناء هو بعض -webkit-الخصائص ذات البادئات القديمة، والتي أصبحت شائعة ومستمرة على الويب لدرجة أن عائلات أخرى من المتصفحات قررت دعمها للتوافق. ^[42]

تحتوي لغة CSS على مستويات وملفات تعريف مختلفة. يعتمد كل مستوى من مستويات CSS على المستوى السابق، ويضيف عادةً ميزات جديدة، وعادةً ما يشار إليه ^[43] بـ CSS 1 وCSS 2 وCSS 3 وCSS 4. عادةً ما تكون الملفات التعريفية مجموعة فرعية من مستوى أو أكثر من مستويات CSS المصممة لجهاز أو واجهة مستخدم معينة. حاليًا، توجد ملفات تعريف للأجهزة المحمولة والطابعات وأجهزة التلفزيون. لا ينبغي الخلط بين الملفات التعريفية وأنواع الوسائط، التي تمت إضافتها في CSS 2.

أول مواصفات CSS تصبح توصية رسمية من W3C هي CSS المستوى 1، والتي نُشرت في 17 ديسمبر 1996. يُنسب الفضل إلى Håkon Wium Lie و Bert Bos كمطورين أصليين. ^{[44] [45]} ومن بين قدراتها دعم

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

لم تعد W3C تحافظ على توصية CSS 1. ^[46]

تم تطوير مواصفات CSS المستوى 2 بواسطة W3C ونشرها كتوصية في مايو 1998. تتضمن مجموعة فرعية من CSS 1 وCSS 2 عددًا من القدرات الجديدة مثل الموضع المطلق والنسبي والثابت للعناصر و z-index ، ومفهوم أنواع الوسائط، ودعم أوراق الأنماط السمعية (التي تم استبدالها لاحقًا بوحدات الكلام CSS 3) ^[47] والنص ثنائي الاتجاه، وخصائص الخط الجديدة مثل الظلال.

لم تعد W3C تدعم توصية CSS 2. ^[48]

غالبًا ما يُشار إلى CSS level 2 revision 1 باسم "CSS 2.1"، وهو يعمل على إصلاح الأخطاء في CSS 2 وإزالة الميزات التي لا يتم دعمها بشكل جيد أو التي لا تتوافق مع بعضها البعض بشكل كامل وإضافة ملحقات المتصفح التي تم تنفيذها بالفعل إلى المواصفات. وللامتثال لعملية W3C لتوحيد المواصفات الفنية، انتقلت CSS 2.1 ذهابًا وإيابًا بين حالة المسودة العاملة وحالة التوصية المرشحة لسنوات عديدة. أصبحت CSS 2.1 توصية مرشحة لأول مرة في 25 فبراير 2004، لكنها عادت إلى مسودة عمل في 13 يونيو 2005 لمزيد من المراجعة. ثم عادت إلى توصية مرشحة في 19 يوليو 2007 ثم تم تحديثها مرتين في عام 2009. ومع ذلك، نظرًا لإجراء تغييرات وتوضيحات، فقد عادت مرة أخرى إلى مسودة العمل الأخيرة في 7 ديسمبر 2010.

تم تقديم CSS 2.1 إلى التوصية المقترحة في 12 أبريل 2011. ^[49] بعد مراجعتها من قبل اللجنة الاستشارية لـ W3C، تم نشرها أخيرًا كتوصية لـ W3C في 7 يونيو 2011. ^[50]

كان من المخطط أن يكون CSS 2.1 هو المراجعة الأولى والأخيرة للمستوى 2، ولكن العمل ذو الأولوية المنخفضة على CSS 2.2 بدأ في عام 2015.

على عكس CSS 2، الذي يعتبر مواصفة واحدة كبيرة تحدد ميزات مختلفة، فإن CSS 3 مقسمة إلى عدة مستندات منفصلة تسمى "وحدات". تضيف كل وحدة قدرات جديدة أو توسع الميزات المحددة في CSS 2، مع الحفاظ على التوافق مع الإصدارات السابقة. بدأ العمل على CSS level 3 في وقت نشر توصية CSS 2 الأصلية. نُشرت أقدم مسودات CSS 3 في يونيو 1999. ^[51]

بسبب التجميع، تتمتع الوحدات المختلفة باستقرار وحالات مختلفة. ^[52]

تتمتع بعض الوحدات بحالة توصية المرشح ( CR ) وتعتبر مستقرة إلى حد ما. في مرحلة التوصية بالمرشح ، يُنصح التنفيذات بالتخلي عن بادئات البائعين. ^[53]

لا توجد مواصفة CSS4 واحدة متكاملة، ^[55] لأن المواصفة تم تقسيمها إلى العديد من الوحدات المنفصلة التي يتم تسويتها بشكل مستقل.

بدأت الوحدات النمطية التي تم بناؤها على أشياء من CSS المستوى 2 في المستوى 3. بعضها وصل بالفعل إلى المستوى 4 أو يقترب بالفعل من المستوى 5. تم تصنيف وحدات نمطية أخرى تحدد وظائف جديدة تمامًا، مثل Flexbox ، ^[56] على أنها المستوى 1 وبعضها يقترب من المستوى 2.

تنشر مجموعة عمل CSS أحيانًا "Snapshots"، وهي مجموعة من الوحدات النمطية الكاملة وأجزاء من مسودات أخرى تعتبر مستقرة بما يكفي ليتم تنفيذها بواسطة مطوري المتصفحات. حتى الآن، تم نشر خمس مستندات "أفضل الممارسات الحالية" كملاحظات، في عام 2007، ^[57] 2010، ^[58] 2015، ^[59] 2017، ^[60] و2018. ^[61]

نظرًا لأن لقطات المواصفات هذه مخصصة في المقام الأول للمطورين، فقد كان هناك طلب متزايد على وثيقة مرجعية مماثلة مُدرجة تستهدف المؤلفين، والتي من شأنها أن تقدم حالة التنفيذات المتداخلة كما وثقتها مواقع مثل Can I Use... ^[62] وMDN Web Docs. ^[63] تم إنشاء مجموعة مجتمع W3C في أوائل عام 2020 لمناقشة مثل هذا المورد وتحديده. ^[64] كما أن النوع الفعلي من الإصدارات قابل للنقاش، مما يعني أن الوثيقة، بمجرد إنتاجها، قد لا تسمى "CSS4".

يستخدم كل متصفح ويب محرك تخطيط لعرض صفحات الويب، ولا يكون دعم وظائف CSS متسقًا بينهم. نظرًا لأن المتصفحات لا تحلل CSS بشكل مثالي، فقد تم تطوير تقنيات ترميز متعددة لاستهداف متصفحات معينة باستخدام حلول بديلة (المعروفة باسم اختراقات CSS أو مرشحات CSS). يمكن إعاقة تبني وظائف جديدة في CSS بسبب نقص الدعم في المتصفحات الرئيسية. على سبيل المثال، كان Internet Explorer بطيئًا في إضافة الدعم للعديد من ميزات CSS 3، مما أدى إلى إبطاء تبني هذه الميزات وإتلاف سمعة المتصفح بين المطورين. بالإضافة إلى ذلك، filterتم استخدام بناء جملة خاص للخاصية غير مسبوقة بالبائع في بعض الإصدارات. ^[65] لضمان تجربة متسقة لمستخدميهم، غالبًا ما يختبر مطورو الويب مواقعهم عبر أنظمة تشغيل ومتصفحات وإصدارات متصفح متعددة، مما يزيد من وقت التطوير وتعقيده. تم إنشاء أدوات مثل BrowserStack لتقليل تعقيد صيانة هذه البيئات.

بالإضافة إلى أدوات الاختبار هذه، تحتفظ العديد من المواقع بقوائم دعم المتصفح لخصائص CSS معينة، بما في ذلك CanIUse و MDN Web Docs . بالإضافة إلى ذلك، يحدد CSS 3 استعلامات الميزات، والتي توفر @supportsتوجيهًا يسمح للمطورين باستهداف المتصفحات التي تدعم وظائف معينة مباشرةً داخل CSS الخاص بهم. ^[66] يمكن أيضًا في بعض الأحيان تصحيح CSS الذي لا تدعمه المتصفحات القديمة باستخدام JavaScript polyfills ، وهي أجزاء من كود JavaScript مصممة لجعل المتصفحات تتصرف بشكل متسق. يمكن أن تضيف هذه الحلول البديلة - والحاجة إلى دعم وظائف احتياطية - تعقيدًا إلى مشاريع التطوير، وبالتالي، تحدد الشركات بشكل متكرر قائمة بإصدارات المتصفح التي ستدعمها والتي لن تدعمها.

مع تبني مواقع الويب لمعايير كود أحدث غير متوافقة مع المتصفحات القديمة، يمكن منع هذه المتصفحات من الوصول إلى العديد من الموارد على الويب (أحيانًا عن قصد). ^[67] العديد من المواقع الأكثر شهرة على الإنترنت لا تتدهور بصريًا على المتصفحات القديمة فقط بسبب ضعف دعم CSS ولكنها لا تعمل على الإطلاق، ويرجع ذلك إلى حد كبير إلى تطور JavaScript وتقنيات الويب الأخرى.

تتضمن بعض القيود الملحوظة للقدرات الحالية لـ CSS ما يلي:

تبحث قواعد تحديد النطاق للخصائص مثل z-index عن أقرب عنصر رئيسي له سمة position: absolute أو position: relative. هذا الاقتران الغريب له تأثيرات غير مرغوب فيها. على سبيل المثال، من المستحيل تجنب إعلان نطاق جديد عندما يضطر المرء إلى تعديل موضع عنصر، مما يمنع المرء من استخدام النطاق المطلوب لعنصر رئيسي.

تطبق لغة CSS فئات شبهية تسمح بدرجة من ردود الفعل من جانب المستخدم من خلال التطبيق المشروط للأنماط البديلة. فئة شبهية واحدة من لغات CSS، " "، ديناميكية (تعادل JavaScript "onmouseover") ولديها إمكانية إساءة الاستخدام (على سبيل المثال، تنفيذ النوافذ المنبثقة عند اقتراب المؤشر)، ^[68] ولكن لغة CSS لا تمتلك القدرة على أن يقوم العميل بتعطيلها (لا توجد خاصية تشبه خاصية "disable") أو الحد من تأثيراتها (لا توجد قيم تشبه خاصية "nochange" لكل خاصية). :hover

لا توجد طريقة لتسمية قاعدة CSS، والتي من شأنها أن تسمح (على سبيل المثال) لبرامج العميل النصية بالإشارة إلى القاعدة حتى لو تغير محددها.

غالبًا ما يتعين تكرار أنماط CSS في عدة قواعد لتحقيق التأثير المطلوب، مما يتسبب في صيانة إضافية ويتطلب اختبارًا أكثر شمولاً. تم اقتراح بعض ميزات CSS الجديدة لحل هذه المشكلة ولكن تم التخلي عنها بعد ذلك. ^{[69] [70]} بدلاً من ذلك، قد يكتسب المؤلفون هذه القدرة باستخدام لغات جداول أنماط أكثر تطورًا والتي يتم تجميعها إلى CSS، مثل Sass أو Less أو Stylus .

بالإضافة إلى العناصر الزائفة، لا يمكن استهداف نطاقات محددة من النص دون الحاجة إلى استخدام عناصر نائبة. ::first-letter

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

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

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

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

بدون CSS، يجب على مصممي الويب عادةً تصميم صفحاتهم باستخدام تقنيات مثل جداول HTML التي تعيق إمكانية الوصول للمستخدمين ضعاف البصر (انظر تصميم الويب بدون جداول § إمكانية الوصول ).

أطر عمل CSS هي مكتبات معدة خصيصًا للسماح بتصميم أسهل وأكثر امتثالًا للمعايير لصفحات الويب باستخدام لغة Cascading Style Sheets. تتضمن أطر عمل CSS Blueprint و Bootstrap و Foundation وMaterialize. مثل مكتبات لغة البرمجة والكتابة النصية، عادةً ما يتم دمج أطر عمل CSS كأوراق خارجية .css يتم الرجوع إليها في HTML . وهي توفر عددًا من الخيارات الجاهزة لتصميم وتخطيط صفحة الويب. على الرغم من نشر العديد من هذه الأطر، إلا أن بعض المؤلفين يستخدمونها في الغالب للنماذج الأولية السريعة، أو للتعلم منها، ويفضلون "صنعها يدويًا" CSS المناسب لكل موقع منشور دون التصميم والصيانة وتكلفة التنزيل لوجود العديد من الميزات غير المستخدمة في تصميم الموقع. ^[71]<head>

مع زيادة حجم موارد CSS المستخدمة في المشروع، غالبًا ما يحتاج فريق التطوير إلى تحديد منهجية تصميم مشتركة للحفاظ على تنظيمها. والأهداف هي سهولة التطوير، وسهولة التعاون أثناء التطوير، وأداء أوراق الأنماط المنشورة في المتصفح. تشمل المنهجيات الشائعة OOCSS (CSS الموجهة للكائنات)، وACSS (CSS الذري)، وCSS (ورقة الأنماط المتتالية العضوية)، وSMACSS (الهندسة المعمارية القابلة للتطوير والوحدات النمطية لـ CSS)، وBEM (الكتلة، العنصر، المعدِّل). ^[73]

• ومضة من المحتوى غير المصمم

• الموقع الرسمي

Original text

Rate this translation

Your feedback will be used to help improve Google Translate