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

ستعلمك هذه المشاركة كيف يمكننا تغيير حالات النص باستخدام CSS. دعنا نبدأ!

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

في CSS ، ' تحويل النص تتحكم الخاصية 'في الكتابة بالأحرف الكبيرة للنص. يتم استخدامه أيضًا لتحويل النص إلى أحرف كبيرة أو صغيرة.

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

القيم المحتملة لخاصية تحويل النص CSS مذكورة أدناه:

• • ' الأحرف الكبيرة ': تجعل هذه القيمة جميع الأحرف في نص العنصر بأحرف كبيرة.
  • ' أحرف صغيرة ': هذه القيمة تغير نص العنصر إلى أحرف صغيرة.
  • ' استفاد ': تعمل هذه القيمة على تغيير الحرف الأول من كل كلمة بحرف كبير.
  • ' لا أحد ': تقيد هذه القيمة تعديل نص العنصر.
  • ' مبدئي ”: تحدد هذه القيمة القيمة الافتراضية.
  • ' انت ورثت ”: تحدد هذه القيمة قيمتها من عنصرها الأصلي.

حلل المثال أدناه!

مثال: تحويل النص إلى أحرف كبيرة وصغيرة

أولاً ، أضف عنصر div باسم الفئة ' علبة '. داخل النص ، أضف ثلاث علامات للعناوين

و

و

، حيث يكون نص العنوان

مكتوبًا بأحرف كبيرة ، و

بأحرف صغيرة ، والثالث أيضًا بأحرف صغيرة.

فيما يلي رمز HTML:

< شعبة صف دراسي = 'علبة' >
< h1 > الأحرف الصغيرة: مرحبًا بك في LINUXHINT h1 >
< h2 > الأحرف الكبيرة: مرحبًا بك في linuxhint h2 >
< h3 > تكبير الحروف: مرحبًا بك في linuxhint h3 >
شعبة >

نمط مربع div

.علبة {
الارتفاع: 200 بكسل ؛
العرض: 80 ٪ ؛
الحد: 4 بكسل صلبة # e4cfcf ؛
لون الخلفية: cadetblue.
الهامش: 1 بكسل تلقائي ؛
الحشو: 10 بكسل ؛
}

تم الآن تصميم ملف div الذي تم إنشاؤه في ملف HTML أعلاه بخصائص CSS الموضحة أدناه:

• • ' ارتفاع 'لتحديد ارتفاع div.
  • ' العرض 'لتحديد عرض div.
  • ' الحدود 'تُستخدم لتطبيق الحد حول العنصر ، والذي يبلغ عرضه 4 بكسل ونوع الخط الصلب ولون # e4cfcf.
  • ' لون الخلفية 'لون خلفية العنصر.
  • ' حافة تضبط خاصية 'المساحة على كل جانب من جوانب العنصر.
  • ' حشوة 'تُستخدم لإنشاء مساحة حول محتوى عنصر div أو داخل حدود العنصر.

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

مع خاصية تحويل النص مع تعيين القيمة على أنها ' أحرف صغيرة ':

h1 {
تحويل النص: حرف صغير ؛
}

يتم تطبيق العنصر

مع خاصية تحويل النص مع تعيين القيمة على أنها ' الأحرف الكبيرة ':

h2 {
تحويل النص: الأحرف الكبيرة ؛
}

بالنسبة للعنصر

، يتم تعيين قيمة خاصية تحويل النص على أنها ' استفاد ':

h3 {
تحويل النص:
}

من خلال توفير الشفرة المذكورة أعلاه ، يتم تحويل نص العنوان الأول إلى أحرف صغيرة والعنوان الثاني إلى أحرف كبيرة. في حين أن الحرف الأول من كل كلمة مكتوب بحروف كبيرة في العنوان الثالث:

عظيم! لقد تعلمنا بنجاح كيفية تحويل النص إلى أحرف كبيرة وصغيرة وجميع الأحرف الكبيرة.

استنتاج

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