Mga Espesyal na Karakter at Mga Pag-andar sa CSS
Ipinaliliwanag ng artikulong ito ang mga espesyal na karakter at mga function sa CSS.
Maaari kang matuto tungkol sa mga espesyal na karakter at mga pag-andar tulad ng calc() at var() sa CSS.
YouTube Video
HTML para sa Preview
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>Mga Espesyal na Karakter at Escaping sa CSS
Ang mga escape character sa CSS ay mga teknika para sa ligtas na paghawak ng ilang karakter. Sa pamamagitan ng pag-escape ng mga espesyal na simbolo o karakter na may sintaktikong kahulugan, maaari mong ligtas na gamitin ang mga ito sa mga selector o string.
Pangkalahatang-ideya ng CSS Escape Characters
Ang CSS escaping ay isang mekanismo para i-escape ang ilang karakter o unicode upang magamit ang mga ito sa mga selector alinsunod sa mga tiyak na sintaktikong panuntunan. Halimbawa, kapag ang mga HTML element ID o pangalan ng klase ay naglalaman ng mga espesyal na simbolo (#, @, . atbp.), o kapag ang mga pangalan ng klase o ID ay nagsisimula sa mga numero, kapaki-pakinabang ang escape characters.
Pangunahing ginagamit ang escaping para sa mga sumusunod na layunin:
- Paggamit ng mga espesyal na karakter bilang mga selector
- Pangangasiwa ng mga ID o pangalan ng klase na nagsisimula sa mga numero
- Pag-escape ng mga espesyal na simbolo o mga non-ASCII na karakter
Pangunahing Sintaks ng Escape
Ang mga escape character ay isinusulat sa CSS gamit ang backslash (\). Sa pamamagitan ng paglalagay ng backslash bago ang mga karakter na i-e-escape, itinuturing ang mga ito bilang normal na mga karakter.
Pag-escape ng Mga Espesyal na Karakter
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}- Tulad ng nasa halimbawang ito, kinakailangan ang pag-escape kapag gumagamit ng mga espesyal na karakter sa loob ng mga CSS selector.
- Ang
#,.,[, at]ay mga espesyal na karakter sa CSS. Kung ang mga karakter na ito ay kasama sa mga ID, kinakailangan ang pag-escape.
Pag-escape ng mga ID o Mga Pangalan ng Klase na Nagsisimula sa Mga Numero
1<div class="123abc">Numeric Class</div>1.\31 23abc {
2 font-weight: bold;
3 color: blue;
4}- Sa CSS, kapag ang isang ID o pangalan ng klase ay nagsimula sa isang numero, hindi wasto ang direktang pagsulat nito. Sa mga ganitong kaso, gumamit ng pag-escape.
- Dito, ini-escape natin ang nauunang
1sa123abc. Ang1ay kinakatawan bilang UnicodeU+0031at ini-escape gamit ang backslash at espasyo bilang\31.
Pag-escape ng mga Unicode na Karakter
1/* Example: Escaping Unicode characters */
2.content-unicode::before {
3 content: "\00A9"; /* copyright symbol */
4 color: blue;
5}- Kapag nag-escape ng Unicode na mga karakter, tukuyin ang isang 6-digit na hexadecimal na numero pagkatapos ng backslash.
- Ipinapakita ng code na ito kung paano ipakita ang © (simbolo ng copyright) sa CSS.
Pag-escape Sa Loob ng Mga String
1.content-backslash::after {
2 content: " : \\";
3 color: blue;
4}- Kapag gumagamit ng backslash sa mga string sa loob ng CSS (tulad ng property na
content), kailangang doblehin ang backslash. - Sa halimbawang ito, isinusulat ang
\\upang ipakita ang backslash sa string.
Praktikal na Halimbawa: Pag-istilo sa mga Elemento ng HTML na may Espesyal na Karakter
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}- Dito, ini-escape natin ang mga elemento na may espesyal na karakter na
@at$.
Buod
Napakakapaki-pakinabang ng mga escape character sa CSS para sa tamang paghawak ng mga selector at string sa mga espesyal na kaso. Ang pag-unawa kung kailan kailangan ang pag-escape ay nakatutulong upang maiwasan ang mga pagkakamali kapag ina-style ang mga komplikadong HTML element. Lalo na kapag ang pakikitungo ay sa mga pangalan ng klase o ID na nagsisimula sa mga espesyal na karakter o numero, mahalaga ang pag-escape gamit ang backslash.
Mga Function sa CSS
Sa CSS, maaari kang gumamit ng mga function para dinamikong tukuyin o kalkulahin ang mga estilo. Dito, ipinakikilala namin ang ilang tipikal na mga function sa 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}- Ang function na
calc()ay ginagamit para dinamikong kalkulahin ang mga halaga tulad ng lapad at taas ng mga elemento. Magagamit mo ang mga operator na+,-,*,/upang pagsamahin ang mga relatibong halaga (%) at absolutong halaga (px) sa mga layout.
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}- Ang mga function na
rgb()atrgba()ay ginagamit upang tukuyin ang mga kulay. Angrgb()ay tumutukoy ng tatlong halaga para sa pula, berde, at asul (mula 0 hanggang 255), habang angrgba()ay nagsasama rin ng alpha value para sa transparency.
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}- Ang
hsl()athsla()ay gumagamit ng hue, saturation, at lightness upang tukuyin ang mga kulay. Maaaring tukuyin nghsla()ang transparency.
url()
1div.bg-image {
2 background-image: url('image.jpg');
3}- Ginagamit ang function na
url()upang tukuyin ang mga landas patungo sa mga background image o iba pang mapagkukunan.
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}- Ang function na
var()ay ginagamit para magtrabaho gamit ang mga custom na property (mga CSS variable). Maaari kang magtakda ng mga CSS variable at gamitin ang mga ito sa ibang mga property.
attr()
1/* Example of using the attr() function */
2a::after {
3 content: " (" attr(title) ")";
4}- Ang function na
attr()ay ginagamit upang magamit ang mga halaga ng HTML attribute sa mga estilo ng CSS. Pangunahing ginagamit ito sa loob ng property nacontentng pseudo-elements upang dinamikong ipakita ang mga halaga ng attribute ng mga elemento. Gayunpaman, kinakailangan ng pag-iingat dahil limitado ang suporta ng browser.
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}Ang mga function na ito ay ginagamit upang dinamikong tukuyin ang mga halaga.
- Ang
min()ay pumipili ng pinakamaliit na halaga mula sa isang set ng mga halaga. - Ang
max()ay pumipili ng pinakamalaking halaga mula sa isang set ng mga halaga. - Inaayos ng
clamp()ang isang halaga sa loob ng saklaw sa pagitan ng minimum, inirerekomenda, at maximum na halaga.
repeat()
1/* Set three columns to be evenly spaced */
2grid-template-columns: repeat(3, 1fr);Ginagamit ang function na repeat() kasama ng grid-template-columns at grid-template-rows upang lumikha ng mga umuulit na pattern.
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}- Ang mga function na ito ay ginagamit upang lumikha ng mga gradients.
- Ang
linear-gradientay lumilikha ng isang linear gradient. - Ang
radial-gradientay lumilikha ng isang radial gradient. Maaari mong gamitin angeclipsesa halip nacircleupang lumikha ng isang elliptical gradient. - Ang
conic-gradientay lumilikha ng isang gradient na nagbabago ng kulay batay sa mga anggulo sa paligid ng gitna ng bilog.
- Ang
Buod
Ang mga CSS function ay lubos na kapaki-pakinabang para sa pagsasaayos ng mga flexible na layout at estilo. Sa pamamagitan ng epektibong paggamit ng mga ito, maaari kang makalikha ng mas marami pang dinamikong at tumutugon na mga disenyo.
Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.