CSS-এ বিশেষ অক্ষর এবং ফাংশনগুলি

Articles

এই নিবন্ধটি CSS-এ বিশেষ অক্ষর এবং ফাংশন ব্যাখ্যা করে।

আপনি CSS-এ calc() এবং var() এর মতো বিশেষ অক্ষর এবং ফাংশন সম্পর্কে জানতে পারবেন।

YouTube Video

প্রিভিউর জন্য HTML

css-escape-and-function.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>CSS Pseudo Class/Element</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-escape-and-function.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Special Characters &amp; Functions</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header><h2>CSS Special Characters</h2></header>
 19        <article>
 20            <h3>CSS Special Characters</h3>
 21            <section>
 22                <header><h4>CSS</h4></header>
 23<pre class="sample">
 24#my\#id {
 25    color: red;
 26}
 27
 28#my\.id {
 29    color: red;
 30}
 31
 32#my\[id\] {
 33    color: red;
 34}
 35</pre>
 36                <header><h4>HTML</h4></header>
 37<pre>
 38&lt;div id="my.id"&gt;Dot Example&lt;/div&gt;
 39&lt;div id="my[id]"&gt;Bracket Example&lt;/div&gt;
 40&lt;div id="my#id"&gt;Sharp Example&lt;/div&gt;
 41</pre>
 42                <header><h4>HTML+CSS</h4></header>
 43                <section class="sample-view">
 44                    <div id="my#id">Sharp Example</div>
 45                    <div id="my.id">Dot Example</div>
 46                    <div id="my[id]">Bracket Example</div>
 47                </section>
 48            </section>
 49        </article>
 50        <article>
 51            <h3>CSS Special Characters</h3>
 52            <section>
 53                <header><h4>CSS</h4></header>
 54<pre class="sample">
 55.\31 23abc {
 56    font-weight: bold;
 57    color: blue;
 58}
 59</pre>
 60                <header><h4>HTML</h4></header>
 61<pre>
 62&lt;div class="123abc"&gt;Numeric Class&lt;/div&gt;
 63</pre>
 64                <header><h4>HTML+CSS</h4></header>
 65                <section class="sample-view">
 66                    <div class="123abc">Numeric Class</div>
 67                </section>
 68            </section>
 69        </article>
 70        <article>
 71            <h3>CSS Special Characters</h3>
 72            <section>
 73                <header><h4>CSS</h4></header>
 74<pre class="sample">
 75.content-unicode::before {
 76    content: "\00A9"; /* copyright mark */
 77    color: blue;
 78}
 79
 80.content-backslash::after {
 81    content: " : \\";
 82    color: blue;
 83}
 84</pre>
 85                <header><h4>HTML</h4></header>
 86<pre>
 87&lt;div class="content-unicode"&gt;Copyright&lt;/div&gt;
 88&lt;div class="content-backslash"&gt;This is a backslash example&lt;/div&gt;
 89</pre>
 90                <header><h4>HTML+CSS</h4></header>
 91                <section class="sample-view">
 92                    <div class="content-unicode">Copyright</div>
 93                    <div class="content-backslash">This is a backslash example</div>
 94                </section>
 95            </section>
 96        </article>
 97        <article>
 98            <h3>CSS Special Characters</h3>
 99            <section>
