دليل شامل عن لغة CSS من الأساسيات إلى الإتقان

لغة CSS: دليل شامل

لغة CSS هي لغة تنسيقية تُستخدَم لوصف التمثيل البصري لمستند مكتوب بلغة هيكلية، وهي ترمز إلى Cascading Style Sheets (أي صفحات الأنماط الانسيابية). يمكن استخدام CSS مع HTML وأي مستند XML بما في ذلك ملفات SVG.

ما هي CSS؟

تُستخدَم CSS من أغلبية مواقع الويب لإنشاء صفحات ويب جذابة وواجهات سهلة الاستخدام لتطبيقات الويب. تُستعمَل عادةً مع لغتَي HTML وJavaScript.

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

تساعد CSS أيضًا في تسهيل التعديلات، إذ يمكن تعديل ملف CSS واحد للتأثير على عشرات الصفحات في الموقع.

بنية شيفرات CSS

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

p {
  color: red;
}
 

لاحظ أنَّه يجب «تطبيق» شيفرة CSS على مستند HTML كي تأخذ تأثيرها، ويمكن فعل ذلك بطريقتين:

1. وضع شيفرة CSS ضمن العنصر <style> في مستند HTML:

   
   <style type="text/css">
   p {
     color: red;
   }
   </style>
               

2. وضع شيفرة CSS ضمن ملف، ثم تضمينه عبر العنصر <link>:

   
   <link href="style.css" rel="stylesheet" type="text/css">
               

تصنيف خاصيات CSS

نُظِّم هذا الدليل بتخصيص صفحة لكل خاصية من خاصيات CSS، أي يمكن زيارة الصفحة CSS/property للحصول على معلومات حول الخاصية property. فللحصول على معلومات عن الخاصية background نزور الصفحة CSS/background، ولمعرفة تفاصيل الخاصية border-top-right-radius نزور الصفحة CSS/border-top-right-radius. أما الأصناف الزائفة مثل :visited فتكون على الشكل CSS/:visited.

الألوان

• color: تضبط القيمة اللونية للأمامية (foreground) للمحتوى النصي للعنصر وللزخرفة النصية (text decorations).
• opacity: تحديد درجة شفافية أحد العناصر، أي مدى ظهور المحتوى الذي يقع وراءه.

الخلفيات

• background: الخاصية المختصرة لتعديل خيارات تنسيق الخلفية كلها دفعةً واحدةً.
• background-attachment: تُحدِّد إذا كان موضع الصورة ثابتًا ضمن إطار العرض أو كان سيُمرَّر عند التمرير في العنصر.
• background-blend-mode: تصف كيف يجب أن تمتزج صور الخلفية مع بعضها بعضًا ومع لون الخلفية المُحدَّد للعنصر.
• background-clip: تُحدِّد كيف أين ستتوقف خلفية العنصر على حدود العنصر.
• background-color: تضبط لون الخلفية لأحد العناصر.
• background-image: تضبط صورةً أو أكثر على أنها خلفية للعنصر.
• background-origin: تُحدِّد مبدأ صورة الخلفية المُحدَّدة عبر الخاصية background-image.
• background-position: تضبط الموضع المبدئي لكل صورة خلفية.
• background-repeat: تُعرِّف كيف ستتكرر صورة الخلفية.
• background-size: تُحدِّد أبعاد صورة الخلفية للعنصر.
• box-shadow: تصف تأثير الظلال على العنصر.

الإطارات

