مرحبا قراء هذه المدونة. سأتحدث اليوم عن كيفية كتابة جميع الأحرف الكبيرة من خلال css. بالطبع ، لهذا يمكنك تضمين Caps Lockوكتابة النص المطلوب ، لكن هذه طريقة بدائية إلى حد ما. ولكن ماذا لو كنت بحاجة إلى إبراز فقرة منفصلة في مقالة منتهية بالفعل؟

اجعل كافة الأحرف كبيرة في css

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

• أحرف صغيرة - يتم عرض كل النص بأحرف صغيرة
• الأحرف الكبيرة - يتم عرض جميع الكلمات بأحرف كبيرة (هذا ما نحتاجه)
• تكبير الحروف - يتم تكبير الحرف الأول من كل كلمة بحرف كبير

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

كيف تصل إلى العنصر المطلوب؟

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

الآن نحن قادرون على الرجوع إلى هذه الفقرة المعينة من خلال css دون التأثير على الباقي. يمكنك القيام بذلك على النحو التالي:

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

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

أو ربما تحتاج إلى كتابة حرف كبير في الفقرة الثانية في كل مقالة باستخدام css. ثم خيار آخر سوف يناسبك. ابحث عن الكتلة التي يتم عرض المقالة فيها وقم بالرجوع إلى الفقرة الثانية باستخدام الفئة الزائفة nth-child. الخامس هذا المثالتحتوي كتلة المقالة لدينا على فئة المقالة.

المادة ع: الطفل التاسع (2) (
تحويل النص: أحرف كبيرة
}

كما ترون ، لكل حالة محددة ، فإن الحل الخاص بها مناسب. أهم شيء يجب تذكره هو خاصية تحويل النص ، والتي تغير حالة الأحرف.

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

اليوم ألقينا نظرة على خاصية تحويل النص. اشترك في المدونة لتلقي مقالات جديدة.

الأحرف الكبيرة في CSSتساعد على كسر رتابة التصميم الموحد ، حيث تبدو نصوصه متشابهة من البداية إلى النهاية.

في وقت سابق والآن إسقاط الأحرف الاستهلالية

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

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

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

باستخدام الفصول

يعرف المصممون الذين هم بالفعل على دراية بـ CSS كيفية إنشاء فئة CSS منفصلة للحرف الكبير الأول.

سيبدو CSS لعنصر الفقرة والفئة التي تنشئ الحرف كما يلي:

p (font-size: 20px؛ font-family: Georgia، "Times New Roman"، Times، serif؛) .myinitialcaps (حجم الخط: 48 بكسل ؛ عائلة الخطوط: Didot ؛)

وستبدو كود HTML بهذا الشكل:

مما يعطينا:

يبدو من السهل جدا؟ في الواقع ، سيتعين عليك إجراء تعديلات بناءً على الأحرف البارزة المحددة ، حيث يتطلب كل حرف كبير تقنينًا خاصًا. بعد اختيار خط للأحرف البارزة وللنص الأساسي ، تحتاج إلى إنشاء فئات منفصلة لكل حرف بارز. في الأسفل فئة CSSالمربع الموجود على اليمين هو سلبي لتقليل المسافة بين I و n.

Myinitialcapsi (حجم الخط: 48 بكسل ؛ عائلة الخطوط: ديدوت ؛ الهامش الأيمن: -1 بكسل ؛)

أنافي هذه الحالة ، هناك مسافة إضافية بين "أنا" و "ن".

أناإن تضمين فئة جديدة بهامش سلبي يجعلها أقرب.

اعتمادًا على دقة الشاشة ، في المثال أعلاه ، قد يبدو أنا و n وكأنهما اندمجا معًا. هذا بسبب الرقيق في نهايات الحروف. لذلك ، قبل اختيار النسخة النهائية أنماط CSS، اختبر الموقع على أجهزة مختلفةلنرى كيف يبدو النص عليها في جميع أحرف CSS.

اقتباسات وحالات خاصة أخرى

