علامة لزيادة الخط في HTML. كيفية إنشاء خط جميل في html: الأحجام والألوان وعلامات خطوط html

27/11/14 88.7 ألف

في لغة HTML، يلعب حجم الخط دورًا مهمًا. يسمح لك بلفت انتباه المستخدم إلى المعلومات المهمة المنشورة على صفحة الموقع. على الرغم من أنه ليس فقط حجم الحروف هو المهم، ولكن أيضًا لونها وسمكها وحتى عائلتها.

العلامات والسمات عند العمل مع خطوط html

تحتوي لغة النص التشعبي على مجموعة واسعة من الأدوات للعمل مع الخطوط. بعد كل شيء، تنسيق النص هو المهمة الرئيسية لـ HTML.

كان سبب إنشاء لغة HTML هو مشكلة عرض قواعد تنسيق النص في المتصفحات.

دعونا نلقي نظرة على العلامات المستخدمة للعمل مع الخطوط في HTML وسماتها. الشيء الرئيسي هو العلامة . باستخدام قيم سماته، يمكنك تعيين العديد من خصائص الخط:

اللون - يحدد لون النص؛
الحجم - حجم الخط بالوحدات التقليدية.

يتم دعم قيم السمات الإيجابية من 1 إلى 7.

الوجه - يُستخدم لتعيين عائلة خطوط النص التي سيتم استخدامها داخل العلامة . يتم دعم العديد من القيم، مفصولة بفواصل.

يتم تنسيق النص الموجود بين أجزاء علامة الخط المقترنة فقط.يتم عرض بقية النص بالخط الافتراضي القياسي.

يوجد أيضًا في HTML عدد من العلامات المقترنة التي تحدد قاعدة تنسيق واحدة فقط. وتشمل هذه:

- تعيين الخط الغامق في HTML. بطاقة شعار مماثلة في العمل للسابقة؛

- الحجم أكبر من الافتراضي؛

- حجم خط أصغر؛

- نص مائل (مائل). علامة مماثلة ;

- نص مع تسطير؛

~~- شطب؛~~

_{- عرض النص بالأحرف الصغيرة فقط؛}

^{- بالأحرف الكبيرة.}

نص عادي

ظفري

ظفري

أكثر من المعتاد

أقل من المعتاد

مائل

مائل

مع تسطير

~~شطب~~

قدرات سمة النمط

بالإضافة إلى العلامات الموصوفة، هناك عدة طرق لتغيير الخط في HTML. أحدها هو استخدام سمة النمط العامة. باستخدام قيم خصائصه، يمكنك ضبط نمط عرض الخط:

1) عائلة الخطوط - تقوم الخاصية بتعيين عائلة الخطوط. من الممكن سرد قيم متعددة.
سيتم تغيير الخط في html إلى القيمة التالية إذا لم يتم تثبيت العائلة السابقة على نظام التشغيل الخاص بالمستخدم.

بناء الجملة الكتابة:

عائلة الخط: اسم الخط [، اسم الخط [، ...]]

2) حجم الخط – يتم ضبط الحجم من 1 إلى 7. وهذه إحدى الطرق الرئيسية التي يمكنك من خلالها زيادة الخط في HTML.
بناء الجملة الكتابة:

حجم الخط: الحجم المطلق | الحجم النسبي | معنى | الفائدة | يرث

يمكنك أيضًا ضبط حجم الخط:

بالبكسل؛

بالأرقام المطلقة ( xx صغير، x صغير، صغير، متوسط، كبير);

بالنسب المئوية

بالنقاط (نقطة).

حجم الخط:7

حجم الخط: 24 بكسل

حجم الخط: x-كبير

حجم الخط: 200%

حجم الخط: 24 نقطة

3) نمط الخط – يحدد نمط كتابة الخط. بناء الجملة:
نمط الخط: عادي | مائل | منحرف | يرث

قيم:

عادي - التهجئة العادية؛

مائل - مائل؛

منحرف - خط مائل إلى اليمين؛

يرث - يرث تهجئة العنصر الأصلي.

مثال لكيفية تغيير الخط في HTML باستخدام هذه الخاصية:

