Sonderzeichen und Funktionen in CSS
Dieser Artikel erklärt Sonderzeichen und Funktionen in CSS.
Sie können über Sonderzeichen und Funktionen wie calc() und var() in CSS lernen.
YouTube Video
HTML zur Vorschau
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>Sonderzeichen und Maskierung in CSS
CSS-Escape-Zeichen sind Techniken, um bestimmte Zeichen sicher zu handhaben. Durch das Escapen von Sonderzeichen oder Zeichen mit syntaktischer Bedeutung können diese sicher in Selektoren oder Zeichenfolgen verwendet werden.
Übersicht über CSS-Fluchtzeichen
CSS-Escapen ist ein Mechanismus, um bestimmte Zeichen oder Unicode so darzustellen, dass sie gemäß den spezifischen syntaktischen Regeln in Selektoren verwendet werden können. Zum Beispiel sind Escape-Zeichen nützlich, wenn HTML-Element-IDs oder Klassennamen Sonderzeichen (#, @, . usw.) enthalten oder wenn Klassennamen bzw. IDs mit Zahlen beginnen.
Maskierung wird hauptsächlich aus folgenden Gründen verwendet:
- Verwendung von Sonderzeichen als Selektoren
- Umgang mit IDs oder Klassennamen, die mit Zahlen beginnen
- Maskierung von Sonderzeichen oder nicht-ASCII-Zeichen
Grundlegende Syntax der Maskierung
Escape-Zeichen werden in CSS mit einem Backslash (\) geschrieben. Durch das Voranstellen eines Backslashs vor den zu escapenden Zeichen werden diese als normale Zeichen interpretiert.
Maskierung von Sonderzeichen
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}- Wie in diesem Beispiel ist das Escapen notwendig, wenn Sonderzeichen in CSS-Selektoren verwendet werden.
#,.,[, und]sind Sonderzeichen in CSS. Wenn diese Zeichen in IDs enthalten sind, ist Escapen erforderlich.
Maskierung von IDs oder Klassennamen, die mit Zahlen beginnen
1<div class="123abc">Numeric Class</div>1.\31 23abc {
2 font-weight: bold;
3 color: blue;
4}- In CSS ist es ungültig, wenn eine ID oder ein Klassenname mit einer Zahl beginnt und direkt geschrieben wird. In solchen Fällen sollte das Escapen verwendet werden.
- Hier wird das führende
1in123abcgeescaped.1wird als UnicodeU+0031dargestellt und mit einem Backslash und Leerzeichen als\31geescaped.
Maskierung von Unicode-Zeichen
1/* Example: Escaping Unicode characters */
2.content-unicode::before {
3 content: "\00A9"; /* copyright symbol */
4 color: blue;
5}- Beim Escapen von Unicode-Zeichen wird nach dem Backslash eine 6-stellige Hexadezimalzahl angegeben.
- Dieser Code zeigt, wie das © (Copyright-Symbol) in CSS angezeigt wird.
Maskierung innerhalb von Zeichenketten
1.content-backslash::after {
2 content: " : \\";
3 color: blue;
4}- Wenn in Strings innerhalb von CSS (wie der
content-Eigenschaft) ein Backslash verwendet wird, muss es ein doppelter Backslash sein. - In diesem Beispiel wird
\\verwendet, um einen Backslash in der Zeichenfolge anzuzeigen.
Praktisches Beispiel: HTML-Elemente mit Sonderzeichen stylen
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 werden Elemente geescaped, die Sonderzeichen wie
@und$enthalten.
Zusammenfassung
CSS-Escape-Zeichen sind sehr nützlich, um Selektoren und Zeichenfolgen in besonderen Fällen korrekt zu behandeln. Das Verständnis, wann Escapen notwendig ist, hilft dabei, Fehler beim Styling komplexer HTML-Elemente zu vermeiden. Insbesondere bei der Arbeit mit Klassennamen oder IDs, die mit Sonderzeichen oder Zahlen beginnen, ist das Escapen mit einem Backslash unerlässlich.
Funktionen in CSS
In CSS können Funktionen verwendet werden, um Stile dynamisch festzulegen oder zu berechnen. Hier werden einige typische CSS-Funktionen vorgestellt.
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}- Die Funktion
calc()wird verwendet, um Werte wie die Breite und Höhe von Elementen dynamisch zu berechnen. Sie können die Operatoren+,-,*,/verwenden, um relative Werte (%) und absolute Werte (px) in Layouts zu kombinieren.
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}- Die Funktionen
rgb()undrgba()werden verwendet, um Farben anzugeben.rgb()legt drei Werte für Rot, Grün und Blau fest (im Bereich von 0 bis 255), währendrgba()zusätzlich einen Alphawert für Transparenz enthält.
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()undhsla()verwenden Farbton, Sättigung und Helligkeit, um Farben anzugeben.hsla()kann auch Transparenz definieren.
url()
1div.bg-image {
2 background-image: url('image.jpg');
3}- Die Funktion
url()wird verwendet, um Pfade zu Hintergrundbildern oder anderen Ressourcen anzugeben.
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}- Die Funktion
var()wird verwendet, um mit benutzerdefinierten Eigenschaften (CSS-Variablen) zu arbeiten. Sie können CSS-Variablen definieren und in anderen Eigenschaften verwenden.
attr()
1/* Example of using the attr() function */
2a::after {
3 content: " (" attr(title) ")";
4}- Die Funktion
attr()wird verwendet, um HTML-Attributwerte in CSS-Stilen zu verwenden. Sie wird hauptsächlich innerhalb dercontent-Eigenschaft von Pseudo-Elementen verwendet, um Attributwerte von Elementen dynamisch anzuzeigen. Es ist jedoch Vorsicht geboten, da die Browserunterstützung eingeschränkt ist.
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}Diese Funktionen werden verwendet, um Werte dynamisch zu bestimmen.
min()wählt den kleinsten Wert aus einer Menge von Werten aus.max()wählt den größten Wert aus einer Menge von Werten aus.clamp()passt einen Wert innerhalb eines Bereichs zwischen einem Minimal-, Soll- und Maximalwert an.
repeat()
1/* Set three columns to be evenly spaced */
2grid-template-columns: repeat(3, 1fr);Die Funktion repeat() wird mit grid-template-columns und grid-template-rows verwendet, um wiederholende Muster zu erstellen.
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}- Diese Funktionen werden verwendet, um Verläufe zu erstellen.
linear-gradienterstellt einen linearen Verlauf.radial-gradienterstellt einen radialen Verlauf. Sie könneneclipseanstelle voncircleangeben, um einen elliptischen Verlauf zu erstellen.conic-gradienterstellt einen Verlauf, der die Farbe auf Basis der Winkel um das Zentrum eines Kreises ändert.
Zusammenfassung
CSS-Funktionen sind äußerst nützlich für die Erstellung flexibler Layouts und Stile. Durch die effektive Nutzung dieser Funktionen können Sie dynamischere und responsivere Designs erstellen.
Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.