Articles
সিএসএস-এর পরিচিতি
টেক্সট-সম্পর্কিত CSS প্রোপার্টিগুলি

টেক্সট-সম্পর্কিত CSS প্রোপার্টিগুলি

এই প্রবন্ধটি টেক্সট সম্পর্কিত CSS বৈশিষ্ট্যগুলি ব্যাখ্যা করে।

আপনি text-align, text-decoration, এবং text-transform বৈশিষ্ট্যগুলির ব্যবহার এবং কীভাবে লিখতে হয় তা শিখতে পারবেন।

YouTube Video

পূর্বরূপের জন্য HTML তৈরি করা

css-text.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>Text-Related CSS Properties</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-text.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>Text-Related CSS Properties</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Typography (Text-Related)</h2>
20        </header>
21        <article>
22            <h3>text-align</h3>
23            <section>
24                <header><h4>text-align: left</h4></header>
25                <section class="sample-view">
26                    <p class="text-align-left">This is left-aligned text.</p>
27                </section>
28                <header><h4>text-align: center</h4></header>
29                <section class="sample-view">
30                    <p class="text-align-center">This is center-aligned text.</p>
31                </section>
32                <header><h4>text-align: right</h4></header>
33                <section class="sample-view">
34                    <p class="text-align-right">This is right-aligned text.</p>
35                </section>
36                <header><h4>text-align: justify</h4></header>
37                <section class="sample-view">
38                    <p class="text-align-justify">This is justified text, meaning it will be spaced so that the left and right edges are aligned evenly.</p>
39                </section>
40            </section>
41        </article>
42        <article>
43            <h3>text-decoration</h3>
44            <section>
45                <header><h4>text-decoration: underline</h4></header>
46                <section class="sample-view">
47                    <p class="text-decoration-underline">This text has an underline.</p>
48                </section>
49                <header><h4>text-decoration: overline</h4></header>
50                <section class="sample-view">
51                    <p class="text-decoration-overline">This text has an overline.</p>
52                </section>
53                <header><h4>text-decoration: line-through</h4></header>
54                <section class="sample-view">
55                    <p class="text-decoration-line-through">This text has a line-through.</p>
56                </section>
57                <header><h4>text-decoration: underline; text-decoration-color: red; text-decoration-style: wavy; text-decoration-thickness: 2px;</h4></header>
58                <section class="sample-view">
59                    <p class="text-decoration-custom-underline">This text has a custom underline (color and style).</p>
60                </section>
61            </section>
62        </article>
63        <article>
64            <h3>text-transform</h3>
65            <section>
66                <header><h4>text-transform: none</h4></header>
67                <section class="sample-view">
68                    <p class="text-transform-none">This is no transformation applied.</p>
69                </section>
70                <header><h4>text-transform: capitalize</h4></header>
71                <section class="sample-view">
72                    <p class="text-transform-capitalize">this is a sentence in lowercase but will be capitalized.</p>
73                </section>
74                <header><h4>text-transform: uppercase</h4></header>
75                <section class="sample-view">
76                    <p class="text-transform-uppercase">This text will be transformed to uppercase.</p>
77                </section>
78                <header><h4>text-transform: lowercase</h4></header>
79                <section class="sample-view">
80                    <p class="text-transform-lowercase">THIS TEXT WILL BE TRANSFORMED TO LOWERCASE.</p>
81                </section>
82            </section>
83        </article>
84    </main>
85</body>
86</html>

টাইপোগ্রাফি (টেক্সট-সংশ্লিষ্ট)

text-align প্রপার্টি 

 1/* Text align examples */
 2.text-align-left {
 3    text-align: left; /* Align text to the left */
 4}
 5
 6.text-align-center {
 7    text-align: center; /* Center align text */
 8}
 9
10.text-align-right {
11    text-align: right; /* Align text to the right */
12}
13
14.text-align-justify {
15    text-align: justify; /* Justify text (aligns text to both left and right edges) */
16}

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

text-align এর প্রধান মান

left (বাম দিকে সারিবদ্ধ) 
1p {
2    text-align: left;
3}
  • left টেক্সটকে বাম দিকে সমতল করে (এটি অনেক ভাষার জন্য ডিফল্ট সংযোগ পদ্ধতি)।
right (ডান দিকে সারিবদ্ধ) 
1p {
2    text-align: right;
3}
  • right টেক্সটকে ডান দিকে সমতল করে। এটি বিশেষত সহজ শৈলীতে ডান থেকে বামে লেখা ভাষার জন্য কার্যকর, যেমন আরবি এবং হিব্রু।