نمط الخط: وراثة

نمط الخط: مائل

نمط الخط: عادي

نمط الخط: مائل

4) Font-variant - يحول جميع الحروف الكبيرة إلى حروف كبيرة. بناء الجملة:
متغير الخط: عادي | أحرف صغيرة | يرث

مثال لكيفية تغيير الخط في HTML باستخدام هذه الخاصية:

متغير الخط: وراثة

متغير الخط: عادي

متغير الخط: أحرف صغيرة

5) وزن الخط - يسمح لك بضبط سمك النص (التشبع). بناء الجملة:
وزن الخط: غامق|أكثر جرأة|أخف|عادي|100|200|300|400|500|600|700|800|900

قيم:

غامق - يضبط خط html على غامق؛

أكثر جرأة - أكثر جرأة بالنسبة إلى وضعها الطبيعي؛

أخف وزنا - أقل تشبعا مقارنة بالمعدل الطبيعي؛

عادي - التهجئة العادية؛

100-900 - يضبط سمك الخط بالمكافئ العددي.

وزن الخط: غامق

وزن الخط: أكثر جرأة

وزن الخط: أخف وزنا

وزن الخط: عادي

وزن الخط: 900

وزن الخط: 100

خاصية الخط html ولون الخط

الخط هو خاصية حاوية أخرى. داخل نفسه، قام بدمج قيم العديد من الخصائص المخصصة لتغيير الخطوط. بناء جملة الخط:

الخط: حجم الخط عائلة الخط | يرث

يمكن أيضًا تعيين القيمة على الخطوط التي يستخدمها النظام في التسميات الموجودة على عناصر التحكم المختلفة:

التسمية التوضيحية - للأزرار؛

أيقونة - للأيقونات؛

القائمة - القائمة؛

مربع الرسالة - لمربعات الحوار؛

تسمية توضيحية صغيرة - لعناصر التحكم الصغيرة؛

شريط الحالة - خط شريط الحالة.

الخط: أيقونة

الخط: تسمية توضيحية

الخط: القائمة

الخط : صندوق الرسائل

تسمية توضيحية صغيرة

الخط: شريط الحالة

الخط: مائل 50 بكسل غامق "Times New Roman"، Times، serif

يبدو الأمر، لماذا تعرف علامات HTML للنص، إذا كانت أي لوحة إدارة تقريبًا بها لوحة ملائمة تقوم بتعيينها تلقائيًا؟
الحقيقة هي أن تنسيق المحتوى على موقع الويب يختلف بشكل أساسي عن العمل في التطبيقات المكتبية. لا يكفي هنا مجرد إعطاء النص مظهرًا جذابًا، لأنه لا يعتمد فقط على عرض صفحة الويب، ولكن أيضًا الترويج لها في محركات البحث، على التصميم الصحيح.
علامات وسمات HTML: بناء الجملة الأساسي
يحتوي أي نص على رمز مخفي "يشرح" للكمبيوتر ماذا وكيف يتم عرضه على الشاشة. يتم تسجيل جميع المعلومات باستخدام مجموعة من العناصر العالمية.
في الأساس، علامات نص HTML هي أوامر تضيف كتلًا معينة إلى الصفحة أو تغير مظهرها. يبدو تنسيق التسجيل الصحيح كما يلي:
يرجى ملاحظة أنه لا يتم إقران جميع العلامات. على سبيل المثال،
(تخطي السطر) أو
(إضافة خط أفقي) لا يحتاج إلى غلق مطلقا.
لماذا لا يمكنك نسخ المقالات من Word والبرامج الأخرى إلى محرر موقع الويب
على الرغم من أن البرامج المكتبية الحديثة تستخدم نفس علامات HTML للنص، إلا أن 99% من الوقت يكون الكود الأصلي غير قابل للاستخدام لصفحات الويب. حتى إذا تم عرض المستند بشكل طبيعي في التطبيق نفسه، فقد يتم فقدان التنسيق عند إدراجه في موقع ويب. بالإضافة إلى ذلك، نظرًا للعدد الكبير من العلامات والسمات غير الضرورية، لا تستطيع محركات البحث تحليل محتوى الصفحة بشكل مناسب. وهذا بدوره يجعل من الصعب الترويج لمواردك.
للحصول على تعليمات برمجية نظيفة وذات صلة، تحتاج أولاً إلى تجريد نص علامات HTML التي تم إنشاؤها بواسطة محرر عادي. هناك عدة طرق للقيام بذلك:
"قم بتشغيل" المقالة من خلال "المفكرة" وبعد ذلك فقط أدخلها على الموقع. يقوم التطبيق بمسح كل HTML، لذا سيتعين عليك بعد ذلك تنسيق النص مرة أخرى (باستخدام أدوات التحرير أو يدويًا).
كتابة ونشر المقالات باستخدام LiveWriter. يقوم محرر المدونة الشهير بإنشاء الكود الصحيح على الفور. وفي علامة تبويب منفصلة يمكنك رؤية كيف سيبدو النص الموجود على الموقع.
استخدم منظف HTML. لا تقوم هذه الخدمة عبر الإنترنت بتدمير التعليمات البرمجية بأكملها، ولكن الأجزاء غير الضرورية فقط. باستخدام المرشحات، يمكنك اختيار العلامات التي تريد حفظها. يوجد أيضًا محرر تنسيق مرئي قوي يضيف أوامر محسّنة بالفعل إلى التعليمات البرمجية.

