CSS में विशेष वर्ण और फ़ंक्शन
यह लेख 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 & 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<div id="my.id">Dot Example</div>
39<div id="my[id]">Bracket Example</div>
40<div id="my#id">Sharp Example</div>
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<div class="123abc">Numeric Class</div>
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<div class="content-unicode">Copyright</div>
88<div class="content-backslash">This is a backslash example</div>
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<div class="user@name">User</div>
114<div id="section$">Section</div>
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<p class="calc-width">
139 <span>First Text</span>
140</p>
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<p class="rgb">
166 <span>First Text</span>
167</p>
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<p class="hsl">
195 <span>First Text</span>
196</p>
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<div class="bg-image">
218 <span>First Text</span>
219</div>
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<p class="main-color">
247 <span>First Text</span>
248</p>
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<a href="#section1" title="Section 1">Click here</a>
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<div class="min">min(100%, 500px)</div>
299<div class="max">max(100%, 500px)</div>
300<div class="clamp">clamp(100px, 30%, 400px)</div>
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<div class="linear-gradient">linear-gradient</div>
341<div class="radial-gradient">radial-gradient</div>
342<div class="conic-gradient">radial-gradient</div>
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को यूनिकोडU+0031के रूप में दर्शाया गया है और इसे बैकस्लैश और स्पेस के साथ\31के रूप में एस्केप किया गया है।
यूनिकोड वर्णों को एस्केप करना
1/* Example: Escaping Unicode characters */
2.content-unicode::before {
3 content: "\00A9"; /* copyright symbol */
4 color: blue;
5}- यूनिकोड वर्णों को एस्केप करते समय, बैकस्लैश के बाद 6-अंकीय हेक्साडेसिमल संख्या निर्दिष्ट करें।
- यह कोड दिखाता है कि 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()लाल, हरे, और नीले रंगों के लिए तीन मान निर्दिष्ट करता है (0 से 255 के बीच), जबकि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}- CSS शैलियों में HTML गुण मानों का उपयोग करने के लिए
attr()फ़ंक्शन का उपयोग किया जाता है। मुख्य रूप से, यह तत्वों के गुण मानों को डायनेमिक रूप से प्रदर्शित करने के लिए छद्म-तत्वों की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}- इन फंक्शन्स का उपयोग ग्रेडिएंट्स बनाने के लिए किया जाता है।
linear-gradientएक रेखीय ग्रेडिएंट बनाता है।radial-gradientएक रेडियल ग्रेडिएंट बनाता है। आप एक अंडाकार ग्रेडिएंट बनाने के लिएcircleके बजायeclipseनिर्दिष्ट कर सकते हैं।conic-gradientएक ऐसा ग्रेडिएंट बनाता है जो सर्कल के केंद्र के चारों ओर कोणों के आधार पर रंग बदलता है।
सारांश
CSS फ़ंक्शन्स लचीले लेआउट्स और स्टाइल्स सेट करने के लिए अत्यंत उपयोगी होते हैं। इनका प्रभावी रूप से उपयोग करके, आप अधिक गतिशील और उत्तरदायी डिज़ाइन प्राप्त कर सकते हैं।
आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।