center (কেন্দ্র সারিবদ্ধ) 
1p {
2    text-align: center;
3}
  • center টেক্সটকে কেন্দ্রে সমতল করে। এটি প্রায়শই শিরোনাম এবং শীর্ষকের জন্য ব্যবহৃত হয়।
justify (সারিবদ্ধ) 
1p {
2    text-align: justify;
3}
  • justify লাইনগুলির বাম এবং ডান প্রান্ত সমানভাবে সমতল করে, যার ফলে একটি পরিপাটি সংযোগের ছাপ সৃষ্টি হয়। এটি সংবাদপত্র এবং ম্যাগাজিনের মত বিন্যাসে ব্যবহৃত হয়।
start (শুরু থেকে সারিবদ্ধ) 
1p {
2    text-align: start;
3}
  • start টেক্সটকে প্রারম্ভিক অবস্থানের উপর ভিত্তি করে সমতল করে। বাম থেকে ডানে লেখা ভাষার জন্য এটি বাম সংযোগের মতোই আচরণ করে।
end (শেষ দিকে সারিবদ্ধ) 
1p {
2    text-align: end;
3}
  • end টেক্সটকে সমাপ্তির অবস্থানের উপর ভিত্তি করে সমতল করে। বাম থেকে ডানে লেখা ভাষার জন্য এটি ডান সংযোগের মতোই আচরণ করে।

text-align এর ব্যবহার এবং উদাহরণ

কেন্দ্র সারিবদ্ধতা ব্যবহার করে শিরোনাম
  • কেন্দ্র সংযোগ প্রায়শই ওয়েব পেজ এবং নথির শিরোনামের জন্য ব্যবহৃত হয়। এটি ভাল দেখায় এবং একটি চাক্ষুষভাবে ভারসাম্যपूर्ण ডিজাইন তৈরি করে।
অনুচ্ছেদগুলির জন্য বাম বা ডান সারিবদ্ধতা
  • টেক্সট অনুচ্ছেদগুলি সাধারণত ডিফল্টভাবে বাম সংযোজিত হয়, কিন্তু নির্দিষ্ট ডিজাইনের জন্য ডান সংযোগ বা কেন্দ্র সংযোগ ব্যবহার করা হতে পারে।
পাঠ্য সমানভাবে সঠিক করা
  • justify দিয়ে যুক্ত করা হলে, প্রতিটি লাইনের টেক্সট বাম এবং ডান প্রান্তের সাথে সমানভাবে সংগতি পায়। এটি সংবাদপত্র বা ম্যাগাজিন শৈলীর বিন্যাসের জন্য উপকারী।

সারসংক্ষেপ

  • text-align হল একটি CSS বৈশিষ্ট্য যা টেক্সট বা ইনলাইন উপাদানগুলিকে অনুভূমিকভাবে সমতল করতে ব্যবহৃত হয়।
  • এটি বাম সংযোগ, ডান সংযোগ, কেন্দ্র সংযোগ এবং সংহতির মতো বিভিন্ন বিন্যাস পরিচালনা করতে পারে।
  • বিন্যাস এবং ডিজাইনের লক্ষ্য অনুসারে সঠিক সংযোগ নির্বাচন করা একটি পাঠযোগ্য এবং সুন্দর ডিজাইন অর্জনের জন্য গুরুত্বপূর্ণ।

text-align এর সাহায্যে আপনার ডিজাইনের অংশ হিসেবে টেক্সট সংযোগ কার্যকরভাবে ব্যবহার করুন।

text-decoration প্রপার্টি 

 1/* Text decoration examples */
 2.text-decoration-underline {
 3    text-decoration: underline;
 4}
 5
 6.text-decoration-overline {
 7    text-decoration: overline;
 8}
 9
10.text-decoration-line-through {
11    text-decoration: line-through;
12}
13
14.text-decoration-custom-underline {
15    text-decoration: underline;
16    text-decoration-color: red;
17    text-decoration-style: wavy;
18    text-decoration-thickness: 2px;
19}

text-decoration একটি CSS প্রপার্টি যা টেক্সটে নিচে দাগ, ওপরের দাগ, কেটে যাওয়া দাগ অথবা কাস্টম স্টাইল করা রেখা প্রয়োগ করতে ব্যবহৃত হয়। এই প্রপার্টি ব্যবহার করে, আপনি টেক্সট স্টাইলিং আরও সাজানো বা দৃষ্টিনন্দন করতে পারেন।

