Schrift rengi color ile belirlenebilir. Beklenen şey bir renk değeridir.
p {
color: kırmızı;
}Değer olarak renk kelimeleri veya onaltılık renk değerini belirtebilirsiniz.
Yazı yönünü belirlemek
Özellik direction ile elemanlarda yazı yönü zorlanabilir. Özellikle sağdan sola yazılan dillerde ters yönlü yazı yönü ilginç olabilir.
Ayrıca buradan büyük içeriklerin hangi taraftan kesileceğini belirleyebilirsiniz.
• ltr – soldan sağa
• rtl – sağdan sola
Aşağıdaki örnek, özelliğin nasıl kullanılacağını göstermektedir.
.normal {direction:ltr;}
.rueckwaerts {direction:rtl;}
Burada iki sınıf tanımlanmıştır.
<p class="normal">Soldan sağa yazılan metin. 1 2 3 4 5 6 7 8 9 0</p> <p class="rueckwaerts">Sağdan sola yazılan metin. 1 2 3 4 5 6 7 8 9 0</p>
Sonuç tarayıcıda şu şekilde görünecektir:
Metinleri yatay yönde hizalamak
Özellik text-align metin paragraflarının ve blok ögelerdeki akış metinlerinin veya iç içe geçmiş ögelerin yatay hizalamasını belirler. Varsayılan ayar soldan hizalanmıştır.
• left – sola hizalanmış
• right – sağa hizalanmış
• center – merkezi
• justify – blok hizasında hizalamak
Bir örnek:
<p style="text-align:right;">
Hoş geldiniz
</p>
Sonuç şu şekildedir:
Dikey hizalama
Özellik vertical-align metnin yüksekliğiyle ilgili olarak bir satır içinde dikey metin hizasını belirler. Değer her zaman iç içe geçmiş bir öğeye yöneltilen, bir Inline öğeyi olmalı olan ana öğeye dayanır. Ayrıca tablolarda metni hizalayabilirsiniz.
Aşağıdaki değerler mevcuttur:
• sub – alt indisli
• super – üst indisli
• baseline – temel hizada hizalanmış
• top – Ana öğenin üst kenarına hizalama
• bottom – Ana öğenin alt kenarına hizalama
• middle – Ana öğenin üst ve alt kenarları arasında hizalanmış
• text-top – üst metin kenarı
• text-bottom – alt metin kenarı
• Uzunluk değeri – pozitif veya negatif bir değer öğeyi temel hizanın üzerine veya altına kaydırır.
• Yüzde değeri – pozitif veya negatif bir değer öğeyi temel hizanın üzerine veya altına kaydırır.
Bir örnek:
.baseline {
vertical-align: baseline;
}vertical-align değerlerinin tarayıcılar tarafından maalesef oldukça farklı yorumlandığını unutmayın. Sonuçları mutlaka test etmelisiniz çünkü sayfaları yayınlamadan önce.
Metin süsleme belirlemek
text-decoration metinlere veya bağlantılara ek özellikler atamak için kullanılır.
• none – hiçbir metin süslemesi yok
• underline – altı çizili
• overline – üstü çizili
• line-through – üstü çizili
• blink – yanıp sönen
Buraya da bir örnek:
a:link {
text-decoration: none;
}
Bu sayfadaki bağlantılar artık altı çizili değil.
Her kelimenin arasındaki mesafeyi de belirleyebilirsiniz.
<span style="word-spacing:0.5em">PSD-Tutorials.de'ye hoş geldiniz!</span><br /> <span style="word-spacing:1em"> PSD-Tutorials.de'ye hoş geldiniz!</span>
Bir sayısal değer beklenmektedir. Yüzde cinsinden ifadeler mümkün değildir.word-spacing gibi benzer bir özellik olan letter-spacing ise vardır. Ancak letter-spacing ile bir metnin harfleri arasındaki mesafe belirlenir. Burada da sayısal değerler ancak yüzdelik belirtiler kabul edilmez.
<span style="letter-spacing:0.1em">0.1em aralıklı örnek metin</span><br> <span style="letter-spacing:0.3em">0.3em aralıklı örnek metin</span><br>
text-transform özelliği ile metni büyük veya küçük harfli yapabilirsiniz. Ve bunu kaynak metindeki yazım biçiminden bağımsız olarak yapabilirsiniz. Ayrıca küçük büyük harf karışımı olabilir.
• lowercase – küçük harfli
• uppercase – büyük harfli
• capitalize – Kelime başları büyük harfli
• none – Metin dönüşümü yok
Bir örnek:
.klein {
text-transform: lowercase;
}Tarayıcıda sonuç şu şekilde görünecektir:
Boşluklar ve Satır Sonları
white-space özelliği, kaynak metinde bulunan boşlukların ve satır sonlarının tarayıcıda nasıl görüntüleneceğini belirler.
• normal – otomatik bir satır sonu eklenir. Ayrıca birden fazla boşluk bir araya getirilir.
• pre – Satır sonları, kaynak metinde olduğu gibi gösterilir.
• nowrap – Otomatik bir satır sonu gerçekleşmez.
• pre-line – Birden fazla boşluk bir araya getirilir. Ayrıca, görüntü için kutu yeterince büyük değilse bir satır sonu gerçekleşir.
• pre-wrap – Görüntü için kutu yeterince büyük değilse bir satır sonu gerçekleşir.
Bu konuya ilişkin bir örnek:
<pre class="brush:xml;"><!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
body>p {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
body p {
color:#0066FF;
}
</style>
</head>
<body>
<p>Absatz 1</p>
<p>Absatz 2</p>
<p>Absatz 3</p>
<div>
<p>Absatz 4</p>
</div>
</body>
</html></pre>Tarayıcıda sonuç şu şekildedir:
Gölge Ekleme
text-shadow özelliğiyle metinlere gölge eklemek mümkündür. Bu özellik, nispeten güncel tarayıcılarda desteklenir. text-shadow'ı yorumlayamayan tarayıcılar ise metni gölgesiz gösterir.text-shadow şu şekilde kullanılır:
text-shadow: hV vV blur #xxxxxx;
Ve değerlerin anlamı şudur:
• hV – Yatay Kaydırma
• vV – Dikey Kaydırma
• blur – Bulanıklık
• #xxxxxx – Gölge Rengi
Aşağıdaki örnek, text-shadow için tipik bir kullanımı gösterir.
.schatten {
color: #444;
font-size: 34px;
text-shadow: 2px 2px 3px #333;
}
Tanımlanan sınıf aşağıdaki birinci seviye başlıkta uygulanır.
<h1 class="schatten">PSD-Tutorials.de</h1>
Ve sonuca bir bakalım:
Önceden belirtildiği gibi, tarayıcılar tarafından text-shadow'ın yorumlanmaması olumsuz etki yaratmaz. Metin, gölgesiz bir şekilde görüntülenir.
