Yükleniyor...

CSS Metin

Kutuları boyutlandırdınız ve overflow’u kontrol ettiniz. Şimdi içindeki sözcükleri biçimlendirin. CSS metin özellikleri hizalama, alt çizgi, harf durumu, aralık ve satır yüksekliğini yönetir — henüz yazı tipi ailesini değiştirmeden (o sonraki ders).

Günlük metin araçları

📊 Yaygın metin özellikleri

Özellik Günlük işi
text-align Metni satırında hizalar: left, right, center, justify
text-decoration Alt çizgi, üst çizgi veya üstü çizili ekler/kaldırır
text-transform Harf durumunu değiştirir: uppercase, lowercase, capitalize
line-height Her satırın yüksekliğini ayarlar — okunaklı paragrafların anahtarı
letter-spacing Harfler arası boşluğu ayarlar

Metni hizalayın

text-align metni içeren bloğun yatay eksenine yerleştirir.

Başlığı ortala

css
CSS Code 
.hero-title {
text-align: center;
color: #0f172a;
}

Süsleme — alt çizgi ve dostları

text-decoration metne çizgi çizer. Bağlantılar çoğu zaman alt çizgilidir; none ile kaldırın veya tasarım isterse underline / line-through ekleyin.

Süsleme örnekleri

css
CSS Code 
.link-quiet {
text-decoration: none;
color: #2563eb;
}

.sale {
text-decoration: line-through;
color: #64748b;
}

.note {
text-decoration: underline;
}

Harf durumunu dönüştürün

text-transform HTML metnini yeniden yazmadan harflerin görünümünü değiştirir.

Durum dönüşümleri

css
CSS Code 
.label {
text-transform: uppercase;
letter-spacing: 0.06em;
}

.city {
text-transform: capitalize;
}

Okunaklı paragraflar için satır yüksekliği

line-height satırların dikey ritmini kontrol eder. 1.5 gibi birimsiz değerler yazı boyutuyla ölçeklenir ve gövde metni için sakin bir seçimdir.

Rahat satır yüksekliği

css
CSS Code 
.article p {
line-height: 1.6;
color: #334155;
}

Harf aralığı — hafif dokunuş

Az letter-spacing kısa bir başlığı açabilir. Gövde paragraflarını tasarım gerçekten istemedikçe çoğunlukla doğal bırakın.

Hafif tracking’li başlık

css
CSS Code 
.section-title {
text-align: left;
text-transform: uppercase;
letter-spacing: 0.08em;
line-height: 1.3;
}

Kendiniz deneyin

  1. Bir h1’i text-align: center ile ortalayın.
  2. Bir bağlantının alt çizgisini text-decoration: none ile kaldırın; isterseniz hover’da geri getirin.
  3. Küçük bir etiketi text-transform: uppercase ile büyük harf yapın.
  4. Paragraf line-height’ini 1.6 yapıp 1.2 ile karşılaştırın.
  5. Bir başlığa küçük letter-spacing verin — hâlâ okunaklı mı kontrol edin.

Sık hatalar

  • text-align: center ile tüm blok düzenini ortalamayı ummak (bu layout işi, yalnızca metin değil)
  • Tasarım sakin bağlantı isterken her bağlantıyı alt çizgili bırakmak — veya başka işaret olmadan alt çizgiyi kaldırmak
  • Buraya font-family ve font-size işini getirmek (Fonts dersine ait)
  • Uzun paragraflarda kocaman letter-spacing (okumak zor)
  • Metin overflow üç nokta araçlarını bu temellerle karıştırmak (sonra)

Özet

  • text-align metni sola, sağa, ortaya veya justify hizalar
  • text-decoration alt çizgi ve benzer çizgileri ekler veya kaldırır
  • text-transform HTML düzenlemeden harf durumunu değiştirir
  • line-height paragraf okunabilirliğini şekillendirir
  • Hafif letter-spacing kısa başlıkları cilalayabilir
  • Yazı tipleri sonra gelir; bu ders metnin nasıl oturduğu ve okunduğu üzerinedir

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
8
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 26 / 35
Css Ders