• border: الخاصية المختصرة لتعديل إطار العنصر.
• border-bottom: تضبط الإطار السفلي للعنصر.
• border-bottom-color: تُحدِّد لون الإطار السفلي.
• border-bottom-style: تُحدِّد شكل خط الإطار السفلي.
• border-bottom-width: تضبط عرض الإطار السفلي.
• border-color: تُحدِّد لون إطار العنصر على جميع وجوهه.
• border-image: تسمح برسم صورة على إطار العنصر.
• border-image-outset: تُحدِّد كم ستمتد صورة الإطار بعد الحافة الخارجية للإطار.
• border-image-repeat: تُعرِّف كيفية عرض الجزء الأوسط من صورة الإطار.
• border-image-slice: تُقسِّم الصورة المُحدَّدة عبر الخاصية border-image-source إلى تسع مناطق.
• border-image-source: تُعرِّف صورةً لتُستخدَم بدلًا من الإطار.
• border-image-width: تُعرِّف عرض صورة الإطار.
• border-left: تضبط الإطار الأيسر للعنصر.
• border-left-color: تُحدِّد لون الإطار الأيسر.
• border-left-style: تُحدِّد شكل خط الإطار الأيسر.
• border-left-width: تضبط عرض الإطار الأيسر.
• border-right: تضبط الإطار الأيمن للعنصر.
• border-right-color: تُحدِّد لون الإطار الأيمن.
• border-right-style: تُحدِّد شكل خط الإطار الأيمن.
• border-right-width: تضبط عرض الإطار الأيمن.
• border-style: تُحدِّد شكل خط الإطار الخاص بالعنصر لجميع وجوهه.
• border-top: تضبط الإطار العلوي للعنصر.
• border-top-color: تُحدِّد لون الإطار العلوي.
• border-top-style: تُحدِّد شكل خط الإطار العلوي.
• border-top-width: تضبط عرض الإطار العلوي.
• border-width: تضبط عرض إطار العنصر على جميع وجوهه.

الأركان المدورة

• border-bottom-left-radius: تضبط تدوير الركن السفلي الأيسر من العنصر.
• border-bottom-right-radius: تضبط تدوير الركن السفلي الأيمن من العنصر.
• border-radius: تسمح بتعريف طريقة تدوير أركان الإطار.
• border-top-left-radius: تضبط تدوير الركن العلوي الأيسر من العنصر.
• border-top-right-radius: تضبط تدوير الركن العلوي الأيمن من العنصر.

موضع العناصر

• bottom: تُحدِّد الموضع الرأسي لأحد العناصر.
• clear: تُحدِّد إذا كان العنصر يمكن أن يكون بجوار العناصر العائمة.
• display: تُحدِّد نوع صندوق العرض الذي سيستخدم مع العنصر.
• float: تُحدِّد أنَّ العنصر يجب أن يوضع على يسار أو يمين الحاوية.
• left: تُحدِّد الموضع الأفقي لأحد العناصر.
• position: تصف كيف يجب أن يتموضع العنصر في المستند.
• right: تُحدِّد الموضع الأفقي لأحد العناصر.
• top: تُحدِّد الموضع الرأسي لأحد العناصر.
• z-index: تُحدِّد ترتيب العناصر على المحور Z.

النموذج الصندوقي

• box-sizing: تُستخدم لتعديل النموذج الصندوقي الافتراضي في CSS.
• height: تُحدِّد ارتفاع أحد العناصر.
• max-height: تضبط الارتفاع الأقصى للعنصر.
• max-width: تضبط العرض الأقصى للعنصر.
• min-height: تضبط الارتفاع الأدنى للعنصر.
• min-width: تضبط العرض الأدنى للعنصر.
• visibility: تسمح بإظهار أو إخفاء عنصر دون التأثير بتخطيط المستند.
• width: تُحدِّد عرض أحد العناصر.

الهوامش

• margin: تضبط الهوامش في الأطراف الأربعة للعنصر.
• margin-bottom: تضبط الهامش في الطرف السفلي من العنصر.
• margin-left: تضبط الهامش في الطرف الأيسر من العنصر.
• margin-right: تضبط الهامش في الطرف الأيمن من العنصر.
• margin-top: تضبط الهامش في الطرف العلوي من العنصر.

الحواشي

• padding: تضبط الحاشية في الأطراف الأربعة للعنصر.
• padding-bottom: تضبط الحاشية في الطرف السفلي للعنصر.
• padding-left: تضبط الحاشية في الطرف الأيسر للعنصر.
• padding-right: تضبط الحاشية في الطرف الأيمن للعنصر.
• padding-top: تضبط الحاشية في الطرف العلوي للعنصر.

