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

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

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

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

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

اکنون ، برای تثبیت مطالب نظری ، یک مثال بزنید.

توجه!

فردا تخفیف برای همه محصولات زیبایی وجود دارد!

تبلیغات در کلیه شعب واقع در شهر شما معتبر است.

ایجاد کلاه قطره

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

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

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

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

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

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

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

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

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

همانطور که مشاهده می کنید ، این مبحث بسیار ساده است. شما به راحتی می توانید از کد برنامه ای که من ارائه کرده ام برای منابع وب خود استفاده کرده و سبک خود را تغییر داده و تنظیم کنید.

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

خداحافظ!

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

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

این امر به ویژه اگر سایت دارای صدها صفحه باشد صادق است و ایجاد تغییرات در هر یک از آنها یک فرآیند بسیار وقت گیر است.

اگر css را اعمال کنید ، حروف بزرگ در ابتدای هر پاراگراف می توانند خاص به نظر برسند. به عنوان مثال ، کد زیر ، که در html بدون پرانتز وارد شده است ، اجازه می دهد تا متن ، تزئین شده با برچسب "p" ، حروف بزرگ - حرف اول - بزرگتر - 220٪ اندازه استاندارد ، زرد - مقدار رنگ زرد ، و آن را با فونت ، متفاوت از بقیه متن - گرجستان در مقابل batangche بنویسید.

(<) style(>)

p: حرف اول (فونت-خانواده: گرجستان ؛ اندازه فونت: 220٪ ؛ رنگ: زرد ؛)

(<)/style(>)

حروف بزرگ زیبا را می توان با ایجاد فونت خود به شکل تصاویر به دست آورد - برای هر حرف یک عکس جداگانه ، به عنوان مثال ، به سبک روسی قدیمی یا گوتیک. می توان آنها را ترسیم کرد سپس ، در مکان های مورد نیاز به جای حرف بزرگ ، می توانید کد را بدون پرانتز وارد کنید (<) img src=”ссылка на место, где лежит картинка”(>) صفات اضافی ارتفاع و عرض - عرض و ارتفاع تصویر ، که می تواند بر حسب پیکسل تنظیم شود تا با بقیه متن هماهنگ شود. مثال: (<) img src=”ссылка на место, где лежит картинка” heigh=12 px width=6px(>) پرانتز در اطراف< и >حذف می کنیم

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

(<) style(>)

p (font-family: batangche؛ font-size: 93٪؛)

p: حرف اول (فونت-خانواده: کلی + اسلب ؛ اندازه فونت: 220٪ ؛ رنگ: آبی ؛)

(<)/style(>)

(<)link href="http://fonts.googleapis.com/css?family=Kelly+Slab&subset=latin,cyrillic" rel="stylesheet" type="text/css" (>).

سرویس Google به شما امکان می دهد یکی یا دیگری را انتخاب کنید و پیوندهای آماده ای برای درج در html یا css ارائه می دهد. توجه شما را به این واقعیت جلب می کنیم که انتخاب گروهی از فونت ها - لاتین یا سیریلیک ضروری است ، زیرا تقریباً همه فونت های لاتین برای متون روسی زبان کار نمی کنند. در حال حاضر ، موتور جستجو حدود 40 نوع را به صورت رایگان ارائه می دهد.

یک حرف بزرگ یا حروف بزرگ آن را می توان با استفاده از ویژگی تبدیل متن CSS تنظیم کرد. اگر تبدیل متن: مقدار را در برگه استایل تنظیم کنید ، متن هنگام نوشتن ظاهر می شود. برای تبدیل همه حروف به حروف کوچک ، تبدیل متن را تنظیم کنید: مقدار کوچک با یک کولون جدا می شود و برای حروف بزرگ. تنظیم ویژگی تبدیل متن: بزرگنمایی باعث می شود که هر کلمه در ابتدا یک حرف بزرگ داشته باشد.

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

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

مثال

h3 (تبدیل متن: بزرگ ؛). حروف کوچک (تبدیل متن: حروف کوچک ؛). بزرگنمایی (تبدیل متن: بزرگنمایی ؛)

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

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

