موقع Jabism

تحديد حجم النص في CSS

عبدالرحيم

تحديد حجم النص في CSS

من الخواص المهمة التي يوفرها لنا CSS لتنسيق النصوص و جعلها جميلة و جذابة، هو إمكانية تغيير حجم الكتابة ، بحيث نحدد حجم العناوين الكبيرة و العناوين التابعة و الفقرات المهمة و الكلمات المؤثرة و غيرها ..

نبدأ على بركة الله

🆎 الحـجـم: 

 

 

لتغيير حجم الكتابة نستعمل خاصية CSS التالية: font-size.

لكـن كيف يتم ذلك؟؟🧩 إممم .. 🤫 هنـاستبدأ الأمور بالتعقيد، بسبب توفر العديد من التقنيات التي تصب في نفس المنحى.

🎲 الحجم المطلق – Taille absolue :

هذا النوع من الحجم يتطلب مِـنَّا عموماً استخدام البيكسلات Les pixels .

وللحصول على نص يبلغ ارتفاعه 14 بكسل مثلاً ، يجب عليك كتابته بهذا الشكل:

1
font-size: 14px;

 

في هاته الحالة سيكون حجم الحروف 14 pixels .

ارتفاع الحرف 14 بيكسيل

الآن جاء وقت وضع الكود  في ملف CSS كالتالي:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
h1
{
    font-size: 40px; /* حجم العنوان الرئيسي 40 بيكسيل */
}
 
h2
{
    font-size: 36px; /* حجم العنوان الثاني 36 بيكسيل */
}
 
p
{
    font-size: 14px; /* حجم الفقرات 14 بيكسيل */
}

 

و النتيجة كما ترى:

 

نتيجة الحجم في css3

تحديد حجم النص في CSS

📌 عليك أن تعلم أنه يمكنك إن أردت تحديد الأحجام بالسنتيمترات أو المليمترات. وذلك ياستبدال “px” بـ “cm” أو “mm”. ولكن لا أنصحك بذلك ! لأن هاته الوحدات تفقد النص جماليته في بعض المتصفحات، و قد لا تتلائم مع بعض الشاشات في كبرها وصغرها.

🎲 القيمة النسبية – Valeur relative:

تبقى هذه الطريقة الملائمة والموصى بها لأن الزوار تجدهم أكثر تكيفاً مع هاته القيمة الحجمية للكتابة. أريد أن أشير إلى أمر مهم و ملحوظ لذا الجميع هو أن القيمة لها إشارات مختلفة تترجم نوعية الحجم تماماً مثل الألوان التي تكتب إمابالأرقام او بالحروف الانجليزية . — المثال :

xx-small = ضغير جداً جداً

x-small = صغير جداً

small = صغير

meduim = متوسط

large = كبير

x-large = كبير جداً

xx-large = ضخم جداً

يمكنك استخدام هاته القيم كتجربة من الآن:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
h1
{
    font-size: xx-large;
}
h2
{
    font-size: x-large;
}
em
{
    font-size: large;
}
p
{
    font-size: small;
}

 

 

تحديد حجم النص في CSS

أيّيايْ !!! ، لا أدري لماذا هؤلائ المبرمجين يهوون المشاكل و التعقيد ؟
لماذا لا نستعمل طريقة جد سهلة و توفي بالغرض؟ . مثلاً بدل هاته المجموعة من الأسماء المحصورة في 7 قِيَمْ ، يمكننا استعمال أسلوب التكبير و التصغير من خلال القيمة الحجمية “em”.

مثلاً:

تنبيه:
❌ بالنسبة للأعداد العشرية ، يجب عليك وضع نقطة وليس فاصلة. يجب أن تكتب “1.2em” وليس “1,2em”!

هنا مثال:

1
2
3
4
5
6
7
8
9
10
11
12
ا1
{
    font-size: 1.5em;
}
h2
{
    font-size: 1.2em;
}
p
{
    font-size: 0.9em;
}

 

طيِّب ! هل استأنست بهاته الطريقة؟

إن em ليس وحده من ينفرد بهذا العمل ، بل هناك قيمة أخرى لها نفس العمل ، إنها ex وتستعمل النِّسَب المئوية مثل 100% و 120% .

♟ رغم أن الدرس يبدو سهلاً لكنك لن تتمكن منه إذا لم تطبقه مرات عديدة، و كما يقال:

« الشيئ إذا تكرر تقرر »

الرجوع لقائمة المزيد من تنسيقات النصوص 
Exit mobile version