CSS Metin
CSS metin özellikleri ile HTML dosyamızdaki metinlerin niteliklerini istediğimiz gibi özelleştirebiliriz.
Örnekler
Metin Rengi
<html>
<body>
<style type="text/css">
h1 {color: green; font-family: "Arial Black"}
h2 {color: pink; font-family: "Arial Black"}
p {color: blue; font-family: "Arial Black"}
</style>
<h1> Bu bir baslik </h1>
<h2> Bu baska bir baslik </h2>
<p> Bu bir paragraf </p>
</body>
</html>
Arkası Renkli Metin
<html>
<body>
<style type="text/css">
span.renk {background-color: maroon; font-family: "Arial Black"}
</style>
<p> <span class="renk">Bu bir metin.</span> Bu bir metin. Bu bir metin. Bu bir metin. Bu bir metin. Bu bir metin. Bu bir metin. Bu bir metin. Bu bir metin. Bu bir metin. Bu bir metin. Bu bir metin. Bu bir metin. Bu bir metin. Bu bir metin. Bu bir metin. Bu bir metin. Bu bir metin. <span class="renk">Bu bir metin.</span> </p>
</body>
</html>
Karakterler Arası Boşluk Ayarları
<html>
<body>
<style type="text/css">
h1 {letter-spacing:-3px}
h2 {letter-spacing:0.5cm}
</style>
<h1>Bu bir baslik</h1>
<h2>Bu da diger baslik</h2>
</body>
</html>
Satır Aralığı Ayarı
<html>
<body>
<style>
p.kucuk {line-height:80%}
p.buyuk {line-height:160%}
</style>
<p>Bu standart satir araligina sahip paragraf. Bir cok tarayici icin standart satir yuksekligi %110 ve %120 civarlarindadir.</p>
<p class="kucuk">Bu paragrafin daha kucuk bir satir araligi var.Bu paragrafin daha kucuk bir satir araligi var. Bu paragrafin daha kucuk bir satir araligi var. Bu paragrafin daha kucuk bir satir araligi var.</p>
<p class="buyuk">Bu paragrafin daha buyuk bir satir araligi var. Bu paragrafin daha buyuk bir satir araligi var. Bu paragrafin daha buyuk bir satir araligi var. Bu paragrafin daha buyuk bir satir araligi var. </p>
</body>
</html>
Metin Yeri Ayarı
<html>
<body>
<style type="text/css">
h1.bir {text-align: center}
h2.iki {text-align: left}
h2.uc {text-align: right}
</style>
<h1 class="bir">Birinci Baslik</h1>
<h2 class="iki">ikinci Baslik</h2>
<h2 class="uc">Ucuncu Baslik</h3>
</body>
</html>
Metin Dekorasyonu
<html>
<body>
<style type="text/css">
h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
h4 {text-decoration: blink}
a {text-decoration: none}
</style>
<h1>Bu bir baslik</h1>
<h2>Bu bir baslik</h2>
<h3>Bu bir baslik</h3>
<h4>Bu bir baslik</h4>
<a href="http:html.uzerine.com">Bu bir link</a>
</body>
</html>
Paragraf Başlangıcında Boşluk Bırakma
<html>
<body>
<style type="text/css">
p {text-indent: 40px}
</style>
<p>Bu bir paragraf icindeki bir takim yazı bu bir paragraf icindeki bir takim yazı bu bir paragraf icindeki bir takim yazı bu bir paragraf icindeki bir takim yazı bu bir paragraf icindeki bir takim yazı bu bir paragraf icindeki bir takim yazı.</p>
</body>
</html>
Büyük - Küçük Harf Ayarları
<html>
<body>
<style type="text/css">
p.bir {text-transform: capitalize}
p.iki {text-transform: lowercase}
p.uc {text-transform: uppercase}
</style>
<p class="bir">Bu bir paragraf icindeki bir takim yazı</p>
<p class="iki">Bu bir paragraf icindeki bir takim yazı</p>
<p class="uc">Bu bir paragraf icindeki bir takim yazı</p>
</body>
</html>
Metin Yönü Ayarları
<html>
<body>
<style type="text/css">
div.bir {direction: rtl}
div.iki {direction: ltr}
</style>
<div class="bir">Bu bir paragraf icindeki bir takim yazı</div>
<div class="iki">Bu bir paragraf icindeki bir takim yazı</div>
</body>
</html>
Kelime Arası Boşluklar Ayarı
<html>
<body>
<style type="text/css">
p {word-spacing: 25px}
</style>
<p>Bu bir paragraf icindeki bir takim yazı</p>
</body>
</html>
Bir Sonraki Satıra Geçmenin İptal Edilişi
<html>
<body>
<style type="text/css">
p {white-space: nowrap}
</style>
<p>Bu bir paragraf icindeki bir takim yazı. Bu bir paragraf icindeki bir takim yazı. Bu bir paragraf icindeki bir takim yazı. Bu bir paragraf icindeki bir takim yazı. Bu bir paragraf icindeki bir takim yazı. Bu bir paragraf icindeki bir takim yazı. Bu bir paragraf icindeki bir takim yazı. </p>
</body>
</html>
Sonraki ders için tıklayınız...
Copyright © 2005 Uzerine.com