و این پاراگراف آخر دارای یک ویژگی تبدیل متن با یک ویژگی CAPITALIZE است. حروف اول هر کلمه بزرگ و تنها آن خواهد بود.

نتیجه

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

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

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

اغلب هنگام افزودن مطالب به سایت یا به عنوان مثال ایجاد یک موضوع جدید در انجمن ، عجله دارید ، کاربر می تواند شروع به نوشتن یک جمله (عنوان) با یک حرف کوچک (کوچک) کند. این تا حدودی اشتباه است.

چندین گزینه برای حل این مشکل به شما نشان خواهم داد: PHP و CSS برای مطالبی که قبلاً منتشر شده اند مناسب تر هستند ، زمانی که چگونه jQuery می تواند حتی قبل از انتشار وضعیت را برطرف کند.

اولین حرف یک رشته در PHP حروف بزرگ است

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

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

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

حرف اول رشته در CSS

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

نحوه استفاده به شرح زیر است:

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

اولین حرف یک رشته در jQuery بزرگ است

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

به عنوان مثال ، ما یک فیلد متنی می گیریم (برای ما یک عنوان برای وارد کردن عنوان عمل می کند) و یک اسکریپت کوچک برای آن می نویسیم که وقتی جمله ای را با حروف کوچک وارد می کنید ، آن را با حروف بزرگ تبدیل می کند:

اسکریپت هم هنگام نوشتن متن و هم به سادگی چسباندن آن فعال می شود. فراموش نکنید که برای کارکردن اسکریپت ها در سایت شما ، باید کتابخانه jQuery را متصل کرده باشید.

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

اطلاعات کوتاه

نامگذاری ها

	شرح	مثال
<тип>	نوع مقدار را نشان می دهد.	<размер>
A&& B	مقادیر باید به ترتیب نشان داده شده نمایش داده شوند.	<размер> && <цвет>
A | ب	نشان می دهد که تنها یکی از مقادیر پیشنهادی باید انتخاب شود (A یا B).	عادی | کلاه های کوچک
A || ب	هر مقدار را می توان به تنهایی یا همراه با دیگران به هر ترتیب استفاده کرد.	عرض || شمردن
	ارزش های گروه ها	[محصول || صلیب]
*	صفر یا چند بار دیگر تکرار کنید.	[,<время>]*
+	یک یا چند بار تکرار کنید.	<число>+
?	نوع ، کلمه یا گروه مشخص شده اختیاری است.	داخل
(الف ، ب)	حداقل A را تکرار کنید ، اما نه بیشتر از B.	<радиус>{1,4}
#	یک یا چند بار ، با کاما از هم جدا کنید.	<время>#

×

ارزش ها

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

جعبه شنی

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

div (text-transform: capitalize؛)

مثال

بنای فرهنگی قرون وسطی

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

نتیجه این مثال در شکل نشان داده شده است. 1

برنج. 1. اعمال ویژگی text-transform

مدل شیء

یک شیء.style.textTransform

مشخصات

هر مشخصات چندین مرحله تأیید را طی می کند.

• توصیه - این مشخصات توسط W3C تأیید شده است و به عنوان استاندارد توصیه می شود.
• توصیه نامزد ( توصیه احتمالی) - گروه مسئول استاندارد از دستیابی به اهداف خود قانع است ، اما برای پیاده سازی استاندارد به کمک جامعه توسعه دهندگان نیاز است.
• توصیه پیشنهادی ( توصیه پیشنهادی) - در این مرحله ، سند برای تأیید نهایی به شورای مشورتی W3C ارائه می شود.
• پیش نویس کار - نسخه بالغ تری از پیش نویس پس از بحث و تجدید نظر برای بررسی جامعه.
• پیش نویس ویرایشگر ( پیش نویس تحریریه) - پیش نویس نسخه استاندارد پس از ویرایش توسط ویراستاران پروژه.
• پیش نویس ( مشخصات پیش نویس) اولین پیش نویس استاندارد است.

×