الكتابة بالأحرف الكبيرة باستخدام CSS. عمل أنماط css بأحرف كبيرة باستخدام عناصر زائفة أحرف كبيرة علامة
الأحرف الكبيرة في 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 ؛ عائلة الخطوط: جورجيا ، "Times New Roman" ، Times ، serif ؛ ارتفاع السطر: 2em ؛ المساحة السفلية: 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:
الحرف الأول الذي يتم تعريفه على أنه أول طفل هو الحرف الوحيد الذي يتحول إلى حرف كبير منسدل في هذه الطريقة.
نظرًا لأنه يتم تحويل الحرف الذي تم تعريفه على أنه أول طفل فقط ، لاحظ أن هذا المثال يختلف عن المثال السابق بدون الطفل الأول. بالإضافة إلى ذلك ، لا نقوم بتحويل الأحرف الأولى بعد بداية الفقرة وبعد فاصل السطر الإجباري. يبدو هذا أكثر أناقة من الشكل الذي بدا عليه التخطيط عندما قمنا بتحويل جميع الأحرف الأولى من الفقرات.
ميزة استخدام الفئات الزائفة هي القدرة على التعامل مع مختلف الحالات الخاصة. ماذا عن العيوب؟ هناك العديد من الفئات الزائفة المختلفة ، ويمكن دمجها بعدة طرق بحيث تجعل رأسك تدور. على سبيل المثال ، يمكن للفئات الزائفة: الطفل الأول و: الأول من النوع أن تعطي نفس النتائج. يمكنك أيضًا تطبيق فئة زائفة ليس فقط على فقرة ، ولكن أيضًا على العناصر section (font-size: 1.2em؛ font-family: Georgia، "Times New Roman"، Times، serif؛ line-height: 3em؛) section> p: first-child: first-letter (font-size: 4em؛ تحويل النص: الأحرف الكبيرة ؛ عائلة الخطوط: Didot ، serif ؛ margin-right: 5px ؛) جنبًا إلى جنب مع HTML: في بداية القسم ، يتم تعيين الحرف الأول على حرف كبير مرتفع. وفقرة جديدة ... إذا كنت ترغب في إجراء التجارب ، يمكنك استكشاف طرق مختلفة بالإضافة إلى: الطفل الأول و: الأول من نوعه. على سبيل المثال ، مثل: nth-of-type أو: nth-of-child ، لمعرفة كيف يمكن استخدام أنواع فئة زائفة معينة لنص الأحرف الكبيرة في CSS. سواء أكنت تتبع المبادئ الموضحة في هذه المقالة أو تبدأ في التعمق أكثر ، بمجرد أن تتعلم كيفية العمل مع الطفل الأول ، و: الفئات الزائفة من الحرف الأول من CSS ، ستكون قادرًا على التقديم بشكل صحيح منهم إلى عناصر HTML. إسقاط الأحرف الاستهلالية (حرف أولي مضمن في النص) هو الحرف الأول من الفقرة التي تحتوي على حجم أكبرمن البقية ، ويتم وضعها بحيث يكون الجزء العلوي منها عند مستوى السطر الأول من الفقرة. في الصورة ، يمكنك رؤية مثال على حرف أولي مضمن في النص. بالمناسبة ، يحتوي WordPress على مكون إضافي خاص (wordpress.org/extend/plugins/drop-caps) يسمح لك بإنشاء مضمّن في النص تلقائيًا (ونقله لأسفل) بأحرف كبيرة. مدهش! ومع ذلك ، ماذا لو كنت لا تريد استخدام المكون الإضافي (أنا متأكد من أنك لا تريد ذلك) وتحتاج فقط إلى إسقاط عدد قليل من المنشورات ، وربما موقع محدد؟ الخبر السار هو أنك لست بحاجة إلى مكون إضافي لإنشاء أحرف كبيرة ، كل ما تحتاجه هو بعض css وعلامة الامتداد. افتح ملف css وأضف الكود التالي: Span.dropcaps (font-family: Georgia، serif؛ color: #ccc؛ font-size: 46px؛ float: left؛ font-weight: 400؛ line-height: 1em؛ margin-bottom: -0.4em؛ margin-right : 0.09em ؛ المنصب: نسبي ؛) شيء من هذا القبيل. بالطبع ، ستحتاج إلى أسلوب يتناسب مع تصميمك ونصك. على سبيل المثال ، يجب تعديل قيم الخاصية: حجم الخط ، والهوامش ، وارتفاع السطر بناءً على تصميمك ونصك. من أجل تطبيق النمط على الحرف الكبير للنص ، من الضروري "لف" الحرف الكبير في علامة الامتداد ووصف الفئة المناسبة.
أ يمكنك أيضًا تنسيق الحرف الأول في النص باستخدام: العنصر الزائف للحرف الأول. ومع ذلك ، يمكن تطبيق عدد محدود من الخصائص على: العنصر الزائف للحرف الأول: هذه هي الخصائص المتعلقة بالخط واللون والخلفية والحدود والهامش والحشو. شيء آخر يجب ملاحظته هو أن: العنصر الزائف من الحرف الأول لن يعمل في المتصفحات القديمة. P: الحرف الأول (font-family: Georgia، serif؛ color: #ccc؛ font-size: 46px؛ float: left؛ font-weight: 400؛ line-height: 1em؛ margin-bottom: -0.4em؛ margin -right: 0.09em ؛ الموضع: نسبي ؛) هنا ، في الواقع ، طريقتان من طرق التحرير بأحرف كبيرةمع باستخدام CSS. يتحكم في ما إذا كان نص العنصر سيتم تحويله إلى أحرف كبيرة أم صغيرة. عندما تكون القيمة بخلاف لا شيء ، سيتم تغيير حالة النص الأصلي. تكبير الحرف الأول من كل كلمة في الجملة ستكتب بأحرف كبيرة. الأحرف المتبقية لا تغير مظهرها. الأحرف الصغيرة تصبح جميع أحرف النص صغيرة (أحرف صغيرة). الأحرف الكبيرة تصبح جميع أحرف النص كبيرة. لا شيء لا يغير حالة الأحرف. لم يكن ويني ذا بوه دائمًا يكره تناول القليل من المرطبات ، خاصة في الساعة الحادية عشرة صباحًا ، لأنه في ذلك الوقت كان الإفطار قد انتهى منذ فترة طويلة ، ولم يكن العشاء قد فكر حتى في البدء. وبالطبع ، كان سعيدًا للغاية لرؤية الأرنب يخرج الكؤوس والصحون. div (تحويل النص: الأحرف الكبيرة ؛)
تستوعب الأراضي المنخفضة في الأمازون كمية كبيرة من القطط والكلاب ، وتشتهر هاجوس بايا بنبيذها الأحمر. تظهر نتيجة هذا المثال في الشكل. 1. أرز. 1. تطبيق خاصية تحويل النص شيء.style.textTransform تمر كل مواصفة بعدة مراحل من الموافقة. يوم جيد ، مهووسو بناء الموقع. سيغطي منشور اليوم موضوع تصميم محتوى النص. هذا هو السبب في أنك ستتعلم كيفية تعيين الأحرف الكبيرة رسائل المغلق- يعني ، التعرف على العديد من الخيارات لإنشاء غطاء منخفض وبالطبع يمكنك تجربة كل شيء في الممارسة العملية. حسنًا ، دعنا الآن ننتقل إلى الأكثر إثارة للاهتمام! بفضل أوراق الأنماط المتتالية ، يمكنك تغيير كل من الحرف الأول من الكتلة والنص بأكمله. سأخبرك كيف يمكنك أن تفعل كلا الخيارين. علاوة على ذلك ، يتم دعم جميع الأدوات المذكورة في هذه المقالة بثلاثة مستويات لغوية: css1 و css2 و css2.1 و css3. سأبدأ بخاصية مثيرة للاهتمام تقوم بتعديل كل محتوى النص في المحدد. هذا تحويل النص. يمكن للعنصر المسمى تحويل الأحرف إلى أحرف كبيرة وصغيرة ، وكذلك تعيين كل حرف أول من الكلمة كحرف كبير. لقد كتبت المزيد عن القيم في الجدول. الآن ، لتوحيد المادة النظرية ، فكر في مثال.
العرض ساري في جميع الفروع الموجودة في مدينتك. إذا كنت لا تعرف ما يعنيه مصطلح "حرف إلكتروني" ، فقد حان الوقت لمعرفة ذلك ، لأن هذا مرتبط ارتباطًا مباشرًا بالموضوع الحالي. الحرف الأولي (أو أحيانًا يقولون الحرف الأول) هو الحرف الأول من الفصل ، والذي يختلف عن البقية في حجمه الكبير ولونه ، وفي بعض الحالات حتى تصميم الخط. في الحياة ، يمكن العثور على مثال لمثل هذه الرسالة في المخطوطات والكتب القديمة. هناك عدة طرق لإنشاء حرف أولي. غالبًا ما يتم تمييز حرف بعلامة لغة ترميزية ثم يتم تحديد خصائص معينة في الأنماط التي تعدلها. هذه طريقة جيدة ، لكن هذا المنشور يتحدث عن آليات css (والتي ، في رأيي ، أكثر منطقية وملاءمة للاستخدام في هذه الحالة). لحل هذه المشكلة ، يمكنك استخدام أداة مثل. لذلك ، في هذه الحالة: يتم استخدام الحرف الأول. مثل كل العناصر الزائفة ، يتم إلحاقها بالمحدد بنقطتين. بعد كل قواعد أوراق الأنماط ، يتم تحديد الخصائص. ومع ذلك ، يمكنك فقط تطبيق تلك الخصائص المتعلقة بتحرير الخطوط والمسافات البادئة والألوان ، خلفيةوالهوامش والحدود. أقترح النظر مثال محدد. عند تنفيذ البرنامج الصغير المقدم ، قررت ألا أصنع غطاءًا ملونًا فحسب ، بل ملؤه بالألوان. للقيام بذلك ، تحتاج إلى استخدام بعض الحيل الصعبة مع ضبط لون الخط على شفاف وملء الحرف بالصورة المحددة.
تحتوي هذه الفقرة على جملة ممتعة للغاية. دعنا نواصل القصة الشيقة في الفقرة التالية. تبدو النتيجة التي تم الحصول عليها جذابة للغاية وغير عادية ، وهو حل مثالي لـ. كما ترون هذا الموضوعبسيط جدا. يمكنك بسهولة استخدام الكود الذي قدمته لمصادر الويب الخاصة بك ، وتعديله وتعديله ليناسب أسلوبك. إذا كانت المادة المقدمة مفيدة لك ، فقم بالاشتراك في تحديثات مدونتي ولا تنس مشاركة معرفتك (وبالطبع رابط إلى مدونتي) مع أصدقائك. حظ سعيد! وداعا وداعا! مع خالص التقدير ، رومان تشويشوف مرحبا قراء هذه المدونة. سأتحدث اليوم عن كيفية كتابة جميع الأحرف الكبيرة من خلال css. بالطبع ، يمكن أن يشمل ذلك سقف قفلواكتب النص المطلوب ، لكن هذه طريقة بدائية إلى حد ما. ولكن ماذا لو كنت بحاجة إلى إبراز فقرة منفصلة في مقالة منتهية بالفعل؟ هناك خاصية تحويل النص لهذا ، والتي خمنت أنها تحول النص. لديها هذه القيم: هنا ، في الواقع ، هو كل ما تحتاج إلى معرفته. يبقى فقط لفهم كيفية الوصول إلى العنصر المطلوب. دعنا نتخيل هذا المثال: تريد أن تكون الفقرة الخامسة في المقالة كلها أحرف كبيرة. وكيف يتم ذلك؟ كما تعلم ، يتم إنشاء فقرة باستخدام علامة html مقترنة ، يصبح محتواها بالكامل فقرة. يبقى فقط تعيين فئة نمط جديدة لها:
الآن لدينا الفرصة للإشارة من خلال لغة css إلى هذه الفقرة بالذات دون التأثير على البقية. يمكنك القيام بذلك على النحو التالي: حرف كبير( هذه الطريقة مناسبة عندما تحتاج إلى تمييز جزء في مقال منفصل. وماذا لو كان يجب أن تحتوي جميع الصفحات على نص معين بأحرف كبيرة. في هذه الحالة ، من الأفضل وضع الكتلة في ملف القالب حتى لا تكتبها في كل مرة. أو ربما تحتاج إلى إبراز الفقرة الثانية في كل مقالة باستخدام css بأحرف كبيرة. ثم هناك خيار آخر لك. ابحث عن الكتلة التي تعرض المقالة وقم بالرجوع إلى الفقرة الثانية باستخدام الفئة الزائفة nth-child. في هذا المثالتحتوي كتلة مقالتنا على فئة المقالة. المادة ع: الطفل التاسع (2) ( كما ترى ، كل حالة لها حلها الخاص. أهم شيء يجب تذكره هو خاصية تحويل النص ، والتي تغير حالة الأحرف. بشكل عام ، لا يوصى باستخدام النص الناتج بهذه الطريقة ، لأنه يضعف إدراكه بشكل كبير ، ولكن يمكن تمييز بعض الأجزاء المهمة بشكل خاص. لقد قمنا اليوم بتغطية خاصية تحويل النص. اشترك في المدونة لتلقي مقالات جديدة.علامة الامتداد
العنصر الزائف: الحرف الأول
معلومات مختصرة
الرموز
×
وصف مثال
<тип>
يحدد نوع القيمة. <размер>
أ && ب يجب إخراج القيم بالترتيب المحدد. <размер> && <цвет>
أ | ب يشير إلى أنه يجب تحديد قيمة واحدة فقط من القيم المقترحة (أ أو ب). عادي | أحرف صغيرة
أ || ب يمكن استخدام كل قيمة بمفردها أو مع الآخرين بأي ترتيب. العرض || عدد
قيم المجموعات. [اقتصاص || يعبر]
*
كرر صفر مرة أو أكثر. [,<время>]*
+
كرر مرة واحدة أو أكثر. <число>+
?
النوع أو الكلمة أو المجموعة المحددة اختيارية. أقحم؟
(أ ، ب) كرر على الأقل أ ، لكن ليس أكثر من ب مرة. <радиус>{1,4}
#
كرر مرة واحدة أو أكثر مفصولة بفواصل. <время>#
قيم
صندوق الرمل
مثال
النصب الثقافي في العصور الوسطى
نموذج الكائن
تخصيص
×
دعونا نحول النص
انتباه!
غدا جميع منتجات التجميل مخفضة!
إنشاء سقف منسدل
اجعل كل الأحرف كبيرة في css
كيف تصل إلى العنصر المطلوب؟
تحويل النص: الأحرف الكبيرة ؛
}
تحويل النص: الأحرف الكبيرة
}