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

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

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

🆎 الحـجـم: 

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

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

• لتحديد الحجم بالقيمة المطلقة ( taille absolue) : نستعمل طريقة التحديد بالبكسل أو السنتيمترات أو المليمترات. هذه الطريقة دقيقة للغاية ولكن ينصح باستخدامها فقط إذا كانت ضرورية ، لأنها قد تشير إلى حجم صغير جدًا بالنسبة لبعض القُـرَّاء.
• لتحديد الحجم النسبي ( taille relative) : وهذا الحجم يتم تحديده بالنسبة المئوية، “em” أو “ex” ، وتتميز هذه التقنية  كونها أكثر مرونة. إنها تتكيف بسهولة أكبر مع الحجم الذي يفضله زوار المواقع. لــنـــرى …..

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

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

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

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

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

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

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

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

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

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

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

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

small = صغير

meduim = متوسط

large = كبير

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

xx-large = ضخم جداً

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

• أنظر النتيجة:

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

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

مثلاً:

• إذا كتبت 1em ، معناه أن  النص يظهر بحجمه الطبيعي.
• إذا كنت ترغب في تكبير الكتابة ، يمكنك إدخال قيمة أكبر من 1 ، مثلاً 1.5em.
• إذا كنت تريد تصغير الكتابة ، فأدخل قيمة أقل من 1 ، مثلاً 0.8em.

هنا مثال:

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

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

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