100                <header><h4>CSS</h4></header>
101<pre class="sample">
102.user\@name {
103  color: green;
104}
105
106#section\$ {
107  font-size: 24px;
108  color: blue;
109}
110</pre>
111                <header><h4>HTML</h4></header>
112<pre>
113&lt;div class=&quot;user@name&quot;&gt;User&lt;/div&gt;
114&lt;div id=&quot;section$&quot;&gt;Section&lt;/div&gt;
115</pre>
116                <header><h4>HTML+CSS</h4></header>
117                <section class="sample-view">
118                    <div class="user@name">User</div>
119                    <div id="section$">Section</div>
120                </section>
121            </section>
122        </article>
123    </main>
124
125    <main>
126        <header><h2>CSS Functions</h2></header>
127        <article>
128            <h3>calc()</h3>
129            <section>
130                <header><h4>CSS</h4></header>
131<pre class="sample">
132p.calc-width {
133    width: calc(50% - 10px);
134}
135</pre>
136                <header><h4>HTML</h4></header>
137<pre>
138&lt;p class="calc-width"&gt;
139    &lt;span&gt;First Text&lt;/span&gt;
140&lt;/p&gt;
141</pre>
142                <header><h4>HTML+CSS</h4></header>
143                <section class="sample-view">
144                    <p class="calc-width">
145                        <span>First Text</span>
146                    </p>
147                </section>
148            </section>
149        </article>
150        <article>
151            <h3>rgb() / rgba()</h3>
152            <section>
153                <header><h4>CSS</h4></header>
154<pre class="sample">
155p.rgb {
156    background-color: rgb(255, 0, 0);
157}
158
159p.rgb span {
160    background-color: rgba(0, 255, 0, 0.5);
161}
162</pre>
163                <header><h4>HTML</h4></header>
164<pre>
165&lt;p class="rgb"&gt;
166    &lt;span&gt;First Text&lt;/span&gt;
167&lt;/p&gt;
168</pre>
169                <header><h4>HTML+CSS</h4></header>
170                <section class="sample-view">
171                    <p class="rgb">
172                        <span>First Text</span>
173                    </p>
174                </section>
175            </section>
176        </article>
177        <article>
178            <h3>hsl() / hsla()</h3>
179            <section>
180                <header><h4>CSS</h4></header>
181<pre class="sample">
182p.hsl {
183    /* Specify hue, saturation, and lightness */
184    background-color: hsl(240, 25%, 50%);
185}
186
187p.hsl span {
188    /* Specification with transparency */
189    background-color: hsla(120, 100%, 50%, 0.5);
190}
191</pre>
192                <header><h4>HTML</h4></header>
193<pre>
194&lt;p class="hsl"&gt;
195    &lt;span&gt;First Text&lt;/span&gt;
196&lt;/p&gt;
197</pre>
198                <header><h4>HTML+CSS</h4></header>
199                <section class="sample-view">
200                    <p class="hsl">
201                        <span>First Text</span>
202                    </p>
203                </section>
204            </section>
205        </article>
206        <article>
207            <h3>url()</h3>
208            <section>
209                <header><h4>CSS</h4></header>
210<pre class="sample">
211div.bg-image {
212    background-image: url('image.jpg');
213}
214</pre>
215                <header><h4>HTML</h4></header>
216<pre>
217&lt;div class="bg-image"&gt;
218    &lt;span&gt;First Text&lt;/span&gt;
219&lt;/div&gt;
220</pre>
221                <header><h4>HTML+CSS</h4></header>
222                <section class="sample-view">
223                    <div class="bg-image">
224                        <span>First Text</span>
225                    </div>
226                </section>
227            </section>
228        </article>
229        <article>
230            <h3>var()</h3>
231            <section>
232                <header><h4>CSS</h4></header>
233<pre class="sample">
234/* Definition of custom properties */
235:root {
236    --main-color: #3498db;
237}
238
239/* Use of custom properties */
240p.main-color {
241    color: var(--main-color);
242}
243</pre>
244                <header><h4>HTML</h4></header>
245<pre>
246&lt;p class="main-color"&gt;
247    &lt;span&gt;First Text&lt;/span&gt;
248&lt;/p&gt;
249</pre>
250                <header><h4>HTML+CSS</h4></header>
251                <section class="sample-view">
252                    <p class="main-color">
253                        <span>First Text</span>
254                    </p>
255                </section>
256            </section>
257        </article>
258        <article>
259            <h3>attr()</h3>
260            <section>
261                <header><h4>CSS</h4></header>
262<pre class="sample">
263/* Example of using the attr() function */
264a::after {
265    content: " (" attr(title) ")";
266}
267</pre>
268                <header><h4>HTML</h4></header>
269<pre>
270&lt;a href="#section1" title="Section 1"&gt;Click here&lt;/a&gt;
271</pre>
272                <header><h4>HTML+CSS</h4></header>
273                <section class="sample-view">
274                    <a href="#section1" title="Section 1">Click here</a>
275                </section>
276            </section>
277        </article>
278        <article>
279            <h3>min() / max() / clamp()</h3>
280            <section>
281                <header><h4>CSS</h4></header>
282<pre class="sample">
283div.min {
284    /* Use the smaller value between 100% and 500px as the width */
285    width: min(100%, 500px);
286}
287div.max {
288    /* Use the larger value between 100% and 500px as the width */
289    width: max(100%, 500px);
290}
291div.clamp {
292    /* Adjust to fit within the range of 300px to 600px */
293    width: clamp(100px, 30%, 400px);
294}
295</pre>
296                <header><h4>HTML</h4></header>
297<pre>
298&lt;div class="min"&gt;min(100%, 500px)&lt;/div&gt;
299&lt;div class="max"&gt;max(100%, 500px)&lt;/div&gt;
300&lt;div class="clamp"&gt;clamp(100px, 30%, 400px)&lt;/div&gt;
301</pre>
302                <header><h4>HTML+CSS</h4></header>
303                <section class="sample-view">
304                    <div class="min">min(100%, 500px)</div>
305                    <div class="max">max(100%, 500px)</div>
306                    <div class="clamp">clamp(100px, 30%, 400px)</div>
307                </section>
308            </section>
309        </article>
310        <article>
311            <h3>repeat()</h3>
312            <section>
313                <header><h4>CSS</h4></header>
314<pre class="sample">
315/* Set three columns to be evenly spaced */
316grid-template-columns: repeat(3, 1fr);
317</pre>
318            </section>
319        </article>
320        <article>
321            <h3>linear-gradient() / radial-gradient() / conic-gradient()</h3>
322            <section>
323                <header><h4>CSS</h4></header>
324<pre class="sample">
325div.linear-gradient {
326    /* Linear gradient */
327    background: linear-gradient(to right, red, blue);
328}
329div.radial-gradient {
330    /* Radial gradient */
331    background: radial-gradient(circle, red, blue);
332}
333div.conic-gradient {
334    /* Conic gradient */
335    background: conic-gradient(from 0deg, red, yellow, blue, red);
336}
337</pre>
338                <header><h4>HTML</h4></header>
339<pre>
340&lt;div class="linear-gradient"&gt;linear-gradient&lt;/div&gt;
341&lt;div class="radial-gradient"&gt;radial-gradient&lt;/div&gt;
342&lt;div class="conic-gradient"&gt;radial-gradient&lt;/div&gt;
343</pre>
344                <header><h4>HTML+CSS</h4></header>
345                <section class="sample-view">
346                    <div class="linear-gradient">linear-gradient</div>
347                    <div class="radial-gradient">radial-gradient</div>
348                    <div class="conic-gradient">conic-gradient</div>
349                </section>
350            </section>
351        </article>
352    </main>
353</body>
354</html>

