حجم الخط

جزء من قسم Styling with CSS في رحلة HTML على Coddy. الدرس 19 من 76.

في CSS، تُستخدم الخاصية font-size للتحكم في حجم النص داخل عنصر HTML.

فيما يلي بعض الوحدات الشائعة المستخدمة لتحديد أحجام الخطوط:

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

Ems (em): وحدة نسبية تعتمد على حجم خط العنصر الأب. على سبيل المثال، إذا كان العنصر الأب يتمتع بحجم خط قدره 16px، فإن 1em يساوي 16px، و2em يساوي 32px، وهكذا.

Rems (rem): وحدة نسبية تعتمد على font size للعنصر الجذر (<html>). توفر هذه الوحدة اتساقًا أكبر عبر المستند، لأنها لا تتأثر بـ font size للعناصر الأصلية.

النسب المئوية (%): وحدة نسبية تعتمد على font size للعنصر الأب، وتشبه em. على سبيل المثال، إذا كان لدى العنصر الأب font size بقيمة 16px، فإن 100% تساوي 16px، و150% تساوي 24px، وهكذا.

على سبيل المثال:

p {
    font-size: 16px;
}

h1 {
    font-size: 2.5em;
}

body {
    font-size: 1.4rem;
}

.small-text {
    font-size: 80%;
}

في هذا المثال، يتم تعيين font size لجميع عناصر <p> (paragraph) إلى 16px، ويتم تعيين جميع عناصر <h1> من نوع heading إلى 2.5em (والتي ستكون نسبية إلى font size لعنصرها الأب)، ويتم تعيين font size الأساسي للمستند إلى 1.4rem، وتكون جميع العناصر التي تحمل الفئة small-text ذات font size يبلغ 80% (والذي سيكون نسبيًا إلى font size لعنصرها الأب).

التحدي

سهل

أُعطي لك مستند HTML يحتوي على heading (<h1>)، وparagraph (<p>)، وdivision (<div>). مهمتك هي استخدام الخاصية font-size لتنسيق هذه العناصر. اتبع الخطوات أدناه:

اكتب قاعدة CSS تستهدف العنصر <h1>. عيّن قيمة font-size إلى 32px.
اكتب قاعدة CSS تستهدف العنصر <p>. عيّن قيمة font-size إلى 1.2em.
اكتب قاعدة CSS تستهدف العنصر <div>. عيّن قيمة font-size إلى 120%.

REQUIRED OUTPUT FORMAT: [Your translated content here]

جرّب بنفسك

<html>
<head>
    <title>Font Size</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>