CSS'te Özel Karakterler ve Fonksiyonlar
Bu makale, CSS'teki özel karakterler ve fonksiyonları açıklar.
CSS'te calc() ve var() gibi özel karakterler ve fonksiyonlar hakkında bilgi edinebilirsiniz.
YouTube Video
Önizleme için 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'te Özel Karakterler ve Kaçış
CSS kaçış karakterleri, belirli karakterleri güvenli bir şekilde işlemek için kullanılan tekniklerdir. Sözdizimsel anlam taşıyan özel sembolleri veya karakterleri kaçış yaparak, onları seçiciler veya dizeler içinde güvenli bir şekilde kullanabilirsiniz.
CSS Kaçış Karakterlerine Genel Bakış
CSS'deki kaçış mekanizması, belirli karakterleri veya unicode'ları sözdizimsel kurallara uygun olarak seçicilerde kullanılabilmesi için kaçış yapma işlemidir. Örneğin, HTML element ID'leri veya sınıf adları özel semboller (#, @, . vb.) içerdiğinde veya sayı ile başlayan sınıf adları ya da ID'ler ile çalışırken kaçış karakterleri faydalıdır.
Kaçış genellikle aşağıdaki amaçlar için kullanılır:
- Seçiciler olarak özel karakterlerin kullanılması
- Sayı ile başlayan ID'lerin veya sınıf adlarının ele alınması
- Özel sembollerin veya ASCII olmayan karakterlerin kaçışı
Temel Kaçış Sözdizimi
Kaçış karakterleri, CSS'te ters eğik çizgi (\) kullanılarak yazılır. Kaçış yapılacak karakterlerin önüne ters eğik çizgi koyarak, bu karakterler normal karakter olarak yorumlanır.
Özel Karakterlerin Kaçışı
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}- Bu örnekte olduğu gibi, CSS seçicilerinde özel karakterler kullanırken kaçış yapılması gereklidir.
#,.,[, ve]CSS'teki özel karakterlerdir. Bu karakterler ID'lerde bulunuyorsa, kaçış yapılması gereklidir.
Sayılarla Başlayan ID veya Sınıf İsimlerini Kaçışa Alma
1<div class="123abc">Numeric Class</div>1.\31 23abc {
2 font-weight: bold;
3 color: blue;
4}- CSS'de, bir ID veya sınıf ismi bir sayı ile başlıyorsa, doğrudan yazılması geçersizdir. Bu gibi durumlarda, kaçışa alma kullanın.
- Burada,
123abciçinde önde gelen1karakterini kaçışa alıyoruz.1, UnicodeU+0031olarak temsil edilir ve ters eğik çizgi ve boşluk ile\31şeklinde kaçışa alınır.
Unicode Karakterlerini Kaçışa Alma
1/* Example: Escaping Unicode characters */
2.content-unicode::before {
3 content: "\00A9"; /* copyright symbol */
4 color: blue;
5}- Unicode karakterlerini kaçışa alırken, ters eğik çizgiden sonra 6 haneli bir hexadecimale sayı belirtin.
- Bu kod, CSS'de © (telif hakkı sembolü) nasıl gösterileceğini gösterir.
Diziler İçerisinde Kaçışa Alma
1.content-backslash::after {
2 content: " : \\";
3 color: blue;
4}- CSS içindeki dizilerde (örneğin
contentözelliğinde) ters eğik çizgi kullanıldığında, çift ters eğik çizgi olması gerekir. - Bu örnekte, dizede bir ters eğik çizgi göstermek için
\\yazılmıştır.
Pratik Örnek: Özel Karakterlerle HTML Öğelerini Stil Verme
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}- Burada,
@ve$gibi özel karakterler içeren öğeleri kaçışa alıyoruz.
Özet
CSS kaçış karakterleri, özel durumlarda seçici ve dizileri doğru şekilde işlemek için çok kullanışlıdır. Kaçışa almanın ne zaman gerekli olduğunu anlamak, karmaşık HTML öğelerini stillendirirken hatalardan kaçınmaya yardımcı olur. Özellikle özel karakterler veya sayılarla başlayan sınıf adları veya ID'lerle çalışırken, ters eğik çizgi ile kaçışa almak esastır.
CSS'te Fonksiyonlar
CSS'te, stilleri dinamik olarak belirlemek veya hesaplamak için fonksiyonlar kullanabilirsiniz. Burada, bazı tipik CSS fonksiyonlarını tanıtıyoruz.
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()fonksiyonu, öğelerin genişlik ve yükseklik gibi değerlerini dinamik olarak hesaplamak için kullanılır. Düzenlerde, % gibi bağıl değerler ile px gibi mutlak değerleri birleştirmek için+,-,*,/operatörlerini kullanabilirsiniz.
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()vergba()fonksiyonları, renkleri belirtmek için kullanılır.rgb(), kırmızı, yeşil ve mavi için üç değer (0 ile 255 arası) belirtirken,rgba()ayrıca şeffaflık için bir alfa değeri içerir.
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()vehsla(), renkleri belirtmek için ton, doygunluk ve açıklık değerlerini kullanır.hsla()fonksiyonu şeffaflık belirtmek için de kullanılabilir.
url()
1div.bg-image {
2 background-image: url('image.jpg');
3}url()fonksiyonu, arka plan resimlerine veya diğer kaynaklara giden yolları belirtmek için kullanılır.
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()fonksiyonu, özel özelliklerle (CSS değişkenleri) çalışmak için kullanılır. CSS değişkenleri tanımlayabilir ve bunları diğer özelliklerde kullanabilirsiniz.
attr()
1/* Example of using the attr() function */
2a::after {
3 content: " (" attr(title) ")";
4}attr()fonksiyonu, HTML öznitelik değerlerini CSS stillerinde kullanmak için kullanılır. Genellikle, öğelerin öznitelik değerlerini dinamik olarak göstermek için psödo-elementlerincontentözelliği içinde kullanılır. Ancak, tarayıcı desteği sınırlı olduğu için dikkatli olunmalıdır.
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}Bu fonksiyonlar, değerleri dinamik olarak belirlemek için kullanılır.
min()fonksiyonu, bir değer kümesinden en küçük değeri seçer.max()fonksiyonu, bir değer kümesinden en büyük değeri seçer.clamp()fonksiyonu, bir değeri minimum, önerilen ve maksimum değerler arasında ayarlar.
repeat()
1/* Set three columns to be evenly spaced */
2grid-template-columns: repeat(3, 1fr);repeat() fonksiyonu, grid-template-columns ve grid-template-rows ile birlikte tekrarlayan desenler oluşturmak için kullanılır.
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}- Bu fonksiyonlar, gradyanlar oluşturmak için kullanılır.
linear-gradientdoğrusal bir gradyan oluşturur.radial-gradientradyal bir gradyan oluşturur. Eliptik bir gradyan oluşturmak içincircleyerineeclipsebelirtebilirsiniz.conic-gradient, bir dairenin merkezi etrafındaki açılara göre renk değiştiren bir gradyan oluşturur.
Özet
CSS fonksiyonları, esnek düzenler ve stiller belirlemek için son derece kullanışlıdır. Bunları etkili bir şekilde kullanarak, daha dinamik ve duyarlı tasarımlar elde edebilirsiniz.
Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.