Renk ve yazı tipi

CSS kursu · Başlangıç · Ders 17/82

Renk ve yazı tipi özellikleriyle metni biçimlendirirsin.

Renk ve yazı tipi

Sayfaya kişilik katmak için renk ve yazı tipi ayarlarını kullanırsın. color metnin rengini, font-family yazı tipi ailesini, font-size ise yazı boyutunu belirler.

Renk değerleri hexadecimal olarak #2a3d66 gibi yazılır; üç çift rakam kırmızı, yeşil ve mavi tonunu verir. Yazı tipi ailesinde virgülle ayırarak yedekler de yazılır: Georgia, serif. Tarayıcı önce Georgia'yı dener, bulamazsa serif bir yazı tipine düşer. Yazı boyutu için 2rem gibi görece birimler, kullanıcının tarayıcı ayarına saygı duyar.

h1 başlığını biçimlendir

Bu derste h1 tür seçicisine üç bildirim ekleyeceksin: color, font-family ve font-size. Bunlar sayfanın en büyük başlığını belirgin yapar.

Yerleşim sırası önemli değildir ama okunabilirlik için aynı tür bildirimleri gruplamak iyi bir alışkanlıktır. Her bildirim özellik: değer; biçiminde yazılır ve noktalı virgülle kapanır. Satır girintisi (iki boşluk) bildirimleri seçiciden ayırt etmeyi kolaylaştırır.

Yazı tipi ailesinde yedekler

font-family: Georgia, serif yazdığında tarayıcı önce Georgia yazı tipini arar. Kullanıcının sisteminde yoksa, serif ailesinden başka bir yazı tipine düşer. Bu, sayfanın farklı cihazlarda benzer görünmesini sağlar.

Genel aile adları: serif (ayaklı), sans-serif (ayaksız), monospace (eş aralıklı). Her zaman belirli bir yazı tipinden sonra genel aile adını yazmak iyi bir alışkanlıktır.

Uygulama h1 bölümünü ekle

Önceki dersin dosyasını al (başlık yorumu + body bölümü). Altına bir h1 tür seçici bölümü ekle ve içine şu bildirimleri yaz: color: #2a3d66, font-family: Georgia, serif, font-size: 2rem. Her bildirimin sonunda noktalı virgül olsun.

Örnek çözümü göster

/* Kişisel Site stil sayfası */

body {
  margin: 0;
}

h1 {
  color: #2a3d66;
  font-family: Georgia, serif;
  font-size: 2rem;
}

Kendini test et

h1 başlığının rengini tamamla

h1 {
  color: ____;
  font-size: 2rem;
}

Cevabı göster

h1 {
  color: #2a3d66;
  font-size: 2rem;
}

Hangi CSS özelliği metnin rengini ayarlar?
```
h1 {
  /* ? */
}
```
- text-color
- font-color
- color
- text-style
Cevabı göster

color — Doğru. CSS'te metin rengi için 'color' özelliği kullanılır.
Özellikleri anlamlarıyla eşleştir

color

metin rengi
font-family

yazı tipi ailesi
font-size

yazı boyutu
h1

en büyük başlık

Başlangıç bölümündeki tüm dersler

Renk ve yazı tipi