Html نحوه ساخت متن با حروف بزرگ css است. Html این است که چگونه با استفاده از css، متن را با حروف بزرگ css بزرگ و کوچک کنیم

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

حروف بزرگ و کوچک با css

به طور کلی حتی امروزه نیز می توانید متن مورد نظر را در تگ ها قرار دهید _{^{و نمایش مورد نظر را دریافت کنید، اما اجازه دهید ببینیم چگونه می توان با css این کار را انجام داد، زیرا تکنیک کمی متفاوت است.}}

به عنوان مثال، شما باید فرمول H 2 O را در یک سند html بنویسید. این کار به این صورت انجام می شود:

• خود فرمول نوشته شده است
• آن دسته از کلمات و اعدادی که باید در فهرست بالا یا پایین نمایش داده شوند، در یک تگ span محصور می شوند که باید به آن کلاس اختصاص داده شود. مثلا: کاراکترهایی که باید چاپ شوند
• در css باید این عنصر را تنظیم کنید:

  فهرست برتر(
  vertical-align: super;
  }

این ویژگی تراز عمودی متن را کنترل می کند. مقدار آن super مشخص می کند که متن به صورت فوق نویس نمایش داده می شود. اما اندازه فونت مانند متن معمولی باقی ماند. برای اینکه همه چیز زیباتر به نظر برسد، باید اندازه فونت را نیز با ویژگی font-size کمی کوچکتر تنظیم کنید.

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

فهرست برتر(
Vertical-align: sub;
}

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

این تمام چیزی است که باید در مورد superscript و subscript در css بدانید. هیچ یک ویژگی های اضافیاموال نمی دهد، و آنها مورد نیاز نیست. در صورت تمایل، می توانید این متن را به روش خاصی ترتیب دهید، اما به ندرت لازم است.

جایی که می تواند مفید باشد

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

این ویژگی کاملاً بین مرورگر است و در تمام نسخه های CSS پشتیبانی می شود.

شاخص در رابطه با متن، افست کاراکترها نسبت به خط مبنا به بالا یا پایین است. بسته به مقدار مثبت یا منفی افست، شاخص را به ترتیب شاخص بالا یا پایین می نامند. آنها به طور فعال در ریاضیات، فیزیک، شیمی و برای نشان دادن واحدهای اندازه گیری استفاده می شوند. HTML دو عنصر را برای ایجاد یک شاخص ارائه می دهد: ^{(از زبان انگلیسی) - رونوشت و _{(از انگلیسی زیرنویس) - زیرنویس. متن قرار داده شده در یکی از این کانتینرها با اندازه کوچکتر از متن اصلی نشان داده می شود و نسبت به آن به بالا یا پایین منتقل می شود. مثال 1 نشان می دهد اشتراک گذاریعناصر و سبک های مشخص شده برای تغییر ظاهر متن.}}

مثال 1: ایجاد Superscript و Subscript

معادله مشخصه سطح درجه دوم

λ ³- من ₁λ ²+ من ₂λ - من ₃ = 0

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

برنج. 1. نمایان شدن شاخص ها پس از اعمال سبک ها

می توانید از استفاده منصرف شوید ^{و _{به نفع سبک ها آنالوگ این عناصر ویژگی vertical-align است که باعث می شود متن با فاصله معینی به صورت عمودی حرکت کند. به طور خاص، مثال 2 از 0.8em برای شاخص بالا و -0.5em برای شاخص پایین به عنوان مقدار استفاده می کند. Em یک واحد نسبی برابر با اندازه فونت فعلی است. به عنوان مثال، 0.5em به این معنی است که متن باید به اندازه نصف اندازه فونت جابجا شود.}}

مثال 2: استفاده از سبک ها برای مدیریت شاخص ها

چند جمله ای درجه n

f(x) = a 0+a 1 x + ... + a n-1ایکس n-1+a nایکس n

در مثال، خود فرمول در اندازه بزرگ‌نمایی شده نمایش داده می‌شود، کاراکترهای بالا به رنگ قرمز تنظیم می‌شوند و موارد پایین‌تر آبی هستند (شکل 2).

در آخرین آموزش ویدیویی نحوه حذف و اضافه کردن اطلاعات جدید را یاد گرفتیم نسخه جدیدسند HTML، در حالی که این را گزارش می کند موتورهای جستجوو برجسته سازی بصری به طوری که بازدیدکنندگان نیز بتوانند تغییرات را مشاهده کنند. برای این کار از تگ های del و ins استفاده کردیم.

در این فیلم آموزشی به ادامه مبحث قالب بندی متن در سند HTML می پردازیم. با دو تگ HTML که نشان دهنده زیرنویس و زیرنویس متن هستند آشنا می شویم.

تگ sup HTML زیرنویس متن در HTML است.

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

اما اگر سایت شما به موضوعات ذکر شده تعلق ندارد، به این معنی نیست که برچسب ^{مفید نخواهد بود کافی است تخیل و نبوغ را نشان دهید و برای این عنصر کاربرد پیدا کنید.}

تگ فرعی HTML زیرنویس متن در HTML است.

در مورد تگ HTML _{، سپس برعکس تگ است ^{، و مسئول تعیین زیرنویس متن است. متن زیرنویس را می توان هنگام نوشتن فرمول یا معادلات ریاضی استفاده کرد. اما در کنار این، شاید بتوانید کاربرد دیگری برای تگ پیدا کنید. .}}

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

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