CSS-এ বিশেষ অক্ষর এবং এস্কেপিং

CSS এসকেপ ক্যারেক্টার হল নির্দিষ্ট অক্ষর নিরাপদে পরিচালনার জন্য কৌশল। বিশেষ প্রতীক বা সিনট্যাক্টিক অর্থ সম্পন্ন অক্ষরগুলো এসকেপ করার মাধ্যমে সেগুলো নিরাপদে সিলেক্টর বা স্ট্রিংয়ের মধ্যে ব্যবহার করা সম্ভব।

CSS এস্কেপ চরিত্রগুলির ওভারভিউ

CSS এসকেপিং একটি প্রক্রিয়া যা নির্দিষ্ট অক্ষর বা ইউনিকোডকে এসকেপ করে যাতে সেগুলো নির্দিষ্ট সিনট্যাকটিক নিয়ম মেনে সিলেক্টরে ব্যবহার করা যায়। উদাহরণস্বরূপ, যখন HTML এলিমেন্টের আইডি বা ক্লাস নামগুলোতে বিশেষ প্রতীক (#, @, . ইত্যাদি) থাকে, অথবা সংখ্যা দিয়ে শুরু হওয়া ক্লাস নাম বা আইডির ক্ষেত্রে, এসকেপ ক্যারেক্টার খুবই কার্যকর।

এস্কেপিং মূলত নিম্নলিখিত উদ্দেশ্যে ব্যবহৃত হয়:

বিশেষ অক্ষরগুলোকে সিলেক্টর হিসাবে ব্যবহার করা
সংখ্যা দিয়ে শুরু হয় এমন আইডি বা শ্রেণী নাম পরিচালনা করা
বিশেষ প্রতীক বা নন-ASCII অক্ষরগুলি এস্কেপ করা

প্রাথমিক এস্কেপ সিনট্যাক্স

CSS-এ এসকেপ ক্যারেক্টার ব্যাকস্ল্যাশ (\) ব্যবহার করে লেখা হয়। এসকেপ করতে প্রয়োজনীয় অক্ষরের আগে ব্যাকস্ল্যাশ স্থাপন করে, সেগুলোকে সাধারণ অক্ষর হিসেবে ব্যাখ্যা করা হয়।

বিশেষ অক্ষরগুলি এস্কেপ করা

1<div id="my#id">Sharp Example</div>
2<div id="my.id">Dot Example</div>
3<div id="my[id]">Bracket Example</div>

 1#my\#id {
 2    color: red;
 3}
 4
 5#my\.id {
 6    color: red;
 7}
 8
 9#my\[id\] {