ব্যাখ্যা:

  • text-decoration-underline ক্লাসটি টেক্সট-এর নিচে একটি দাগ প্রদর্শন করে।
  • text-decoration-overline ক্লাসটি টেক্সট-এর ওপর একটি দাগ আঁকে।
  • text-decoration-line-through ক্লাসটি টেক্সট-এর উপর একটি কাটার দাগ প্রয়োগ করে।
  • text-decoration-custom-underline ক্লাসটি আন্ডারলাইন-এর রঙ, স্টাইল এবং পুরুত্ব কাস্টমাইজ করার একটি উদাহরণ।

text-decoration এর মূল মানসমূহ

none 
1p {
2    text-decoration: none;
3}
  • none নির্দিষ্ট করলে টেক্সট থেকে সমস্ত আলংকারিক উপাদান সরিয়ে দেওয়া হবে। যখন আপনি লিঙ্ক থেকে আন্ডারলাইন সরাতে চান, উদাহরণস্বরূপ।
underline 
1p {
2    text-decoration: underline;
3}
  • underline নির্দিষ্ট করলে টেক্সট-এর নিচে একটি দাগ আঁকা হবে। এটি লিঙ্ক বা যে অংশগুলি আপনি জোর দিতে চান তার জন্য ব্যবহার করা যেতে পারে।
overline 
1p {
2    text-decoration: overline;
3}
  • overline নির্দিষ্ট করলে টেক্সট-এর ওপর একটি দাগ আঁকা হবে। অবয়ব পরিবর্তন বা বিশেষ অলংকরণের জন্য ব্যবহৃত হয়।
line-through 
1p {
2    text-decoration: line-through;
3}
  • line-through নির্দিষ্ট করলে টেক্সট-এর উপর একটি কাটার দাগ আঁকা হবে। এটি সংশোধন প্রদর্শন করার জন্য ব্যবহৃত হয়।
blink（点滅）
  • blink একটি মান যা টেক্সটকে ঝলমল করতে বাধ্য করে, তবে এটি বর্তমানে খুব একটা ব্যবহৃত হয় না কারণ এটি অধিকাংশ ব্রাউজার দ্বারা আর সমর্থিত নয়।

text-decoration এর উন্নত সেটিংস

text-decoration নিম্নলিখিত বিশদের জন্য অনুমতি প্রদান করে:

text-decoration-color 
1p {
2    text-decoration: underline;
3    text-decoration-color: red;
4}
  • text-decoration-color প্রপার্টি আপনাকে আন্ডারলাইন অথবা স্ট্রাইকথ্রু-এর রঙ নির্দিষ্ট করতে দেয়। ডিফল্টভাবে এটি টেক্সট রঙের সাথে মিলে যায়, তবে আপনি একটি ভিজ্যুয়াল অ্যাকসেন্ট যোগ করার জন্য একটি ভিন্ন রঙ বেছে নিতে পারেন।
text-decoration-style 
 1p.dshed {
 2    text-decoration: underline;
 3    text-decoration-style: solid;
 4}
 5p.double {
 6    text-decoration: underline;
 7    text-decoration-style: double;
 8}
 9p.dotted {
10    text-decoration: underline;
11    text-decoration-style: dotted;
12}
13p.dashed {
14    text-decoration: underline;
15    text-decoration-style: dashed;
16}
17p.wavy {
18    text-decoration: underline;
19    text-decoration-style: wavy;
20}
  • text-decoration-style প্রপার্টি আপনাকে অলংকারিক রেখার স্টাইল নির্দিষ্ট করতে দেয়। মানের মধ্যে নিম্নলিখিতগুলি অন্তর্ভুক্ত:।
    • solid (ডিফল্ট, কঠিন লাইন)
    • double (দ্বৈত লাইন)
    • ডটেড (ডটযুক্ত লাইন)
    • ড্যাশড (বিন্দুঃক্ষিপ্ত লাইন)
    • ওয়েভি (তরঙ্গিত লাইন)
**text-decoration-thickness 
1p {
2    text-decoration: underline;
3    text-decoration-thickness: 2px;
4}
  • text-decoration-thickness প্রপার্টি আপনাকে অলংকারিক রেখার পুরুত্ব নির্দিষ্ট করতে দেয়। উদাহরণস্বরূপ, আপনি এটি 2px বা 0.1em এর মতো ইউনিট ব্যবহার করে সামঞ্জস্য করতে পারেন।

সারাংশ:

  • text-decoration একটি প্রপার্টি যা টেক্সটে অলংকারিক রেখা যেমন আন্ডারলাইন বা স্ট্রাইকথ্রু যোগ করার জন্য ব্যবহৃত হয়।
  • text-decoration-color, text-decoration-style, এবং text-decoration-thickness এর সাহায্যে আরও বিস্তারিত কাস্টমাইজেশন সম্ভব।
  • এটি প্রায়ই লিঙ্ক বা গুরুত্বপূর্ণ টেক্সটকে জোর দিতে বা একটি ডিজাইন উপাদান হিসাবে ব্যবহৃত হয়।

