Metin hizalama ve dönüş
text-align, text-transform ve text-indent özelliklerini öğrenirsin.
Metin hizalama
Metnin yatay hizalamasını text-align özelliği belirler. Dört yaygın değeri vardır: left (sol), right (sağ), center (ortala) ve justify (iki yana yasla).
Paragrafı ortalaman gerektiğinde text-align: center; yazarsın. Türkçe gibi soldan sağa dillerde varsayılan soldur; sağdan sola dillerde sağdır.
justify satırları iki yana yayar ama aralık düzensizleşebilir; uzun kolonlarda dikkatli kullan.
Harf dönüşümü
Metnin büyük-küçük harf görünümünü text-transform özelliği değiştirir; kaynak metne dokunmaz. Dört yaygın değer: none (değişme), capitalize (sözcük başları büyük), uppercase (hepsi büyük) ve lowercase (hepsi küçük).
Örneğin text-transform: uppercase; yazdığında "merhaba dünya" metni ekranda "MERHABA DÜNYA" olarak görünür; HTML'deki kaynak aynı kalır.
İlk satır girintisi
Paragrafın ilk satırını içeri çekmek için text-indent özelliği kullanılır. Değer piksel veya em ile yazılır.
Örneğin text-indent: 2em; ilk satırı iki harf genişliği kadar içeride başlatır. Bu gazete ve kitap tipografisinde sık görünen bir düzenlemedir.
Negatif değer verirsen ilk satır dışarı taşar; asılı girinti (hanging indent) için uygundur.
Uygulama Alıntı paragrafını biçimlendir
blockquote seçicisi için bir blok aç. İçine şu üç bildirimi ekle: text-align: justify;, text-transform: none; ve text-indent: 1.5em;.
Örnek çözümü göster
blockquote {
text-align: justify;
text-transform: none;
text-indent: 1.5em;
}Kendini test et
-
Paragrafı ortalamak için hangi değer yazılır?
- text-align: left;
- text-align: right;
- text-align: center;
- text-align: justify;
Cevabı göster
text-align: center; — Doğru. text-align: center; metni yatayda ortalar.
-
Başlığı ortala
h1 { text-align: ____; }Cevabı göster
h1 { text-align: center; } -
Özellik ve görevini eşleştir
- text-align
- Yatay hizalama
- text-transform
- Harf büyüklüğü biçimi
- text-indent
- İlk satır girintisi
- letter-spacing
- Harfler arası boşluk