CSS Font özelliği metinlerin görünümünü kontrol etmek için kullanılır. CSS yazı tipi özelliğini kullanarak metin boyutunu, rengini, stilini ve daha fazlasını değiştirebilirsiniz. Metnin nasıl kalın veya altı çizili hale getirileceğini zaten incelediniz. Burada ayrıca yazı tipinizi yüzde kullanarak nasıl yeniden boyutlandıracağınızı da öğreneceksiniz.
Bunlar bazı önemli yazı tipi nitelikleridir:
1) CSS Yazı Tipi Rengi
CSS yazı tipi rengi, CSS yazı tiplerinin bir parçası gibi görünse de, CSS'de bağımsız bir özelliktir. Metnin rengini değiştirmek için kullanılır.
Bir rengi tanımlamak için üç farklı format vardır:
- Bir renk adına göre
- Onaltılı değere göre
- RGB'ye göre
Yukarıdaki örnekte tüm bu formatları tanımladık.
java'da string'den int'ye dönüşüm
body { font-size: 100%; } h1 { color: red; } h2 { color: #9000A1; } p { color:rgb(0, 220, 98); } } <h2>This heading is shown in serif.</h2> <p>This paragraph is written in monospace.</p> Şimdi Test Edin Çıktı:
<h2>This heading is shown in sans-serif.</h2> <h3>This heading is shown in serif.</h3> <p>This paragraph is written in monospace.</p>
3) CSS Yazı Tipi Boyutu
CSS yazı tipi boyutu özelliği yazı tipinin boyutunu değiştirmek için kullanılır.
Yazı tipi boyutunu ayarlamak için kullanılabilecek olası değerler şunlardır:
| Yazı Tipi Boyutu Değeri | Tanım |
|---|---|
| xx-küçük | son derece küçük metin boyutunu görüntülemek için kullanılır. |
| x-küçük | ekstra küçük metin boyutunu görüntülemek için kullanılır. |
| küçük | küçük metin boyutunu görüntülemek için kullanılır. |
| orta | orta metin boyutunu görüntülemek için kullanılır. |
| büyük | büyük metin boyutunu görüntülemek için kullanılır. |
| x-büyük | ekstra büyük metin boyutunu görüntülemek için kullanılır. |
| xx-büyük | son derece büyük metin boyutunu görüntülemek için kullanılır. |
| daha küçük | nispeten daha küçük metin boyutunu görüntülemek için kullanılır. |
| daha büyük | nispeten daha büyük metin boyutunu görüntülemek için kullanılır. |
| piksel veya % cinsinden boyut | Değeri yüzde veya piksel cinsinden ayarlamak için kullanılır. |
Practice CSS font-size property <p> This font size is extremely small.</p> <p> This font size is extra small</p> <p> This font size is small</p> <p> This font size is medium. </p> <p> This font size is large. </p> <p> This font size is extra large. </p> <p> This font size is extremely large. </p> <p> This font size is smaller. </p> <p> This font size is larger. </p> <p> This font size is set on 200%. </p> <p> This font size is 20 pixels. </p>Şimdi Test Edin
Çıktı:
Bu yazı tipi boyutu son derece küçüktür.
Bu yazı tipi boyutu ekstra küçük
Bu yazı tipi boyutu küçük
Bu yazı tipi boyutu ortadır.
Bu yazı tipi boyutu büyüktür.
Bu yazı tipi boyutu ekstra büyüktür.
android süreci acore durmaya devam ediyor
Bu yazı tipi boyutu son derece büyüktür.
Bu yazı tipi boyutu daha küçüktür.
Bu yazı tipi boyutu daha büyüktür.
Bu yazı tipi boyutu %200 olarak ayarlanmıştır.
Bu yazı tipi boyutu 20 pikseldir.
4) CSS Yazı Tipi Stili
CSS Yazı Tipi stili özelliği, ne tür yazı tipini görüntülemek istediğinizi tanımlar. İtalik, eğik veya normal olabilir.
body { font-size: 100%; } h2 { font-style: italic; } h3 { font-style: oblique; } h4 { font-style: normal; } } <h2>This heading is shown in italic font.</h2> <h3>This heading is shown in oblique font.</h3> <h4>This heading is shown in normal font.</h4> Şimdi Test Edin Çıktı:
<h2>This heading is shown in italic font.</h2> <h3>This heading is shown in oblique font.</h3> <h4>This heading is shown in normal font.</h4>
5) CSS Yazı Tipi Çeşitleri
CSS yazı tipi çeşidi özelliği, bir öğenin yazı tipi çeşidinin nasıl ayarlanacağını belirtir. Normal ve küçük harfler olabilir.
rastgele sayı gen java
p { font-variant: small-caps; } h3 { font-variant: normal; } <h3>This heading is shown in normal font.</h3> <p>This paragraph is shown in small font.</p> Şimdi Test Edin Çıktı:
<h3>This heading is shown in normal font.</h3> <p>This paragraph is shown in small font.</p>
6) CSS Yazı Tipi Ağırlığı
CSS yazı tipi ağırlığı özelliği, yazı tipinin ağırlığını tanımlar ve yazı tipinin ne kadar kalın olacağını belirtir. Yazı tipi ağırlığının olası değerleri normal, kalın, daha kalın, daha açık veya sayı (100, 200..... 900'e kadar) olabilir.
Bu yazı tipi kalındır.
Bu yazı tipi daha kalındır.
Bu yazı tipi daha hafiftir.
Bu yazı tipi 100 ağırlıktadır.
Bu yazı tipi 200 ağırlığındadır.
Bu yazı tipi 300 ağırlığındadır.
Bu yazı tipi 400 ağırlığındadır.
Bu yazı tipi 500 ağırlığındadır.
Bu yazı tipi 600 ağırlığındadır.
youtube vlc'den video indirme
Bu yazı tipi 700 ağırlığındadır.
Bu yazı tipi 800 ağırlığındadır.
Bu yazı tipi 900 ağırlığındadır.
Şimdi Test EdinÇıktı:
Bu yazı tipi kalındır.
Bu yazı tipi daha kalındır.
Bu yazı tipi daha hafiftir.
Bu yazı tipi 100 ağırlıktadır.
Bu yazı tipi 200 ağırlığındadır.
Bu yazı tipi 300 ağırlığındadır.
Bu yazı tipi 400 ağırlığındadır.
Bu yazı tipi 500 ağırlığındadır.
Bu yazı tipi 600 ağırlığındadır.
Bu yazı tipi 700 ağırlığındadır.
Bu yazı tipi 800 ağırlığındadır.
Linux'ta bir komut dosyası nasıl çalıştırılır
Bu yazı tipi 900 ağırlığındadır.