Ö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>
Bu metin sola yaslandı
Bu metin sağa yaslandı
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ı
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.