CSS

Part 4 القيم (Values) في CSS – سلسلة FSWD -CSS

ahmedمنذ 4 أسابيع

0 96 3 دقائق

4. القيم (Values) في CSS

القيم في CSS هي الوحدات التي تُستخدم لتحديد الأبعاد، المسافات، الأحجام، والخصائص الأخرى للعناصر. هناك العديد من أنواع القيم التي يمكن استخدامها في CSS، والتي تعتمد على السياق الذي تستخدم فيه.

أنواع القيم في CSS:

1. px (بكسل)

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

مثال

div {
    width: 200px;
    height: 100px;
}

الشرح:

في هذا المثال، يتم تعيين العرض والارتفاع للـ <div> إلى 200px و100px، بغض النظر عن حجم الشاشة.

2. em

وحدة em تعتمد على حجم الخط للعنصر الأب.
1em يساوي حجم الخط الحالي للعنصر. على سبيل المثال، إذا كان حجم الخط للعنصر الأب هو 16px، فإن 1em يساوي 16px.
يمكن أن تُستخدم مع معظم الخصائص (مثل font-size, padding, margin).

مثال

div {
    font-size: 2em;  /* الحجم سيكون ضعف حجم الخط الأب */
    margin: 1.5em;  /* الهامش سيكون 1.5 ضعف حجم الخط الأب */
}

الشرح:

إذا كان حجم الخط للعنصر الأب هو 16px، فإن 2em سيكون 32px و1.5em سيكون 24px.

3. % (النسبة المئوية)

% تستخدم لتحديد القيم بالنسبة إلى عنصر آخر (عادةً العنصر الأب).
عند تحديد width أو height باستخدام النسبة المئوية، يتم حساب النسبة بناءً على حجم العنصر الأب.

مثال

div {
    width: 50%;  /* العرض سيكون 50% من عرض العنصر الأب */
    height: 20%;
}

الشرح:

في هذا المثال، سيتم تعيين العرض والارتفاع للـ <div> إلى 50% و20% من العنصر الأب.

4. rem (وحدة الجذر)

وحدة rem تعتمد على حجم الخط للعنصر الجذري (عادةً <html>).
1rem يساوي حجم الخط للعنصر الجذري (عادةً 16px في المتصفحات الحديثة).
تعد rem أكثر مرونة من em لأنها تعتمد على حجم الخط الجذري وليس على العنصر الأب.

مثال

html {
    font-size: 16px;  /* حجم الخط الجذري */
}

div {
    font-size: 2rem;  /* سيكون حجم الخط 32px */
    margin: 1rem;  /* الهامش سيكون 16px */
}

الشرح:

في هذا المثال، إذا كان حجم الخط الجذري 16px، فإن 2rem سيكون 32px و1rem سيكون 16px.

5. vh (وحدة العرض نسبة إلى ارتفاع الشاشة)

vh تعني “وحدة العرض بالنسبة إلى ارتفاع الشاشة” (viewport height).
1vh يساوي 1% من ارتفاع نافذة العرض (الشاشة).

مثال

div {
    height: 50vh;  /* الارتفاع سيكون 50% من ارتفاع الشاشة */
}

الشرح:

في هذا المثال، يتم تعيين الارتفاع إلى 50% من ارتفاع نافذة العرض (الشاشة).

6. vw (وحدة العرض نسبة إلى عرض الشاشة)

vw تعني “وحدة العرض بالنسبة إلى عرض الشاشة” (viewport width).
1vw يساوي 1% من عرض نافذة العرض (الشاشة).

مثال

div {
    width: 75vw;  /* العرض سيكون 75% من عرض الشاشة */
}

الشرح:

في هذا المثال، يتم تعيين العرض إلى 75% من عرض نافذة العرض (الشاشة).

كود مثال كامل:

الآن سنجمع كل القيم التي تم شرحها في مثال واحد:

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>مثال على CSS Values</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <h1>مثال على استخدام قيم CSS</h1>

    <div class="box">صندوق مع قيمة px</div>
    <div class="em-box">صندوق مع قيمة em</div>
    <div class="percentage-box">صندوق مع قيمة %</div>
    <div class="rem-box">صندوق مع قيمة rem</div>
    <div class="vh-box">صندوق مع قيمة vh</div>
    <div class="vw-box">صندوق مع قيمة vw</div>

</body>
</html>

CSS (styles.css)

/* قيم px */
.box {
    width: 200px;
    height: 100px;
    background-color: lightcoral;
    margin: 20px;
    text-align: center;
    line-height: 100px;
    color: white;
}

/* قيم em */
.em-box {
    width: 50%;
    height: 10em;
    background-color: lightblue;
    margin: 20px;
    text-align: center;
    line-height: 10em;
    color: white;
}

/* قيم % */
.percentage-box {
    width: 50%;
    height: 20%;
    background-color: lightgreen;
    margin: 20px;
    text-align: center;
    line-height: 20%;
    color: white;
}

/* قيم rem */
.rem-box {
    width: 50%;
    height: 5rem;
    background-color: lightgoldenrodyellow;
    margin: 20px;
    text-align: center;
    line-height: 5rem;
    color: black;
}

/* قيم vh */
.vh-box {
    width: 50vw;
    height: 50vh;
    background-color: lightseagreen;
    margin: 20px;
    text-align: center;
    line-height: 50vh;
    color: white;
}

/* قيم vw */
.vw-box {
    width: 75vw;
    height: 20vh;
    background-color: lightpink;
    margin: 20px;
    text-align: center;
    line-height: 20vh;
    color: black;
}

الشرح:

.box (px): يتم تعيين العرض والارتفاع باستخدام px، مما يعني أن الصندوق سيكون بحجم ثابت (200px عرضًا و100px ارتفاعًا).
.em-box (em): يتم تعيين العرض باستخدام % ولكن يتم تحديد الارتفاع باستخدام em، مما يعني أن الارتفاع يعتمد على حجم الخط الحالي.
.percentage-box (%): يتم تعيين العرض والارتفاع باستخدام %، وبالتالي يعتمد حجم الصندوق على حجم العنصر الأب.
.rem-box (rem): يتم استخدام rem لتحديد الأبعاد بناءً على حجم الخط الجذري.
.vh-box (vh): يتم تعيين العرض باستخدام vw و الارتفاع باستخدام vh، وهذا يعني أن الحجم يعتمد على حجم نافذة العرض (الشاشة).
.vw-box (vw): يتم تحديد العرض باستخدام vw و الارتفاع باستخدام vh، مما يعني أن العرض يعتمد على عرض الشاشة.

التجربة:

جرب هذه الأمثلة في المتصفح لمعرفة كيف تتغير الأبعاد بناءً على القيم المختلفة. ستلاحظ أن بعض الأبعاد ستظل ثابتة (مثل px)، في حين أن بعض الأبعاد ستتغير بناءً على حجم الصفحة أو الشاشة (مثل %, vh, vw).