Renk ve yazı tipi
- CSS kursu
- Başlangıç
- Ders 17/82
- 5 dk
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.
Başlangıç kodu
/* Kişisel Site stil sayfası */
body {
margin: 0;
}Örnek çözüm
/* Kişisel Site stil sayfası */
body {
margin: 0;
}
h1 {
color: #2a3d66;
font-family: Georgia, serif;
font-size: 2rem;
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 h1 başlığının rengini tamamla
h1 {
color: ____;
font-size: 2rem;
}h1 {
color: #2a3d66;
font-size: 2rem;
}Açıklama: Hex renk kodu # ile başlar ve altı rakam devam eder.
2 Hangi CSS özelliği metnin rengini ayarlar?
h1 {
/* ? */
}- text-color
- font-color
- color Doğru cevap
- text-style
Açıklama: CSS'te metin rengi için 'color' özelliği kullanılır.
3 Özellikleri anlamlarıyla eşleştir
| Kavram | Anlamı |
|---|---|
color |
metin rengi |
font-family |
yazı tipi ailesi |
font-size |
yazı boyutu |
h1 |
en büyük başlık |