تقديم
كتب هذا المقال أشرف عبدالدايم مطور واجهة المستخدم في TieLabs سابقاً، 95% من كود CSS الموجود في قالب جنة من كتابة أشرف :)
قيم الخواص في CSS إما أن تكون مُعرفة مسبقاً يمكن استخدام أياً منها (مثل [text-align: [right | left | center )، وإما أن تكون قيم متغيرة تحددها أنت كما تشاء على حسب العنصر الذي تعمل عليها(مثل font-size: 13px ) القيمة 13 متغيرة ووحدة القياس px متغيرة أيضاً.
وهناك الكثير من الخواص التي تمتلك قيم ووحدات قياس متغيرة:
- حجم الخط font-size
- ارتفاع الأسطر line-height
- عرض الحدود border-width : للتحكم في عرض الحدود حول العناصر.
- الهوامش الخارجية margin والهوامش الداخلية padding للعناصر.
- الخواص left right top bottom للتحكم في مكان العناصر.
وأكثر وحدات القياس استخداماً:
- البيكسل px
- النسبة المئوية %
- وحدة قياس em
وبشكل عام، تنقسم وحدات القياس إلى قسمين كبيرين:
- وحدات قياس مطلقة Absolute.
- وحدات قياس نسبية Relative.
وحدات القياس المطلقة
أي لا تعتمد على قيم موروثة من العنصر الرئيسي (الأب)، أو لا تعمد على ما يحيط بها من عناصر.
وحدة القياس px
لأن شاشات الحواسيب والهواتف المحمولة تعتمد على البيكسل لظهور المحتوى عليها، فإن البيكسل px هو أكثر الوحدات استخدماً. (تخيل أن شاشة جهازك الحاسب مقسمة إلى نقاط صغيرة جداً تسمى pixels، على حسب عدد هذة النقاط تكون دقة الشاشة، فكلما زادت عدد النقاط (pixels) كلما زادت دقة الشاشة).
ويمكنك استخدام وحدت البيكسل في تحديد المساحات مثل:
| 1 2 3 | div{ width: 400px;} |
أيضاً يمكنك استخدامها في تحديد حجم الخطوط:
| 1 2 3 | body{ font-size: 20px;} |
ولان عدد النقاط pixels في شاشة حاسبك الشخصي ثابته لا تتغير، كانت وحدة البيكسل وحدة مطلقة، أي لا تعتمد على قيم أخرى موروثة من العنصر الأب.
وتستخدم وحدة البيكسل كثيراً لتحديد أبعاد العناصر، والمساحات حولها.
وحدات القياس المطلقة الأخرى
قلنا أن وحدة القياس px الأكثر استخداماً، لكن هناك وحدات قياس مطلقة أخرى، ولكنها قلما تستخدم لذلك سنتعرف عليها سريعاً كي تكون على علم بها حتى وإن لم تستخدمها.
| وحدة قياس mm ملي متر (مم) | وهي وحدة القياس المعروفة في الأبعاد الطبيعية |
| وحدة قياس cm سنتيمتر | ١سم = ١٠ مم = ٣٧.٨ بيكسل |
| وحدة قياس in بوصة (inch) | ١ بوصة = ٢.٥٤ سم = ٩٦ بيكسل |
| وحدة قياس pt نقطة (point) | ١ نقطة = ١÷ ٧٢ من البوصة، وتستخدم كثيراً لتحديد الأبعاد خارج CSS لتحديد حجم الخط في اللوحات التي سيتم طباعتها. |
| وحدة قياس pc (pica) | ١ بيكا = ١٢ نقطة |
وحدات القياس النسبية
وحدات القياس النسبية يتم تحديدها بإستخدام قيمة (رقم) متبوعة بوحدة قياس نسبية. وتقوم بتحديد الأبعاد نسبةً إلى أبعاد أخرى (أبعاد موروثة من العنصر الرئيسي- الأب).
وتكمن أهمية الأبعاد المطلقة في سهولة تغير شكل العناصر عندما تعرض على شاشات ذات أحجام مختلفة (شاشة الحاسب، الهاتف المحمول، شاشات الأجهزة اللوحية). بدون الحاجة إلى تعيين قيم جديدة لهذة الأحجام المختلفة من الشاشات.
وحدة القياس em
أكثر وحدات القياس المطلقة استخداماً، وتقوم بتحديد أبعاد العنصر نسبةً إلى حجم خط العنصر، وإذا تم استخدامها في تحديد حجم خط العنصر نفسه، يتم حساب القيمة نسبةً إلى حجم خط العنصر الأب.
1em = حجم خط العنصر نفسه (قيمة الخاصية font-size ) مهما تغيرت هذة القيمة.
على سبيل المثال:
See the Pen TieLabs HTML & CSS Tutorials | 5.8 CSS size units by Ashraf Reda (@mo3aser) on CodePen.33721
إذا كان لدينا عنوان h1 داخل العنصر <div> وقمنا بتعيين حجم خط العنصر div بالقيمة 20px وارتفاع سطر العنصر h1 بالقيمة 1.2em
| 1 2 3 | h1 { line-height: 1.2em } |
في متصفح كروم، حجم الخط الإفتراضي للعنصر h1 هو 2em وبما أن حجم الخط في العنصر الرئيسي 20px فإن حجم خط العنصر h1 سيكون 20px * 2 = 40px وسيكون ارتفاع السطر 1.2 * 40px = 48px
لكن ماذا سيحدث إذا قمنا بتحديد حجم خط العنصر h1 كالتالي:
| 1 2 3 4 5 6 | h1 { line-height: 1.2em; font-size: 1.5em; } |
هذا معناه أن حجم خط العنصر h1 = 1.5 * حجم خط العنصر الرئيسي 20px = 30px
وارتفاع السطر سيكون 1.2 * 30px = 36px
وأكثر الخواص استخداما لوحدة القياس em هي line-height , الهوامش الخارجية margin , الهواش الداخلية padding . وهذا ما يمكنك من الحفاظ دائماً على التوازن بين الأبعاد المختلفة (حجم الخط، وارتفاع السطر، والمساحات المحيطة به).
ومن المهم جداً أن تتذكر دائماً أن وحدة القياس em تحدد الأبعاد بالنسبة للعنصر الذي سترث منه القيمة (العنصر الأب)
مثال: إذا كان لديك عنصر رئيسي (جد) وداخله عنصر فرعي (أب) داخله عنصر فرعي أخر (ابن), وقمت بتعيين قيمة حجم الخط بقيمة 1.5em لكل العناصر.
هذا معناه أن حجم خط العنصر الأول (الجد) سيكون 150% من حجم الخط الموروث من العنصر الرئيسي <“div class=”container> ، والعنصر الأب سيكون حجم الخط داخله 150% من حجم خط العنصر الجد، والعنصر الإبن سيكون حجم الخط داخله 150% من حجم خط العنصر الأب. أيضاً سيتم تحديد المسافات (الهوامش الداخلية والخارجية) إعتماداً على حجم الخط.
See the Pen TieLabs HTML & CSS Tutorials | 5.8 CSS size units | ex2 by Ashraf Reda (@mo3aser) on CodePen.33721
وحدة القياس rem
وحدة القياس rem تعمل بصورة مشابه لوحدة القياسة em ، لكنها بدلاً من الإعتماد على قيمة العنصر الأب، تعتمد على قيمة العنصر الرئيسي للصفحة كلها وهو العنصر <html>.
See the Pen TieLabs HTML & CSS Tutorials | 5.8 CSS size units | ex5 by Ashraf Reda (@mo3aser) on CodePen.33721
بالنسبة للعناصر h1 و h2 ، بما أن وحدة القياس rem تعتمد على قيمة حجم خط العنصر الرئيسي للصفحة html فسيتم تجاهل قيم العناصر body , div . ويتم حساب القيمة اعتماداً على قيمة حجم خط العنصر html
| 1 2 3 4 | 2rem = 2 * 18 = 36px; 1.5rem = 1.5* 18 = 27px; |
وحدة القياس %
وحدة قياس النسبة المئوية (%) المطلقة تقوم بتحديد البعد إعتماداً على العنصر الأب.
على سبيل المثال:
| 1 2 3 | p{ width: 50%;} |
العنصر p عنصر block-level أي يقوم بشكل افتراضي بحجز المساحة المتاحة بعرض الصفحة، المثال السابق يقوم بتغيير حجمه إلى نصف المساحة المتاحة بدلاً المساحة بأكلمها.
See the Pen TieLabs HTML & CSS Tutorials | 5.8 CSS size units | ex3 by Ashraf Reda (@mo3aser) on CodePen.33721
يمكنك أيضاً استخدام وحدة قياس النسبة المئوية لتعيد حجم الخط بالنسبة للعنصر الأب:
See the Pen TieLabs HTML & CSS Tutorials | 5.8 CSS size units | ex4 by Ashraf Reda (@mo3aser) on CodePen.33721
سيكون حجم خط العنصر strong أكبر بنسبة 150% من حجم العنصر الأب p .
أي وحدات القياس تستخدم؟
إذا كنت في بداية رحلة تعلمك لـ CSS استخدم وحدة القياس المطلقة px حيث أنها لا تتأثر بما يحيط بها من عناصر، لذلك ستكون واضحة دوماً، وتمكنك أيضاً من تحديد حجم الخطوط، أبعاد الصور، عرض الحدود، وأماكن العناصر المختلفة position offsets.
وبجانب وحدة القياس px يمكنك استخدام وحدات القياس em و % لتعيين أحجام الخطوط.
بإختصار:
- تنقسم وحدات القياس في CSS إلى وحدات قياس مطلقة، ووحدات قياس نسبية.
- من أشهر وحدات القياس المطلقة هي وحدة القياس px حيث لا تعتمد على القيم الموروثة من العنصر الأب.
- وحدة القياس em، وحدة قياس نسبية، تقوم بتحديد الأبعاد إعتماداً على حجم خط العنصر أو العنصر الأب.
- وحدة القياس rem مثل وحدة القياس em ولكنها تقوم بتحديد الأبعاد إعتماداً على العنصر الرئيسي للصفحة html بدلاً من العنصر الأب.
- وحدة القياس % تقوم بتحديد الأبعاد إعتماداً على العنصر الأب.
