ویژگی text-transform در css
ویژگی text-transform در css کنترل حروف بزرگ و کوچک متن
در این مقاله از سایت آموزی به بررسی و تحلیل ویژگی text-transform در CSS می پردازیم. ویژگی کاربردی text-transform در اولین نسخه این زبان طراحی یعنی css1 معرفی شده است.
معرفی و کاربرد ویژگی text-transform در زبان طراحی css
از خاصیت text-transform در CSS3 جهت تعیین حروف کوچک یا بزرگ درون متن یک تگ html استفاده می شود. خصوصیت text-transform جهت تعیین اندازه حروف کاربرد ندارد، بلکه در برخی زبان ها همچون زبان انگلیسی که دارای کاراکترهای حروف کوچک و بزرگ هستند، جهت کنترل نمایش حروف کوچک یا بزرگ به کار می رود.
مقادیر صفت کاربردی text-transform در زبان طراحی سی اس اس
صفت text-transform که در زبان طراحی CSS1 معرفی شده است، 6 مقدار می پذیرد که عبارتند از:
- مقدار none
- مقدار capitalize
- مقدار uppercase
- مقدار lowercase
- مقدار initial
- مقدار inherit
برای کسب اطلاعات بیشتر در مورد طراحی وب حتما به صفحه آموزش طراحی سایت سر بزنید.
مقدار none درون خاصیت text-transform در زبان css
اگر خاصیت text-transform را برای یک عنصر html برابر با مقدار none قرار دهیم، در حقیقت می خواهیم این صفت هیچگونه کنترلی بر روی حروف بزرگ یا کوچک متن تگ html نداشته باشیم و حروف در حالت پیش فرض کاراکترهای خود را تعیین کنند.
در واقع مقدار none در خاصیت text-transform به عنوان مقدار پیش فرض محسوب می شود.
p {text-transform: none;}
مقدار capitalize درون خاصیت text-transform در زبان سی اس اس
اگر خاصیت text-transform را برای یک عنصر html برابر با capitalize قرار دهیم، در حقیقت می خواهیم حرف اول کاراکترهای هر کلمه به صورت حروف بزرگ و بقیه حروف هر کلمه با حروف کوچک نمایش داده شود.
p {text-transform: capitalize;}
مقدار uppercase درون خاصیت text-transform در زبان css
اگر خاصیت text-transform را برای یک عنصر html برابر با uppercase قرار دهیم، در حقیقت می خواهیم تمام کاراکترهای حروف هر کلمه به صورت حروف بزرگ نمایش داده شود.
p {text-transform: uppercase;}
مقدار lowercase درون خاصیت text-transform در زبان سی اس اس
اگر خاصیت text-transform را برای یک عنصر html برابر با lowercase قرار دهیم، در حقیقت می خواهیم تمام کاراکترهای حروف هر کلمه به صورت حروف کوچک نمایش داده شود.
p {text-transform: lowercase;}
مقدار initial درون خاصیت text-transform در زبان css
اگر خاصیت text-transform را برابر با مقدار initial تعریف کنیم، در حقیقت مقدار پیش فرض این خصوصیت برای تگ html مورد نظر اعمال می شود.
مقدار inherit درون خاصیت text-transform در زبان سی اس اس
اگر خاصیت text-transform را برابر با مقدار inherit تعریف کنیم، در واقع تگ html مربوطه خصوصیت مورد نظر را از والد پدری خود به ارث می برد.
بررسی خاصیت text-transform از نظر نسخه زبان طراحی css
ویژگی text-transform در اولین نسخه این زبان طراحی یعنی css1 معرفی شده است.
برای متخصص شدن در طراحی سایت فروشگاهی با وردپرس روی لینک زیر کلیک کن و تو دوره ثبت نام کن:
دوره فوق حرفه ای طراحی سایت فروشگاهی با وردپرس پروژه محور
برای متخصص شدن در طراحی بخش Front End سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:
دوره فوق حرفه ای آموزش طراحی سایت با HTML5 و CSS3 و jQuery
برای متخصص شدن در بهینه سازی و سئوی سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:
دوره آموزش سئو محتوا کاملا حرفه ای براساس آخرین آپدیت های گوگل
بررسی ساختاری خصوصیت text-transform در زبان طراحی سی اس اس
عناوین ساختاری خاصیت text-transform | وضعیت ساختاری خاصیت text-transform |
مقدار پیش فرض | none |
قابلیت توارث | دارد |
ورژن css صفت | CSS1 |
سینتکس صفت در جاوا اسکریپت | "object.style.textTransform="uppercase |
پشتیبانی مرورگرهای اینترنتی از ویژگی text-transform در css
خاصیت css | |||||
text-transform | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
پیوندهای مهم و کاربردی
تگ های HTML در سایت آموزی | تگ های جدید HTML5 در سایت آموزی | صفات تگ های HTML در سایت آموزی | تگ های منسوخ شده HTML5 در سایت آموزی | تگ های block level و inline level در سایت آموزی | تگ های HTML در W3school | ویژگی های CSS در سایت آموزی | ویژگی های CSS در W3schools
ویژگی text-transform در css کنترل حروف بزرگ و کوچک متن – اختصاصی سایت آموزی
درباره سایت آموزی
علیرضا ابراهیمی - بنیانگذار وبسایت آموزشی سایت آموزی ، 8 سال سابقه فعالیت حرفه ای در زمینه طراحی سایت ، سئو ، سابقه تدریس اغلب زبان های برنامه نویسی تحت وب ، محقق و تحلیلگر ساختارهای توسعه دهنده وب
نوشته های بیشتر از سایت آموزی
دیدگاهتان را بنویسید