يمكنك تكبير ليس فقط الحروف في بداية النص. يمكنك تنفيذ فئة أخرى لإنشاء نسخة كبيرة الحجم من علامات الاقتباس التي تظهر بجوار الحرف. في حالتنا ، لا تناسب فئة النص 48 حرفًا ولا فئة النص 20 بكسل علامات التنصيص. بدلا من ذلك ، سيكون ما بين - 30 بكسل. سننقل الاقتباسات لأسفل بمقدار 4 بكسل لمواءمتها بصريًا مع I:

Myinitialcapsq (حجم الخط: 30 بكسل ؛ عائلة الخطوط: ديدوت ؛ تعويم: يسار ؛ margin-top: 4px ؛)

“أناتضمين "فئة جديدة بهامش سلبي يجعلها أقرب.

يجب أن تكون حذرًا جدًا بشأن تحديد كل حرف من أحرف CSS الكبيرة ، جنبًا إلى جنب مع علامات الاقتباس ، بحيث يتطابق تقنين الأحرف والمحاذاة مع العلامات المحيطة. على سبيل المثال ، سيحتاج الحرف T إلى إزاحته إلى اليسار ، بعيدًا قليلاً عن حافة الفقرة ، بحيث يتلاءم الخط المستعرض بصريًا مع التخطيط. ستحتاج إلى فعل الشيء نفسه باستخدام الأحرف المستديرة مثل C و G و O و Q. في هذا المثال ، أحجام الخطوط المستخدمة هي 20 و 30 و 48. لكنك ستحتاج إلى اختيار الأحجام بناءً على تفاصيل الخطوط التي اخترتها. وكذلك أحجام ودقة الشاشات التي سيتم عرض الموقع عليها.

العناصر الزائفة والفئات الزائفة

باستخدام عنصر CSS الزائف ، يمكنك بسهولة إنشاء حرف بارز عن طريق إضافة :: الحرف الأول إلى عنصر الفقرة. الاستخدام: الحرف الأول ( بنقطتين واحد) للمتصفحات القديمة:

p (حجم الخط: 1.2em؛ font-family: Georgia، "Times New Roman"، Times، serif؛ ارتفاع السطر: 2em؛ padding-bottom: 1.2em؛) p :: الحرف الأول (حجم الخط: 3.6em؛ تحويل النص: أحرف كبيرة؛ عائلة الخطوط: "Monotype Bernard Condensed"، serif؛ margin-right: 0.03em؛) .initialb (margin-right: -0.1em؛) .initialn (margin-right: -0.15 م ؛)

سيبدو رمز HTML الذي يحتوي على فئات CSS التي تأخذ في الاعتبار تقنين الأحرف N و B هكذا ...

حرف أولي ، حيث يكون الحرف الأول حرفًا كبيرًا.
مع فاصل الأسطر ، فإن السطر التالي ليس له حد أقصى.

نلاحظ في مصدر HTML كيف يتم تغيير حجم الحرف الأول ، وليس الحرف الكبير في HTML ، إلى الحجم الأولي الأقصى البالغ 3.6em. أنيق ، أليس كذلك؟

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

يتم تحويل الحرف الأول من الفقرة إلى حرف.
لن يتم كتابة الحرف الأول بعد فاصل الأسطر بأحرف كبيرة.

ايرجى ملاحظة أنه في مصدر الرمزلم يتم كتابة الحرف الأول بأحرف كبيرة في HTML ، ولكن يتم تحويله إلى حرف 3.6em.

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

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

الجمع بين الفئات الزائفة والعناصر الزائفة لإنشاء تخطيط ذكي

تساعد إضافة: الدرجة الزائفة للطفل الأول في حل مشكلة التحويل غير الضروري للأحرف الأولى:

p (font-size: 1.2em؛ font-family: Georgia، "Times New Roman"، Times، serif؛ ارتفاع السطر: 2em؛ padding-bottom: 0.5em ؛) p: first-child :: first-letter ( حجم الخط: 3.6em ؛ تحويل النص: أحرف كبيرة ؛ عائلة الخطوط: "Monotype Bernard Condensed" ، serif ؛ margin-right: 0.03em ؛)

دمج هذا الكود مع HTML:

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

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

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