اقتصاص المحتوى

• overflow: تُحدِّد إن كان سيتم اقتصاص المحتوى أو عرض شريط تمرير.
• overflow-x: تُحدِّد إن كان سيتم اقتصاص المحتوى أو عرض شريط تمرير على المحور الأفقي.
• overflow-y: تُحدِّد إن كان سيتم اقتصاص المحتوى أو عرض شريط تمرير على المحور الرأسي.

تخطيط Flex Box

• align-content: تُعرِّف طريقة توزيع المسافة بين العناصر وحولها على امتداد المحور الثانوي من حاوية flex.
• align-items: تُعرِّف طريقة توزيع المسافة بين العناصر وحولها على امتداد المحور الثانوي من حاوية flex.
• align-self: تضبط محاذاة عناصر flex في السطر الحالي.
• flex: تُحدِّد كيف سيتمدد أو يتقلص أحد عناصر flex.
• flex-basis: تُحدِّد القياس الرئيسي لأحد عناصر flex.
• flex-direction: تُعرِّف ما هو المحور الرئيسي في حاوية flex وما اتجاهه.
• flex-flow: تستعمل لضبط قيمة الخاصيتين flex-direction و flex-wrap.
• flex-grow: تُحدِّد معامل التمدد لأحد عناصر flex.
• flex-shrink: تُحدِّد معامل التقلص لأحد عناصر flex.
• flex-wrap: تُحدِّد فيما إذا كانت عناصر flex يجب أن تكون محتواةً في سطرٍ وحيد أم يمكن التفافها إلى عدِّة أسطر.
• justify-content: تُعرِّف طريقة توزيع المسافة بين العناصر وحولها على امتداد المحور الرئيسي من حاوية flex.
• order: تُحدِّد ترتيب عناصر flex في الحاوية.

الخطوط

• font: الخاصية المختصرة لتعديل الخط المستخدم في العنصر.
• font-family: تُحدِّد قائمةً تحتوي على نوع خط واحد أو أكثر.
• font-kerning: تتحكم باستخدام معلومات تآلف الأحرف المُخزّنة في الخط المستخدم.
• font-size: تضبط حجم الخط.
• font-size-adjust: تُحدِّد حجم الخط اعتمادًا على ارتفاع الأحرف الصغيرة.
• font-stretch: تختار نسخةً ضيقةً أو عاديةً أو موسعةً من الخط.
• font-style: تُحدِّد شكل الخط (عادي، مائل، منحرف).
• font-weight: تُحدِّد ثخانة الخط.
• line-height: تضبط المسافة المستخدم للأسطر.

النصوص

• direction: تضبط اتجاه النص (من اليمين إلى اليسار أو العكس).
• letter-spacing: تُحدِّد التباعد بين الأحرف النصية.
• line-break: تُحدِّد سلوك المتصفح في الانتقال إلى سطرٍ جديد.
• overflow-wrap: تُحدِّد إذا كان على المتصفح الانتقال إلى سطر جديد ضمن الكلمات نفسها.
• tab-size: تُستعمل لتخصيص عرض محرف الجدولة.
• text-align: تصف كيف تكون محاذاة العناصر السطرية.
• text-align-last: تصف كيف تكون محاذاة آخر سطر نصي.
• text-decoration: تُحدِّد شكل خطوط الزخرفة المستخدمة على النص.
• text-decoration-color: تُحدِّد لون خطوط الزخرفة.
• text-decoration-line: تُحدِّد نوع خطوط الزخرفة.
• text-decoration-style: تُحدِّد شكل خطوط الزخرفة.
• text-emphasis: تُحدِّد علامة التوكيد المستخدمة على كل محرف نصي.
• text-emphasis-color: تُحدِّد اللون المستخدم لرسم علامة التوكيد.
• text-emphasis-position: تُحدِّد موضع رسم علامة التوكيد.
• text-emphasis-style: تُحدِّد نوع علامة التوكيد.
• text-indent: تُحدِّد مقدار المسافة البدائة قبل أسطر النص.
• text-justify: تُعرِّف طريقة توزيع النص إذا كانت الخاصية text-align مضبوطةً إلى القيمة justify.
• text-shadow: تضيف تأثير الظلال على النص.
• text-transform: تُحدِّد حالة الأحرف التي سيُعرَض فيها العنصر.
• white-space: تُحدِّد كيف ستُعامل الفراغات ضمن العنصر.
• word-break: تُحدِّد إذا كان على المتصفح الانتقال إلى سطر جديد ضمن الكلمات نفسها.
• word-spacing: تُحدِّد التباعد بين الكلمات والوسوم.