10    color: red;
11}

এই উদাহরণের মতো, CSS সিলেক্টরের মধ্যে বিশেষ অক্ষর ব্যবহারের সময় এসকেপ করা প্রয়োজন।
#, ., [, এবং ] হলো CSS-এর বিশেষ অক্ষর। যদি এই অক্ষরগুলো আইডির মধ্যে থাকে, তাহলে এসকেপ করাটা প্রয়োজনীয়।

সংখ্যা দিয়ে শুরু হওয়া আইডি বা শ্রেণী নামগুলি এস্কেপ করা

1<div class="123abc">Numeric Class</div>

1.\31 23abc {
2    font-weight: bold;
3    color: blue;
4}

CSS-এ, যদি কোনো আইডি বা ক্লাস নাম কোনো সংখ্যা দিয়ে শুরু হয়, তবে তা সরাসরি লেখা অবৈধ। এ ধরনের ক্ষেত্রে এসকেপিং ব্যবহার করুন।
এখানে, আমরা 123abc-এ সামনের 1 অক্ষরটি এসকেপ করছি। 1 কে Unicode U+0031 হিসাবে উপস্থাপন করা হয় এবং ব্যাকস্ল্যাশ ও স্পেস দিয়ে \31 হিসাবে এসকেপ করা হয়।

ইউনিকোড অক্ষরগুলি এস্কেপ করা

1/* Example: Escaping Unicode characters */
2.content-unicode::before {
3    content: "\00A9"; /* copyright symbol */
4    color: blue;
5}

ইউনিকোড অক্ষরগুলো এসকেপ করার সময়, ব্যাকস্ল্যাশের পরে ৬ সংখ্যার হেক্সাডেসিমাল নির্দিষ্ট করুন।
এই কোডটি দেখায় কিভাবে CSS-এ © (কপিরাইট প্রতীক) প্রদর্শন করতে হয়।

স্ট্রিংগুলির মধ্যে এস্কেপ করা

1.content-backslash::after {
2    content: " : \\";
3    color: blue;
4}

CSS-এর স্ট্রিংয়ের মধ্যে ব্যাকস্ল্যাশ ব্যবহার করার সময় (যেমন content প্রপার্টিতে), এটি ডাবল ব্যাকস্ল্যাশ হতে হবে।
এই উদাহরণে, স্ট্রিংয়ের মধ্যে ব্যাকস্ল্যাশ প্রদর্শনের জন্য \\ লেখা হয়েছে।

