وحدات CSS

تعرف على كيفية العمل مع الوحدات في CSS

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

اشياء مثلpxوemوremأو النسب المئوية.

انهم في كل مكان. هناك بعض الأشياء غير المعروفة نسبيًا أيضًا.

بكسل

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

هناك اتفاقية تجعل هذه الوحدة تعمل باستمرار عبر الأجهزة.

النسب المئوية

مقياس آخر مفيد للغاية ، يتيح لك النسب المئوية تحديد القيم بالنسب المئوية للخاصية المقابلة للعنصر الأصل.

مثال:

.parent {
  width: 400px;
}
.child {
width: 50%; /* = 200px */
}

وحدات قياس العالم الحقيقي

لدينا وحدات القياس تلك التي تمت ترجمتها من العالم الخارجي. غالبًا ما تكون غير مجدية على الشاشة ، ويمكن أن تكون مفيدة لأوراق أنماط الطباعة. هم انهم:

cmسنتيمتر (خرائط إلى 37.8 بكسل)
mmمليمتر (0.1 سم)
qربع ملليمتر
inبوصة (خرائط إلى 96 بكسل)
ptنقطة (1 بوصة = 72 نقطة)
pcبيكا (1 بيكا = 12 نقطة)

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

emهي القيمة المخصصة لهذا العنصرfont-size، لذلك تتغير قيمته بالضبط بين العناصر. لا يتغير اعتمادًا على الخط المستخدم ، فقط على حجم الخط. في الطباعة ، يقيس هذا عرضmرسالة.
remمشابه لem، ولكن بدلاً من الاختلاف في حجم خط العنصر الحالي ، فإنه يستخدم عنصر الجذر (html) حجم الخط. قمت بتعيين حجم الخط هذا مرة واحدة ، وremسيكون مقياسًا ثابتًا عبر كل الصفحة.
exيشبهem، ولكن يتم إدخال قياس عرضm، فإنه يقيس ارتفاعxرسالة. يمكن أن يتغير حسب الخط المستخدم وحجم الخط.
chيشبهexولكن بدلاً من قياس ارتفاعxيقيس عرض0(صفر).

وحدات منفذ العرض

vwالوحدة عرض منفذ العرضيمثل نسبة مئوية من عرض منفذ العرض.50vwيعني 50٪ من عرض منفذ العرض.
vhالوحدة ارتفاع منفذ العرضيمثل نسبة مئوية من ارتفاع منفذ العرض.50vhيعني 50٪ من ارتفاع منفذ العرض.
vminالالحد الأدنى لوحدة منفذ العرضيمثل الحد الأدنى بين الارتفاع أو العرض من حيث النسبة المئوية.30vminهو 30٪ من العرض أو الارتفاع الحالي ، اعتمادًا على أيهما أصغر
vmaxالوحدة منفذ العرض القصوىيمثل الحد الأقصى بين الارتفاع أو العرض من حيث النسبة المئوية.30vmaxهو 30٪ من العرض أو الارتفاع الحالي ، اعتمادًا على أيهما أكبر

وحدات الكسر

frهي وحدات كسرية ، ويتم استخدامها فيشبكة CSSلتقسيم الفضاء إلى كسور.

تحميل مجانيكتيب CSS