به شما امکان می دهد حروف متن را تغییر دهید.

مقدار پیش‌فرض هیچ است که هیچ تأثیری بر متن ندارد. مورد متن به همین شکل باقی می ماند. مقادیر بزرگ و کوچک به ترتیب کاراکترها را به حروف بزرگ و کوچک تبدیل می کنند. اگر حروف بزرگ را مشخص کنید، فقط اولین کاراکترهای هر کلمه با حروف بزرگ نوشته می شود. ارث بردن ارزش والد را به ارث می برد.

مثال

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

این پاراگراف دارای ویژگی Text-transform است که روی حروف کوچک تنظیم شده است، به این معنی که همه حروف با حروف کوچک خواهند بود.

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

نتیجه

با این حال، همه چیز به این سادگی نیست. برخی تفاوت های ظریف وجود دارد. اگر به پاراگراف دوم مثال بالا دقت کنید، متوجه می شوید که کلمه بزرگ، با وجود ویژگی text-transform که روی پاراگراف با مقدار بزرگ اعمال می شود، کاملاً با حروف بزرگ نمایش داده می شود که با متن اصلی مطابقت دارد. این با این واقعیت توضیح داده می شود که با مقدار مشخص شده بزرگ، فقط حروف اول کلمات بررسی می شوند و بقیه بدون توجه به حالت اولیه آنها بدون تغییر باقی می مانند.
با وجود سادگی ظاهری، ویژگی text-transform می تواند بسیار مفید باشد. به عنوان مثال، برای اینکه متن تمام عناوین H1 سایت خود را با حروف بزرگ درآورید، فقط باید یک ویژگی را به شیوه نامه اضافه کنید.

H1 (تبدیل متن: بزرگ؛)

و مشکل حل خواهد شد. و شما نیازی به تغییر دستی تمام هدرها ندارید، که می تواند بسیار بسیار زیاد باشد.

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

بیایید متن را تغییر دهیم

به لطف شیوه نامه های آبشاری، می توانید هم نویسه اول یک بلوک و هم کل متن را تغییر دهید. من به شما خواهم گفت که چگونه می توانید هر دو گزینه را انجام دهید. علاوه بر این، تمامی ابزارهای ذکر شده در این مقاله در سه سطح زبان css1، css2، css2.1 و css3 پشتیبانی می‌شوند.

من با یک ویژگی جالب شروع می کنم که تمام محتوای متن را در انتخاب شده تغییر می دهد. آی تی تبدیل متن.

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

حال، برای تجمیع مطالب نظری، یک مثال را در نظر بگیرید.

توجه!

!فردا تمامی محصولات آرایشی تخفیف دارند!

این تخفیف در تمامی شعبه های شهر شما معتبر است.

ایجاد دراپ کلاه

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

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

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

برای حل این مشکل می توانید از ابزاری مانند.

بنابراین، در این مورد: از حرف اول استفاده می شود. مانند همه عناصر شبه، با دو نقطه به انتخابگر اضافه می شود. پس از تمام قوانین شیوه نامه ها، ویژگی ها مشخص می شوند. با این حال، شما می توانید فقط ویژگی هایی را اعمال کنید که مربوط به ویرایش فونت ها، تورفتگی ها، رنگ ها، زمینه، حاشیه ها و حاشیه ها.

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

این پاراگراف حاوی یک جمله بسیار جالب است.

بیایید داستان جالب را در پاراگراف بعدی ادامه دهیم.

نتیجه به دست آمده بسیار جذاب و غیر معمول به نظر می رسد، که این است راه حل ایده آلبرای .

همانطور که می بینید، این موضوع بسیار ساده است. توسط من آورده شده است کد برنامه نویسیشما به راحتی می توانید برای منابع وب خود استفاده کنید و سبک خود را اصلاح و تنظیم کنید.

اگر مطالب ارائه شده برای شما مفید بود، در به روز رسانی وبلاگ من مشترک شوید و فراموش نکنید که دانش خود را (و البته پیوندی به وبلاگ من) با دوستان خود به اشتراک بگذارید. موفق باشید!

خداحافظ!

با احترام، رومن چوشوف

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

نامه ها در آن زمان و اکنون

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

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

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

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

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

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

p (اندازه قلم: 20 پیکسل؛ خانواده فونت: جورجیا، "Times New Roman"، Times، سریف؛) .myinitialcaps (اندازه قلم: 48 پیکسل؛ خانواده فونت: Didot؛)

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

آنچه به ما می دهد:

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

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

مندر این مورد، فضای اضافی بین "I" و "n" وجود دارد.

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

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

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

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

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

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

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

شبه عناصر و شبه طبقات

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

p (اندازه قلم: 1.2em؛ خانواده فونت: جورجیا، "Times New Roman"، Times، سریف؛ ارتفاع خط:2em؛ padding-bottom:1.2em;) p::اولین حرف (اندازه قلم: 3.6em؛ تبدیل متن: بزرگ؛ فونت-خانواده: "Monotype Bernard Condensed"، سریف؛ حاشیه-راست:0.03em;) .initialb (حاشیه-راست:-0.1em;) .initialn (حاشیه-راست:-0.15) اوم ;)

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

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

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

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

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

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

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

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

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

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

p (اندازه قلم: 1.2em؛ فونت-خانواده: جورجیا، "Times New Roman"، Times، سریف؛ ارتفاع خط:2em؛ padding-bottom:0.5em;) p:first-child::first-letter ( اندازه قلم: 3.6em؛ تبدیل متن: بزرگ؛ خانواده فونت: "Monotype Bernard Condensed"، سریف؛ حاشیه سمت راست: 0.03em؛)

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

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

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

مزیت استفاده از شبه کلاس ها توانایی رسیدگی به موارد خاص مختلف است. در مورد معایب چطور؟ شبه کلاس‌های مختلفی وجود دارد، و می‌توان آن‌ها را به روش‌های مختلفی با هم ترکیب کرد که می‌تواند سرتان را بچرخاند. به عنوان مثال، شبه کلاس های :first-child و :first-of-type می توانند نتایج یکسانی را ایجاد کنند. شما همچنین می توانید یک شبه کلاس را نه تنها برای یک پاراگراف، بلکه برای عناصر نیز اعمال کنید