القوائم

• counter-increment: تُزيد أو تُنقِص قيمة أحد عدّادات CSS.
• counter-reset: تُعيد ضبط قيمة أحد عدّادات CSS.
• list-style: الخاصية المختصرة لتعديل قوائم العناصر.
• list-style-image: تُحدِّد صورةً لتُستخدَم للإشارة إلى عناصر القائمة.
• list-style-position: تُحدِّد مكان إشارة عناصر القائمة.
• list-style-type: تُحدِّد شكل الإشارة إلى عناصر القائمة.

الجداول

• border-collapse: تُحدِّد إذا كان إطار الجدول منفصلًا عن إطار الخلايا.
• border-spacing: تُحدِّد المسافة بين إطارات خلايا الجداول المتجاورة.
• caption-side: تُحدِّد موضع لافتة الجدول.
• empty-cells: تُحدِّد كيف يجب أن يعرض المتصفح خلفية وإطر خلايا الجداول.
• table-layout: تُحدِّد الخوارزمية التي تُستخدم لضبط تخطيط خلايا وأسطر وأعمدة الجداول.
• vertical-align: تُحدِّد المحاذاة الرأسية للعناصر السطرية أو خلايا الجداول.

الحركات

• @keyframes: تتحكم بالخطوات البينية في سلسلة حركات CSS.
• animation: الخاصية المختصرة لتعديل الحركات.
• animation-delay: تُحدِّد متى ستبدأ الحركة.
• animation-direction: تُحدِّد اتجاه الحركة.
• animation-duration: تُحدِّد الزمن اللازم لإكمال دورة كاملة من الحركة.
• animation-fill-mode: تُحدِّد كيف يجب أن تُطبِّق حركات CSS قيم الخاصيات إلى العنصر قبل وبعد تنفيذ الحركة.
• animation-iteration-count: تُحدِّد عدد مرات تكرار دورة الحركة.
• animation-name: تستعمل لتحديد أسماء الحركات التي ستُطبَّق على العنصر.
• animation-play-state: تُحدِّد إذا كانت الحركة تعمل أو متوقفة مؤقتًا.
• animation-timing-function: تستعمل لوصف كيف ستتأثر القيم الوسطية لخاصيات CSS بالحركة.

الانتقالات

• transition: الخاصية المختصرة لتعديل الانتقالات.
• transition-delay: تُحدِّد الزمن الذي يجب انتظاره قبل بدء الانتقال.
• transition-duration: تُحدِّد الزمن الذي سيستغرقه الانتقال.
• transition-property: تستعمل لتحديد أسماء خاصيات CSS التي ستخضع لتأثير الانتقال.
• transition-timing-function: تستعمل لوصف كيف ستتأثر القيم الوسطية لخاصيات CSS بتأثير الانتقال.

التحويلات

