CSS Academy · درس

الوحدات المطلقة: px وpt وcm

تعلّم متى تستخدم الوحدات المطلقة الثابتة مثل البكسلات والنقاط والسنتيمترات.

الوحدات المطلقة: px وpt وcm درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.

الوحدات المطلقة مقابل النسبية

تنقسم وحدات CSS إلى فئتين: مطلقة (قياسات ثابتة من العالم الحقيقي) ونسبية (تتدرج نسبةً إلى شيء آخر). والوحدات المطلقة هي قياسات فيزيائية مستقلة عن الجهاز.

px — البكسلات

تُعد البكسلة (px) أكثر الوحدات المطلقة استخدامًا على الشاشات. في الشاشات القياسية، 1px = بكسلة جهاز واحدة. أما في الشاشات ذات الكثافة العالية (Retina)، فتقابل بكسلات CSS عدة بكسلات من الجهاز، مما يحافظ على الحجم المرئي نفسه للعناصر.

<button class="button">10px 20px padding</button>

pt — النقاط

النقطة (pt) وحدة من تصميم المطبوعات: 1pt = 1/72 من البوصة. في CSS، تساوي 1pt مقدار 4/3px (أي نحو 1.33px). وتُستخدم أساسًا في أوراق أنماط الطباعة الخاصة بالخطوط.

<p class="print-text">This text is sized in points (12pt), the unit used in print stylesheets.</p>

cm وmm وin — الوحدات الفيزيائية

تدعم CSS السنتيمترات (cm) والملليمترات (mm) والبوصات (in). وتناسب هذه الوحدات سياقات الطباعة، لكنها غير موثوقة على الشاشات لأن كثافة البكسلات تختلف من شاشة إلى أخرى.

<div class="page">A4-width page (21cm), used for print layouts</div>

استخدام px على الشاشات عمليًا

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

نسبة بكسلات الجهاز

تبلغ نسبة بكسلات الجهاز (DPR) في الشاشات الحديثة أكثر من 1. فعلى شاشة Retina بنسبة 2x، تُعرض بكسلتان من الجهاز لكل بكسلة CSS. ولهذا يجب أن تكون الصور ذات الكثافة العالية أكبر بمرتين أو ثلاث مرات من حجم عرضها.

<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='300'><rect width='400' height='300' fill='%23ff6347'/><circle cx='200' cy='150' r='100' fill='%231e90ff'/></svg>" alt="sample image" />

متى تستخدم px؟

استخدم px مع:

سماكات الحدود (إذ تبدو قيمة 1px حادة وواضحة)
الظلال والتحويلات
نقاط توقف استعلامات الوسائط (مع أن نقاط التوقف المعتمدة على em أكثر متانة)
عناصر واجهة المستخدم الثابتة التي تتطلب تحكمًا دقيقًا بالبكسلات

متى لا تستخدم px مع الخطوط؟

يؤدي ضبط font-size: 16px على html أو body إلى تجاوز تفضيل المستخدم المتعلق بإمكانية الوصول في كثير من المتصفحات. استخدم rem نسبةً إلى القيمة الافتراضية للمتصفح بدلًا من ذلك.

Q — ربع الملليمتر

وحدة q تساوي ربع ملليمتر. وتُستخدم في الطباعة اليابانية للتحكم الدقيق في تنسيق النص. ونادرًا ما تُستخدم في تصميم الويب العام.

PC — البيكا

تساوي البيكا (pc) 12 نقطة أو 1/6 من البوصة. وكالنقاط، تُعد البيكا وحدة طباعة نادرًا ما تكون مطلوبة للشاشات الرقمية.

الوحدات المطلقة في أوراق أنماط الطباعة

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

<div class="print-body">
    <p class="page-break">Section one (page breaks after this when printed)</p>
    <p>Section two</p>
  </div>

تحقّق سريع

ما وحدة CSS المطلقة التي تساوي 1/72 من البوصة؟

مراجعة

الوحدات المطلقة هي قياسات ثابتة مستقلة عن العناصر الأب. وتُعد px الوحدة العملية للشاشات. أما الوحدات الفيزيائية (pt وcm وin) فتُستخدم في أوراق أنماط الطباعة. تجنّب استخدام px للخطوط، لأنه يتجاوز تفضيلات المستخدم لحجم الخط. استخدم rem بدلًا من ذلك.

الأسئلة الشائعة

هل درس «الوحدات المطلقة: px وpt وcm» مجاني؟

نعم — نص درس «الوحدات المطلقة: px وpt وcm» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.

ماذا ستتعلم في «الوحدات المطلقة: px وpt وcm»؟

تعلّم متى تستخدم الوحدات المطلقة الثابتة مثل البكسلات والنقاط والسنتيمترات. تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟

لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «الوحدات المطلقة: px وpt وcm»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟

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

جميع الدروس في هذه الدورة

← العودة إلى CSS Academy