تعد القدرة على تصميم جوانب مختلفة من صفحة HTML الخاصة بك مهارة مهمة لمصممي ومطوري الويب. لتصميم صفحات الويب بتنسيق HTML باستخدام ألوان الخطوط وأحجامها ، ستحتاج إلى أن تكون على دراية بـ CSS. لاستهداف حجم الخط على وجه التحديد ، يمكنك استخدام CSS حجم الخط منشأه.
إذا كنت تبحث عن طريقة لتغيير حجم خط HTML باستخدام CSS ، فنحن نوفر لك ذلك. دعنا نتعمق بالبدء بمقدمة عن CSS حجم الخط منشأه.
التعرف على خاصية حجم الخط في CSS
ال حجم الخط تكون الخاصية في CSS مفيدة عندما تحتاج إلى تغيير حجم نص HTML. يمكنك استخدام هذه الخاصية لتغيير حجم كل جزء من النص في صفحة HTML أو استهداف عناصر معينة لتغييرها.
يوصى عادةً باستهداف عناصر محددة لأنك لا تريد عادةً أن يكون لكل شيء نفس الحجم. يصعب فحص النص الذي لا يتبع تسلسلاً هرميًا مرئيًا والتمييز بين العناوين ذات المستوى الأعلى والعناوين ذات المستوى المنخفض.
بعبارات أبسط ، لا تسيء استخدام حجم الخط منشأه. إذا كنت تريد تمييز العنوان ، فهناك علامات عناوين HTML مختلفة لذلك. تحقق من ورقة الغش الخاصة بأساسيات HTML للعلامات والسمات المختلفة والمزيد جنبًا إلى جنب مع التفسيرات.
CSS حجم الخط تأخذ الخاصية نوعين من القيم: مطلق ونسبي.
قيم الطول المطلق (أي مقصف) يتم إصلاحها بينما يتم إصلاحها النسبية (على سبيل المثال م و السابق) مرنة. على سبيل المثال ، لوحدة نسبية للخط مثل م، عادة ما يتم تحديد الحجم من خلال حجم خط العنصر الأصلي. ومع ذلك ، فإن الوحدات النسبية للخطوط المستندة إلى الجذر مثل rem تتأثر بحجم خط عنصر الجذر ().
لكل منها مزاياها وعيوبها ، ولكن في جوهر الحفاظ على تركيز الأشياء ، لن نناقشها في هذه المقالة.
كيفية تغيير حجم الخط لعنصر HTML في CSS
يمكنك تغيير حجم خط نص HTML باستخدام بعض بناء جملة CSS القياسي.
أولاً ، حدد المحدد (النص الذي ترغب في تعديله) وافتح بعض الأقواس المتعرجة. بعد ذلك ، أدخل ملف حجم الخط الخاصية متبوعة بنقطتين ، وحدد الحجم المحدد الذي تريد عرض نص HTML فيه ، وأغلقه بفاصلة منقوطة.
ها هي البنية:
محدد CSS {
حجم الخط: القيمة ؛
}للحصول على فهم أفضل للمفهوم ، راجع نموذج HTML المعياري التالي الذي يحتوي على بضعة أسطر إضافية من التعليمات البرمجية (عنوان وفقرة):
صفحة HTML بسيطة
هذا هو رأسي الأول
Lorem ipsum dolor sit amet، consectetur adipiscing elit، sed do eiusmod tempor incidunt ut labore et dolore magna aliqua. كل ما في الأمر هو الحد الأدنى من التمرين ، ممارسة التمارين الرياضية.
إذا كنت تريد تغيير حجم خط عنصر الفقرة ، فأنت بحاجة إلى تحديده (عبر فئة أو علامة أو معرف) واستخدام CSS حجم الخط الخاصية ، قم بتعيين قيمة مخصصة مع الوحدات المفضلة لديك. في مثالنا ، سنستخدم البكسل (مقصف).
ص {
حجم الخط: 18 بكسل ؛
}على الرغم من أن CSS المضمن لا ينصح به عمومًا في المشاريع الكبيرة ، إلا أنه يمكنك أيضًا استخدامه لتغيير حجم نص HTML. من خلال تدوين الملاحظات من كود CSS الخارجي أعلاه ، يمكننا تنفيذ نفس الشيء المضمّن مثل:
صفحة HTML بسيطة
هذا هو رأسي الأول
Lorem ipsum dolor sit amet، consectetur adipiscing elit، sed do eiusmod tempor incidunt ut labore et dolore magna aliqua. كل ما في الأمر هو الحد الأدنى من التمرين ، ممارسة التمارين الرياضية.
نص في ص سيكون لعلامة HTML الآن حجم مخصص جديد.
متعلق ب: نصائح وحيل أساسية حول CSS يجب أن يعرفها كل مطور
استكشاف الأخطاء وإصلاحها عند تغيير حجم خط HTML في CSS
على الرغم من أن عملية تغيير حجم النص بالكامل في CSS قد تبدو سهلة ، إلا أنها قد لا تتم دائمًا كما تتوقعها تمامًا. إذا كنت تواجه مشكلات ، فابدأ بالتحقق مما إذا كنت قد حفظت التغييرات في ملفك (أيضًا ، تأكد من ربط ورقة CSS بملف HTML الخاص بك). إذا قمت بذلك ، فحاول استخدام الطريقة المضمنة ، ثم قم بتحديث الصفحة.
إذا نجحت ، فقد تكون هناك مشكلة في كود CSS الخاص بك. جرب استخدام ملف !الأهمية علامة ، وإذا نجحت ، يجب أن يكون هناك بعض التعليمات البرمجية المتضاربة. قم بتحليل كود CSS الخاص بك سطراً بسطر لمحاولة اكتشاف هذا الخطأ.
بحاجة الى مساعدة في CSS؟ جرب أمثلة كود CSS الأساسية هذه لتبدأ ، ثم قم بتطبيقها على صفحات الويب الخاصة بك.
اقرأ التالي
- برمجة
- لغة البرمجة
- CSS
- تطوير الشبكة
- تصميم المواقع
يكتب ألفين وانجالا عن التكنولوجيا منذ أكثر من عامين. يكتب عن جوانب مختلفة ، بما في ذلك على سبيل المثال لا الحصر الأجهزة المحمولة والكمبيوتر الشخصي ووسائل التواصل الاجتماعي. يحب ألفين البرمجة والألعاب أثناء فترات التوقف.
اشترك في نشرتنا الإخبارية
انضم إلى النشرة الإخبارية لدينا للحصول على نصائح تقنية ومراجعات وكتب إلكترونية مجانية وصفقات حصرية!
انقر هنا للاشتراك
