Anasayfa


Haber bülteni üyeliği



Ziyaret Bilgileri

[ Per, 28 Mar 2024 ]
Toplam 4 ziyaret
4 benzersiz ziyaretçi

css » CSS Metin

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>

ornek1


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>

ornek2


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>

ornek3

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>

ornek4


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>

ornek5

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>

ornek6


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>

ornek7

 

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>

ornek8

 

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>

ornek9

 

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>

ornek10

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>

ornek11

 

Sonraki ders için tıklayınız...

Editör Bilgileri

Mehmet Emrah Konya

Zibidi


Editöre Ulaşın

En Son Eklenenler

x-isini-pulsari
yaz-ucgeni
yerel-kabarcik
yildizlar-arasi-yolculuk
zhai-zhigang
avusturya-uzay-ajansi
birlesik-krallik-uzay-ajansi

Uzerine.com Copyright © 2005 Uzerine.com
uzerine.com Ana Sayfa | Gizlilik Sözleşmesi | Üye Girişi