Speciale tekens en functies in CSS
Dit artikel legt speciale tekens en functies in CSS uit.
Je kunt leren over speciale tekens en functies zoals calc() en var() in CSS.
YouTube Video
HTML voor Voorbeeldweergave
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>Speciale tekens en escaperen in CSS
CSS-escape-tekens zijn technieken om bepaalde tekens veilig te verwerken. Door speciale symbolen of tekens met syntactische betekenis te escaperen, kun je ze veilig gebruiken binnen selectors of strings.
Overzicht van CSS-escape-tekens
CSS-escaperen is een mechanisme om bepaalde tekens of unicode te ontsnappen zodat ze in selectors kunnen worden gebruikt volgens specifieke syntactische regels. Bijvoorbeeld, wanneer HTML element-ID's of klassennamen speciale symbolen (#, @, . etc.) bevatten, of bij het werken met klassennamen of ID's die beginnen met cijfers, zijn escape-tekens nuttig.
Escaperen wordt voornamelijk gebruikt voor de volgende doeleinden:
- Speciale tekens gebruiken als selectors
- Omgaan met ID's of klassennamen die beginnen met cijfers
- Speciale symbolen of niet-ASCII-tekens escaperen
Basis escape-syntaxis
Escape-tekens worden in CSS geschreven met een backslash (\). Door een backslash vóór de te escaperen tekens te plaatsen, worden ze geïnterpreteerd als normale tekens.
Speciale tekens escaperen
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}- Zoals in dit voorbeeld is escaperen nodig bij het gebruik van speciale tekens binnen CSS-selectors.
#,.,[, en]zijn speciale tekens in CSS. Als deze tekens in ID's voorkomen, is escaperen noodzakelijk.
Escapen van ID's of classnamen die beginnen met cijfers
1<div class="123abc">Numeric Class</div>1.\31 23abc {
2 font-weight: bold;
3 color: blue;
4}- In CSS is het ongeldig om een ID of classname die begint met een cijfer direct te schrijven. Gebruik in dergelijke gevallen escaping.
- Hier escapen we de voorloop
1in123abc.1wordt weergegeven als UnicodeU+0031en geëscapet met een backslash en een spatie als\31.
Escapen van Unicode-tekens
1/* Example: Escaping Unicode characters */
2.content-unicode::before {
3 content: "\00A9"; /* copyright symbol */
4 color: blue;
5}- Bij het escapen van Unicode-tekens specificeer je een 6-cijferig hexadecimaal getal na de backslash.
- Deze code laat zien hoe je © (het copyrightsymbool) in CSS weergeeft.
Escapen binnen strings
1.content-backslash::after {
2 content: " : \\";
3 color: blue;
4}- Bij het gebruik van een backslash in strings binnen CSS (zoals de
content-eigenschap), moet het een dubbele backslash zijn. - In dit voorbeeld wordt
\\geschreven om een backslash in de string weer te geven.
Praktisch voorbeeld: het stylen van HTML-elementen met speciale tekens
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}- Hier escapen we elementen die speciale tekens
@en$bevatten.
Samenvatting
CSS-escape-tekens zijn erg handig om selectors en strings correct te verwerken in speciale gevallen. Begrijpen wanneer escaping nodig is, helpt fouten te voorkomen bij het stylen van complexe HTML-elementen. Vooral bij classnamen of ID's die beginnen met speciale tekens of cijfers is escaping met een backslash essentieel.
Functies in CSS
In CSS kun je functies gebruiken om stijlen dynamisch te specificeren of te berekenen. Hier introduceren we enkele typische CSS-functies.
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}- De
calc()-functie wordt gebruikt om waarden zoals de breedte en hoogte van elementen dynamisch te berekenen. Je kunt de operators+,-,*,/gebruiken om relatieve waarden (%) en absolute waarden (px) in layouts te combineren.
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}- De functies
rgb()enrgba()worden gebruikt om kleuren te specificeren.rgb()specificeert drie waarden voor rood, groen en blauw (variërend van 0 tot 255), terwijlrgba()ook een alphawaarde voor transparantie bevat.
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()enhsla()gebruiken hue (tint), saturation (verzadiging) en lightness (helderheid) om kleuren te specificeren.hsla()kan ook transparantie specificeren.
url()
1div.bg-image {
2 background-image: url('image.jpg');
3}- De functie
url()wordt gebruikt om paden naar achtergrondafbeeldingen of andere resources op te geven.
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}- De functie
var()wordt gebruikt om te werken met aangepaste eigenschappen (CSS-variabelen). Je kunt CSS-variabelen definiëren en deze in andere eigenschappen gebruiken.
attr()
1/* Example of using the attr() function */
2a::after {
3 content: " (" attr(title) ")";
4}- De functie
attr()wordt gebruikt om HTML-attribuutwaarden in CSS-stijlen te gebruiken. Het wordt voornamelijk gebruikt binnen decontenteigenschap van pseudo-elementen om attribuutwaarden van elementen dynamisch weer te geven. Er is echter voorzichtigheid geboden omdat de browserondersteuning beperkt is.
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}Deze functies worden gebruikt om waarden dynamisch te bepalen.
min()selecteert de kleinste waarde uit een reeks waarden.max()selecteert de grootste waarde uit een reeks waarden.clamp()past een waarde aan binnen een bereik tussen een minimum-, aanbevolen en maximumwaarde.
repeat()
1/* Set three columns to be evenly spaced */
2grid-template-columns: repeat(3, 1fr);De functie repeat() wordt gebruikt met grid-template-columns en grid-template-rows om herhalende patronen te maken.
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}- Deze functies worden gebruikt om overgangen te maken.
linear-gradientmaakt een lineaire overgang.radial-gradientmaakt een radiale overgang. U kunteclipsein plaats vancirclespecificeren om een elliptische overgang te maken.conic-gradientmaakt een overgang die van kleur verandert op basis van hoeken rond het middelpunt van een cirkel.
Samenvatting
CSS-functies zijn uiterst nuttig voor het instellen van flexibele layouts en stijlen. Door deze effectief te gebruiken, kun je meer dynamische en responsieve ontwerpen creëren.
Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.