• backface-visibility: تُحدِّد فيما إذا كان الوجه الخلفي للعنصر ظاهرًا للمستخدم.
• perspective: تُستخدَم لتفعيل الفضاء ثلاثي الأبعاد في العنصر.
• perspective-origin: تُحدِّد الموضع الذي ينظر منه المستخدم إلى العنصر.
• transform: تسمح بتحويل شكل العناصر في الفضاء ثنائي أو ثلاثي الأبعاد.
• transform-origin: تسمح بتحديد مبدأ الإحداثيات للتحويلات.
• transform-style: تُحدِّد إن كانت العناصر الأبناء للعنصر الحالي موجودة في الفضاء ثلاثي الأبعاد.

واجهة المستخدم

• caret-color: تُحدِّد لون مؤشر الإدخال النصي.
• cursor: تُحدِّد شكل مؤشر الفأرة.
• outline: الخاصية المختصرة لتعديل حدود العنصر.
• outline-color: تضبط لون حدود العنصر.
• outline-offset: تضبط المسافة التي تبعد فيها حدود العنصر عن حافته.
• outline-style: تضبط شكل حدود العنصر.
• outline-width: تضبط عرض حدود العنصر.
• resize: تُحدِّد إذا كان تغيير حجم العنصر مسموحًا.
• text-overflow: تُحدِّد ماذا سيحدث عند عدم عرض المحتوى الزائد عن صندوقه.

تخطيط الأعمدة

• column-count: تُحدِّد عدد الأعمدة التي سينقسم العنصر إليها.
• column-fill: تُحدِّد كيف يجب تقسيم المحتوى على الأعمدة.
• column-gap: تضبط حجم الفراغ بين الأعمدة.
• column-rule: الخاصية المختصرة لتعديل الخط العمودي بين الأعمدة.
• column-rule-color: تُحدِّد لون الخط العمودي بين الأعمدة.
• column-rule-style: تُحدِّد شكل الخط العمودي بين الأعمدة.
• column-rule-width: تُحدِّد عرض الخط العمودي بين الأعمدة.
• column-span: تسمح بأن يمتد أحد العناصر على جميع الأعمدة.
• column-width: تُحدِّد العرض الأدنى للأعمدة.
• columns: الخاصية المختصرة لتعديل الأعمدة.
• orphans: تُحدِّد العدد الأدنى للأسطر النصية التي يجب أن تظهر في أسفل الصفحة.
• widows: تُحدِّد العدد الأدنى للأسطر النصية التي يجب أن تظهر في أعلى الصفحة.

المُرشِّحات

• filter: تسمح بتطبيق تأثيرات مثل تغيير اللون وتأثير الضبابية على أحد العناصر.

تخطيط Grid

• grid: الخاصية المختصرة لتعديل تخطيط Grid.
• grid-area: تُحدِّد أبعاد عنصر grid وموضعه.
• grid-auto-columns: تضبط أبعاد مسارات الأعمدة المُنشأة ضمنيًا.
• grid-auto-flow: تضبط كيف ستعمل خوارزمية تحديد مواضع عناصر grid التلقائية.
• grid-auto-rows: تضبط أبعاد مسارات الأسطر المُنشأة ضمنيًا.
• grid-column: تُحدِّد أبعاد عنصر grid ومكانه في العمود.
• grid-column-end: تُحدِّد مكان نهاية عنصر grid ضمن عمود grid.
• grid-column-gap: تُحدِّد المسافة التي تفصل بين الأعمدة في حاوية grid.
• grid-column-start: تُحدِّد مكان بداية عنصر grid ضمن عمود grid.
• grid-gap: الخاصية المختصرة لتعديل المسافة بين الأسطر والأعمدة في حاوية grid.
• grid-row: تُحدِّد أبعاد عنصر grid ومكانه في السطر.
• grid-row-end: تُحدِّد مكان نهاية عنصر grid ضمن سطر grid.
• grid-row-gap: تُحدِّد المسافة التي تفصل بين الأسطر في حاوية grid.
• grid-row-start: تُحدِّد مكان بداية عنصر grid ضمن سطر grid.
• grid-template: الخاصية المختصرة لتعديل تخطيط Grid.
• grid-template-areas: تضبط أسماء مناطق grid.
• grid-template-columns: تضبط أسماء وأبعاد مسارات الأعمدة في تخطيط Grid.
• grid-template-rows: تضبط أسماء وأبعاد المسارات السطرية في تخطيط Grid.
• repeat()‎: تُكرِّر جزءًا من قائمة المسارات.

