text-align
Bu özellik yazının yatay olarak hangi tarafa hizalanacağını belirler. left değeri sola, right değeri sağa hizalamaya yarar. center değeri ile ortalama yapılırken justify değeri yazının iki yana yaslanmasını sağlar.
<!DOCTYPE html>
<html>
<head>
<title>CSS Yazılar</title>
<meta charset="UTF-8">
<style>
p{
border-style:solid;
border-color:red;
}
p.sol{
text-align:left;
}
p.sag{
text-align:right;
}
p.orta{
text-align:center;
}
p.iki{
text-align:justify;
}
</style>
</head>
<body>
<p class="sol" style="width:200px">Bu paragraf sola hizalanarak gösterilecektir.</p>
<p class="sag" style="width:200px">Bu paragraf sağa hizalanarak gösterilecektir.</p>
<p class="orta" style="width:200px">Bu paragraf ortalanarak gösterilecektir.</p>
<p class="iki" style="width:200px">Bu paragraf iki yana yaslanarak gösterilecektir.</p>
</body>
</html>
Bu özellik kullanıldığında alt elemanlar da bu biçimlendirmeden etkilenir.
text-align-last
Bu özellik text-align özelliği ile justify değeri kullanılarak biçimlendirilmiş elemanlarda kullanılabilir ve son satırın nasıl hizalanacağını belirler. Bu özellik yazının yazıldığı an itibarı ile Safari ve Opera tarafından desteklenmemektedir. Mozilla Firefox ise -moz-text-align-last şeklindeki bir versiyonunu desteklemektedir.
Varsayılan değer olan auto son satırı yazı sağdan solaysa sağa, soldan sağaysa sola hizalar. left ve right değerleri sırasıyla son satırı sola ve sağa hizalar. center değeri kullanılırsa son satır ortalanır, justify değerinin kullanılması durumunda ise son satır da iki yana yaslanır. start değeri son satırı yazı sağdan solaysa sağa, soldan sağaysa sola hizalar. end değeri ise son satırı yazı sağdan solaysa sola, soldan sağaysa sağa hizalar. Fakat bu son iki değer Internet Explorer tarafından desteklenmemektedir.
<!DOCTYPE html>
<html>
<head>
<title>CSS Yazılar</title>
<meta charset="UTF-8">
<style>
p{
border-style:solid;
border-color:red;
}
p.sol{
text-align:justify;
text-align-last:left;
}
p.sag{
text-align:justify;
text-align-last:right;
}
p.orta{
text-align:justify;
text-align-last:center;
}
p.iki{
text-align:justify;
text-align-last:justify;
}
</style>
</head>
<body>
<p class="sol" style="width:200px">Bu paragrafın son satırı sola hizalanacaktır.</p>
<p class="sag" style="width:200px">Bu paragrafın son satırı sağa hizalanacaktır.</p>
<p class="orta" style="width:200px">Bu paragrafın son satırı ortalanacaktır.</p>
<p class="iki" style="width:200px">Bu paragrafın son satırı iki yana yaslanacaktır.</p>
</body>
</html>
Bu özellik kullanılarak yapılan biçimlendirmeler alt elemanı da etkiler.
text-justify
Bu özellik de text-align özelliği ile justify değeri kullanılarak biçimlendirilmiş elemanlarda kullanılabilir ve yazıların iki tarafa yaslanmış olması için uygulanacak ayarlama yöntemini belirler. Kullanılabilecek değerler auto, inter-word, inter-ideograph, inter-cluster, distribute, kashida, trim ve none olarak sıralanabilir. Her bir değer bir yöntemi ifade eder. Bu özelliği destekleyen tek tarayıcı yazının yazıldığı an itibarı ile Internet Explorer'dır.
text-decoration ve text-decoration-line
text-decoration özelliği yazının üzerine, üstüne ya da altına çizgi eklemeye yarar. Kullanılabilecek değerler varsayılan değer olan none, overline, underline ve line-through olmak üzere dört tanedir. none değeri hiçbir çizginin olmayacağını, overline yazının üstünde çizgi olacağını, underline yazının altında çizgi olacağını ve line-through yazının üzeri çizili olacağını belirtir.
text-decoration-line özelliği de aynı amaç için tanımlanmıştır ve kullanabileceği değerler aynıdır. Fakat bu özellik yazının yazıldığı an itibarı ile hiçbir tarayıcı tarafından desteklenmektedir. Sadece Mozilla Firefox -moz-text-decoration-line şeklindeki versiyonunu desteklemektedir.
<!DOCTYPE html>
<html>
<head>
<title>CSS Yazılar</title>
<meta charset="UTF-8">
<style>
p.normal{
text-decoration:none;
}
p.alt{
text-decoration:underline;
}
p.ust{
text-decoration:overline;
}
p.uzericizili{
text-decoration:line-through;
}
</style>
</head>
<body>
<p class="normal">Normal yazı örneği</p>
<p class="alt">Altında çizgi olan yazı örneği</p>
<p class="ust">Üstünde çizgi olan yazı örneği</p>
<p class="uzericizili">Üzeri çizili yazı örneği</p>
</body>
</html>
Bu özellik kullanılarak yapılan biçimlendirmeler alt elemanları etkilemez.
text-decoration-color
Bu özellik ile text-decoration özelliği ile yazıya eklenen çizginin rengi değiştirilebilir. Değer olarak bir renk girilmelidir. CSS3 taslağında bulunmasına rağmen yazının yazıldığı an itibarı ile hiçbir tarayıcı tarafından desteklenmemektedir. Sadece Mozilla Firefox -moz-text-decoration şeklindeki bir versiyonu desteklenmektedir. Bu özellik ile yapılan biçimlendirmeler alt elemanları etkilemez.
text-decoration-style
Bu özellik ile text-decoration özelliği ile yazıya eklenen çizginin şekli değiştirilebilir. Değer olarak solid, double, dotted, dashed ve wavy girilebilir. Varsayılan değer olan solid normal sürekli çizgiyi temsil eder. double değeri çift çizgi, dotted değeri noktalı çizgi, dashed değeri kesikli çizgi ve wavy değeri dalgalı çizgi manasına gelir. CSS3 taslağında bulunmasına rağmen bu özellik yazının yazıldığı an itibarı ile hiçbir tarayıcı tarafından desteklenmemektedir. Sadece Mozilla Firefox -moz-text-style şeklindeki bir versiyonu desteklenmektedir. Bu özellik ile yapılan biçimlendirmeler alt elemanları etkilemez.
<!DOCTYPE html>
<html>
<head>
<title>CSS Yazılar</title>
<meta charset="UTF-8">
<style>
p.solid{
text-decoration:underline;
-moz-text-decoration-style:solid;
-moz-text-decoration-color:red;
}
p.double{
text-decoration:underline;
-moz-text-decoration-style:double;
-moz-text-decoration-color:blue;
}
p.dotted{
text-decoration:underline;
-moz-text-decoration-style:dotted;
-moz-text-decoration-color:green;
}
p.dashed{
text-decoration:underline;
-moz-text-decoration-style:dashed;
-moz-text-decoration-color:yellow;
}
p.wavy{
text-decoration:underline;
-moz-text-decoration-style:wavy;
-moz-text-decoration-color:#00FF00;
}
</style>
</head>
<body>
<p class="solid">Kırmızı normal çizgi</p>
<p class="double">Mavi çift çizgi</p>
<p class="dotted">Yeşil noktalı çizgi</p>
<p class="dashed">Sarı kesikli çizgi</p>
<p class="wavy">Yeşil dalgalı çizgi</p>
</body>
</html>
Yukarıdaki örnek sadece Mozilla Firefox'ta çalışacaktır.
text-shadow
Bu özellik ile yazılara gölge verilebilir girilecek değer şu formatta olmalıdır: "y-gölge d-gölge bulanıklık renk". Burada y-gölge değeri bir uzunluktur ve gölgenin yatay olarak yazıdan ne kadar uzakta olacağını belirtir. Negatif değerler de girilebilir. d-gölge değeri de bir uzunluktur ve gölgenin dikey olarak yazıdan ne kadar uzakta olacağını belirtir. Bu değer de negatif olabilir. Bulanıklık da uzunluk olarak ifade edilir ve gölgenin bulanıklık boyutunu belirler. Renk kısmı da gölgenin rengini belirler.
<!DOCTYPE html>
<html>
<head>
<title>CSS Yazılar</title>
<meta charset="UTF-8">
<style>
#ornek1{
text-shadow: 3px 3px 10px red;
}
#ornek2{
text-shadow: 5px 5px 2px blue;
}
</style>
</head>
<body>
<p id="ornek1">Örnek Gölge 1</p>
<p id="ornek2">Örnek Gölge 2</p>
</body>
</html>
Bu özellik ile yapılan biçimlendirmeler alt elemanları da etkiler.
text-transform
Bu özellik ile yazının büyük-küçük harf düzeninde biçimlendirme yapılabilir. Varsayılan değer olan none kullanılırsa yazı nasıl yazıldıysa öyle görüntülenir. uppercase değeri kullanıldığında tüm harfler büyük harfe, lowercase değeri kullanıldığında tüm harfler küçük harfe dönüştürülür. capitalize değeri ise her kelimenin ilk harfini büyük harfe dönüştürür. Bu özellikle yapılan biçimlendirmeler alt elemanları da etkiler.
<!DOCTYPE html>
<html>
<head>
<title>CSS Yazılar</title>
<meta charset="UTF-8">
<style>
p.normal{
text-transform:none;
}
p.buyuk{
text-transform:uppercase;
}
p.kucuk{
text-transform:lowercase;
}
p.kelime{
text-transform:capitalize;
}
</style>
</head>
<body>
<p class="none">Normal yazı örneği</p>
<p class="buyuk">Büyük harflere dönüştürülmüş yazı örneği</p>
<p class="kucuk">Küçük harflere dönüştürülmüş yazı örneği</p>
<p class="kelime">Kelimelerinin ilk harfleri büyük harfe dönüştürülmüş yazı örneği</p>
</body>
</html>
text-overflow
Bu özellik ile içinde bulunduğu kutuya sığmayan yazılar biçimlendirilebilir. Bu biçimendirmenin işe yaraması için öncelikle overflow özelliği ile taşan kısmın görünmemesi sağlanmalıdır. Varsayılan değer olan clip değeri kullanılırsa taşan yazı kırpılır. Girilebilecek bir diğer değer ellipsis değeridir. Bu durumda yazı taşmaya başladığında taşan kısım yerine (...) konur. Bu özellikle yapılan biçimlendirmeler alt elemanları etkilemez.
<!DOCTYPE html>
<html>
<head>
<title>CSS Yazılar</title>
<meta charset="UTF-8">
<style>
p{
border-style:solid;
border-color:black;
width:200px;
white-space:nowrap;
overflow:hidden;
}
p.clip{
text-overflow:clip;
}
p.ellipsis{
text-overflow:ellipsis;
}
</style>
</head>
<body>
<p class="clip"> clip değeri ile biçimlendirilmiş örnek yazı</p><br/>
<p class="ellipsis"> ellipsis değeri ile biçimlendirilmiş örnek yazı</p><br/>
</body>
</html>
text-indent
Bu özellik kullanılarak eleman içerisindeki yazıların ilk satırının girintisi belirtilebilir. Girilecek değer uzunluk ya da yüzde cinsinden olmalıdır. Yüzdeli değer kullanılırsa baz alınacak uzunluk bir üst elemanın genişliğidir. Bu özellik ile yapılan biçimlendirmeler alt elemanları da etkiler.
<!DOCTYPE html>
<html>
<head>
<title>CSS Yazılar</title>
<meta charset="UTF-8">
<style>
p.ana{
text-indent: 30px
}
p.alt{
text-indent: 50px;
}
</style>
</head>
<body>
<p class="ana"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="alt"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
Genel Özellikler <<<<< CSS3 >>>>> word- ile Başlayan Özellikler