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

Sıradaki ders: Metin dekorasyonu ve gölge

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler