HTML مرتفع. HTML هو - كيفية جعل النص بأحرف كبيرة CSS

مرحبًا. في بعض الأحيان، عند إنشاء صفحات الويب، تحتاج إلى ضبط بعض الكلمات على أحرف كبيرة أو مرتفعة باستخدام CSS. دعونا نرى كيف يتم ذلك.

الأحرف الكبيرة والصغيرة باستخدام CSS

بشكل عام، حتى اليوم يمكنك تضمين النص المطلوب في العلامات _{^{واحصل على العرض الذي تريده، ولكن دعونا نرى أيضًا كيف يمكن القيام بذلك باستخدام CSS لأن التقنية مختلفة قليلاً.}}

على سبيل المثال، تحتاج إلى كتابة الصيغة H 2 O في مستند HTML. يتم ذلك على النحو التالي:

الصيغة نفسها مكتوبة
يتم تضمين تلك الكلمات والأرقام التي يجب عرضها في الفهرس العلوي أو السفلي في علامة امتداد، والتي يجب تخصيص فئة معينة لها. على سبيل المثال: الحروف المراد إخراجها
في CSS تحتاج إلى تعيين هذا العنصر:
الفهرس العلوي(
محاذاة عمودية: فائقة؛
}

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

هذه هي الطريقة التي يعمل بها العقار ببساطة. وفقًا لذلك، للإخراج بخط منخفض، عليك أن تكتب على النحو التالي:

الفهرس العلوي(
محاذاة عمودية: فرعية؛
}

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

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

حيث قد يكون في متناول اليدين

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

الخاصية كاملة عبر المتصفحات ومدعومة في جميع إصدارات CSS.

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

عرض كل النص بأحرف كبيرة؛
تحديد كل النص بأحرف صغيرة؛
تأكد من أن الحرف الأول من كل كلمة يبدأ بأحرف كبيرة.

"كل هذا جيد بالطبع، ولكن متى قد تكون هناك حاجة إليه؟" - أنت تسأل. لنتخيل موقفًا تحتاج فيه إلى عرض جميع عناصر القائمة بأحرف كبيرة. للقيام بذلك، ليس من الضروري كتابتها، بما في ذلك مفتاح CapsLock، أو أثناء الضغط باستمرار على زر Shift. سيكون كافيًا تعيين جميع عناصر القائمة ليتم عرضها بأحرف كبيرة عن طريق إنشاء قاعدة مقابلة في ملف CSS. وهذه مجرد واحدة من العديد من المواقف المحتملة.

خاصية تحويل النص

سوف نتحكم في حالة النص باستخدام خاصية تحويل النص. تحتوي على 4 قيم رئيسية - أحرف كبيرة (أحرف كبيرة)، أحرف صغيرة (أحرف صغيرة)، تكبير (أحرف كبيرة لكل حرف أول من الكلمة، القيم الأخرى لا تتغير)، لا شيء (لا يتم تطبيق التنسيق) . للوهلة الأولى، قد يبدو كل هذا معقدًا للغاية بالنسبة لك.

الشيء الرئيسي هو عدم الذعر ...

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

الاستفادة من الحروف الكبيرة

أولاً، أقترح تعيين كل النص إلى أحرف كبيرة، ومن أجل ذلك نقوم بإنشاء قاعدة CSS التالية:

الجسم (تحويل النص: أحرف كبيرة؛)

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

كل شيء بحرف كبير...

الأحرف الصغيرة - تنطبق على الكل

الخطوة التالية هي تطبيق الحروف الصغيرة في كل مكان عن طريق كتابة ما يلي:

الجسم (تحويل النص: أحرف صغيرة؛)

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

صفحة ويب مع تمكين الأحرف الصغيرة

تكبير الحرف الأول من كل كلمة

للقيام بذلك، نحتاج فقط إلى استخدام القيمة المقابلة:

الجسم (تحويل النص: تكبير؛)

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

النص بعد تطبيق الكتابة بالأحرف الكبيرة

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

P (تحويل النص: لا شيء؛)

أجرؤ على افتراض أن كل شيء واضح بالنسبة لك، إذا لم يكن كذلك، اطرح أسئلتك في التعليقات. وهذا كل شيء بالنسبة لي. آمل أن يكون هذا البرنامج التعليمي لـ CSS مفيدًا لك. اذا كان صحيحا:

أعد نشر هذه المقالة على شبكات التواصل الاجتماعي ليستفيد منها عدد أكبر من الناس؛
اشترك في النشرة الإخبارية الخاصة بي حتى لا تفوت مشاركات المدونة المفيدة والمثيرة للاهتمام.

هذا هو المكان الذي لا أقول وداعا لك. شكرا لاهتمامكم ونراكم في المنشورات القادمة!

علامات HTML _{و ^{- نص منخفض ومرتفع}}

التعريف والاستخدام

بطاقة شعار _{يحدد النص بين السطور. النص الفرعي هو نصف الارتفاع ويظهر أسفل الخط الأساسي. يمكن استخدام النص بين السطور عند كتابة الصيغ الكيميائية، مثل H 2 O.}

بطاقة شعار ^{يحدد النص المرتفع. النص المرتفع هو نصف الارتفاع ويظهر فوق الخط الأساسي. يمكن استخدام النص المرتفع عند كتابة الحواشي السفلية، مثل WWW.}

دعم المتصفح

العلامات _{و ^{مدعومة من قبل جميع المتصفحات الرئيسية.}}

الاختلافات بين HTML وXHTML

السمات القياسية

عمود دتديشير في أي نوع من الوثيقة HTML 4.01/XHTML 1.0 دي تي ديالسمة مسموح بها. S = صارم، T = انتقالي، F = مجموعة الإطارات.

العلامات _{و ^{دعم السمات القياسية التالية:}}

يصف	معنى	وصف	دتد
فصل	class_name	يحدد اسم الفئة للعنصر	إس تي إف
دير	rtl لتر	يحدد اتجاه النص للمحتوى في عنصر ما	إس تي إف
بطاقة تعريف	معرف	يحدد معرفًا فريدًا للعنصر	إس تي إف
لانج	رمز اللغة	يحدد رمز اللغة لمحتوى العنصر	إس تي إف
أسلوب	style_definition	يحدد نمطًا مضمنًا لعنصر ما	إس تي إف
عنوان	نص	يشير إلى معلومات إضافية حول عنصر	إس تي إف
xml: لانج	رمز اللغة	يحدد رمز اللغة لمحتوى العنصر في مستندات XHTML	إس تي إف

مزيد من المعلومات حول السمات القياسية.

سمات الحدث

العلامات _{و ^{دعم سمات الحدث التالية:}}

يصف	معنى	وصف	دتد
عند النقر	النصي	تم إطلاق البرنامج النصي عند النقر بالماوس	إس تي إف
com.ondblclick	النصي	انقر نقراً مزدوجاً فوق البرنامج النصي	إس تي إف
com.onmousedown	النصي	البرنامج النصي للتشغيل عند الضغط على زر الماوس	إس تي إف
com.onmousemove	النصي	البرنامج النصي الذي سيتم تشغيله عند تحريك مؤشر الماوس	إس تي إف
com.onmouseout	النصي	برنامج نصي يتم تشغيله عندما يتحرك مؤشر الماوس خارج العنصر	إس تي إف
على الفأرة فوق	النصي	يتم تشغيل البرنامج النصي عندما يتحرك مؤشر الماوس فوق عنصر ما	إس تي إف
com.onmouseup	النصي	البرنامج النصي الذي سيتم تشغيله عند تحرير زر الماوس	إس تي إف
عند الضغط على الزر لأسفل	النصي	تشغيل البرنامج النصي عند الضغط على المفاتيح	إس تي إف
com.onkeypress	النصي	يتم تشغيل البرنامج النصي عند الضغط على مفتاح ثم تحريره	إس تي إف
com.onkeyup	النصي	البرنامج النصي للتشغيل عند تحرير المفتاح	إس تي إف

مزيد من المعلومات حول

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

مثال 1: إنشاء خط مرتفع ومنخفض

مرتفع ومنخفض

المعادلة المميزة لسطح من الدرجة الثانية

λ ³- أنا ₁λ ²+أنا ₂ lect - أنا ₃ = 0

في المثال، يظهر كل من الخط المنخفض والمرتفع في نفس الوقت. لتغيير نمط خط الفهرس، يتم استخدام الأنماط التي تحدد تصميمًا موحدًا (الشكل 1).

أرز. 1. عرض الفهارس بعد تطبيق الأنماط

ويمكنك التوقف عن استخدامه تمامًا ^{و _{لصالح الأنماط. ونظير هذه العناصر هو خاصية المحاذاة العمودية، والتي تتسبب في إزاحة النص عموديًا بمسافة محددة. على وجه التحديد، في المثال 2، القيمة هي 0.8em للنص المرتفع و-0.5em للخط المنخفض. Em هي وحدة نسبية تساوي حجم الخط الحالي. على سبيل المثال، يشير 0.5em إلى أنه يجب إزاحة النص بمقدار نصف حجم الخط.}}

المثال 2: استخدام الأنماط لإدارة الفهارس