Karakters Khas dan Fungsi dalam CSS
Artikel ini menerangkan tentang watak khas dan fungsi dalam CSS.
Anda boleh belajar tentang karakters khas dan fungsi seperti calc() dan var() dalam CSS.
YouTube Video
HTML untuk Pratonton
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>Aksara Khas dan Pelarian dalam CSS
Watak escape CSS adalah teknik untuk mengendalikan watak tertentu dengan selamat. Dengan menggunakan watak escape untuk simbol khas atau watak yang mempunyai makna sintaksis, anda boleh menggunakannya dengan selamat dalam pemilih atau rentetan.
Gambaran Keseluruhan Aksara Pelarian CSS
Pelarikan CSS adalah mekanisme untuk melarikan watak tertentu atau unicode supaya ia boleh digunakan dalam pemilih mengikut peraturan sintaks tertentu. Sebagai contoh, apabila ID elemen HTML atau nama kelas mengandungi simbol khas (#, @, . dll.), atau apabila berurusan dengan nama kelas atau ID yang bermula dengan nombor, watak escape sangat berguna.
Pelarian digunakan terutamanya untuk tujuan berikut:
- Menggunakan aksara khas sebagai pengesan
- Mengendalikan ID atau nama kelas yang bermula dengan nombor
- Melarikan simbol khas atau aksara bukan-ASCII
Sintaks Pelarian Asas
Watak escape ditulis dalam CSS menggunakan garis miring terbalik (\). Dengan meletakkan garis miring terbalik sebelum watak yang ingin dilarikan, mereka akan ditafsirkan sebagai watak biasa.
Melarikan Aksara Khas
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}- Seperti dalam contoh ini, pelarikan diperlukan apabila menggunakan watak khas dalam pemilih CSS.
#,.,[, dan]adalah watak khas dalam CSS. Jika watak ini dimasukkan dalam ID, pelarikan adalah perlu.
Melarikan ID atau Nama Kelas yang Bermula dengan Nombor
1<div class="123abc">Numeric Class</div>1.\31 23abc {
2 font-weight: bold;
3 color: blue;
4}- Dalam CSS, jika ID atau nama kelas bermula dengan nombor, menulisnya terus adalah tidak sah. Dalam kes seperti ini, gunakan pelarikan.
- Di sini, kita sedang melarikan
1yang berada di hadapan dalam123abc.1diwakili sebagai UnicodeU+0031dan dilarikan dengan garis miring terbalik dan ruang sebagai\31.
Melarikan Aksara Unicode
1/* Example: Escaping Unicode characters */
2.content-unicode::before {
3 content: "\00A9"; /* copyright symbol */
4 color: blue;
5}- Apabila melarikan watak Unicode, tentukan nombor heksadesimal 6 digit selepas garis miring terbalik.
- Kod ini menunjukkan cara untuk memaparkan © (simbol hak cipta) dalam CSS.
Melarikan Dalam String
1.content-backslash::after {
2 content: " : \\";
3 color: blue;
4}- Apabila menggunakan garis miring terbalik dalam rentetan dalam CSS (seperti sifat
content), ia mesti menggunakan garis miring terbalik dua kali. - Dalam contoh ini,
\\ditulis untuk memaparkan garis miring terbalik dalam rentetan.
Contoh Praktikal: Penggayaan Elemen HTML dengan Aksara Khas
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}- Di sini, kita sedang melarikan elemen yang mengandungi watak khas
@dan$.
Ringkasan
Watak escape CSS sangat berguna untuk mengendalikan pemilih dan rentetan dengan betul dalam kes khas. Memahami bila pelarikan diperlukan membantu mengelakkan ralat semasa menggayakan elemen HTML yang kompleks. Khususnya apabila berurusan dengan nama kelas atau ID yang bermula dengan watak khas atau nombor, pelarikan dengan garis miring terbalik adalah penting.
Fungsi dalam CSS
Dalam CSS, anda boleh menggunakan fungsi untuk menentukan atau mengira gaya secara dinamik. Di sini, kami memperkenalkan beberapa fungsi CSS yang biasa.
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}- Fungsi
calc()digunakan untuk mengira nilai seperti lebar dan tinggi elemen secara dinamik. Anda boleh menggunakan operator+,-,*,/untuk menggabungkan nilai relatif (%) dan nilai mutlak (px) dalam susun atur.
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}- Fungsi
rgb()danrgba()digunakan untuk menentukan warna.rgb()menentukan tiga nilai untuk merah, hijau, dan biru (antara 0 hingga 255), sementarargba()juga termasuk nilai alpha untuk ketelusan.
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()danhsla()menggunakan rona, kepekatan warna, dan kecerahan untuk menentukan warna.hsla()juga boleh menentukan ketelusan.
url()
1div.bg-image {
2 background-image: url('image.jpg');
3}- Fungsi
url()digunakan untuk menentukan laluan ke gambar latar atau sumber lain.
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}- Fungsi
var()digunakan untuk bekerja dengan sifat tersuai (pemboleh ubah CSS). Anda boleh menentukan pemboleh ubah CSS dan menggunakannya dalam sifat lain.
attr()
1/* Example of using the attr() function */
2a::after {
3 content: " (" attr(title) ")";
4}- Fungsi
attr()digunakan untuk menggunakan nilai atribut HTML dalam gaya CSS. Ia digunakan terutamanya dalam sifatcontentpseudo-elemen untuk memaparkan nilai atribut elemen secara dinamik. Walau bagaimanapun, ia memerlukan perhatian kerana sokongan pelayar adalah terhad.
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}Fungsi-fungsi ini digunakan untuk menentukan nilai secara dinamik.
min()memilih nilai terkecil daripada satu set nilai.max()memilih nilai terbesar daripada satu set nilai.clamp()menyesuaikan nilai dalam julat antara nilai minimum, disyorkan, dan maksimum.
repeat()
1/* Set three columns to be evenly spaced */
2grid-template-columns: repeat(3, 1fr);Fungsi repeat() digunakan dengan grid-template-columns dan grid-template-rows untuk mencipta corak berulang.
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}- Fungsi ini digunakan untuk membuat kecerunan.
linear-gradientmencipta kecerunan linear.radial-gradientmencipta kecerunan radial. Anda boleh menentukaneclipsesebagai ganticircleuntuk membuat kecerunan elips.conic-gradientmencipta kecerunan yang menukar warna berdasarkan sudut di sekeliling pusat bulatan.
Ringkasan
Fungsi CSS sangat berguna untuk menetapkan susun atur dan gaya yang fleksibel. Dengan menggunakan fungsi-fungsi ini secara berkesan, anda boleh mencapai reka bentuk yang lebih dinamik dan responsif.
Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.