جلسه ی سی و نهم: خصوصیت Text-transform در CSS

css, آموزش طراحی سایت ابوالفضل کلهری بدون نظر 5 فوریه 2019 119 بازدید

خصوصیت Text-transform در CSS

در جلسات پیش در مورد خصوصیت های Transform (برای دیدن آموزش استایل Transform کلیک کنید) و خصوصیت Transform-origin (برای دیدن آموزش خصوصیت Transform-origin کلیک کنید) آشنا شدید. در این جسه از جلسات طراحی سایت می خواهیم به آموزش خصوصیت Text-transform در CSS بپردازیم. (برای دیدن آموزش CSS به زبان ساده کلیک کنید)

 

خصوصیت Text-transform در CSS

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

نکته: لازم است بدانید که این خصوصیت در تمامی مرورگر ها پشتیبانی می شود و نیازی به پیشوند های آن ها نمی باشد.

 

حالت های مختلف خصوصیت Text-transform در CSS

خب حال که با این این خصوصیت آشنا شده اید و می دانید که چه کاربردی دارد نیاز است که حالات مختلف آن را نیز آشنا شوید که عبارتند از:

  1. none
  2. capitalize
  3. uppercase
  4. lowercase
  5. inherit

 

None

در این حالت هیچ اتفاق خاصی نمی افتد و کلمه ی مورد نظر ما به گونه ای که آن را نوشته ایم نمایش داده خواهد شد.

 

Capitalize

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

 

Uppercase

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

 

Lowercase

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

 

Inherit

در حالت inherit تعیین می کند که از والد خود ارث بری داشته باشد. برای فهم بیشتر توضیحات بالا مثال زیر را ببینید:

 

کد HTML:


<p>

Kamyabiha

</p>

<p class="p1">

Kamyabiha

</p>

<p class="p2">

Kamyabiha

</p>

<p class="p3">

Kamyabiha

</p>

کد CSS:


body {

background-color: #fff;

}

p {

font-size: 28px;

text-align: center;

color: #00695c;

text-transform: uppercase;

}

.p1 {

text-transform: lowercase;

}

.p2 {

text-transform: capitalize;

}

.p3 {

text-transform: inherit;

}

خروجی کد بالا:

خصوصیت Text-transform در CSS

 

مبحث تکمیلی

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

کد HTML:


<p>

در این جا کلمه ی <span>کمیابی ها</span> به رنگ آبی است.

</p>

<p class="ali" style="color:red">

در این جا کلمه ی <span>کمیابی ها</span> به رنگ قرمز است.

</p>

<p style="color:red">

در این جا کلمه ی <span>کمیابی ها</span> به رنگ آبی است.

</p>

کد CSS:


body {

background-color: #fff;

}

span {

color: blue;

}

.ali span {

color: inherit;

}

خروجی کد بالا:

خصوصیت Text-transform در CSS

 

خلاصه مطلب

  1. به کمک خصوصیت Text-transform می توان نحوه ی نمایش اندازه ی حروف یک متن را مشخص نمود.
  2. منظور ما از نمایش اندازه ی حروف، حروف بزرگ یا کوچک مانند حروف انگلیسی می باشد.
  3. لازم است بدانید که این خصوصیت در تمامی مرورگر ها پشتیبانی می شود و نیازی به پیشوند های آن ها نمی باشد.
  4. در حالت Capitalize حرف اول هرکلمه به حروف بزرگ تبدیل می شود و الباقی حروف آن به گونه ای که ما می نویسیم نمایش داده می شوند.
  5. در حالت Uppercase تمامی حروف چه بزرگ چه کوچک به حروف بزرگ تبدیل می شوند.
  6. در حالت lowercase تمامی حروف تمامی حروف چه بزرگ چه کوچک به حروف کوچک تبدیل می شوند.

احساس خود را درباره این مقاله بگویید 0 نظر

جلسه ی سی و نهم: خصوصیت Text-transform در CSS
0 0
ابوالفضل کلهری

فعال در زمینه های ui و ux و طراحی وب سایت مسلط به زبان های نشانه گذاری HTML و CSS و همچنین در زمینه ی آموزش زبان های HTML و CSS نیز فعالیت دارم . امیدوارم با آموزش هایی که در این سایت قرار می دهم موجب پیشرفت شما عزیزان باشم.

مقالات پیشنهادی
دیدگاه شما در رابطه با این مقاله چیست!؟

ارسال دیدگاه

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

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