• نمایش تمام متن با حروف بزرگ؛
• تمام متن را با حروف کوچک انتخاب کنید.
• کاری کنید که حرف اول هر کلمه با حروف بزرگ شروع شود.

"این همه خوب و خوب است، اما چه زمانی ممکن است مورد نیاز باشد؟" - تو پرسیدی. موقعیتی را تصور کنید که می خواهید تمام آیتم های منو را با حروف بزرگ نمایش دهید. برای انجام این کار، نیازی به تایپ آنها نیست، از جمله کلید caps lock، یا با نگه داشتن کلید Shift. کافی است با ایجاد قانون مناسب در فایل CSS، تمام موارد لیست را با حروف بزرگ نمایش دهید. و این تنها یکی از بسیاری از موقعیت های ممکن است.

ویژگی تبدیل متن

ما حروف متن را با استفاده از ویژگی text-transform کنترل می کنیم. دارای 4 مقدار اصلی - بزرگ (حروف بزرگ)، حروف کوچک (حروف کوچک)، بزرگ (حروف بزرگ برای هر حرف اول کلمه، بقیه مقادیر تغییر نمی کند)، هیچ (بدون قالب بندی اعمال می شود). ). در نگاه اول، همه اینها ممکن است برای شما بسیار پیچیده به نظر برسد.

نکته اصلی این است که وحشت نکنید ...

اما در عمل، همانطور که اکنون خواهید دید، همه چیز بسیار ساده است. نکته اصلی این است که انتخابگر مناسب را انتخاب کنید، زیرا مقادیر ویژگی تبدیل متن به ارث می رسد.

برجسته کردن با حروف بزرگ

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

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

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

همه چیز با حروف بزرگ نوشته شده است...

حروف کوچک - برای همه اعمال شود

در مرحله بعد همه جا حروف کوچک را اعمال می کنیم که برای آن موارد زیر را می نویسیم:

متن (تبدیل متن: حروف کوچک؛ )

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

صفحه وب با حروف کوچک فعال است

حرف اول هر کلمه را با حروف بزرگ مشخص کنید

برای انجام این کار، فقط باید از مقدار مناسب استفاده کنیم:

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

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

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

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

P (تبدیل متن: هیچ؛ )

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

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

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

CSS امکان سفارشی سازی انعطاف پذیر متن را می دهد که با استفاده از زبان HMTL نمایش داده می شود. امروز به تأثیر ویژگی "تغییر متن" خواهیم پرداخت که امکان تغییر حروف فونت را فراهم می کند. این گزینه توسط تمام مرورگرهای مدرن پشتیبانی می شود و در مشخصات تمام نسخه های CSS گنجانده شده است.

هدف

ویژگی "Text-transform" می تواند سه مقدار اصلی و دو مقدار اضافی داشته باشد. به عنوان مثال، می توانید به تمام متن انتخاب شده، حروف بزرگ اختصاص دهید. یا می توانید دستوری بر خلاف ویژگی قبلی بدهید که در آن همه کاراکترها کوچک می شوند. شما می توانید با استفاده از هر روشی که برای شما مناسب است، قرار ملاقات بگذارید. به عنوان مثال، استفاده از استایل های درون خطی. یا می توانید ایجاد کنید

یک فایل مجزا با توضیحات تمام خواص. اینکه از کدام روش انتساب استفاده کنید به شما بستگی دارد. "Text-transform" می تواند مقادیر زیر را داشته باشد:

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

کاربرد

از جانب با استفاده از CSSحروف بزرگ (یا جلوه های مشابه) با یک دستور ساده تنظیم می شود. بنابراین نیازی به تغییر یا بازنویسی کل متن نیست. اگر یک ما داریم صحبت می کنیمدر مورد یک سایت یک صفحه ای، پس این ویژگی ممکن است مفید نباشد. اما هنگامی که یک پورتال بزرگ تحت کنترل شما است، باید حروف را در آن تصحیح کنید قطعات خاص، سپس «تبدیل متن» تنها ابزار مؤثر می شود. به عنوان مثال، شما باید فونت را در تگ های عنوان "h2" اصلاح کنید. برای انجام این کار، ورودی: "h2 ( text-transform: uppercase; )" را اضافه کنید، و سپس تمام عناوین سطح دوم با حروف بزرگ خواهند بود.

ویژگی های خاص

برخی ممکن است فکر کنند که پردازش دستی متن و تغییر فونت با استفاده از ویژگی "Text-transform" هیچ تفاوتی ندارد. اما اینطور نیست. اگر به صورت دستی آن را به حروف بزرگ (بزرگ) تغییر دهید، در هنگام کپی کردن این اطلاعات از سایت خود، کاراکترها بدون تغییر باقی می مانند. اگر از زبان CSS استفاده می کنید، همه چیز به شکل دیگری اتفاق می افتد. ویژگی "Text-transform" فقط به صورت بصری فونت را برای کاربران تغییر می دهد. اما در واقعیت، نمادها بدون تغییر باقی می مانند. این برای تمام مقادیر این ویژگی اتفاق می افتد. اطلاعات کپی شده (متن) دارای حالت اصلی است که در آن استفاده شده است کد منبعصفحات این تنها تفاوت بین پردازش دستی و استفاده از دستورات CSS است.

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