Znaki specjalne i funkcje w CSS

Articles

Ten artykuł wyjaśnia znaki specjalne i funkcje w CSS.

Możesz nauczyć się o znakach specjalnych i funkcjach, takich jak calc() i var() w CSS.

YouTube Video

HTML do podglądu

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>

Znaki specjalne i ich unikanie w CSS

Znaki ucieczki w CSS to techniki bezpiecznego obsługiwania określonych znaków. Poprzez unikanie symboli specjalnych lub znaków mających znaczenie składniowe, można je bezpiecznie używać w selektorach lub ciągach znaków.

Przegląd znaków ucieczki w CSS

Unikanie w CSS to mechanizm pozwalający na użycie określonych znaków lub kodów unicode w selektorach zgodnie z określonymi regułami składniowymi. Na przykład, gdy identyfikatory elementów HTML lub nazwy klas zawierają symbole specjalne (#, @, . itp.), lub gdy nazwy klas albo identyfikatory zaczynają się od liczb, znaki ucieczki są przydatne.

Unikanie jest stosowane głównie w następujących celach:

Używanie znaków specjalnych jako selektorów
Obsługa identyfikatorów lub nazw klas zaczynających się od liczb
Unikanie symboli specjalnych lub znaków spoza ASCII

Podstawowa składnia unikania

Znaki ucieczki w CSS zapisuje się przy użyciu znaku ukośnika odwrotnego (\). Poprzez umieszczenie ukośnika odwrotnego przed znakami do uniknięcia, są one interpretowane jako zwykłe znaki.

Unikanie znaków specjalnych

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}

Jak w tym przykładzie, unikanie jest konieczne, gdy używamy znaków specjalnych w selektorach CSS.
#, ., [, i ] to znaki specjalne w CSS. Jeśli te znaki znajdują się w identyfikatorach, konieczne jest ich unikanie.

Escapowanie identyfikatorów lub nazw klas zaczynających się od liczb

1<div class="123abc">Numeric Class</div>

1.\31 23abc {
2    font-weight: bold;
3    color: blue;
4}

W CSS, jeśli identyfikator lub nazwa klasy zaczyna się od liczby, użycie jej bezpośrednio jest nieprawidłowe. W takich przypadkach należy użyć escapowania.
Tutaj escapujemy początkową cyfrę 1 w 123abc. 1 jest reprezentowana jako Unicode U+0031 i escapowana za pomocą ukośnika i spacji jako \31 .

Escapowanie znaków Unicode

1/* Example: Escaping Unicode characters */
2.content-unicode::before {
3    content: "\00A9"; /* copyright symbol */
4    color: blue;
5}

Podczas escapowania znaków Unicode, należy podać 6-cyfrowy numer szesnastkowy po ukośniku.
Ten kod pokazuje, jak wyświetlić © (symbol praw autorskich) w CSS.

Escapowanie wewnątrz ciągów znaków

1.content-backslash::after {
2    content: " : \\";
3    color: blue;
4}

Podczas używania ukośnika w ciągach znaków w CSS (np. w właściwości content), należy użyć podwójnego ukośnika.
W tym przykładzie \\ jest użyte, aby wyświetlić ukośnik w ciągu znaków.

Praktyczny przykład: stylizowanie elementów HTML ze znakami specjalnymi

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}

Tutaj escapujemy elementy zawierające znaki specjalne @ i $.

Podsumowanie

Znaki escapowania w CSS są bardzo przydatne do prawidłowego obsługiwania selektorów i ciągów znaków w szczególnych przypadkach. Zrozumienie, kiedy escapowanie jest konieczne, pomaga unikać błędów przy stylizowaniu złożonych elementów HTML. Szczególnie w przypadku obsługi nazw klas lub identyfikatorów zaczynających się od znaków specjalnych lub cyfr, escapowanie za pomocą ukośnika jest niezbędne.

Funkcje w CSS

W CSS można używać funkcji do dynamicznego określania lub obliczania stylów. Tutaj przedstawiamy niektóre typowe funkcje 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}

Funkcja calc() służy do dynamicznego obliczania wartości, takich jak szerokość i wysokość elementów. Można użyć operatorów +, -, *, / do łączenia wartości względnych (%) i absolutnych (px) w układach.

`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}

Funkcje rgb() i rgba() są używane do określania kolorów. rgb() określa trzy wartości dla czerwonego, zielonego i niebieskiego (w zakresie od 0 do 255), natomiast rgba() dodatkowo zawiera wartość alfa dla przezroczystości.

`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() i hsla() używają wartości odcienia, nasycenia i jasności do określania kolorów. hsla() może również określać przezroczystość.

`url()`

1div.bg-image {
2    background-image: url('image.jpg');
3}

Funkcja url() służy do określania ścieżek do obrazów tła lub innych zasobów.

`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}

Funkcja var() służy do pracy z niestandardowymi właściwościami (zmiennymi CSS). Możesz definiować zmienne CSS i używać ich w innych właściwościach.

`attr()`

1/* Example of using the attr() function */
2a::after {
3    content: " (" attr(title) ")";
4}

Funkcja attr() jest używana do wykorzystania wartości atrybutów HTML w stylach CSS. Jest głównie używana wewnątrz właściwości content w pseudo-elementach, aby dynamicznie wyświetlać wartości atrybutów elementów. Należy jednak zachować ostrożność, ponieważ wsparcie przeglądarek jest ograniczone.

`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}

Te funkcje są używane do dynamicznego określania wartości.

min() wybiera najmniejszą wartość z zestawu wartości.
max() wybiera największą wartość z zestawu wartości.
clamp() dostosowuje wartość w zakresie między wartością minimalną, zalecaną a maksymalną.

`repeat()`

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

Funkcja repeat() jest używana z grid-template-columns oraz grid-template-rows do tworzenia powtarzających się wzorów.

`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}

Te funkcje są używane do tworzenia gradientów.
- linear-gradient tworzy gradient liniowy.
- radial-gradient tworzy gradient promienisty. Możesz określić eclipse zamiast circle, aby utworzyć gradient eliptyczny.
- conic-gradient tworzy gradient zmieniający kolor w zależności od kątów wokół środka koła.

Podsumowanie

Funkcje CSS są niezwykle przydatne do tworzenia elastycznych układów i stylów. Poprzez skuteczne ich wykorzystanie możesz osiągnąć bardziej dynamiczne i responsywne projekty.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video

Szczegóły selektorów atrybutów w CSS Pseudoklasy i pseudoelementy CSS