Специальные символы и функции в CSS
В этой статье объясняются специальные символы и функции в CSS.
Вы можете узнать о специальных символах и функциях, таких как calc() и var() в CSS.
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 — это механизм для экранирования определенных символов или юникода, чтобы их можно было использовать в селекторах в соответствии с определенными синтаксическими правилами. Например, когда ID элементов HTML или имена классов содержат специальные символы (#, @, . и т. д.) или когда имена классов или ID начинаются с цифр, экранирование символов становится полезным.
Экранирование в основном используется для следующих целей:
- Использование специальных символов в качестве селекторов
- Обработка ID или имен классов, начинающихся с цифр
- Экранирование специальных символов или не-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. Если эти символы содержатся в ID, необходимо их экранировать.
Экранирование ID или имен классов, начинающихся с цифр
1<div class="123abc">Numeric Class</div>1.\31 23abc {
2 font-weight: bold;
3 color: blue;
4}- В CSS, если ID или имя класса начинается с цифры, его прямое написание недопустимо. В таких случаях используйте экранирование.
- Здесь мы экранируем начальный
1в123abc.1представлен как UnicodeU+0031и экранируется с помощью обратной косой черты и пробела:\31.
Экранирование символов Unicode
1/* Example: Escaping Unicode characters */
2.content-unicode::before {
3 content: "\00A9"; /* copyright symbol */
4 color: blue;
5}- При экранировании символов Unicode указывайте 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}- Функция
attr()используется для использования значений HTML-атрибутов в стилях CSS. Она в основном используется в свойстве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создаёт радиальный градиент. Вы можете указатьeclipseвместоcircle, чтобы создать эллиптический градиент.conic-gradientсоздаёт градиент, который изменяет цвет в зависимости от углов вокруг центра круга.
Резюме
CSS-функции чрезвычайно полезны для создания гибких макетов и стилей. Эффективно используя их, вы можете создать более динамичные и адаптивные дизайны.
Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.