Başlık ve tipografi
Başlık ve tipografi özelliklerini eklersin.
Yazı tipi ailesi: font-family
Blogun okunabilirliği yazı tipinden başlar. font-family özelliği, tarayıcının kullanacağı yazı tipini belirler. Birden fazla yazı tipi yazarsan tarayıcı sırayla dener; bulamadığının yerine bir sonrakini kullanır.
Gezi Günlüğü için sade ve okunaklı bir seçim yapalım:
body {
font-family: Georgia, "Times New Roman", serif;
}Sonuna serif yazmak, hiçbiri yoksa tarayıcının varsayılan serif yazı tipini kullanmasını sağlar.
Boyut ve kalınlık: font-size, font-weight
Yazının boyutunu font-size, kalınlığını ise font-weight ile ayarlarız. Boyut için piksel (px) yaygın ve nettir; kalınlık için 400 (normal), 700 (kalın) gibi sayılar ya da normal, bold anahtar kelimeleri kullanılır.
Blog gövdesinde 18 piksel, normal kalınlık iyi bir başlangıçtır:
font-size: 18px;
font-weight: 400;Satır aralığı: line-height
Uzun blog yazılarında satırlar birbirine çok yakınsa okumak zor olur. line-height özelliği satırlar arasındaki dikey boşluğu ayarlar. Birimsiz bir sayı yazarsan, bu sayı yazı boyutuna çarpılır.
Örneğin line-height: 1.6, satır yüksekliğini yazı boyutunun 1,6 katına çıkarır. Bu, uzun paragraflar için rahat bir okuma aralığı verir.
Uygulama Body bölümünü ekle
Önceki dersin başlık yorumunu içeren dosyayı al. Altına bir body bölümü ekle ve içine dört bildirim yaz: font-family: Georgia, "Times New Roman", serif, font-size: 18px, font-weight: 400 ve line-height: 1.6. Her bildirim noktalı virgülle kapanmalı.
Örnek çözümü göster
/* Gezi Günlüğü stil sayfası */
body {
font-family: Georgia, "Times New Roman", serif;
font-size: 18px;
font-weight: 400;
line-height: 1.6;
}Kendini test et
-
Hangisi geçerli bir font-family değeridir?
- Georgia, serif
- 18px
- #2b2b2b
- bold
Cevabı göster
Georgia, serif — Doğru. font-family yazı tipi adları listesidir; sonuna aile adı (serif, sans-serif) eklenir.
-
font-size değerini tamamla
font-size: ____;Cevabı göster
font-size: 18px; -
Özellikleri amaçlarıyla eşleştir
- font-family
- yazı tipi
- font-size
- yazı boyutu
- font-weight
- yazı kalınlığı
- line-height
- satır yüksekliği