با سلام خدمت خوانندگان این وبلاگ امروز من در مورد اینکه چگونه می توانید همه حروف بزرگ را از طریق css ایجاد کنید صحبت خواهم کرد. البته ، برای این شما می توانید شامل شود کلید Caps Lockو متن مورد نظر را بنویسید ، اما این یک روش اولیه است. اما اگر نیاز به برجسته کردن یک پاراگراف جداگانه در مقاله ای که قبلاً به پایان رسیده است ، چه می کنید؟

همه حروف را در css بزرگ بنویسید

برای این ویژگی یک ویژگی تبدیل متن وجود دارد که ، همانطور که حدس زده اید ، متن را تغییر می دهد. دارای مقادیر زیر است:

• حروف کوچک - تمام متن با حروف کوچک نمایش داده می شود
• حروف بزرگ - همه کلمات با حروف بزرگ نمایش داده می شوند (این همان چیزی است که ما نیاز داریم)
• بزرگنمایی - اولین حرف هر کلمه با حروف بزرگ نوشته می شود

این در واقع همه آن چیزی است که باید بدانید. فقط باید بفهمیم چگونه به عنصر مورد نظر مراجعه کنیم. بیایید این مثال را تصور کنیم: شما باید پاراگراف پنجم مقاله را بزرگ بنویسید. و چگونه می توان این کار را انجام داد؟

چگونه به عنصر مورد نظر برسیم؟

همانطور که می دانید ، یک پاراگراف با استفاده از یک تگ html جفت شده ایجاد می شود که کل محتوای آن به یک پاراگراف تبدیل می شود. تنها چیزی که باقی می ماند این است که یک کلاس سبک جدید برای آن تعیین کنید:

در حال حاضر ما می توانیم از طریق css به این پاراگراف خاص مراجعه کنیم بدون اینکه بر بقیه تأثیر بگذاریم. شما می توانید این کار را به این صورت انجام دهید:

حروف بزرگ (
تبدیل متن: بزرگ ؛
}

این روش زمانی مناسب است که نیاز به انتخاب قطعه ای در مقاله ای جداگانه داشته باشید. اما اگر همه صفحات باید دارای متن خاصی با حروف بزرگ باشند ، چه می شود. در این حالت ، بهتر است بلوک را در فایل قالب قرار دهید تا مجبور نباشید هر بار آن را بنویسید.

یا شاید لازم باشد پاراگراف دوم را در هر مقاله با استفاده از css بزرگ کنید. سپس گزینه دیگری برای شما مناسب است. بلوکی را که مقاله در آن نمایش داده می شود پیدا کرده و با استفاده از شبه کلاس n-child به پاراگراف دوم مراجعه کنید. V این مثالبلوک مقاله ما دارای کلاس مقاله است.

مقاله p: فرزند نهم (2) (
تبدیل متن: بزرگ
}

همانطور که می بینید ، برای هر مورد خاص ، راه حل خاص خود مناسب است. مهمترین نکته این است که در مورد ویژگی text-transform که حروف را تغییر می دهد به خاطر بسپارید.

به طور کلی ، توصیه نمی شود از نمایش متن به این شکل استفاده کنید ، زیرا درک آن را بسیار مختل می کند ، اما برخی از قطعات به ویژه مهم را می توان برجسته کرد.

امروز نگاهی به ویژگی text-transform انداختیم. برای دریافت مقالات جدید در وبلاگ مشترک شوید.

حروف بزرگ CSSبه شکستن یکنواختی یک طرح یکنواخت کمک می کند ، که متن آن از ابتدا تا انتها یکسان به نظر می رسد.

قبلا و در حال حاضر سقوط کلاه

وقایع نگاران از حروف بزرگ در نسخه های خطی استفاده می کردند که برخی از آنها به قرن پنجم برمی گردد. استفاده از حروف بزرگ از قرن هشتم تا پانزدهم ، زمانی که ماشین چاپ اجازه صنعتی شدن چاپ را داد ، ادامه یافت. در ابتدای متن هم کلاه های قطره ای دست نویس و هم چاپ شده قرار داده شده بود. آنها اغلب با یک طرح تزئینی تزئین شده بودند که در اطراف نامه قرار داشت.

حروف بالا و پایین امروزه نیز استفاده می شود. آنها را می توان در روزنامه ها ، مجلات و کتابها و همچنین چاپ دیجیتال یافت. نامه های بلند شده را گاهی اوقات گسترش یافته می نامند. آنها در یک راستا با پایین متن که به دنبال آنها آمده قرار داده شده اند. حروف حذف شده در بالای متن قرار می گیرند ، گاهی اوقات در یک لایه پشت بدنه اصلی محتوای متن ، یا بقیه متن در اطراف آنها جریان می یابد.

