Web Tasarım ve Prog.Stil Şablonu (CSS) Css Metin Özellikleri

 

 

Özellikler	Açıklama
color	Metin rengini belirle
line-height	Satır yüksetliğini belirlemek için kullanılır.
text-align	Metni yatay hizalamak için kullanılır.
vertical-align	Dikey hizalama
text-indent	paragraf başı yaparken cümlenin ne kadar içten başlayacağını ayarlamak için kullanılır.
text-decoration	Metnin alt tarafını, üst tarafını veya üstünü çizmek için kullanılır.
text-shadow	metine gölge efekti eklemek için kullanılır.
text-transform	Metnin büyük harf küçük  harf durumunu belirlemek için kullanılır.
word-spacing	Bir metindeki kelimeler arasındaki mesafeyi arttırmak veya azaltmak için kullanılır.
letter-spacing	Bir metindeki karakterler arasındaki mesafeyi arttırmak veya azaltmak için kullanılır.

 

Color

Metne renk vermek için kullanılır.

Örnek :

h1{ color: #449BDB; }
p { color:black; }
div {color: rgb(255, 0, 0);}

 

Line-height

Metin içindeki satırların arasındaki mesafeyi ayarlamak için kullanılır.

Örnek:

p{ line-height: 15px;} /*Satırlar arası mesafeyi 15 px yapar.*/  

 

Text-align

Metinleri hizalama için kullanılır.

• text-align:left; (Metni sola hizalamak için kullanılır.)
• text-align:center; (Metni ortaya hizalamak için kullanılır.)
• text-align:right; (Metni sağa hizalamak için kullanılır.)
• text-align:justify; (Metin içeriğinin sağ taraftan kalan boşluklarını tamamlar, okumayı kolaylaştırır. Gazete ve magazin dergilerinde olduğu gibi.)

 

h3 { text-align:left; }

 

Örnek :

<style type="text/css">
.sol{ text-align:left; }
.sag{ text-align:right; }
</style>
<p class="sol">Bu metin sola yaslandı</p>
<p class="sag">Bu metin sağa yaslandı</p>

 

 

Vertical-align

Bir nesneyi dikey olarak hizalamak için kulanılır. Aşağıdaki değerleri alabilir.

• baseline : Orta (metin içeriğine göre)
• sub : Altsimge
• super : Üstsimge
• top : Yukarı (elemente göre)
• text-top: Yukarı (metin içeriğine göre)
• middle : Orta (elemente göre)
• bottom : Alt (elemente göre)
• text-bottom : Alt (metin içeriğine göre)
• px ve yüzde (%) değerleri de verilebilir.

 

Text-indent

Parağraf başında girinti yapmak için kullanılır.

Örnek :

<style>
.paragrafbasi{
   text-indent:20px;
}
</style>
<p class="paragrafbasi">
CSS, açılımı “Cascading Style Sheet” olan ve dilimize Stil ġablonları olarak yerleşen basit ve kullanışlı bir işaretleme dilidir. Stil şablonu HTML ögelerine (yazı, paragraf, kenar çizgisi, resim, bağlantı...) stil vermek amacıyla kullanılır. Diğer bir deyişle sayfamızın içeriğinin biçimlendirilme işleminin yapıldığı kısımdır. HTML/XHTML etiket dillerinin sayfa tasarımında yetersiz kalması nedeniyle “World Wide Web Consortium” (W3C, Dünya Çapında Ağ Birliği) tarafından oluşturulmuştur; içerik kısmı (HTML) ile biçimlendirme kısmını birbirinden ayırarak yüzlerce sayfayı tek bir dosya ile biçimlendirme olanağı tanımaktadır. Bu, web sayfalarımıza esneklik bize ise hız kazandırır. Tablosuz tasarımın daha da önem kazandığı günümüzde CSS kullanımı olmazsa olmazlardandır.
</p>

Tarayıcı Çıktısı