الفقرات
هذا العنصر موجود في جميع المقالات تقريبًا. يجب أن تكون كل فقرة موجودة داخل هذه الحاوية - وهذا يبسط التنسيق ويسمح لك بالحفاظ على نمط ثابت في جميع صفحات الموقع. للراحة، العلامة
أكتب دائما على سطر جديد.
تنسيق
لم يتم استخدام علامة HTML المنفصلة "محاذاة النص" لفترة طويلة. بدلاً من ذلك، تم إنشاء سمة ALIGN عامة. لتغيير موضع كتلة النص على الصفحة، يجب عليك تحديد إحدى القيم الثلاث - CENTER أو RIGHT أو LEFT. يمكنك ضبط المحاذاة للعناصر الأخرى، مثل العناوين، بنفس الطريقة.
في بعض المواقف، يتم استخدام علامات أخرى للمحاذاة، على سبيل المثال، يمكنك تحديد الموضع باستخدام العنصر
.... لماذا تعتبر العلامة المنفصلة مفيدة؟ وعلى عكس السمة، فهو يعمل مع أي محتوى، بما في ذلك الصور ومقاطع الفيديو والفلاش وما إلى ذلك.
العناوين والعناوين الفرعية
يتيح لك نظام العناوين الفرعية إنشاء بنية محتوى منطقية. عندما يتم تقسيم النص إلى كتل ذات معنى، يكون من الأسهل على القارئ التركيز وتعلم معلومات جديدة. تقوم محركات البحث أيضًا بتحليل العناوين الرئيسية لفهم الاستعلامات التي سيتم الترويج للصفحة من أجلها. ولهذا السبب يوصي خبراء تحسين محركات البحث (SEO) باستخدام الكلمات الرئيسية الموضعية فيها.
يستخدم HTML ستة مستويات من العناوين الفرعية - من
قبل
. هناك تسلسل هرمي واضح في هذا النظام:
...
. مقال رئيسي، منتج في متجر على الإنترنت، وما إلى ذلك). يمكن أن يكون هناك واحد فقط في النص
. وكقاعدة عامة، فإنه يحتوي على الكلمة الرئيسية.
...
. العناوين الفرعية من المستوى الثاني تقسم النص إلى كتل ذات معنى. على سبيل المثال، إذا كنت تقوم بتقييم أجهزة الكمبيوتر المحمولة، فيمكنك القيام بعدة مرات
مع أسماء نماذج مختلفة.
...
. المستوى الثالث مطلوب إذا كان النص بين اثنين
يتم تقسيمها أيضًا إلى كتل صغيرة. في مثالنا، يمكن أن تكون هذه معايير التقييم - "الأداء"، "الذاكرة"، "بطاقة الفيديو"، وما إلى ذلك لكل نموذج.
,
,
. في الممارسة العملية فهي نادرة للغاية. لكن المبدأ العام هو نفسه - يجب أن تكون "متداخلة" في كتلة ذات عنوان فرعي عالي المستوى.

