السلام عليكم، سنرى في هذا الدرس أهم خواص التعديل على الخطوط، ألا و هم الخاصية FONT-SIZE، الخاصية FONT-STYLE و الخاصية FONT-WEIGHT.
الخاصية FONT-SIZE
الخاصية 'FONT-SIZE' هي Property تعطي إمكانية التعديل على حجم الخط، و تقبل ثلاث أنواع قيم :
* قيم مطلقة Absolute Values
* قيم نسبية Relative Values
* قيم شاملة Global Values
القيم المطلقة Absolute Values
القيم المطلقة هي قيم ثابتة لا تتغير، و ليست مخصصة سوى لخاصية 'FONT-SIZE'، بل نجدها في العديد من خواص CSS حيث تسمى 'Absolute Lengths'، و يُعبَّر عنها عامة بوحدة قياس من مجموعة وحدات القياس أسفله :
- PX : إسمها 'Pixel' و هي الوحدة المتداولة في البرمجة.
- PT : إسمها 'Point' بحيث أن 15pt=20px
- IN : إسمها 'Inche' بحيث أن 1in=96px
- PC : إسمها 'Pica' بحيث أن 1pc=16px
- CM : إسمها 'Centimeter' بحيث أن 1cm=37px
- MM : إسمها 'Millimeter' بحيث أن 1mm=3,7px
أما بخصوص الخاصية 'FONT-SIZE' فهي تقبل من القيم المطلقة جميع وحدات القياس المذكورة أعلاه، إضافة إلى أسماء الحجم بحيث أن هذه الأخيرة مقسمة إلى سبع قيم، و أن كل قيمة من القيم السبع تعطي حجم خط معين و هم :
- PX : إسمها 'Pixel' و هي الوحدة المتداولة في البرمجة.
- PT : إسمها 'Point' بحيث أن 15pt=20px
- IN : إسمها 'Inche' بحيث أن 1in=96px
- PC : إسمها 'Pica' بحيث أن 1pc=16px
- CM : إسمها 'Centimeter' بحيث أن 1cm=37px
- MM : إسمها 'Millimeter' بحيث أن 1mm=3,7px
أما بخصوص الخاصية 'FONT-SIZE' فهي تقبل من القيم المطلقة جميع وحدات القياس المذكورة أعلاه، إضافة إلى أسماء الحجم بحيث أن هذه الأخيرة مقسمة إلى سبع قيم، و أن كل قيمة من القيم السبع تعطي حجم خط معين و هم :
- XX-SMALL : قيمة حجم الخط الأصغر في القيم السبع.
- X-SMALL : قيمة حجم خط صغير جداً.
- SMALL : قيمة حجم خط صغير.
- MEDIUM : قيمة حجم خط متوسط.
- LARGE : قيمة حجم خط كبير.
- X-LARGE : قيمة حجم خط كبير جداً.
- XX-LARGE : قيمة حجم الخط الأكبر في القيم السبع.
القيم النسبية Relative Values
القيم النسبية هي قيم متغيرة إما نسبة إلى التنسيق التلقائي للـ HTML، و إما نسبة إلى العنصر المحتوي، و ليست مخصصة سوى لخاصية 'FONT-SIZE'، بل نجدها في العديد من خواص CSS حيث تسمى 'Relative Lengths'، و يُعبَّر عنها عامة بوحدة من مجموعة الوحدات أسفله :
- EM : وحدة تطبق مفعولها نسبة إلى حجم العنصر، فمثلاً 3em هي 3 مرات حجم العنصر.
- % : وحدة تطبق مفعولها نسبة إلى العنصر المحتوي أو التنسيق التلقائي.
- EX : وحدة تطبق مفعولها نسبة إلى الإرتفاع X للعنصر.
- CH : وحدة تطبق مفعولها نسبة إلى عرض الصفر '0'.
- REM : وحدة تطبق مفعولها نسبة إلى العنصر الجِذر الذي يكون في أغلب الحالات العنصر 'HTML'.
- VW : وحدة تطبق مفعولها نسبة إلى عرض الشاشة بحيث أن 1vw تساوي 1% من عرض الشاشة.
- VH : وحدة تطبق مفعولها نسبة إلى ارتفاع الشاشة بحيث أن 1vh تساوي 1% من ارتفاع الشاشة.
- VMIN : وحدة تطبق مفعولها نسبة إلى البعد الأصغر في بعدي الشاشة، أي أن 1vmin=1vw في حال عرض الشاشة أصغر من ارتفاعها، أما إذا كان ارتفاع الشاشة أصغر من عرضها، فستكون 1vmin=1vh.
- VMAX : وحدة تطبق مفعولها نسبة إلى البعد الأكبر في بعدي الشاشة، أي أن 1vmax=1vw في حال عرض الشاشة أكبر من ارتفاعها، أما إذا كان ارتفاع الشاشة أكبر من عرضها، فستكون 1vmax=1vh.
أما بخصوص الخاصية 'FONT-SIZE' فهي تقبل من القيم النسبية جميع القيم المذكورة أعلاه، إضافة إلى أسماء الحجم بحيث أن هذه الأخيرة مقسمة إلى قسمين و هما :
- EM : وحدة تطبق مفعولها نسبة إلى حجم العنصر، فمثلاً 3em هي 3 مرات حجم العنصر.
- % : وحدة تطبق مفعولها نسبة إلى العنصر المحتوي أو التنسيق التلقائي.
- EX : وحدة تطبق مفعولها نسبة إلى الإرتفاع X للعنصر.
- CH : وحدة تطبق مفعولها نسبة إلى عرض الصفر '0'.
- REM : وحدة تطبق مفعولها نسبة إلى العنصر الجِذر الذي يكون في أغلب الحالات العنصر 'HTML'.
- VW : وحدة تطبق مفعولها نسبة إلى عرض الشاشة بحيث أن 1vw تساوي 1% من عرض الشاشة.
- VH : وحدة تطبق مفعولها نسبة إلى ارتفاع الشاشة بحيث أن 1vh تساوي 1% من ارتفاع الشاشة.
- VMIN : وحدة تطبق مفعولها نسبة إلى البعد الأصغر في بعدي الشاشة، أي أن 1vmin=1vw في حال عرض الشاشة أصغر من ارتفاعها، أما إذا كان ارتفاع الشاشة أصغر من عرضها، فستكون 1vmin=1vh.
- VMAX : وحدة تطبق مفعولها نسبة إلى البعد الأكبر في بعدي الشاشة، أي أن 1vmax=1vw في حال عرض الشاشة أكبر من ارتفاعها، أما إذا كان ارتفاع الشاشة أكبر من عرضها، فستكون 1vmax=1vh.
أما بخصوص الخاصية 'FONT-SIZE' فهي تقبل من القيم النسبية جميع القيم المذكورة أعلاه، إضافة إلى أسماء الحجم بحيث أن هذه الأخيرة مقسمة إلى قسمين و هما :
- LARGER : قيمة تُكبر الحجم نسبة إلى العنصر المحتوي.
- SMALLER : قيمة تُصغر الحجم نسبة إلى العنصر المحتوي.
القيم الشاملة Global Values
تستعمل القيم الشاملة في أغلب خواص CSS، ففي حالة الخاصية 'FONT-SIZE'، فهذه الأخيرة تقبل قيمتين شاملتين ألا وهما :
- INHERIT : عامة هذه القيمة تأمر متصفح الإنترنت بتوريث تأثير الخاصية للعنصر من العنصر المحتوي، و في حالة الخاصية 'FONT-SIZE'، القيمة تأمر متصفح الإنترنت بتوريث الحجم للعنصر من العنصر المحتوي.
- INITIAL : عامة هذه القيمة تأمر متصفح الإنترنت بإرجاع تأثير الخاصية في العنصر إلى التأثير الأوّلي، و في حالة الخاصية 'FONT-SIZE'، القيمة تأمر متصفح الإنترنت بإرجاع حجم العنصر إلى الحجم الأوّلي.
بالإمكان الإستفادة من هذه الصفحة في الويب باعتبارها صفحة مفيدة حيث تحتوي على جدول تحويل الوحدات 'EM'، 'PX'، 'PT' و '%'، و تحتوي أيضاً على آداة تحويل من الوحدة 'PT' إلى الوحدة 'PX' و العكس
الفيديو التوضيحي للدرس
الخاصية FONT-STYLE
الخاصية 'FONT-STYLE' هي Property تعطي إمكانية التعديل على مظهر الخط، و تقبل نوعين من القيم و هما :
* قيم إسمية Nominal Values
* قيم شاملة Global Values
القيم الإسمية Nominal Values
تقبل الخاصية 'FONT-STYLE' قيم بإسم المظهر و هم ثلاثة :
- NORMAL : قيمة تُظهر الخط بمظهر عادٍ، و هي القيمة التلقائية.
- ITALIC : قيمة تُظهر الخط مائل.
- OBLIQUE : قيمة شبيهة بقيمة 'ITALIC' تُظهر الخط مائل أيضاً، لكنها تستعمل في حال عدم قبول بعض أنواع الخطوط للقيمة 'ITALIC'.
القيم الشاملة Global Values
تقبل الخاصية 'FONT-STYLE' من القيم الشاملة قيمة واحدة ألا و هي :
- INHERIT : قيمة تأمر متصفح الإنترنت بتوريث المظهر للعنصر من العنصر المحتوي في حالة الخاصية 'FONT-STYLE'.
الخاصية FONT-WEIGHT
الخاصية FONT-WEIGHT هي Property تعطي إمكانية التعديل على سمك الخط، و تقبل أربعة أنواع من القيم و هم :
* قيم إسمية Nominal Values
* قيم رقمية Numeric Values
* قيم نسبية Relative Values
* قيم شاملة Global Values
القيم الإسمية Nominal Values
تقبل الخاصية 'FONT-WEIGHT' قيمتين بإسم السمك و هما :
- NORMAL : قيمة تُظهر السمك العادي.
- BOLD : قيمة تُظهر السمك الغليظ.
القيم الرقمية Numeric Values
تُكتب القيم الرقمية من 1 إلى 1000 في قيمة الخاصية 'FONT-WEIGHT' بحيث أن كلما اقتربت القيمة من '1000' غلظ السمك، علماً أن 400 تضاهي سمك القيمة الإسمية 'NORMAL'، و 700 تضاهي سمك القيمة الإسمية 'BOLD'.
القيم النسبية Relative Values
تقبل الخاصية 'FONT-WEIGHT' قيمتين نسبيتين و هما :
- BOLDER : قيمة تُكبر السمك نسبة إلى العنصر المحتوي.
- LIGHTER : قيمة تُصغر السمك نسبة إلى العنصر المحتوي.
القيم الشاملة Global Values
تقبل الخاصية 'FONT-WEIGHT' من القيم الشاملة قيمتين ألا و هما :
- INHERIT : قيمة تأمر متصفح الإنترنت بتوريث السمك للعنصر من العنصر المحتوي في حالة الخاصية 'FONT-WEIGHT'.
- INITIAL : قيمة تأمر متصفح الإنترنت بإرجاع سمك العنصر إلى السمك الأوّلي في حالة الخاصية 'FONT-WEIGHT'
الأكواد المستعملة في الدرس
أتمنى أن تستفيدوا من الدرس