CSS Units - Nouvil

شرح CSS Units

تستخدم وحدات CSS لتحديد الأبعاد والمسافات والأحجام في صفحة الويب، ويمكن تصنيفها إلى وحدات ثابتة ووحدات نسبية.

الوحدات الثابتة:

البكسل (px): هي وحدة قياس ثابتة تستخدم لتحديد الأبعاد بشكل ثابت بالنسبة لشاشة العرض. يمكن استخدام هذه الوحدة لتحديد حجم الصور والأشكال والتباعد بين العناصر. مثال:

img {
  width: 300px;
  height: 200px;
}

الرصاصة (pt): وحدة الرصاصة تستخدم عادة لتحديد حجم الخط في الطباعة. وتعادل الرصاصة 1/72 من بوصة. مثال:

p {
  font-size: 12pt;
}

البوصة (in): هي وحدة قياس تستخدم لتحديد الأبعاد بالبوصة. وتعادل البوصة 96 بكسل. مثال:

div {
  width: 3in;
  height: 2in;
}

السنتيمتر (cm) والميليمتر (mm): تستخدم هذه الوحدات لتحديد الأبعاد بالسنتيمتر أو الميليمتر. مثال:

h1 {
  margin: 3cm;
}

الوحدات النسبية:

النسبة (%): تستخدم لتحديد الأبعاد بناءً على نسبة مئوية من الحجم الأصلي للعنصر الأساسي. مثلاً، يمكن استخدام هذه الوحدة لتحديد حجم الصور بناءً على حجم العنصر الذي يحتوي عليها. مثال:

img {
  width: 50%;
  height: 50%;
}

الإم (em): هي وحدة قياس مستخدمة لتحديد الأبعاد بناءً على حجم الخط الحالي. وهي تستخدم عادة لتحديد الحجم النسبي للعناصر مثل العناوين والفقرات. فمثلاً، يمكن استخدام الوحدة em لتحديد حجم الفقرات بناءً على حجم الخط في الفقرة الأصلية. مثال:

p {
  font-size: 1.2em;
  line-height: 1.5em;
}

الـ view height (vh) والـ view width (vw) والـ view port (vmin) والـ view port (vmax): هذه الوحدات تستخدم لتحديد الأبعاد بناءً على حجم نافذة المشاهدة أو العرض الأساسي للصفحة. فمثلاً، يمكن استخدام الوحدة vw لتحديد حجم الصور بناءً على العرض الأساسي للصفحة. مثال:

header {
  height: 20vh;
  width: 100%;
}

بالإضافة إلى الوحدات التي تم ذكرها، هناك بعض الوحدات الأخرى التي يمكن استخدامها في CSS:

الـ rem: وحدة تشابه الوحدة em، ولكن تستخدم حجم الخط في العنصر الأساسي بدلاً من حجم الخط الحالي. يمكن استخدام هذه الوحدة لتحديد الحجم النسبي للعناصر في الصفحة بناءً على حجم العنصر الأساسي.
الـ ex: وحدة تعتمد على ارتفاع حرف “x” في الخط الحالي. تستخدم هذه الوحدة عادة لتحديد حجم العناصر النصية، مثل الأحرف والكلمات.
الـ ch: وحدة تعتمد على عرض حرف “0” في الخط الحالي. تستخدم هذه الوحدة عادة لتحديد حجم العناصر النصية، مثل الأحرف والكلمات.
الـ fr: وحدة تستخدم في CSS Grid لتحديد حجم العناصر بناءً على الفضاء المتبقي المتاح في الشبكة.
الـ calc(): دالة تستخدم لحساب القيمة النهائية لوحدة CSS مع استخدام العمليات الحسابية، مثل الجمع والطرح والضرب والقسمة.

من المهم اختيار الوحدة المناسبة لكل عنصر في الصفحة، حيث يمكن أن تؤثر الوحدة المختارة على تصميم الصفحة وأدائها. لذلك، يجب التأكد من اختيار الوحدة المناسبة بناءً على الغرض المراد تحقيقه ونوع العنصر المستخدم.

يمكن أيضًا استخدام الوحدات لتحديد الزوايا والألوان في CSS. على سبيل المثال:

الـ degree (deg): وحدة تستخدم لتحديد الزوايا في CSS، وتعادل درجة الزاوية. مثال:

transform: rotate(45deg);

الـ radian (rad): وحدة تستخدم لتحديد الزوايا في CSS، وتعادل الزاوية الناتجة عن محيط دائرة تساوي نصف قطرها. تستخدم هذه الوحدة عادة في الرسومات ثلاثية الأبعاد. مثال:

transform: rotate(1.5rad);

الـ gradient (gradient): وحدة تستخدم لتحديد تدرج الألوان في CSS، وتتضمن العديد من الوحدات الفرعية مثل الـ linear-gradient والـ radial-gradient والـ conic-gradient. مثال:

background: linear-gradient(to bottom, #ff0000, #0000ff);

الـ RGBA: هي وحدة تستخدم لتحديد اللون في CSS، وتسمح بإضافة الشفافية للون. تتكون هذه الوحدة من قيم للأحمر والأخضر والأزرق والألفا (الشفافية). مثال:

color: rgba(255, 0, 0, 0.5);

الـ HSLA: هي وحدة تستخدم لتحديد اللون في CSS، وتتكون من قيم للصبغة (Hue) والتشبع (Saturation) والإضاءة (Lightness) والألفا (الشفافية). مثال:

color: hsla(120, 100%, 50%, 0.5);

في النهاية، يجب اختيار الوحدة المناسبة بناءً على النوع والغرض من العنصر المستخدم في CSS، والتي يمكن أن تكون وحدة ثابتة أو نسبية أو لونية.

بعض الوحدات الأخرى التي يمكن استخدامها في CSS تشمل:

الـ vw والـ vh: وحدتان تستخدمان لتحديد الحجم بناءً على عرض النافذة (vw) أو ارتفاع النافذة (vh). مثال:

width: 50vw;
height: 25vh;

الـ vmin والـ vmax: وحدتان تستخدمان لتحديد الحجم بناءً على القيمة الأصغر (vmin) أو القيمة الأكبر (vmax) بين عرض النافذة وارتفاع النافذة. مثال:

font-size: 5vmin;
line-height: 10vmax;

الـ em والـ ex: وحدتان تستخدمان لتحديد الحجم بناءً على حجم الخط في العنصر الأساسي (em) أو ارتفاع حرف “x” في الخط الحالي (ex). مثال:

font-size: 2em;
line-height: 1.5ex;

الـ ms والـ s: وحدتان تستخدمان لتحديد الوقت بين الحدثين، وتعني الوحدة الزمنية بالميلي ثانية (ms) والثانية (s) على التوالي. مثال:

transition: color 500ms ease-out;
animation: slide-in 2s forwards;

الـ pt والـ pc: وحدتان تستخدمان لتحديد الحجم بناءً على الطباعة، وتعني الوحدة النقطية (pt) والوحدة البيكونية (pc) على التوالي. مثال:

font-size: 12pt;
margin: 1pc;

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

السابق التالي