تأكد من الحفاظ على التسلسل الهرمي الصحيح. وبالعودة إلى مثالنا، فهذا يعني أنه لا يمكنك إدخال أسماء النماذج على الفور
أو
. والأكثر من ذلك، استخدم عناوين فرعية ذات مستويات مختلفة للكتل ذات المعنى المتجانس (على سبيل المثال، قم بتمييز جهاز كمبيوتر محمول حصل على المركز الأخير في التصنيف باستخدام
).
فيما يلي رسم تخطيطي سيساعدك على فهم وتذكر البنية الصحيحة للعناوين في HTML على الفور.
القوائم
من الأفضل تنسيق أي قوائم وتعليمات في شكل قوائم، باستخدام علامات HTML الخاصة للنص (الخطأ النموذجي هو بضع فقرات فقط
والتي تبدأ بواصلة أو رقم).
هيكل هذه الكتل بسيط للغاية. أولا، نحدد نوع القائمة - تعداد نقطي أو رقمي.
جميع العناصر موجودة بين علامتي الفتح والإغلاق. يبدأ كل عنصر في القائمة في سطر جديد ويكون له التنسيق . عدد العناصر غير محدود.
الاختيار وخصائصه
ما الذي يمكن تغييره باستخدام هذا الخط واللون - وبدون إضافة فئات جديدة إلى CSS. يعد هذا مناسبًا جدًا عندما تحتاج إلى تمييز جملة أو جزء واحد فقط.
له عدة سمات:
وجه. يسمح لك بتغيير خط النص. يمكنك إدراج عدة خيارات مفصولة بفواصل (Tahoma، Verdana). إذا لم يكن الخط الأول مثبتًا لدى المستخدم، فسيستخدم النظام ببساطة بديلاً.
مقاس. لتكبير النص أو تصغيره، أدخل قيمة بين 1 و7 بين علامتي الاقتباس.
لون. اعتمادًا على التصميم، يمكنك اختيار أحد الظلال القياسية (الأحمر، الأخضر، الأزرق) أو إدخال رمز لأي لون من اختيارك.

