টেক্সট ট্রান্সফরমেশন CSS এর সাথে কাজ করছে

CSS টেক্সট-ট্রান্সফর্ম প্রপার্টি আমাদের একটি এলিমেন্টের জন্য টেক্সট ক্যাপিটালাইজেশন সেট করতে দেয়। এটি নিম্নলিখিত মানগুলি গ্রহণ করতে পারে:বড় হাতের অক্ষর, ছোট হাতের অক্ষর, বড় হাতের অক্ষর, পূর্ণ-প্রস্থ, পূর্ণ-আকার-কানা এবং কোনটি নয়৷

সিনট্যাক্স

CSS টেক্সট-ট্রান্সফর্ম সম্পত্তির সিনট্যাক্স নিম্নরূপ -

Selector {
   text-transform: /*value*/
}

উদাহরণ

নিম্নলিখিত উদাহরণগুলি CSS টেক্সট-ট্রান্সফর্ম প্রপার্টি −

চিত্রিত করে

<!DOCTYPE html>
<html>
<head>
<style>
h2 {
   text-transform: uppercase;
}
.demo {
   text-transform: lowercase;
}
q {
   text-transform: capitalize;
   font-style: italic;
}
</style>
</head>
<body>
<h2>WordPress</h2>
<q>WordPress is open source software you can use to create a beautiful website, blog, or app.</q>
<p class="demo">34% of the web uses WordPress, from hobby blogs to the biggest news sites online.</p>
</body>
</html>

আউটপুট

এটি নিম্নলিখিত আউটপুট দেয় -

টেক্সট ট্রান্সফরমেশন CSS এর সাথে কাজ করছে

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
div {
   background-color: lightgreen;
   margin: auto;
   text-align: center;
}
p {
   width: 80%;
   background-color: aquamarine;
   text-decoration: uppercase;
}
article {
   background-color: darksalmon;
   text-transform: lowercase;
}
</style>
</head>
<body>
<h2>What is Magento?</h2>
<div>
<p>Magento is an open-source e-commerce platform written in PHP.</p>
<article>
Build your own branded store powered by Magento Commerce and Amazon. Choose from 4,600 themes and extensions in the Magento Marketplace as well as more than 300,000 Magento developers.
</article>
</div>
</body>
</html>

আউটপুট

এটি নিম্নলিখিত আউটপুট দেয় -

টেক্সট ট্রান্সফরমেশন CSS এর সাথে কাজ করছে