Speciella tecken och funktioner i CSS
Den här artikeln förklarar speciella tecken och funktioner i CSS.
Du kan lära dig om speciella tecken och funktioner som calc() och var() i CSS.
YouTube Video
HTML för förhandsgranskning
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>Speciella tecken och flyktmekanismer i CSS
CSS-escape-tecken är tekniker för att hantera vissa tecken på ett säkert sätt. Genom att använda flykttecken för speciella symboler eller tecken med syntaktisk betydelse kan du säkert använda dem inom selektorer eller strängar.
Översikt över CSS-escape-tecken
CSS-flykt är en mekanism för att fly korrekt vissa tecken eller unicode så att de kan användas i selektorer enligt specifika syntaktiska regler. Till exempel, när HTML-element-ID:n eller klassnamn innehåller speciella symboler (#, @, . osv.) eller när klassnamn eller ID:n börjar med siffror, är escape-tecken användbara.
Flykt används huvudsakligen för följande ändamål:
- Använda speciella tecken som selektorer
- Hantering av ID:n eller klassnamn som börjar med siffror
- Flykt för speciella symboler eller icke-ASCII-tecken
Grundläggande syntax för flykt
Escape-tecken skrivs i CSS med hjälp av omvänt snedstreck (\). Genom att placera ett omvänt snedstreck framför de tecken som ska flyktas tolkas de som vanliga tecken.
Flykt av speciella tecken
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}- Som i detta exempel är flykt nödvändig när speciella tecken används i CSS-selektorer.
#,.,[, och]är speciella tecken i CSS. Om dessa tecken ingår i ID:n krävs flykt.
Undanledande ID:n eller klassnamn som börjar med siffror
1<div class="123abc">Numeric Class</div>1.\31 23abc {
2 font-weight: bold;
3 color: blue;
4}- I CSS är det ogiltigt att skriva ett ID eller klassnamn som börjar med en siffra direkt. I sådana fall ska du använda escaped tecken.
- Här flyr vi det ledande
1i123abc.1representeras som UnicodeU+0031och skrivs som escape-kod med en backslash och mellanslag:\31.
Undanledande Unicode-tecken
1/* Example: Escaping Unicode characters */
2.content-unicode::before {
3 content: "\00A9"; /* copyright symbol */
4 color: blue;
5}- När du undanleder Unicode-tecken, ange en 6-siffrig hexadecimal kod efter backslashet.
- Denna kod visar hur man visar © (upphovsrättssymbol) i CSS.
Undanledande inom strängar
1.content-backslash::after {
2 content: " : \\";
3 color: blue;
4}- När du använder backslashet inom strängar i CSS (som i egenskapen
content) måste det vara ett dubbel-backslash. - I detta exempel används
\\för att visa ett backslash inom strängen.
Praktiskt exempel: Styla HTML-element med specialtecken
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}- Här undanleder vi element som innehåller specialtecknen
@och$.
Sammanfattning
Escape-tecken i CSS är mycket användbara för att korrekt hantera selektorer och strängar i speciella situationer. Att förstå när undanledning är nödvändig hjälper till att undvika fel vid styling av komplexa HTML-element. Särskilt när du arbetar med klassnamn eller ID:n som börjar med specialtecken eller siffror, är det viktigt att använda backslash-undanledning.
Funktioner i CSS
I CSS kan du använda funktioner för att dynamiskt ange eller beräkna stilar. Här presenterar vi några typiska CSS-funktioner.
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}- Funktionen
calc()används för att dynamiskt beräkna värden som bredd och höjd på element. Du kan använda operatorerna+,-,*,/för att kombinera relativa värden (%) och absoluta värden (px) i layouter.
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}- Funktionerna
rgb()ochrgba()används för att ange färger.rgb()anger tre värden för rött, grönt och blått (från 0 till 255), medanrgba()även inkluderar ett alfavärde för transparens.
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()ochhsla()använder nyans, mättnad och ljusstyrka för att specificera färger.hsla()kan också specificera transparens.
url()
1div.bg-image {
2 background-image: url('image.jpg');
3}url()-funktionen används för att specificera sökvägar till bakgrundsbilder eller andra resurser.
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()-funktionen används för att arbeta med anpassade egenskaper (CSS-variabler). Du kan definiera CSS-variabler och använda dem i andra egenskaper.
attr()
1/* Example of using the attr() function */
2a::after {
3 content: " (" attr(title) ")";
4}attr()-funktionen används för att utnyttja HTML-attributvärden i CSS-stilar. Den används främst inomcontent-egenskapen för pseudo-element för att dynamiskt visa attributvärden för element. Det kräver dock försiktighet eftersom webbläsarstöd är begränsat.
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}Dessa funktioner används för att dynamiskt bestämma värden.
min()väljer det minsta värdet från en uppsättning värden.max()väljer det största värdet från en uppsättning värden.clamp()justerar ett värde inom ett intervall mellan ett minimum-, rekommenderat och maximumvärde.
repeat()
1/* Set three columns to be evenly spaced */
2grid-template-columns: repeat(3, 1fr);repeat()-funktionen används med grid-template-columns och grid-template-rows för att skapa upprepande mönster.
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}- Dessa funktioner används för att skapa gradienter.
linear-gradientskapar en linjär övertoning.radial-gradientskapar en radiell övertoning. Du kan angeellipseistället förcircleför att skapa en elliptisk övertoning.conic-gradientskapar en övertoning som ändrar färg baserat på vinklar runt en cirkels centrum.
Sammanfattning
CSS-funktioner är mycket användbara för att skapa flexibla layouter och stilar. Genom att använda dessa effektivt kan du skapa mer dynamiska och responsiva designer.
Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.