বাস্তব উদাহরণ: HTML উপাদানগুলিকে বিশেষ অক্ষরগুলির সাথে স্টাইলিং করা

1<div class="user@name">User</div>
2<div id="section$">Section</div>

 1/* When the class name contains special characters */
 2.user\@name {
 3    color: green;
 4}
 5
 6/* When the ID contains special characters */
 7#section\$ {
 8    font-size: 24px;
 9    color: blue;
10}

এখানে, আমরা @ এবং $ বিশেষ অক্ষর রয়েছে এমন এলিমেন্টগুলিকে এসকেপ করছি।

সারসংক্ষেপ

বিশেষ ক্ষেত্রে সিলেক্টর এবং স্ট্রিং সঠিকভাবে পরিচালনা করার জন্য CSS এসকেপ ক্যারেক্টার খুবই কার্যকর। কখন এসকেপ করা প্রয়োজন তা বোঝা জটিল HTML এলিমেন্টগুলো স্টাইল করার সময় ত্রুটি এড়াতে সহায়তা করে। বিশেষত ক্লাস নাম বা আইডি যখন বিশেষ অক্ষর বা সংখ্যা দিয়ে শুরু হয়, তখন ব্যাকস্ল্যাশ দিয়ে এসকেপ করাটা অত্যন্ত গুরুত্বপূর্ণ।

CSS-এ ফাংশনগুলি

CSS-এ, আপনি স্টাইলগুলিকে গতিশীলভাবে নির্ধারণ বা গণনা করতে ফাংশন ব্যবহার করতে পারেন। এখানে, আমরা কিছু সাধারণ CSS ফাংশন উপস্থাপন করছি।

`calc()`

1p.calc-width {
2    /* Specify the value obtained by subtracting 10px from 50% width */
3    width: calc(50% - 10px);
4    background-color: #eee;
5}

calc() ফাংশনটি এলিমেন্টগুলোর প্রস্থ এবং উচ্চতার মতো মানগুলো গতিশীলভাবে গণনা করতে ব্যবহৃত হয়। আপনি লেআউটে আপেক্ষিক মান (%) এবং পরম মান (px) একত্রিত করতে +, -, *, / অপারেটর ব্যবহার করতে পারেন।

`rgb()` / `rgba()`

1p.rgb {
2    /* Color specification for red, green, and blue */
3    background-color: rgb(255, 0, 0);
4}
5
6p.rgb span {
7    /* Color specification with transparency */
8    background-color: rgba(0, 255, 0, 0.5);
9}

rgb() এবং rgba() ফাংশনগুলি রঙ নির্ধারণ করতে ব্যবহার করা হয়। rgb() লাল, সবুজ এবং নীলের জন্য তিনটি মান নির্ধারণ করে (০ থেকে ২৫৫ এর মধ্যে), যখন rgba() স্বচ্ছতার জন্য একটি আলফা মানও অন্তর্ভুক্ত করে।

`hsl()` / `hsla()`

1p.hsl {
2    /* Specify hue, saturation, and lightness */
3    background-color: hsl(240, 25%, 50%);
4}
5
6p.hsl span {
7    /* Specification with transparency */
8    background-color: hsla(120, 100%, 50%, 0.5);
9}

hsl() এবং hsla() রঙ নির্ধারণে হিউ, স্যাচুরেশন এবং লাইটনেস ব্যবহার করে। hsla() স্বচ্ছতাও নির্ধারণ করতে পারে।

`url()`

1div.bg-image {
2    background-image: url('image.jpg');
3}

url() ফাংশন ব্যাকগ্রাউন্ড ইমেজ বা অন্যান্য রিসোর্সগুলির পথ নির্ধারণ করতে ব্যবহৃত হয়।

`var()`

1/* Definition of custom properties */
2:root {
3    --main-color: #3498db;
4}
5
6/* Use of custom properties */
7p.main-color {
8    color: var(--main-color);
9}

var() ফাংশন কাস্টম প্রপার্টিজ (CSS ভেরিয়েবল) ব্যবহারে কাজে আসে। আপনি CSS ভেরিয়েবল নির্ধারণ করতে পারেন এবং সেগুলো অন্যান্য প্রপার্টিজে ব্যবহার করতে পারেন।