تعریف حروف برجسته بسیار ساده تر است ، زیرا با بقیه متن یکسان است و معمولاً برای این کار نیازی به تغییر جریان در حاشیه بیرونی ندارید. حروف حذف شده نیاز به تنظیم دقیق تری دارند. اگر ابتدا بفهمید چگونه با شخصیت های برجسته رفتار می شود ، مرتب کردن آن برای شما آسان تر خواهد بود.

استفاده از کلاسها

طراحانی که از قبل با CSS آشنا هستند می دانند که یک کلاس CSS جداگانه برای اولین حرف بزرگ ایجاد می کنند.

CSS برای عنصر پاراگراف و کلاسی که حرف را ایجاد می کند به این شکل است:

p (font-size: 20px؛ font-family: Georgia، "Times New Roman"، Times، serif؛) .myinitialcaps (اندازه فونت: 48px؛ font-family: Didot؛)

و کد HTML به شکل زیر خواهد بود:

که به ما می دهد:

خیلی ساده به نظر می رسد؟ در واقع ، شما باید بر اساس حروف برجسته خاص تنظیماتی انجام دهید ، زیرا هر حرف بزرگ به کرنینگ خاصی نیاز دارد. پس از انتخاب فونت برای حروف برجسته و برای متن اصلی ، باید کلاسهای جداگانه ای برای هر حرف برجسته ایجاد کنید. در زیر کلاس CSS.myinitialcapsiکادر سمت راست منفی است تا فاصله بین I و n را کاهش دهد.

Myinitialcapsi (اندازه فونت: 48 پیکسل ؛ فونت-خانواده: دیدوت ؛ حاشیه راست: -1 پیکسل ؛)

مندر این حالت ، فضای بیشتری بین "من" و "n" وجود دارد.

من nclus یک کلاس جدید با حاشیه منفی آن را نزدیک تر می کند.

بسته به وضوح صفحه نمایش ، در مثال بالا ، ممکن است I و n با هم ادغام شده باشند. این به خاطر سری های انتهای حروف است. بنابراین ، قبل از انتخاب نسخه نهایی سبک های CSS، سایت را آزمایش کنید دستگاه های مختلفبرای مشاهده نحوه ظاهر متن بر روی آنها در همه حروف CSS.

نقل قول ها و موارد خاص دیگر

می توانید نه تنها حروف ابتدای متن را بزرگ کنید. می توانید کلاس دیگری را پیاده سازی کنید تا یک نسخه بزرگ از نقل قول هایی که در کنار حرف ظاهر می شوند ایجاد کنید. در مورد ما ، نه کلاس 48 پیکسل و نه کلاس متن 20 پیکسل برای علامت نقل قول مناسب نیستند. بلکه چیزی بین 30 پیکسل خواهد بود. نقل قول ها را 4 پیکسل به پایین منتقل می کنیم تا بصورت نوری با I تراز شوند.

Myinitialcapsq (اندازه فونت: 30 پیکسل ؛ فونت-خانواده: دیدوت ؛ شناور: چپ ؛ حاشیه بالا: 4 پیکسل ؛)

“من ncluding ”یک کلاس جدید با حاشیه منفی آن را نزدیک تر می کند.

شما باید در تعیین هر یک از کلمات CSS ، همراه با نقل قول ها ، بسیار محتاط باشید ، تا کرنرینگ و تراز آنها با نشانه گذاری اطراف مطابقت داشته باشد. به عنوان مثال ، حرف T باید به چپ ، کمی فراتر از لبه پاراگراف ، منتقل شود ، به طوری که خط عرضی آن از نظر بصری در طرح بندی قرار گیرد. شما باید همین کار را با حروف گرد مانند C ، G ، O و Q انجام دهید. در این مثال ، اندازه فونت های استفاده شده 20 ، 30 و 48 است. اما شما باید اندازه ها را بر اساس ویژگی فونت هایی که انتخاب کرده اید انتخاب کنید. و همچنین اندازه و وضوح صفحه هایی که سایت در آنها مشاهده می شود.

عناصر شبه و کلاس های شبه

با یک عنصر شبه CSS ، می توانید با افزودن :: حرف اول به عنصر پاراگراف ، به راحتی یک حرف برجسته ایجاد کنید. استفاده: حرف اول ( با یک روده بزرگ) برای مرورگرهای قدیمی:

p (font-size: 1.2em؛ font-family: Georgia، "Times New Roman"، Times، serif؛ line-height: 2em؛ padding-bottom: 1.2em؛) p :: حرف اول (اندازه فونت: 3.6em ؛ text-transform: حروف بزرگ ؛ font-family: "Monotype Bernard Condened"، serif؛ margin-right: 0.03em؛) .initialb (margin-right: -0.1em؛) .initialn (margin-right: -0.15 em؛)

کد HTML که شامل کلاس های CSS است که در آن حروف N و B را در نظر می گیرد به این شکل خواهد بود ...

یک حرف اصلی ، با حرف اول یک حرف بزرگ.
با شکست خط ، خط بعدی فاقد کلاه اولیه است.

nدر منبع HTML چگونه اندازه حرف اول ، نه یک حرف بزرگ در HTML ، به اندازه کلاه اولیه 3.6em می رسد. مرتب ، ها؟

ببا بازگشت سخت ، و شروع پاراگراف جدید ، کلاه اولیه دیگر همیشه ایجاد می شود. شاید از خود بپرسید ، چگونه می خواهم در این مورد حساب کنم؟ آیا قرار است در ابتدای پاراگراف جدید محدودیت اولیه داشته باشم؟خوب ، شما می توانید. اما ، آیا می خواهید این گونه به نظر برسد ، و آیا مطلقا باید این گونه به نظر برسد؟

اولین حرف بزرگ پاراگراف به حرف تبدیل می شود.
اولین حرف بعد از وقفه خط با حروف بزرگ نوشته نمی شود.

Oلطفاً توجه داشته باشید که در کد منبع HTML اولین حرف بزرگ نیست ، اما به یک کاراکتر 3.6em تبدیل می شود.

Oبا این حال ، حتی پس از شکست خط اجباری ، و در ابتدای هر پاراگراف جدید ، همیشه یک حرف ایجاد می شود. شاید از خود بپرسید: چگونه این را در نظر بگیرم؟ آیا باید برای همه این موارد نامه اضافه کنم؟خوب ، شما می توانید. اما آیا لازم است؟

حتی با وجود مزایایی که عناصر شبه ارائه می دهند ، ما مجبور شدیم کد زیادی برای تعریف کلاس های جداگانه برای رسیدگی به مسائل کرنینگ و تورفتگی اضافه کنیم. اما این روش اولین حرف هر پاراگراف جدید را به CSS تبدیل می کند. برای برخی ، ممکن است کار نکند ، زیرا نیازی به تغییر حرف اول هر پاراگراف ندارید.

ترکیب شبه کلاس ها و عناصر شبه برای ایجاد یک طرح بندی هوشمند

افزودن: شبه کلاس اول کودک به حل مشکل تبدیل غیر ضروری حروف اول کمک می کند:

p (اندازه فونت: 1.2em ؛ font-family: Georgia ، "Times New Roman" ، Times، serif ؛ ارتفاع خط: 2em ؛ padding-bottom: 0.5em؛) p: first-child :: first-letter ( font-size: 3.6em؛ text-transform: حروف بزرگ؛ font-family: "Monotype Bernard Condened"، serif؛ margin-right: 0.03em؛)

ترکیب این کد با HTML:

حرف اول ، که به عنوان فرزند اول تعریف می شود ، تنها حرفی است که در این روش به کلاه افتادگی بالا تبدیل می شود.

از آنجا که فقط حرفی که به عنوان فرزند اول تعریف می شود تبدیل می شود ، توجه داشته باشید که این مثال با نمونه قبلی بدون فرزند اول متفاوت است. علاوه بر این ، ما اولین حروف را پس از شروع یک پاراگراف و پس از وقفه اجباری خط تبدیل نمی کنیم. در مقایسه با ظاهر طرح هنگام تبدیل تمام حروف اول پاراگراف ها ، این ظاهر ظریف تر به نظر می رسد.

مزیت استفاده از کلاس های شبه ، توانایی رسیدگی به موارد خاص مختلف است. نکات منفی چطور؟ شبه کلاس های مختلف زیادی وجود دارد و می توان آنها را به طرق مختلف ترکیب کرد تا بتواند سر شما را بچرخاند. به عنوان مثال ، کلاس های شبه: اولین فرزند و: اولین نوع می توانند نتایج یکسانی را ارائه دهند. همچنین می توانید کلاس شبه را نه تنها در پاراگراف ، بلکه در مورد عناصر نیز اعمال کنید