Articles
Giới thiệu về CSS
Các ký tự đặc biệt và các hàm trong CSS

Các ký tự đặc biệt và các hàm trong CSS

Bài viết này giải thích các ký tự đặc biệt và các chức năng trong CSS.

Bạn có thể tìm hiểu về các ký tự đặc biệt và các hàm như calc() và var() trong CSS.

YouTube Video

HTML để Xem trước

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>

Ký tự đặc biệt và thoát trong CSS

Ký tự thoát trong CSS là các kỹ thuật để xử lý an toàn các ký tự nhất định. Bằng cách thoát các ký hiệu hoặc ký tự đặc biệt có ý nghĩa cú pháp, bạn có thể sử dụng chúng một cách an toàn trong các bộ chọn hoặc chuỗi.

Tổng quan về các ký tự thoát CSS

Thoát trong CSS là một cơ chế để thoát các ký tự nhất định hoặc unicode làm cho chúng có thể được sử dụng trong bộ chọn tuân theo các quy tắc cú pháp cụ thể. Ví dụ như khi các ID của phần tử HTML hoặc tên lớp chứa các ký hiệu đặc biệt (#, @, . v.v.), hoặc khi xử lý tên lớp hoặc ID bắt đầu bằng số, ký tự thoát rất hữu ích.

Thoát được sử dụng chủ yếu cho các mục đích sau:

  • Sử dụng ký tự đặc biệt làm bộ chọn
  • Xử lý ID hoặc tên lớp bắt đầu bằng số
  • Thoát các ký hiệu đặc biệt hoặc ký tự không thuộc ASCII

Cú pháp thoát cơ bản

Ký tự thoát được viết trong CSS bằng dấu gạch chéo ngược (\). Bằng cách đặt một dấu gạch chéo ngược trước các ký tự cần thoát, chúng được hiểu như các ký tự thông thường.

Thoát các ký tự đặc biệt 

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}
  • Như trong ví dụ này, việc thoát là cần thiết khi sử dụng các ký tự đặc biệt trong bộ chọn CSS.
  • #, ., [, và ] là các ký tự đặc biệt trong CSS. Nếu các ký tự này xuất hiện trong ID, việc thoát là cần thiết.

Thoát các ID hoặc tên lớp bắt đầu bằng số 

1<div class="123abc">Numeric Class</div>
1.\31 23abc {
2    font-weight: bold;
3    color: blue;
4}
  • Trong CSS, nếu một ID hoặc tên lớp bắt đầu bằng số, việc viết nó trực tiếp là không hợp lệ. Trong các trường hợp như vậy, hãy sử dụng thoát.
  • Ở đây, chúng tôi thoát số 1 đầu tiên trong 123abc. 1 được biểu diễn dưới dạng Unicode U+0031 và được thoát bằng dấu gạch chéo ngược và dấu cách như \31 .

Thoát các ký tự Unicode 

1/* Example: Escaping Unicode characters */
2.content-unicode::before {
3    content: "\00A9"; /* copyright symbol */
4    color: blue;
5}
  • Khi thoát các ký tự Unicode, hãy chỉ định một số thập lục phân 6 chữ số sau dấu gạch chéo ngược.
  • Mã này cho thấy cách hiển thị biểu tượng © (bản quyền) trong CSS.

Thoát trong chuỗi 

1.content-backslash::after {
2    content: " : \\";
3    color: blue;
4}
  • Khi sử dụng dấu gạch chéo ngược trong chuỗi trong CSS (như thuộc tính content), bạn phải dùng dấu gạch chéo ngược đôi.
  • Trong ví dụ này, \\ được viết để hiển thị một dấu gạch chéo ngược trong chuỗi.

Ví dụ Thực tế: Định kiểu các Phần tử HTML với các Ký tự Đặc biệt 

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}
  • Ở đây, chúng tôi đang thoát các phần tử chứa ký tự đặc biệt @ và $.

Tóm tắt

Ký tự thoát trong CSS rất hữu ích để xử lý đúng cách các bộ chọn và chuỗi trong các trường hợp đặc biệt. Hiểu khi nào cần thoát giúp tránh lỗi khi tạo kiểu cho các phần tử HTML phức tạp. Đặc biệt khi xử lý tên lớp hoặc ID bắt đầu bằng ký tự đặc biệt hoặc số, việc thoát bằng dấu gạch chéo ngược là rất cần thiết.

Các hàm trong CSS

Trong CSS, bạn có thể sử dụng các chức năng để chỉ định hoặc tính toán các kiểu một cách động. Ở đây, chúng tôi giới thiệu một số chức năng CSS tiêu biểu.

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}
  • Chức năng calc() được sử dụng để tính toán động các giá trị như chiều rộng và chiều cao của phần tử. Bạn có thể sử dụng các toán tử +, -, *, / để kết hợp các giá trị tương đối (%) và giá trị tuyệt đối (px) trong bố cục.

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}
  • Các hàm rgb() và rgba() được sử dụng để xác định màu sắc. rgb() xác định ba giá trị đỏ, xanh lá, và xanh dương (trong khoảng từ 0 đến 255), trong khi rgba() cũng bao gồm giá trị alpha để điều chỉnh độ trong suốt.

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() và hsla() sử dụng tông màu, độ bão hòa, và độ sáng để xác định màu sắc. hsla() cũng có thể xác định độ trong suốt.

url() 

1div.bg-image {
2    background-image: url('image.jpg');
3}
  • Hàm url() được sử dụng để xác định đường dẫn tới hình nền hoặc các tài nguyên khác.

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}
  • Hàm var() được sử dụng để làm việc với các thuộc tính tùy chỉnh (biến CSS). Bạn có thể định nghĩa các biến CSS và sử dụng chúng trong các thuộc tính khác.

attr() 

1/* Example of using the attr() function */
2a::after {
3    content: " (" attr(title) ")";
4}
  • Chức năng attr() được sử dụng để lấy giá trị thuộc tính HTML trong các kiểu CSS. Nó chủ yếu được sử dụng trong thuộc tính content của các pseudo-element để hiển thị động giá trị thuộc tính của các phần tử. Tuy nhiên, cần cẩn thận vì hỗ trợ trình duyệt còn hạn chế.

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}

Các hàm này được sử dụng để xác định giá trị một cách linh hoạt.

  • min() chọn giá trị nhỏ nhất từ một tập hợp giá trị.
  • max() chọn giá trị lớn nhất từ một tập hợp giá trị.
  • clamp() điều chỉnh một giá trị trong khoảng giữa giá trị tối thiểu, giá trị khuyến nghị, và giá trị tối đa.

repeat() 

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

Hàm repeat() được sử dụng với grid-template-columns và grid-template-rows để tạo các mẫu lặp lại.

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}
  • Các hàm này được sử dụng để tạo gradient.
    • linear-gradient tạo một gradient tuyến tính.
    • radial-gradient tạo một gradient hướng tâm. Bạn có thể chỉ định eclipse thay vì circle để tạo một gradient hình elip.
    • conic-gradient tạo một gradient thay đổi màu sắc dựa trên các góc xung quanh tâm của một vòng tròn.

Tóm tắt

Các hàm CSS cực kỳ hữu ích trong việc thiết lập bố cục và kiểu dáng linh hoạt. Bằng cách sử dụng hiệu quả các hàm này, bạn có thể tạo ra các thiết kế linh hoạt và đáp ứng tốt hơn.

Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.

YouTube Video

Chi tiết về Bộ chọn Thuộc tính trong CSSLớp Giả và Giả Phần Tử trong CSS