لا تستخدم الفقرات المنسقة مع بدلاً من العناوين الفرعية. من الأفضل تعيين نفس معلمات التصميم بالعلامة الصحيحة.
طرق تسليط الضوء على النص
النص الرتيب متعب، حتى أنه مقسم إلى فقرات. لجذب الانتباه وإثارة اهتمام القارئ، يوصى بإبراز النقاط الرئيسية بيانياً. فيما يلي بعض الأوامر التي ستساعدك على التعامل مع هذه المهمة.
... . علامة HTML شائعة جدًا. النص الغامق يلفت الأنظار على الفور، وبالتالي فمن الملائم تسليط الضوء على النقاط والحقائق المهمة.
كثير من الناس يخلطون بين العلامات و . لا يوجد فرق بصري، لكنها تعمل بشكل مختلف. الأول يغير ببساطة مظهر النص، بينما يعمل الثاني بمثابة "فهرس" ويسلط الضوء على الأجزاء الأكثر أهمية (الكلمات الرئيسية والعبارات الخاصة بالموضوع لتحسين محركات البحث).
... . تعتبر الحروف المائلة الأنيقة والصارمة مثالية لتصميم المصطلحات العلمية والكلمات الأجنبية ومجموعة متنوعة من الاقتباسات. في المنشورات الجادة، يتم تمييز أسماء الأعمال الفنية أيضا بالنص المائل.
... . ربما لم تسبب أي علامة HTML أخرى الكثير من الجدل. نادرًا ما يتم استخدام تسطير النص، نظرًا لأن طريقة التمييز هذه ارتبطت تاريخيًا بالارتباطات التشعبية. إذا كنت تستخدم في المقالات، يرجى ملاحظة أن هذا مناسب فقط للأجزاء القصيرة - لا يزيد عن سطر واحد.
~~...~~ . علامة مثيرة للاهتمام تسمح لك بعمل جزء مناسب جدًا للإعلان - على سبيل المثال، للتأكيد على التناقض بين الأسعار القديمة والجديدة.
... . أسهل طريقة لزيادة حجم الخط بدون أي خيارات إضافية.
... . إنه يعمل على نفس مبدأ العلامة السابقة. يتم تقليل النص الموجود بالداخل مقارنة بالنص الرئيسي.
^... . الاسم الصحيح لهذا التنسيق مرتفع. هذه العلامة مخصصة بشكل أساسي للدرجات الرياضية والحواشي السفلية. فهو يقلل من حجم الخط وينقل النص المحدد لأعلى.
_... . غالبًا ما يتم العثور على الاشتراكات في صيغ مختلفة. يقع الجزء المحدد أسفل النص الرئيسي.
حاويات ذات معنى
نظرا لأنه تم العثور على بعض الكتل في العديد من النصوص، فقد تم إنشاء علامات خاصة لهم. يؤدي هذا إلى تبسيط التنسيق، لأنه إذا كان لكل نوع من المحتوى مجموعة أنماط خاصة به، فأنت تحتاج فقط إلى تمييز جزء من النص والإشارة إلى المعلومات التي يحتوي عليها.
... . علامة لإضافة رموز الكمبيوتر. لا غنى عنه في المقالات المتعلقة بالبرمجة مع الأمثلة - لا يتم تنفيذ الأوامر، بل يتم عرضها كنص عادي.
... . مصممة لتنسيق الاقتباسات - على سبيل المثال، المقتطفات الرئيسية من المقابلة.
. يضع جزءًا من النص في كتلة منفصلة. افتراضيًا، يحتوي التحديد على مساحة أكبر من المساحة اليسرى، ولكن يمكنك أيضًا تغيير حجم النص ونمط الخط ولونه في CSS.
...
. علامة إضافية تحتوي على معلومات حول المؤلف، بما في ذلك الروابط.
خط الحدود
يمكن استخدام سطر بسيط لتحديد النهاية المنطقية لقسم كبير.
لا ينطبق على العلامات المقترنة. وهذا يعني أن عنصر تنسيق الإغلاقلا حاجة.
باستخدام سمة WIDTH، يمكنك جعل الفاصل أقصر عن طريق تحديد حجم مناسب بالبكسل أو نسبة مئوية من عرض النافذة.
من خلال تعلم كيفية استخدام العلامات بشكل صحيح لتنسيق النص في HTML، لن تجعل مقالاتك أسهل في القراءة فحسب، بل ستزيد أيضًا من فعالية تحسين محركات البحث (SEO).

لتغيير الخط استخدم علامة مع سمة FACE. يمكنك تحديد الخط حسب الاسم (Arial، Tahoma، Verdana) أو النوع (على سبيل المثال، monospace). يُنصح بإدراج عدة أسماء خطوط لتجنب الموقف الذي يتبين فيه أن المستخدم ليس لديه الخط المطلوب مثبتًا. أوصي باستخدام واحد على الأقل من الخطوط المقبولة عمومًا (على سبيل المثال Arial). لا أنصح باستخدام أكثر من 2-3 خطوط مختلفة في صفحة واحدة، وإلا ستبدو الصفحة خرقاء وغير احترافية.

مثال:

تغيير حجم الخط لصفحة html

لتغيير حجم الخط، استخدم سمة الحجم. كلما كان الخط أكبر، أصبحت قراءة النص أسهل. ومع ذلك، يسمح لك الخط الصغير باحتواء المزيد من المعلومات داخل الشاشة. استخدام هذه السمة مع العلامة ، يمكنك تغيير حجم النص لصفحة الويب بأكملها. استخدام سمة الحجم بالتزامن مع العلامة ، يمكنك التأثير على مظهر جزء واحد من النص. 7 أحجام الخطوط المتاحة. الأصغر يُشار إليه بالرقم 1، والأكبر بالرقم 7.

يمكنك تغيير الخط باستخدام العلامات و . يقوم بتكبير خط الجزء المحدد بالنسبة للنص السابق، و ، وفقا لذلك، يقلل.