محددات الأنواع

• مُحدِّد النوع (type selector): يُطابِق العناصر وفق اسم العقدة.
• مُحدِّد الصنف (class selector): يُطابِق العناصر وفق قيمة الخاصية class.
• مُحدِّد المُعرِّف (ID selector): يُطابِق العناصر وفق قيمة الخاصية ID.
• المحدد العام (universal selector): يطابق جميع العناصر.
• مُحدِّد الخاصيات (attribute selector): يُطابِق العناصر إذ وجدت فيها خاصيةٌ ما.
• مُحدِّد العناصر الأخوة المتجاورة (adjacent sibling combinator): يطُابِق العنصر الثاني إذا أتى مباشرةً بعد العنصر الأول.
• مُحدِّد العناصر الأخوة العامة (general sibling combinator): يطُابِق العنصر الثاني إذا أتى بعد العنصر الأول.
• مُحدِّد العناصر الأبناء (child combinator): يطُابِق العنصر الثاني إذا كان ابنًا للعنصر الأول.
• مُحدِّد العناصر السليلة (descendant combinator): يطُابِق العنصر الثاني إذا كان ابنًا للعنصر الأول.

الأصناف الزائفة

• ‎:active : العناصر التي جرى تفعيلها من المستخدم.
• ‎:checked : أزرار انتقاء أو صناديق تأشير تم تحديدها.
• ‎:default : العناصر المُختارة افتراضيًا.
• ‎:disabled : العناصر المُعطَّلة.
• ‎:empty : العناصر التي ليس لها أبناء.
• ‎:enabled : العناصر المُفعَّلة.
• ‎:first : أوّل صفحة من المستند عند طباعته.
• ‎:first-child : أوّل عنصر في مجموعة من العناصر الأخوة.
• ‎:first-of-type : أوّل عنصر من نوعه في مجموعة من العناصر الأخوة.
• ‎:fullscreen : العناصر التي تُعرَض في وضع ملء الشاشة.
• ‎:focus : العناصر التي استقبل التركيز.
• ‎:hover : العناصر التي يتفاعل المستخدم معها.
• ‎:indeterminate : العناصر التي تكون حالتها غير معروفة.
• ‎:in-range : العناصر التي تكون قيمتها ضمن المجال المسموح.
• ‎:invalid : العناصر التي فشل التحقق من صحة محتوياتها.
• ‎:lang()‎ : العناصر اعتمادًا على لغة تلك العناصر.
• ‎:last-child : آخر عنصر في مجموعة من العناصر الأخوة.
• ‎:last-of-type : آخر عنصر من نوعه في مجموعة من العناصر الأخوة.
• ‎:left : الصفحات اليسارية من المستند عند طباعته.
• ‎:link : العناصر التي لم تتم زيارتها من قبل.
• ‎:not()‎ : العناصر التي لا تُطابِق مُحدِّدًا أو أكثر.
• ‎:nth-child()‎ : العناصر بناءً على موقعه ضمن مجموعة من العناصر الأخوة.
• ‎:nth-last-child()‎ : العناصر بناءً على موقعه ضمن مجموعة من العناصر الأخوة بدءًا من النهاية.
• ‎:nth-last-of-type()‎ : العناصر من نوعٍ معيّن بناءً على موقعه ضمن مجموعة من العناصر الأخوة بدءًا من النهاية.
• ‎:only-child : العناصر التي لا تملك أيّة عناصر أخوة.
• ‎:only-of-type : العناصر التي لا تملك أيّة عناصر أخوة من نفس نوعها.
• ‎:optional : العناصر التي لم تُضبَط الخاصية required عليها.
• ‎:out-of-range : العناصر التي لا تكون قيمتها ضمن المجال المسموح.
• ‎:read-only : العناصر التي لا يمكن للمستخدم تعديلها.
• ‎:read-write : العناصر التي يمكن للمستخدم تعديلها.
• ‎:required : العناصر التي ضُبِطَت الخاصية required عليها.
• ‎:right : الصفحات اليمينية من المستند عند طباعته.
• ‎:root : العنصر الجذر في شجرة المستند.
• ‎:target : العنصر الذي يُطابِق مُعرِّفه قسمًا من رابط URL.
• ‎:valid : العناصر التي نجح المتصفح بالتحقق من صحة محتوياتها.
• ‎:visited : العناصر التي تمت زيارتها من قبل.