`attr()`

1/* Example of using the attr() function */
2a::after {
3    content: " (" attr(title) ")";
4}

attr() ফাংশনটি CSS স্টাইলে HTML অ্যাট্রিবিউট মানগুলি ব্যবহার করার জন্য ব্যবহৃত হয়। এটি প্রধানত ছদ্ম-এলিমেন্টের content প্রপার্টির মধ্যে ব্যবহৃত হয় যাতে উপাদানগুলোর অ্যাট্রিবিউট মানগুলি গতিশীলভাবে প্রদর্শন করা যায়। তবে, এটি ব্যবহারের সময় সতর্কতা প্রয়োজন কারণ ব্রাউজারের সমর্থন সীমিত।

`min()` / `max()` / `clamp()`

 1div.min {
 2    /* Use the smaller value between 100% and 500px as the width */
 3    width: min(100%, 500px);
 4    background-color: lightsteelblue;
 5}
 6div.max {
 7    /* Use the larger value between 100% and 500px as the width */
 8    width: max(100%, 500px);
 9    background-color: lightsteelblue;
10}
11div.clamp {
12    /* Adjust to fit within the range of 100px to 400px */
13    width: clamp(100px, 30%, 400px);
14    background-color: lightsteelblue;
15}

এই ফাংশনগুলি ডায়নামিকভাবে মান নির্ধারণ করতে ব্যবহৃত হয়।

min() একটি মান সেট থেকে সর্বনিম্ন মান বেছে নেয়।
max() একটি মান সেট থেকে সর্বোচ্চ মান বেছে নেয়।
clamp() ন্যূনতম, প্রস্তাবিত এবং সর্বাধিক মানের মধ্যে একটি মান সামঞ্জস্য করে।

`repeat()`

1/* Set three columns to be evenly spaced */
2grid-template-columns: repeat(3, 1fr);

repeat() ফাংশন grid-template-columns এবং grid-template-rows এর সাথে ব্যবহার করা হয় পুনরাবৃত্তিমূলক প্যাটার্ন তৈরি করতে।

`linear-gradient()` / `radial-gradient()`

 1div.linear-gradient {
 2    /* Linear gradient */
 3    background: linear-gradient(to right, red, blue);
 4}
 5div.radial-gradient {
 6    /* Radial gradient */
 7    background: radial-gradient(circle, red, blue);
 8}
 9div.conic-gradient {
10    /* Conic gradient */
11    background: conic-gradient(from 0deg, red, yellow, blue, red);
12}

এই ফাংশনগুলি গ্রেডিয়েন্ট তৈরি করতে ব্যবহৃত হয়।
- লিনিয়ার-গ্রেডিয়েন্ট একটি সরল গ্রেডিয়েন্ট তৈরি করে।
- রেডিয়াল-গ্রেডিয়েন্ট একটি রেডিয়াল গ্রেডিয়েন্ট তৈরি করে। একটি উপবৃত্তাকার গ্রেডিয়েন্ট তৈরি করতে আপনি circle এর পরিবর্তে eclipse নির্দিষ্ট করতে পারেন।
- কনিক-গ্রেডিয়েন্ট একটি গ্রেডিয়েন্ট তৈরি করে যা বৃত্তের কেন্দ্রের চারপাশে কোণের উপর ভিত্তি করে রং পরিবর্তন করে।

সারসংক্ষেপ

CSS ফাংশন ফ্লেক্সিবল লেআউট এবং স্টাইল সেট করতে অত্যন্ত কার্যকর। এসব কার্যকরভাবে ব্যবহার করে আপনি আরও গতিশীল ও প্রতিক্রিয়াশীল ডিজাইনের সফলতা অর্জন করতে পারেন।

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

YouTube Video

বৈশিষ্ট্য নির্বাচকদের বিবরণ CSS এ CSS ছদ্ম-ক্লাস এবং ছদ্ম-উপাদান