من خلال تغيير حجم الحروف الفردية، يمكنك تحقيق تأثيرات مثيرة للاهتمام. على سبيل المثال، بهذه الطريقة يمكنك الحصول على حرف استهلالي كبير - حرف كبير في بداية الفقرة.

مثال:

تحديد لون الخط لصفحة html

إن عرض أجزاء من نص صفحة الويب بخطوط ملونة مختلفة يجعلها جذابة.

استخدام سمة TEXT في سياق العلامة ، يمكنك تغيير لون نص صفحة الويب بالكامل. تطبيق سمة اللون بعلامة (له أولوية أعلى) يسمح لك بالتفاعل مع مظهر جزء واحد من النص.

لتغيير لون النص، عليك معرفة اسم اللون أو الكود الست عشري الخاص به. يتكون الكود من رمز الجنيه # ورقم يمثل شدة مكونات اللون الأحمر والأخضر والأزرق. يمكن الإشارة إلى 16 لونًا قياسيًا فقط بالاسم.
اسم الألوان كود أكوا ##00FFFF أسود ##000000 أزرق ##0000FF فوشيا ##FF00FF رمادي ##808080 أخضر ##008000 ليموني ##00FF00 كحلي ##800000 كحلي ##000080 زيتوني ##808000 أرجواني ##800080 أحمر # #FF0000 فضي ##C0C0C0 أزرق مخضر ##008080 أبيض ##FFFFFF أصفر ##FFFF00

لقد استخدمنا جميعًا محرر النصوص الشهير Word. ونحن نعلم أنه من السهل جدًا تغيير خط النص وحجمه ولونه. لذلك، في HTML يمكنك أيضًا تعيين هذه المعلمات دون صعوبة كبيرة. هناك علامة لهذا . إنه مقترن وبالتالي يحتوي على علامة إغلاقلأن المتصفح يحتاج إلى فهم مكان بداية ونهاية النص الذي نغير معلماته. بطاقة شعار له ثلاث سمات: الوجه والحجم واللون، والتي تحدد خط النص وحجمه ولونه، على التوالي. في هذا البرنامج التعليمي سوف نلقي نظرة فاحصة على الخطوط.

ل تغيير خط النص في HTML– الملف، يجب علينا أن نرفق النص في العلامات ووتأكد من التقديم سمة الوجه. تبدو هكذا:

النص لدينا

يمكن الاطلاع على أسماء الخطوط في محرر Word. هناك قائمة طويلة جدًا. لنأخذ مثالاً لكيفية تغيير خط النص في html ونكتب الكود التالي:
الدرس 4. الخطوط في HTML
سيتم كتابة هذا النص بالخط الافتراضي

سيتم كتابة هذا النص بخط Batang

سيتم كتابة هذا النص بخط Comics Sans MS

دعونا نحفظ الملف تحت أي اسم ونرى ما سيحدث:

كما نرى، كل شيء يعمل: الفقرة الأولى لها الخط الافتراضي، في الفقرة الثانية قمنا بتعيين خط Batang، وفي الثالثة يتم عرض النص بخط Comic Sans MS. من حيث المبدأ، كل شيء سهل ومفهوم، ولكن هناك ملاحظة واحدة. وبما أن الخط المحدد لا يتم حفظه في ملف HTML، فليس هناك ضمان بأنه سيتم عرضه كما هو متوقع في المتصفح. لا يمكننا أن نكون متأكدين بنسبة 100% من أن جهاز الكمبيوتر الخاص بالزائر يحتوي على الخط الذي قمنا بتحديده، خاصة إذا كان هذا الخط غير قياسي. لذلك، في سمة الوجه، من الأفضل الإشارة إلى حوالي ثلاثة أسماء خطوط، والتي يتم سردها مفصولة بفواصل، بحيث يتم عرض واحد منهم على الأقل بالتأكيد. لنلقي نظرة على مثال:
الدرس 4. الخطوط في HTML
يجب أن يظهر هذا النص في Batang أو Comic Sans MS، أو بالتأكيد في Arial.

دعونا ننظر إلى النتيجة:

تم عرض النص بخط Batang، الذي حددناه أولاً في سمة الوجه. إذا كان هذا الخط لا يعمل في متصفح الزائر، فسيعمل الخط الثاني - Comic Sans MS، وإذا لم يعمل هذا الخط، فسيتم عرض النص بالتأكيد بخط Arial.

خيارات الخط الأخرى

وبالنسبة للمبتدئين، دعونا نلقي نظرة على خيارات الخطوط الأخرى. في الدرس الأول، نظرنا بالفعل إلى العلامات التي تحدد الخطوط العريضة والمائلة، وهذه هي العلامات و على التوالى. دعونا نلقي نظرة على بعض العلامات الأخرى التي تحدد نمط الخط:
الدرس 4. خيارات الخطوط الأخرى
دعونا نؤكد على النص
~~دعونا شطب هذا الجزء~~
وتعيين الحرف المرتفع للكلمة ^قمة

دعونا نرى النتيجة:

قمنا بتعيين النص بأكمله على خط Comic Sans MS، وتم تسطير السطر الأول باستخدام العلامة ، تذكر من الدرس الأول أن العلامة
يقوم بالفاصل إلى سطر جديد، ويتم شطب السطر الثاني بفضل العلامة وفي السطر الأخير وضعنا كلمة "أعلى" في الكتابة المرتفعة. لا شيء معقد! يمكنك تجربة بقية العلامات بنفسك. إذا كان كل شيء واضحًا بالنسبة لك، فيمكنك الانتقال إلى الدرس التالي، والذي سننظر فيه إلى كيفية ضبط حجم النص، ولكن إذا كان لديك أي أسئلة، فشاهد الفيديو التفصيلي لهذا الدرس.

يمكن ضبط حجم الخط على الموقع باستخدام كل من HTML وCSS. دعونا نفكر في كلا الخيارين.

تحديد حجم الخط باستخدام HTML

يمكن تحديد حجم الخط في الصفحة باستخدام العلامة الخطلغة البرمجة. في المقالة نظرنا بالفعل إلى العلامة الخطوصفاته. إحدى سمات هذه العلامة هي مقاس، والذي يسمح لك بضبط حجم الخط. يتم تطبيقه على النحو التالي:
موقع البناء "نوبيكس"
مقاسيمكن أن يأخذ القيم من 1 إلى 7 (القيمة الافتراضية هي 3، وهو ما يعادل 13.5 نقطة لخط Times New Roman). هناك خيار آخر لتحديد السمة وهو "+1" أو "-1". وهذا يعني أنه سيتم تغيير الحجم بالنسبة للقاعدة بمقدار نقطة واحدة أكثر أو أقل على التوالي.

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

تحديد حجم الخط باستخدام CSS

في CSS، يمكنك تغيير حجم الخط باستخدام الخاصية حجم الخط، والذي يتم تطبيقه على النحو التالي:
تغيير حجم الخط باستخدام CSS
يتم ضبط خطوط nubex HTML div على 14 بكسل باستخدام خاصية حجم الخط.

في المثال أدناه، يتم تعيين حجم الخط بالبكسل. ولكن هناك طرق أخرى لتحديد الحجم:

كبيرة، صغيرة، متوسطة- ضبط الحجم المطلق (صغير، متوسط، كبير). يمكن أيضًا استخدام القيم الصغيرة جدًا (x-small، xx-small)، والكبيرة جدًا (x-large، xx-large).

أكبر وأصغر- ضبط الحجم النسبي (أصغر أو أكبر بالنسبة للعنصر الأصلي).

100% - يتم تحديد الحجم النسبي (كنسبة مئوية بالنسبة للأصل). على سبيل المثال: h1 ( حجم الخط: 180%; ) ويعني حجم العلامة H1سيكون 180% من حجم الخط الأساسي.

خيارات أخرى لتحديد الحجم النسبي:
5ex- يعني أن الحجم سيكون بارتفاع 5 حروف سمن الخط الأساسي؛

14 نقطة- 14 نقطة؛

22 بكسل- 22 بكسل؛

1vw- 1% من عرض نافذة المتصفح؛

1vh- 1% من ارتفاع نافذة المتصفح؛