العناصر الزائفة

• ‎::after‎ : آخر عنصر ابن للعنصر المُحدَّد.
• ‎::backdrop : صندوقٌ يُعرَض مباشرةً تحت أيّ عنصر معروض في وضع ملء الشاشة.
• ‎::before : أوّل عنصر ابن للعنصر المُحدَّد.
• ‎::first-letter : أوّل حرف من أوّل سطر من العناصر الكتلية.
• ‎::first-line : أوّل سطر من العناصر الكتلية.
• ‎::placeholder : النص البديل في أحد عناصر النماذج.
• ‎::selection : النص الذي حدده المستخدم.

أنواع البيانات

• angle: القيم الزاويّة بالدرجات أو الغراد أو الراديان أو الدورات.
• blend-mode: وصف كيف يجب أن تمتزج الألوان عند تداخل طبقات الخلفات.
• color value: تمثيل لون في مجال ألوان sRGB.
• custom-ident: المُعرِّفات التي أنشأها المستخدم.
• gradient: التدرج اللوني بين لونين أو أكثر.
• image : الصور ثنائية الأبعاد.
• integer: الأعداد الصحيحة.
• length: القيم الطولية.
• number: القيم العددية.
• percentage: النسب المئوية.
• resolution: دقة الشاشة.
• string: السلاسل النصية.
• time: القيم الزمنية.
• timing-function: الدوال الرياضية التي تصف سرعة تغيير القيم.
• url: روابط الموارد.

قواعد @

• ‎@charset: تُحدِّد ترميز المحرف المستخدم في صفحة الأنماط.
• ‎@font-face: تسمح بتحديد خطوط خاصة لعرض النص.
• ‎@import: تسمح باستيراد قواعد التنسيق من صفحات الأنماط الأخرى.
• ‎@keyframes: تتحكم بالخطوات البينية في سلسلة حركات CSS.
• ‎@media: تُطبِّق الأنماط بناءً على شروط معيّنة.
• ‎@page: تُعدِّل بعض خاصيات CSS عند طباعة المستند.
• ‎@supports: تسمح بتعريف قواعد بناءً على دعم المتصفح لميزات مُعيّنة.

متفرقات

• ‎--*‎: الخاصيات المخصصة.
• attr()‎: الحصول على قيمة إحدى خاصيات العنصر.
• calc()‎: إجراء عمليات حسابية عند تحديد قيم خاصيات CSS.
• inherit: جعل العنصر يأخذ القيمة المحسوبة من العنصر الأب.
• initial: تطبيق القيمة الابتدائية للخاصية.
• unset: إعادة ضبط قيمة الخاصية إلى قيمتها المورثة أو الابتدائية.
• var()‎: تضمين قيمة خاصية مخصصة.
• will-change: أخبار المتصفحات بالتغييرات المتوقع إجراؤها على العنصر.

القيم في CSS

• القيمة الفعلية: القيمة المستخدمة بعد إجراء أيّة عمليات تقريب لازمة.
• القيمة المحسوبة: القيمة المحسوبة من القيمة المُحدَّدة.
• القيمة المُحدَّدة: القيمة المضبوطة لتلك الخاصية.
• القيمة المستخدمة: القيمة النهائية بعد إجراء جميع الحسابات اللازمة.
• القيمة الابتدائية: القيمة الابتدائية للخاصية.