color
CSS ile yazıları biçimlendirilirken kullanılan özelliklerden birisi color özelliğidir. Bu özellikle elemanlar içerisindeki yazının rengi belirlenir. Bu özelliğin karşısına HTML ve CSS'te tanımlı renk isimlerinden birisi ya da bir renk kodu girilmelidir. Seçiciler kısmındaki örneklerin çoğunluğu bu özellik kullanılarak yapılmıştır.
Bu özelliğe değer olarak transparent kelimesi de girilebilir. Bu değer yazının şeffaf olmasına karşılık gelir.
Eğer bu özellik bir elemanda kullanılırsa alt elemanları için de aynı biçimlendirme geçerli olur.
line-height
Bu özellikle elemanların içine yazılan yazıların satır yüksekliği biçimlendirilir. Girilebilecek değerlerin ilki normal değeridir ki bu zaten varsayılan değerdir. Bu değer satır yüksekliğinin mevcut fontta belirlenen ile aynı olacağını belirtir.
Girilebilecek diğer değerler bir uzunluk, sayı ya da yüzdeli değer olabilir. Eğer bir uzunluk girilirse bu uzunluk doğrudan biçimlendirilen yazının satır yüksekliği olur. Bu özellik karşısına sayı girilirse biçimlendirilen yazının sayı yüksekliği mevcut font yüksekliğinin bu sayı ile çarpılmış halidir. Yüzdeli değerle de yazı yüksekliğinin mevcut font yüksekliğinin yüzde kaçı olacağı belirtilir.
Bu özelliğin yazının değil satırın yüksekliğini değiştirdiği akıldan çıkarılmamalıdır. Bu değeri değiştirmenin etkisi eleman içerisindeki satırlar arasındaki boşluğun değişimidir. Aşağıdaki örnekte farklı değerlerin etkileri görülebilir.
<!DOCTYPE html>
<html>
<head>
<title>CSS Yazılar</title>
<style>
p.sayi{
line-height:2;
}
p.yuzde{
line-height:50%;
}
p.uzunluk{
line-height:32px;
}
</style>
</head>
<body>
<p>Örnek Paragraf 1<br>
Örnek Paragraf 1<br>
Örnek Paragraf 1</p>
<p class="sayi">Örnek Paragraf 2<br>
Örnek Paragraf 2<br>
Örnek Paragraf 2</p>
<p class="yuzde">Örnek Paragraf 3<br>
Örnek Paragraf 3<br>
Örnek Paragraf 3</p>
<p class="uzunluk">Örnek Paragraf 4<br>
Örnek Paragraf 4<br>
Örnek Paragraf 4</p>
</body>
</html>
Bu özelliğin kullanılması durumunda biçimlendirmeden alt elemanlar da etkilenir.
letter-spacing
Bu özellik kullanılarak bir elemanın içerisindeki yazıların harfleri arasındaki boşluk belirlenir. Varsayılan değer olan normal harfler arasına fazladan boşluk konmamasını sağlar. Bunun dışında girilebilecek değerler uzunluktur. Negatif değerler de girilebilir.
<!DOCTYPE html>
<html>
<head>
<title>CSS Yazılar</title>
<style>
p.pozitif{
letter-spacing:2px;
}
p.pozitif2{
letter-spacing:4px;
}
p.negatif{
letter-spacing:-3px;
}
</style>
</head>
<body>
<p>Örnek Paragraf 1</p>
<p class="pozitif">Örnek Paragraf 2</p>
<p class="pozitif2">Örnek Paragraf 3</p>
<p class="negatif">Örnek Paragraf 4</p>
</body>
</html>
direction
Bu özellik kullanılarak yazının yönü belirtilir. Varsayılan değer olan ltr soldan sağa rtl ise sağdan sola anlamını taşır. Bu özellik harf sırasını değiştirmez sadece yerleşimi belli bir yöne göre yapar. Eğer bu özellik bir elemanda kullanılırsa alt elemanlar da bu biçimlendirmeden etkilenir.
unicode-bidi
unicode-bidi özelliği direction özelliği ile birlikte kullanılır ve yazı yönüyle ilgili ek işlevler sağlar. Varsayılan değer olan normal değerinin ek bir işlevi yoktur. embed özelliği yazının direction ile verilen yön ile uyumlu olacağını belirtir ve etrafındaki diğer yazılarla etkileşiminde direction özelliğinde belirtilen değerin kullanılmasını sağlar.
<!DOCTYPE html>
<html>
<head>
<title>CSS Yazılar</title>
<meta charset="UTF-8">
<style>
span.bidi{
direction:ltr;
unicode-bidi:embed;
}
</style>
</head>
<body>
<p><span>تهران</span>:15.800.000</p>
<p><span class="bidi">تهران</span>:15.800.000</p>
</body>
</html>
Örneğin yukarıdaki koddaki varsayılan olarak Farsça yazılar sağdan sola yazılıyor da olsa ikinci paragrafta soldan sağa gibi davranması sağlanmıştır. Bu özelliğe girilecek bidi-override değeri de embed değeri ile aynı işi yapar. Fakat bu değer ek olarak yazıdaki harf sırasını da direction özelliğinde belirtildiği gibi düzenler.
<!DOCTYPE html>
<html>
<head>
<title>CSS Yazılar</title>
<meta charset="UTF-8">
<style>
span.bidi{
direction:ltr;
unicode-bidi:bidi-override;
}
</style>
</head>
<body>
<p><span>تهران</span>:15.800.000</p>
<p><span class="bidi">تهران</span>:15.800.000</p>
</body>
</html>
Yukarıdaki örnekte Farsça yazıdaki harflerin sırası da değişecektir. Bu özellik de kullanıldığı elemanın alt elemanlarını da etkiler.
vertical-align
Bu özellikle yazıların dikey olarak hizalanması sağlanır. Varsayılan değer baseline değeridir ve bu durumda yazının alt kısmı üst elemandaki yazıların alt kısmına hizalanır. middle değeri girilecek olursa eleman içerisindeki yazı üst elemandaki küçük harflerin ortasına hizalanır. sub ve super değerleriyle yazıların sırasıyla indis ve üs gibi hizalanması sağlanır.
<!DOCTYPE html>
<html>
<head>
<title>CSS Yazılar</title>
<meta charset="UTF-8">
<style>
span.baseline{
vertical-align:baseline;
}
span.middle{
vertical-align:middle;
}
span.sub{
vertical-align:sub;
}
span.super{
vertical-align:super;
}
</style>
</head>
<body>
<p>Örnek Paragraf<span class="baseline">baseline</span></p>
<p>Örnek Paragraf<span class="middle">middle</span></p>
<p>Örnek Paragraf<span class="sub">sub</span></p>
<p>Örnek Paragraf<span class="super">super</span></p>
</body>
</html>
Bu özelliğin karşısına uzunluk ya da yüzdeli değer de girilebilir. Yazı girilen uzunluk değeri kadar yukarı hizalanır, negatif değerler girilmesi durumunda yazı daha aşağıda hizalanacaktır. Yüzdeli değerde ise yazı satır yüksekliğinin belirtilen oranı kadar yukarıda hizalanır. Negatif değerler girilmesi durumunda burada da daha aşağıda hizalama uygulanacaktır.
<!DOCTYPE html>
<html>
<head>
<title>CSS Yazılar</title>
<meta charset="UTF-8">
<style>
span.uzunluk{
vertical-align:10px;
}
span.negatifuzunluk{
vertical-align:-10px;
}
span.yuzde{
vertical-align:50%;
}
span.negatifyuzde{
vertical-align:-50%;
}
</style>
</head>
<body>
<p>Örnek Paragraf<span class="uzunluk">Hizalama</span></p>
<p>Örnek Paragraf<span class="negatifuzunluk">Hizalama</span></p>
<p>Örnek Paragraf<span class="yuzde">Hizalama</span></p>
<p>Örnek Paragraf<span class="negatifyuzde">Hizalama</span></p>
</body>
</html>
text-bottom değeri kullanılırsa yazının tabanı üst elemandaki yazıların tabanına hizalanır. text-top değeri kullanılırsa yazının en üstü üst elemandaki elemanın en üstüne hizalanır. Aşağıdaki örnekte font boyutu farklı elemanlar kullanılarak bu değerlerin çalışması gösterilmiştir.
<!DOCTYPE html>
<html>
<head>
<title>CSS Yazılar</title>
<meta charset="UTF-8">
<style>
span.textbottom{
vertical-align:text-bottom;
}
span.texttop{
vertical-align:text-top;
}
</style>
</head>
<body>
<p>Örnek Paragraf<span class="textbottom" style="font-size:75%"> Hizalama</span></p>
<p>Örnek Paragraf<span class="texttop" style="font-size:75%"> Hizalama</span></p>
</body>
</html>
top değeri kullanılırsa yazının en üstü satırdaki en yüksek yazının üstüne hizalanır. bottom değeri kullanılırsa yazının tabanı satırdaki yazıların en altına hizlanır.
<!DOCTYPE html>
<html>
<head>
<title>CSS Yazılar</title>
<meta charset="UTF-8">
<style>
span.bottom{
vertical-align:bottom;
}
span.top{
vertical-align:top;
}
</style>
</head>
<body>
<p><span style="font-size:2em">Büyük yazı</span>
<span class="bottom" style="font-size:75%"> Hizalama</span>
<span style="font-size:3em> Daha büyük yazı</span></p>
<p><span style="font-size:2em>Büyük yazı</span>
<span class="top" style="font-size:75%"> Hizalama</span>
<span style="font-size:3em"> Daha büyük yazı</span></p>
</body>
</html>
Yukarıdaki örnekte hizlanmanın satıra göre ayarlandığını görebilmek için pencere boyutunu küçültüp büyütebilirsiniz. Bu özellikle yapılan biçimlendirme alt elemanları etkilemez.
white-space
Bu özellikle yazılardaki boşlukların nasıl değerlendirileceği belirtilir. Varsayılan değer olan normal yan yana gelen birden fazla boşlukların tek boşluğa dönüştürülerek gösterilmesini sağlar, alt satıra inişler de yine boşluk gibi görüntülenir. Gerekli olan durumlarda metin kendiliğinden alt satırdan devam eder.
nowrap değeri kullanılırsa metinin <br> elemanı ile karşılaşılmadığı sürece aynı satırda devam etmesi sağlanır. Boşluklar ve alt satıra geçişler tek boşluğa dönüştürülerek görüntülenir.
pre değeri kullanılırsa boşluklar ve alt satıra geçişler yazıldığı gibi görüntülenir ve metin kendiliğinden alt satıra geçmez.
pre-line değeri kullanıldığında birden fazla boşluklar yine tek boşluğa dönüştürülür, tarayıcı gerekli gördüğünde metne alt satırda devam eder fakat kullanıcının alt satıra geçişleri de görüntülenir.
pre-wrap değeri kullanıldığında boşluklar ve alt satıra geçişler kullanıcı tarafından yazıldığı şekilde görüntülenir fakat tarayıcı da gerekli gördüğünde alt satıra geçebilir.
<!DOCTYPE html>
<html>
<head>
<title>CSS Yazılar</title>
<meta charset="UTF-8">
<style>
div{
border-style:solid;
border-color:black;
}
p.normal{
white-space:normal;
}
p.nowrap{
white-space:nowrap;
}
p.pre{
white-space:pre;
}
p.preline{
white-space:pre-line;
}
p.prewrap{
white-space:pre-wrap;
}
</style>
</head>
<body>
<div style="width:200px"><p class="normal">Normal
white-space özelliği ile biçimlendirilmiş örnek bir yazı</p></div><br/>
<div style="width:200px"><p class="nowrap">Nowrap
white-space özelliği ile biçimlendirilmiş örnek bir yazı</p></div><br/>
<div style="width:200px"><p class="pre">Pre
white-space özelliği ile biçimlendirilmiş örnek bir yazı</p></div><br/>
<div style="width:200px"><p class="preline">Pre-line
white-space özelliği ile biçimlendirilmiş örnek bir yazı</p></div><br/>
<div style="width:200px"><p class="prewrap">Pre-wrap
white-space özelliği ile biçimlendirilmiş örnek bir yazı</p></div><br/>
</body>
</html>
Yukarıdaki örnekte boşlukların korunup korunmaması ve tarayıcının sınırlara geldiğinde kendiliğinden alt satıra geçip geçmemesi gözlemlenebilir. Bu özellikle yapılan biçimlendirmeler alt elemanlara da uygulanır.
tab-size
Bu özellikle TAB tuşunun karşılık geldiği karakter sayısı belirtilir. Varsayılan değer 8'dir. Bu özellikle yapılan biçimlendirmeler alt elemanları da etkiler. Bu özellik Internet Explorer tarafından desteklenmemektedir. Mozilla Firefox ise -moz-tab-size şeklindeki bir versiyonunu desteklemektedir. CSS3 taslağında bu özelliğin karşısına değer olarak uzunluk da girilebileceği söylenmiştir fakat yazının yazıldığı an itibarı ile bu durum hiçbir tarayıcı tarafından desteklenmemektedir.
<!DOCTYPE html>
<html>
<head>
<title>CSS Yazılar</title>
<meta charset="UTF-8">
<style>
p.ornek1{
tab-size:4;
white-space:pre;
}
p.ornek2{
tab-size:16;
white-space:pre;
}
</style>
</head>
<body>
<p class="ornek1" >Bu yazıdaki TAB değeri 4'tür.</p>
<p class="ornek2" >Bu yazıdaki TAB değeri 16'dır.</p>
</body>
</html>
Bu özelliğin doğru çalışabilmesi için elemanın boşlukları yazıldığı gibi gösterebilmesi gereklidir. Bu da <pre> elemanı ya da herhangi bir elemanda white-space özelliği kullanılarak yapılabilir.
quotes
Bu özellikle <q> elemanında kullanılacak tırnak işaretlerinin şekli belirlenebilir. none değeri girilirse tırnak işaretleri kullanılmaz. Bunun dışında dört tane dizgi kullanılabilir, ilk iki dizgi tırnak işaretlerinin açılış ve kapanıştaki şekilleri olacaktır. Son iki dizgi ise iç içe iki alıntı olduğunda içteki tırnak işaretlerinin açılış ve kapanış şekillerini belirler.
<!DOCTYPE html>
<html>
<head>
<title>CSS Yazılar</title>
<meta charset="UTF-8">
<style>
q{
quotes: "<<" ">>" "<" ">";
}
</style>
</head>
<body>
<q>Örnek alıntı</q><br>
<q>Örnek <q>alıntı</q> içinde alıntı</q>
</body>
</html>
Diğer Seçiciler <<<<< CSS3 >>>>> text- ile Başlayan Özellikler