CSS ile metinleri şekillendirmek, bir web sayfasını hem görsel açıdan daha çekici hale getirir hem de okunabilirliğini artırır. Bu yazıda, metinleri hizalamak, kalınlaştırmak, süslemek ve aralarındaki boşlukları kontrol etmek gibi yaygın CSS özelliklerini detaylı bir şekilde ele alacağız. Yazının sonunda, bu özellikleri nasıl etkili bir şekilde kullanabileceğinizi öğrenmiş olacaksınız.
1. Metin Hizalama: text-align
text-align, metinlerin yatay hizalamasını kontrol etmek için kullanılır. Metin, bir elemanın içindeki kutunun soluna, sağına veya ortasına hizalanabilir.
Örnek:
<h1 class="center">Bu metin ortalanmış.</h1>
<p class="right">Bu metin sağa hizalanmış.</p>
<p class="justify">Bu metin iki yana yaslanmış.</p>
.center {
text-align: center;
}
.right {
text-align: right;
}
.justify {
text-align: justify;
}
Metin Hizalama Örnek Çıktıları:
Ortalanmış Metin
--------------------------------------
Bu metin ortalanmış.
--------------------------------------
Sağa Hizalanmış Metin
--------------------------------------
Bu metin sağa hizalanmış.
--------------------------------------
İki Yana Yaslanmış Metin
--------------------------------------
Bu metin iki yana yaslanmış. Bu metin
iki yana yaslanmış. Bu metin iki yana
yaslanmış. Bu metin iki yana yaslanmış.
--------------------------------------
Bu CSS ile yapılan hizalama, sayfanın genişliğine ve içeriğin uzunluğuna bağlı olarak farklı şekillerde görüntülenebilir.
2. Yazı Kalınlığı: font-weight
font-weight, metnin ne kadar kalın veya ince görüneceğini belirler.
Örnek:
<h2 class="bold">Bu metin kalın.</h2>
<p class="light">Bu metin ince.</p>
.bold {
font-weight: bold;
}
.light {
font-weight: 300;
}
Çıktı:
- Bu metin kalın.
- Bu metin ince.
3. Metin Dekorasyonu: text-decoration
text-decoration, metne eklenen dekoratif çizgileri kontrol eder.
Örnek:
<a href="#" class="no-decoration">Altı çizgisiz link</a>
<h1 class="underline">Bu metnin altı çizili.</h1>
<p class="strikethrough">Bu metnin üstü çizili.</p>
.no-decoration {
text-decoration: none;
}
.underline {
text-decoration: underline;
}
.strikethrough {
text-decoration: line-through;
}
Çıktı:
4. Satır Yüksekliği: line-height
line-height, bir metnin satırlarının yüksekliğini kontrol eder.
Örnek:
<p class="line-height">Bu metin daha geniş satır aralığına sahiptir.</p>
.line-height {
line-height: 1.8;
}
Çıktı:
Bu metin daha geniş satır aralığına sahiptir. Daha okunaklı bir paragraf oluşturmak için line-height kullanabilirsiniz.
5. Harf Aralığı: letter-spacing
letter-spacing, harfler arasındaki yatay boşluğu kontrol eder.
Örnek:
<h1 class="letter-space">Araları Açılmış</h1>
<p class="letter-tight">Araları Daralmış</p>
.letter-space {
letter-spacing: 3px;
}
.letter-tight {
letter-spacing: -1px;
}
Çıktı:
- A r a l a r ı A ç ı l m ı ş
- AralarıDaralmış
6. Kombinasyonlarla Çalışma
Birden fazla özelliği bir arada kullanarak etkileyici tasarımlar oluşturabilirsiniz.
Örnek:
<h1 class="styled">Stil Uygulanmış Metin</h1>
.styled {
text-align: center;
font-weight: bold;
text-decoration: underline;
line-height: 1.8;
letter-spacing: 3px;
}
Çıktı:
Stil Uygulanmış Metin (Ortalanmış, Kalın, Altı Çizili, Satır Aralığı Artırılmış, Harf Aralıkları Açılmış)
7. Pratik İpuçları
- Okunabilirlik Önceliğiniz Olsun:
line-height ve letter-spacing değerlerini abartmadan kullanın.
- Hata Ayıklama: Bir özellik çalışmıyorsa,
; unutup unutmadığınızı kontrol edin.
- Varsayılan Değerler: Tarayıcılar genellikle
text-align: left ve font-weight: normal gibi varsayılan ayarlarla çalışır.
Sonuç
CSS’te metin özellikleri, web sayfanızın görünümünü şekillendirmek için güçlü bir araçtır. Bu yazıda öğrendiğiniz text-align, font-weight, text-decoration, line-height ve letter-spacing gibi özellikler, metinlerinizi daha okunabilir ve görsel olarak etkileyici hale getirmenize yardımcı olacaktır. Artık bu özellikleri kendi projelerinizde deneyebilir ve farklı kombinasyonlarla tasarım becerilerinizi geliştirebilirsiniz.