ویژگی text-transform در css کنترل حروف بزرگ و کوچک متن

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

ویژگی text-transform در css کنترل حروف بزرگ و کوچک متن

معرفی و کاربرد ویژگی text-transform در زبان طراحی css

از خاصیت text-transform در CSS3 جهت تعیین حروف کوچک یا بزرگ درون متن یک تگ html استفاده می شود.

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

مقادیر صفت کاربردی text-transform در زبان طراحی سی اس اس

صفت text-transform که در زبان طراحی CSS1 معرفی شده است، ۶ مقدار می پذیرد که عبارتند از:

  1. مقدار none
  2. مقدار capitalize
  3. مقدار uppercase
  4. مقدار lowercase
  5. مقدار initial
  6. مقدار inherit

مقدار none درون خاصیت text-transform در زبان css

اگر خاصیت text-transform را برای یک عنصر html برابر با مقدار none قرار دهیم، در حقیقت می خواهیم این صفت هیچگونه کنترلی بر روی حروف بزرگ یا کوچک متن تگ html نداشته باشیم و حروف در حالت پیش فرض کاراکترهای خود را تعیین کنند.

در واقع مقدار none در خاصیت text-transform به عنوان مقدار پیش فرض محسوب می شود.

[html] p {text-transform: none;} [/html]

مقدار capitalize درون خاصیت text-transform در زبان سی اس اس

اگر خاصیت text-transform را برای یک عنصر html برابر با capitalize قرار دهیم، در حقیقت می خواهیم حرف اول کاراکترهای هر کلمه به صورت حروف بزرگ و بقیه حروف هر کلمه با حروف کوچک نمایش داده شود.

[html] p {text-transform: capitalize;} [/html]

مقدار uppercase درون خاصیت text-transform در زبان css

اگر خاصیت text-transform را برای یک عنصر html برابر با uppercase قرار دهیم، در حقیقت می خواهیم تمام کاراکترهای حروف هر کلمه به صورت حروف بزرگ نمایش داده شود.

[html] p {text-transform: uppercase;} [/html]

مقدار lowercase درون خاصیت text-transform در زبان سی اس اس

اگر خاصیت text-transform را برای یک عنصر html برابر با lowercase قرار دهیم، در حقیقت می خواهیم تمام کاراکترهای حروف هر کلمه به صورت حروف کوچک نمایش داده شود.

[html] p {text-transform: lowercase;} [/html]

ویژگی text-transform در css کنترل حروف بزرگ و کوچک متن

مقدار initial درون خاصیت text-transform در زبان css

اگر خاصیت text-transform را برابر با مقدار initial تعریف کنیم، در حقیقت مقدار پیش فرض این خصوصیت برای تگ html مورد نظر اعمال می شود.

مقدار inherit درون خاصیت text-transform در زبان سی اس اس

اگر خاصیت text-transform را برابر با مقدار inherit تعریف کنیم، در واقع تگ html مربوطه خصوصیت مورد نظر را از والد پدری خود به ارث می برد.

ویژگی text-transform در css کنترل حروف بزرگ و کوچک متن

بررسی خاصیت text-transform از نظر نسخه زبان طراحی css

ویژگی کاربردی text-transform در اولین نسخه این زبان طراحی یعنی css1 معرفی شده است.

بررسی ساختاری خصوصیت text-transform در زبان طراحی سی اس اس