Html نحوه ساخت متن با حروف بزرگ css است. ساخت css با حروف بزرگ Superscript html

سلام. گاهی اوقات هنگام ایجاد صفحات وب، باید کلمات خاصی را با استفاده از 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

زیرنویس و زیرنویس

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

λ 3- من 1λ 2+ من 2λ - من 3 = 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+ الف nایکس n



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

تگ های HTML و - متن زیرنویس و بالانویس

تعریف و کاربرد

برچسب بزنید متن زیرنویس را تعریف می کند. متن زیرنویس نصف ارتفاع است و زیر خط مبنا ظاهر می شود. متن زیرنویس را می توان هنگام نوشتن فرمول های شیمیایی، مانند H 2 O استفاده کرد.

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

پشتیبانی مرورگر

برچسب ها و توسط تمام مرورگرهای اصلی پشتیبانی می شود.

تفاوت بین HTML و XHTML

ویژگی های استاندارد

ستون DTDمشخص می کند که در کدام نوع سند ویژگی HTML 4.01/XHTML 1.0 DTD مجاز است. S=Strict، T=Transitional و F=Frameset.

برچسب ها و از ویژگی های استاندارد زیر پشتیبانی می کند:

صفت معنی شرح DTD
کلاس نام کلاس نام کلاس را برای یک عنصر مشخص می کند STF
کارگردان rtl
لیتر
جهت متن را برای محتوا در یک عنصر مشخص می کند STF
شناسه مشخص کننده یک شناسه منحصر به فرد برای یک عنصر مشخص می کند STF
زبان زبان_کد کد زبان محتوای عنصر را مشخص می کند STF
سبک style_definition یک سبک درون خطی را برای یک عنصر مشخص می کند STF
عنوان متن نشان می دهد اطلاعات تکمیلیدر مورد عنصر STF
xml:lang زبان_کد کد زبان محتوای یک عنصر در اسناد XHTML را مشخص می کند STF

اطلاعات بیشتر در مورد ویژگی های استاندارد.

ویژگی های رویداد

برچسب ها و از ویژگی های رویداد زیر پشتیبانی کنید:

صفت معنی شرح DTD
روی کلیک اسکریپت اسکریپت برای اجرا با کلیک ماوس STF
ondblclick اسکریپت اسکریپت برای اجرا با دوبار کلیک STF
به پایین اسکریپت اسکریپت برای اجرا با کلیک ماوس STF
onmousemove اسکریپت اسکریپت برای اجرا در هنگام حرکت ماوس STF
سوار کردن اسکریپت اسکریپتی که وقتی نشانگر ماوس عنصر را ترک می کند اجرا می شود STF
روی موشواره اسکریپت اسکریپت برای اجرا زمانی که ماوس روی یک عنصر حرکت می کند STF
onmouseup اسکریپت اسکریپت برای اجرا زمانی که دکمه ماوس آزاد شد STF
روی کلید اسکریپت اسکریپت برای اجرا با فشار کلید STF
با فشار دادن کلید اسکریپت اسکریپت برای اجرا با فشار دادن یک کلید و سپس رها شدن STF
روی کلید اسکریپت اسکریپت برای اجرا زمانی که کلید آزاد شد STF

اطلاعات تکمیلی در مورد

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

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

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

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

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


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

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

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

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

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

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


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

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

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

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

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


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

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

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

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

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


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

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

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

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

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

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



تبدیل حروف کوچک به حروف کوچک و بزرگ اول با استفاده از CSS (8)

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

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

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

این یک جمله نمونه است.

این یک جمله نمونه دیگر است. و این مورد دیگری است، اما کاملاً کوچک خواهد بود.

چگونه می توان حرف UPPERCASE را به کوچک و اولین حرف بزرگ را برای هر جمله مانند زیر فقط با CSS تبدیل کرد؟

از جانب:این یک برنامه نمونه است.

به:این یک پیشنهاد نمونه است.

به روز رسانی:وقتی از text-transform استفاده می کنم: capize; نتیجه هنوز همان است.

شما نمی توانید این کار را صرفا با CSS انجام دهید. یک ویژگی text-transform وجود دارد، اما فقط هیچ کدام را نمی‌پذیرد، با حروف بزرگ، بزرگ، کوچک و ارث بری کنید.

ممکن است بخواهید به یک راه حل JS یا یک راه حل سمت سرور نگاه کنید.

اگر بتوانید همه کاراکترها را در سرور کوچک کنید، می توانید اعمال کنید:

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

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

اگر می خواهید استفاده کنید برای آن کار نخواهد کرد یا ناحیه متنی که برای استفاده از جاوا اسکریپت نیاز دارید

که باید به خوبی کار کند یا