يدعم CSS وحدات الطول المتعددة. ويمكن تقسيمها إلى فئتين رئيسيتين: وحدات الطول المطلق (تحديد الطول بأبعاد مطلقة مستقلة عن جهاز العرض)؛
يمكن قياس قياسات الطول المطلق بخمس وحدات: البوصة (بوصة)، والسنتيمتر (سم)، والمليمتر (مم)، والنقاط (نقطة، مكتوبة كـ pt)، وارتفاع الحرف (بيكا، مكتوب كـ pc). يتم استخدام ارتفاع النقطة والكتابة بشكل شائع كوحدات مطبعية، حيث 1pica = 12pt. يعرّف CSS 1pica بأنه 1/72in، أي 72pica=1in. وهذا أيضًا هو التعريف الذي تستخدمه لغة التذييل الخاصة بشركة Adobe، والتي تستخدم عادةً بواسطة الطابعات عالية الجودة.
يدعم CSS أيضًا الأطوال "المطلقة" بالبكسل - البكسل عبارة عن نقطة على شاشة الكمبيوتر. ومع ذلك، نظرًا للاختلافات في كثافة البكسل واختيار المستخدم لدقة العرض (يمكن أن تدعم شاشة العرض نفسها دقة 640*480 أو دقة 1024*768)، سيختلف الحجم المطلق لوحدات البكسل باختلاف الشاشات . وبالتالي، فإن الطول بالبكسل يعتمد في الواقع على العرض. تتمثل ميزة استخدام وحدات البكسل كوحدات عرض للكمبيوتر في أن وحدات البكسل عبارة عن وحدات محددة بدقة. ومع ذلك، قد تتسبب وحدات البكسل في حدوث مشكلات عند طباعة مستندات الويب.
تعد وحدات الطول المطلق مثل البوصة والسنتيمتر مفيدة جدًا في تخطيط الطباعة لأنها توفر الموضع المطلق المطلوب لتخطيط مستند على ورق ذي حجم ثابت. ولهذا السبب، لا ينبغي استخدام الطول المطلق في مستندات العرض الإلكترونية، وذلك لأن العرض سيكون مختلفًا بين الشاشات القطرية مقاس 6 بوصات × 4 بوصات و21 بوصة، وليس هناك ما يضمن أن المتصفح سيعرض نفس الطول على شاشة معينة. يمكن عرض المستندات باستخدام منطقة نافذة ثابتة (يمكن للمستخدم تحديد حجم النافذة). ومع أخذ هذه الاختلافات في الاعتبار، فمن المناسب استخدام الوحدات التي يتم ضبطها تلقائيًا حسب حجم مساحة العرض أو حجم خط النص. لحسن الحظ، هناك ثلاث وحدات طول CSS تمكن هذا السلوك.
يمكن أن تأتي قياسات الطول النسبي في ثلاثة أشكال: وحدات em ووحدات ex ونسبة مئوية. تحدد وحدتا em وex الطول بالنسبة لحجم الخط. تحدد وحدة em الطول بالنسبة إلى حجم النقطة الفعلي للخط: لذلك، إذا كان حجم الخط الحالي هو 12pt، فإن 1.5em = 18pt. في المقابل، تحدد الوحدات السابقة الطول بالنسبة إلى ارتفاع الخط: أي بالنسبة إلى ارتفاع الحرف "x" في الخط الحالي. بهذه الطريقة، يعتمد الحجم السابق للوحدة على حجم الخط ونوع عائلة الخط، نظرًا لأن الارتفاع الفعلي x عند حجم نقطة معين سيختلف من عائلة خطوط إلى عائلة خطوط.
تعد وحدات em حاليًا أكثر موثوقية من وحدات ex: للحصول على أفضل توافق بين المتصفحات المختلفة، من الأفضل استخدام وحدات em. لكن عليك أن تدرك أن كلاً من وحدتي em وex يمكن أن تسبب مشاكل في الطباعة.
وحدة النسبة المئوية هي الوحدة النسبية الثالثة. تحدد هذه الوحدة الطول كنسبة مئوية من الطول النسبي. وفقًا لمواصفات CSS، يكون الطول ذو الصلة إما حجم خط الوحدة الأصلية أو عرض وحدة التنسيق الأصلية - ستختلف كل حالة وفقًا لخصائص السؤال. هناك تحذير مهم للغاية: المتصفحات الحالية لا تحسب قيم النسبة المئوية المتعلقة بعرض الخلية، وبالتالي لا تنفذ النسبة المئوية للأطوال بشكل صحيح. بدلاً من ذلك، تقوم كافة المتصفحات بحساب النسبة المئوية لطول الخط المستقل كنسبة مئوية من عرض نافذة المتصفح بالكامل.
يتكون تنسيق قيمة الطول من علامة ('+' أو '-'، القيمة الافتراضية هي '+') متبوعة برقم ثم معرف الوحدة (اختصار مكون من حرفين). هناك نوعان من وحدات الطول: الوحدات النسبية والمطلقة. تستخدم أوراق الأنماط وحدات نسبية لتسهيل التحكم في القياس من وسط إلى آخر (مثل من كمبيوتر إلى طابعة ليزر). تتمتع وحدات النسبة المئوية والقيم الأساسية (مثل "x-large") بنفس المزايا. على النحو التالي:
H1 { الهامش: 0.5em } ارتفاع خط العنصر
H1 { هامش: 1ex } ارتفاع الحرف "x"
بوحدات البكسل بالنسبة إلى دقة رسومات الشاشة. إذا كانت كثافة البكسل لجهاز الإخراج تختلف بشكل كبير عن شاشة الكمبيوتر القياسية، فسيقوم المستخدم بإعادة قياس قيم البكسل. قيمة البكسل الموصى بها هي 90 نقطة في البوصة على مسافة ذراع من القارئ. ترث العناصر التابعة قيمة النتيجة المحسوبة بدلاً من القيمة النسبية، مثل:
BODY {
حجم الخط: 12 نقطة؛
مسافة بادئة للنص: 3em؛
}
H1 { حجم الخط: 15pt }
في المثال أعلاه، قيمة "المسافة البادئة للنص" لـ "H1" هي 36 نقطة، وليس 45 نقطة.
=====================
علامة em--علامة التركيز
* تظهر علامات em في أزواج، مع <em >ابدأ بـ</em>
* ملكيات:
* مشترك – خصائص عامة
* em هو اختصار التركيز