وحدات CSS ( الوحدات)

الوحدات تُستخدم لتعيين القيم غير الصفرية في خصائص CSS، الوحدات الشائعة في CSS هي: px،em،pt،النسبة المئوية (%) وما إلى ذلك.

فهم وحدات CSS

وحدات القياس للطول يمكن أن تكون وحدات طول مطلقة، مثل البكسل، والنقاط، أو وحدات طول نسبي، مثل النسبة المئوية (%) ووحدات em.

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

وحدات طول نسبي

وحدة طول نسبي يحدد الطول مقارنة بوحدة طول أخرى. الوحدات النسبية هي:

وحدات em وex تعتمدان على حجم الخط المطبق على العنصر.

استخدام وحدة Em

قياس 1em يساويfont-sizeاستخدام قيمة الحساب للصفات في العنصر المستخدم. يمكن استخدامها للقياسات العمودية أو الأفقية.

على سبيل المثال، إذا تم تعيين font-size للعنصر إلى 16px وline-heightإذا تم تعيينه إلى 2.5em، فإن قيمة line-height في البكسل هي 2.5 × 16px = 40px.

p {
　　　　font-size: 16px;
　　　　line-height: 2.5em;
}

يحدث خطأ عند تحديد قيمة em في قيمة font-size نفسها، حيث يشير إلى حجم الخط في العنصر الأب.

لذلك، عندما نحدد حجم الخط باستخدام em في font-size، فإن 1em يساوي حجم الخط الموروث. لذا، font-size: 1.2em; يجعل النص أكبر بمرتين من حجم النص في العنصر الأب.

body {
　　　　font-size: 62.5%;
　　　　font-family: Arial, Helvetica, sans-serif;
}
p {
　　　　font-size: 1.6em;
}
p: first-letter {
　　　　font-size: 3em;
　　　　font-weight: bold;
}

لنفهم معنى الكود هذا بالكامل. في جميع المتصفحات الحديثة، حجم الخط الافتراضي هو 16px. الخطوة الأولى هي تقليل حجم الوثيقة بأكملها عن طريق ضبط حجم النص إلى 62.5%، مما يعيد حجم الخط إلى 10px (62.5% من 16px).

هذا هو القيمه الافتراضية للتقريبfont-size، لسهولة التحويل من px إلى em.

استخدام أجهزة الحماية

وحدة ex تساوي ارتفاع x الحالي للخط.

تُسمى بـ x الارتفاع لأنها عادة ما تكون تساوي ارتفاع الحرف الصغير 'x'، كما هو موضح أدناه. ولكن، يتم تعريف ex حتى بالنسبة للخطوط التي لا تحتوي على 'x'.

وحدات الطول المطلقة

وحدات الطول المطلقة متعلقة ببعضها البعض. إنها تعتمد بشكل كبير على وسيلة الإخراج، لذا تكون مفيدة بشكل خاص عند معرفة بيئة الإخراج المعروفة. الوحدات المطلقة تتكون من وحدات الوحدة الفيزيائية (كـ in،cm،mm،pt،pc) وأوحدات px.

وحدات الطول المطلقة، مثل in،cm،mm وما إلى ذلك يجب استخدامها في وسائط الطباعة ووسائل مماثلة ذات دقة عالية. أما للحواسيب المكتبية وأجهزة الشاشة ذات الدقة المنخفضة، فيُنصح باستخدام وحدات البكسل أو em.

h1　{　margin:　0.5in;　}　　　　　　　/*　inches　　*/
h2　{　line-height:　3cm;　}　　　　/*　centimeters　*/
h3　{　word-spacing:　4mm;　}　　　/*　millimeters　*/
h4　{　font-size:　12pt;　}　　　　　/*　points　*/
h5　{　font-size:　1pc;　}　　　　　　/*　picas　*/
h6　{　font-size:　12px;　}　　　　　/*　picas　*/