1.1 Rəng
CSS (Cascading Style Sheets) mətnin tərtibatı üçün bir çox xüsusiyyət təqdim edir. Onların arasında əsas xüsusiyyətlərdən color, font-size və font-weight xüsusiyyətləridir. Bu xüsusiyyətlər mətnin rənginə, ölçüsünə və şriftin qalınlığına nəzarət etməyə imkan verir. Hər bir xüsusiyyəti daha ətraflı nəzərdən keçirək.
Color xüsusiyyəti mətnin rəngini təyin edir. Onu müxtəlif rəng formatları vasitəsilə təyin etmək olar, o cümlədən rənglərin adları, onaltılıq (hexadecimal) dəyərləri, RGB, RGBA, HSL və HSLA.
İstifadə nümunələri
1. Rənglərin adları:
p {
color: red;
}
2. Onaltılıq dəyərlər:
p {
color: #ff0000;
}
3. RGB və RGBA:
p {
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5); /* Şəffaf qırmızı */
}
4. HSL və HSLA:
p {
color: hsl(0, 100%, 50%);
color: hsla(0, 100%, 50%, 0.5); /* Şəffaf qırmızı */
}
HTML-də istifadə nümunəsi:
p {
color: #3498db; /* Mavi rəng */
}
<body>
<p>Bu mətn mavi olacaq.</p>
</body>
1.2 font-size Xüsusiyyəti
font-size xüsusiyyəti mətnin ölçüsünü təyin edir. Dəyərlər müxtəlif vahidlərdə göstərilə bilər, məsələn, piksellərlə (px), nisbətlərdə (em, rem, %), piksellərdən törəmələrdə (mm, cm, pt, pc), vw və vh (viewport width və viewport height), və digər vahidlərdə.
İstifadə nümunələri
1. Piksellər:
p {
font-size: 16px;
}
2. Nisbətlər:
%, em, rem
p {
font-size: 150%; /* Şriftin baza ölçüsünün 150%-i */
font-size: 1.5em; /* Şriftin baza ölçüsündən 1.5 dəfə daha böyük */
font-size: 1.5rem; /* Şriftin ölçüsü <html> elementinin şrift ölçüsünə nisbətdə */
}
3. "Viewport" vahidləri:
p {
font-size: 2vw; /* Viewport genişliyinin 2%-i */
font-size: 2vh; /* Viewport hündürlüyünün 2%-i */
}
HTML-də istifadə nümunəsi:
p {
font-size: 18px; /* Mətnin ölçüsü 18 piksel */
}
<body>
<p>Bu mətnin ölçüsü 18 piksel olacaq.</p>
</body>
1.3 font-weight Xüsusiyyəti
font-weight xüsusiyyəti mətnin qalınlığını təyin edir. Dəyərlər açar sözlər (normal, bold, bolder, lighter) və ya 100 ilə 900 arasında rəqəmlər şəklində ol bilər, harada ki, 400 normal, 700 isə bold dəyərinə uyğundur.
İstifadə nümunələri
1. Açar sözlər:
p {
font-weight: bold;
}
2. Rəqəmsal dəyərlər:
p {
font-weight: 300; /* Yüngül mətn */
font-weight: 700; /* Bold ekvivalenti */
}
HTML-də istifadə nümunəsi:
p {
font-weight: 700; /* Qalın mətn */
}
<body>
<p>Bu mətn qalın olacaq.</p>
</body>
GO TO FULL VERSION