text-decoration ব্যবহার করে, আপনি টেক্সটে সূক্ষ্ম অ্যাকসেন্ট বা জোর যোগ করতে পারেন।

text-transform প্রপার্টি 

 1/* Text transform examples */
 2.text-transform-none {
 3    text-transform: none;
 4}
 5
 6.text-transform-capitalize {
 7    text-transform: capitalize;
 8}
 9
10.text-transform-uppercase {
11    text-transform: uppercase;
12}
13
14.text-transform-lowercase {
15    text-transform: lowercase;
16}

text-transform একটি CSS প্রপার্টি যা টেক্সটের বড় হাতের বা ছোট হাতের রূপান্তর করতে ব্যবহৃত হয়। এই প্রপার্টি আপনাকে HTML-এ নির্দিষ্ট টেক্সটের প্রদর্শন ফরম্যাট নিয়ন্ত্রণ করতে দেয়, স্বয়ংক্রিয়ভাবে ব্যবহারকারীর প্রবেশ করানো বা বিদ্যমান টেক্সটের কেস পরিবর্তন করে।

ব্যাখ্যা:

  • text-transform-none ক্লাসটি মূল টেক্সট পরিবর্তন না করেই তা প্রদর্শন করে।
  • text-transform-capitalize ক্লাস প্রতিটি শব্দের প্রথম অক্ষরকে বড় হাতের অক্ষরে পরিবর্তন করে।
  • text-transform-uppercase ক্লাস সম্পূর্ণ টেক্সটকে বড় হাতের অক্ষরে পরিবর্তন করে।
  • text-transform-lowercase ক্লাস সম্পূর্ণ টেক্সটকে ছোট হাতের অক্ষরে পরিবর্তন করে।

text-transform এর প্রধান মান

none 
1p {
2    text-transform: none;
3}
  • none নির্ধারণ করলে টেক্সট অপরিবর্তিত থাকবে।
capitalize 
1/* "this is a sentence" -> "This Is A Sentence" */
2p {
3    text-transform: capitalize;
4}
  • capitalize নির্ধারণ করলে প্রতিটি শব্দের প্রথম অক্ষর বড় হাতের অক্ষরে পরিণত হয়। শব্দের সীমানা নির্ধারণ করা হয় স্পেস বা বিরামচিহ্ন দ্বারা।
uppercase 
1/* "hello world" -> "HELLO WORLD" */
2p {
3    text-transform: uppercase;
4}
  • uppercase নির্ধারণ করলে সম্পূর্ণ টেক্সট বড় হাতের অক্ষর হয়ে যায়।
lowercase 
1/* "HELLO WORLD" -> "hello world" */
2p {
3    text-transform: lowercase;
4}
  • lowercase নির্ধারণ করলে সম্পূর্ণ টেক্সট ছোট হাতের অক্ষরে পরিণত হয়।
full-width
  • full-width নির্ধারণ করলে টেক্সট পুরো চওড়া অক্ষরগুলিতে পরিণত হয়। এটি সাধারণত কানজি বা কানা ব্যবহারের সময় একটি বিশেষ শৈলী হিসাবে ব্যবহৃত হয়, তবে কয়েকটি ব্রাউজারই এটি সমর্থন করে।

সারাংশ:

  • text-transform একটি সুবিধাজনক CSS প্রপার্টি যা টেক্সটের কেস পরিবর্তনের জন্য ব্যবহৃত হয়।
  • এটি প্রায়ই হেডিং, নেভিগেশন মেনু এবং ফর্ম টেক্সটের জন্য ভিজ্যুয়াল সামঞ্জস্য তৈরি করতে ব্যবহৃত হয়।
  • যখন আপনি ব্যবহারকারীর ইনপুটকে উপেক্ষা করে নির্দিষ্ট শৈলীতে টেক্সট প্রদর্শন করতে চান, তখন এটি খুবই উপযোগী।

এই প্রপার্টি ব্যবহার করে আপনি ভিজ্যুয়াল সামঞ্জস্য বজায় রেখে সহজেই টেক্সট পরিচালনা করতে পারেন।

আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।

YouTube Video

ফন্ট সম্পর্কিত CSS প্রপার্টিটেক্সট ব্যবধান সম্পর্কিত CSS বৈশিষ্ট্যগুলি