যেকোনো নিবন্ধ বা নথি লেখার সময়, আমাদের প্রায়শই নির্দিষ্ট ক্ষেত্রে কিছু অক্ষরের প্রয়োজন হয়। একটি ওয়েব পৃষ্ঠায়, এইচটিএমএল উপাদান যার পাঠ্যকে রূপান্তরিত করা প্রয়োজন তা সিএসএস বৈশিষ্ট্যের সাথে প্রয়োগ করা হয় “ পাঠ্য-রূপান্তর ” এই বৈশিষ্ট্যটি এমনভাবে সময় বাঁচায় যে সমস্ত অক্ষর যোগ করার পরে, তাদের কেস একবারে রূপান্তরিত করা যেতে পারে।

এই পোস্টটি আপনাকে শেখাবে কিভাবে আমরা CSS দিয়ে টেক্সট কেস পরিবর্তন করতে পারি। সুতরাং শুরু করি!

কিভাবে CSS ব্যবহার করে বড় হাতের এবং ছোট হাতের টেক্সট করা যায়?

সিএসএস-এ, ' পাঠ্য-রূপান্তর ' সম্পত্তি টেক্সট ক্যাপিটালাইজেশন নিয়ন্ত্রণ করে. এটি টেক্সটকে বড় হাতের বা ছোট হাতের অক্ষরে রূপান্তর করতেও ব্যবহার করা হয়।

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

CSS টেক্সট-ট্রান্সফর্ম প্রপার্টির সম্ভাব্য মান নীচে তালিকাভুক্ত করা হয়েছে:

• • ' বড় হাতের অক্ষর ”: এই মানটি উপাদানের পাঠ্যের সমস্ত অক্ষরকে বড় করে তোলে।
  • ' ছোট হাতের অক্ষর ”: এই মানটি উপাদানের পাঠ্যকে ছোট হাতের অক্ষরে পরিবর্তন করে।
  • ' মূলধন করা ”: এই মানটি প্রতিটি শব্দের প্রথম অক্ষর বড় আকারে পরিবর্তন করে।
  • ' কোনটি ”: এই মানটি পরিবর্তনের জন্য উপাদানটির পাঠ্যকে সীমাবদ্ধ করে।
  • ' প্রাথমিক ”: এই মানটি ডিফল্ট মান সেট করে।
  • ' আপনি উত্তরাধিকারী ”: এই মানটি তার মূল উপাদান থেকে তার মান সেট করে।

নীচের উদাহরণ বিশ্লেষণ!

উদাহরণ: টেক্সটকে বড় হাতের এবং ছোট হাতের অক্ষরে রূপান্তর করা

প্রথমে, ক্লাসের নামের সাথে একটি ডিভ উপাদান যোগ করুন “ বাক্স ” মূল অংশের ভিতরে, তিনটি শিরোনাম ট্যাগ যোগ করুন

,

এবং

, যেখানে

শিরোনামের পাঠ্য সবই বড় হাতের,

ছোট হাতের অক্ষরে এবং তৃতীয়টিও ছোট হাতের অক্ষরে।

নীচে HTML কোড:

< div ক্লাস = 'বাক্স' >
< h1 > ছোট হাতের অক্ষর: LINUXHINT-এ স্বাগতম h1 >
< h2 > বড় হাতের অক্ষর: linuxhint-এ স্বাগতম h2 >
< h3 > ক্যাপিটালাইজ: লিনাক্সহিন্টে স্বাগতম h3 >
div >

শৈলী বক্স ডিভ

.বক্স {
উচ্চতা: 200px;
প্রস্থ: 80 % ;
সীমানা: 4px কঠিন #e4cfcf;
ব্যাকগ্রাউন্ড-রঙ: ক্যাডেটব্লু;
মার্জিন: 1px স্বয়ংক্রিয়;
প্যাডিং: 10px;
}

উপরের এইচটিএমএল ফাইলে তৈরি ডিভিটি এখন CSS বৈশিষ্ট্যগুলির সাথে স্টাইল করা হয়েছে যা নীচে ব্যাখ্যা করা হয়েছে:

• • ' উচ্চতা ” ডিভের উচ্চতা নির্ধারণের জন্য ব্যবহার করা হয়।
  • ' প্রস্থ ” ডিভের প্রস্থ নির্ধারণের জন্য ব্যবহার করা হয়।
  • ' সীমান্ত ” বৈশিষ্ট্যটি উপাদানটির চারপাশে সীমানা প্রয়োগ করতে ব্যবহার করা হয়, যা 4px প্রস্থ, কঠিন লাইনের ধরন এবং #e4cfcf রঙের।
  • ' পেছনের রঙ ” উপাদানটির পটভূমির রঙ নির্দিষ্ট করে।
  • ' মার্জিন ” সম্পত্তি উপাদানের প্রতিটি পাশে স্থান সামঞ্জস্য করে।
  • ' প্যাডিং ডিভ উপাদানের বিষয়বস্তুর চারপাশে বা উপাদানের সীমানার ভিতরে স্থান তৈরি করতে সম্পত্তি ব্যবহার করা হয়।

নীচের কোড ব্লকগুলি নির্দেশ করে যে সমস্ত শিরোনাম উপাদান টেক্সট-ট্রান্সফর্ম বৈশিষ্ট্যের বিভিন্ন মান দিয়ে স্টাইল করা হয়েছে।

উপাদানটি প্রপার্টি টেক্সট-ট্রান্সফর্মের সাথে প্রয়োগ করা হয় যার মান সেট করা হয় “ ছোট হাতের অক্ষর ”:

h1 {
টেক্সট-ট্রান্সফর্ম: ছোট হাতের অক্ষর;
}

উপাদানটি টেক্সট-ট্রান্সফর্ম প্রপার্টির সাথে প্রয়োগ করা হয় যার মান সেট করা হয় “ বড় হাতের অক্ষর ”:

h2 {
টেক্সট-ট্রান্সফর্ম: বড় হাতের অক্ষর;
}

উপাদানের জন্য, টেক্সট-ট্রান্সফর্ম প্রপার্টির মান “ মূলধন করা ”:

h3 {
টেক্সট-ট্রান্সফর্ম: বড় করা;
}

উপরে উল্লিখিত কোড প্রদান করে, প্রথম শিরোনামের পাঠ্যটি ছোট হাতের অক্ষরে এবং দ্বিতীয় শিরোনামটি বড় হাতের অক্ষরে রূপান্তরিত হয়। যেখানে প্রতিটি শব্দের প্রথম অক্ষরটি তৃতীয় শিরোনামে বড় করা হয়েছে:

দারুণ! আমরা সফলভাবে শিখেছি কিভাবে টেক্সটকে বড় হাতের, ছোট হাতের এবং সমস্ত বড় হাতের অক্ষরে রূপান্তর করতে হয়।

উপসংহার

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