Absätze veya tablo hücrelerinin içeriğini istediğiniz gibi hizalayabilirsiniz. Bu özellikleri sadece belirlenmiş veya hesaplanmış bir yükseklik veya genişliğe sahip diğer tüm öğelere de uygulayabilirsiniz.
İlk satırın girintisini ayarlama
İlk olarak, text-indent özelliğiyle başlayın. Bir paragrafın ilk satırının nasıl girintili olacağını belirlemek için kullanılır. Solda bir "çıkma" da mümkündür. Bunun için negatif bir text-indent değeri kullanılması gerekir. (Bu tür bir aşırı çıkmanın ne zaman mantıklı olabileceğine dair ayrıntılı bilgiler daha sonra verilecektir). Bir sayısal değer beklenmektedir.
Bir örnek:
.paragraf { text-indent: 2em; }
Tarayıcıda aşağıdakine benzer görünecektir:
Negatif bir değer kullandığınızda, ilk akış metni satırında bir metin çıkma olacaktır.
.paragraf {
text-indent: -2em;
}
Ve tabii ki, burada da tarayıcıdaki sonuca bir göz atıyoruz:
Böyle bir şey de mümkün. Ancak çıkıntıları tanımlarken içeriklerin istenildiği gibi okunabilir olduğundan emin olun. Gerçekte, aslında text-indent arama motoru optimizasyonu konusuyla da ilgili olabilir. Örneğin bazen metin yerine grafikler göstermek istenebilir.
ancak metnin arama motorları için hala erişilebilir olmasını istiyorsanız, başka bir problemle karşı karşıya kalabilirsiniz. Bu çatışma, text-indent özelliği kullanılarak çözülebilir. Çünkü bu özellik metinleri taşımanıza olanak tanır. Yani metinleri ziyaretçilerin görüş alanından kaydırabilirsiniz.
text-indent varyantının avantajı: Grafik ile değiştirilmesi gereken metin, kaynak metinde değişmeden mevcuttur.
<h1>PSD-Tutorials.de</h1>
...
h1 {
background: url(logo.png) 0 0 no-repeat;
text-indent: -99999px;
height:200px;
}
Bu sözdizimiyle h1 öğesine bir arka plan grafik atanır. (Bu seriye zaten tanıtılmış olan background özelliği). text-indent: -99999px ile başlık metnini 99999 piksel sola kaydırır ve metin görünmez hale gelir. Artık gerçekten yalnızca görüntülenen resim var.
Stil sayfasını devre dışı bırakırsanız, metin tekrar tamamen görünecektir.
Satır yüksekliğini belirleme
Genel font özelliğiyle ilgili olarak satır yüksekliğine zaten bir kez değinmiştim. Bu noktada konuyu biraz daha detaylı ele alacağız. Satır yüksekliğinin (line-height) yazı tipi boyutu (font-size) ile birlikte tanımlandığına dikkat çekicidir.
Satır yüksekliği line-height özelliği ile belirlenebilir. Sayısal ifadeler izinlidir. Yüzdesel değerler de mümkündür. Bu durum, satır yüksekliği belirtildiğinde tarayıcının/cihazın diğer özelliklere göre satırları kesmeye ve öğeleri kırpamaya öncelik verebileceği ve daha yüksek olanları kesme eğiliminde olabileceği anlamına gelir. Bu özellikle grafiklerde sinir bozucu olabilir. Bu yüzden sonuçları test edin ve sayfayı çevrimiçi yayınlamadan önce sonuçları gözlemleyin.
Aşağıdaki örnek, line-height nasıl kullanılacağını göstermektedir.
<p style="line-height:1.4em; font-size:1em;">Bazen harika bir düzen oluşturursunuz, ancak fotoğraflar hala eksik ve yalnızca boş çerçeveler kullanıyorsanız, düzen oldukça çıplak görünecektir. Daha iyi bir yol da var:<br /> Bu video eğitimde, ücretsiz uygun görüntü yer tutucularına hızlıca nasıl ulaşacağınızı göstereceğim. Harika bir liste örneği şurada bulabilirsiniz: <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">burada</a>.</p> <p style="line-height:2em;font-size:1em;">Bazen harika bir düzen oluşturursunuz, ancak fotoğraflar hala eksik ve yalnızca boş çerçeveler kullanıyorsanız, düzen oldukça çıplak görünecektir. Daha iyi bir yol da var:<br /> Bu video eğitimde, ücretsiz uygun görüntü yer tutucularına hızlıca nasıl ulaşacağınızı göstereceğim. Harika bir liste örneği şurada bulabilirsiniz: <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">burada</a>.</p> <p style="line-height:1em; font-size:1em;">Bazen harika bir düzen oluşturursunuz, ancak fotoğraflar hala eksik ve yalnızca boş çerçeveler kullanıyorsanız, düzen oldukça çıplak görünecektir. Daha iyi bir yol da var:<br /> Bu video eğitimde, ücretsiz uygun görüntü yer tutucularına hızlıca nasıl ulaşacağınızı göstereceğim. Harika bir liste örneği şurada bulabilirsiniz: <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">burada</a>.</p>
Burada üç metin paragrafı tanımlandı, her birine farklı satır yükseklikleri atandı.
Gördüğünüz gibi, satır yüksekliği ile akış metinlerinin okunabilirliği çok fazla etkilenebilir. Bu yüzden line-height özelliğini dikkatli kullanın.
Tabii ki, asıl soru şudur ki, aslında hangi satır yüksekliğini seçmek gerekiyor. Genellikle %130 ile %150 arasında satır yüksekliklerinden bahsedilir.
p {
line-height: 150%;
}
Ancak iyi okunurluk özellikle yazı tipinin genişliğine bağlıdır. Burada şunu unutmayın: Metin satırları ne kadar uzunsa, satır yüksekliği o kadar büyük olmalıdır. Bu nedenle mutlaka sayfayı kontrol edin ve okunabilirliğin gerçekten korunduğundan emin olun.
Yatay Metin Hizalaması
text-align özelliği, metin paragraflarının ve diğer blok elementlerde bulunan akış metinlerinin veya iç içe geçmiş elementlerin yatay hizalamasını belirler. text-align özelliği için aşağıdaki değerler ayarlanabilir:
• left – sola hizalamalı
• right – sağa hizalamalı
• center – ortalanmış
• justify – blok düzeyinde hizalamak için
Bunun için yine bir örnek:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}
</style>
</head>
<body>
<h1>PSD-Tutorials.de</h1>
<h2>PSD-Tutorials.de</h2>
<h3>PSD-Tutorials.de</h3>
</body>
</html>Ve tarayıcıda sonuç şu şekilde görünür:
Unutmayın ki text-align sadece metin içerikleri için geçerli değildir. Bu özellik aslında tüm iç içe geçmiş elementler için geçerlidir. Yani bir resim eklenirse, text-align tanımı bu öğe için de geçerli olacaktır.
Bir ipucu daha: text-align resmi olarak CSS spesifikasyonuna göre blok elementler üzerinde etkili olmamalıdır. (Ancak blok elementler üzerinde de etkili olabilecek tarayıcılar vardır). Eğer blok elementleri hizalamak istiyorsanız, bu durumlarda zaten tanıtılan margin özelliklerini kullanın.
