CSS’de Metin(Text) Özellikleri
Font ile Metin(Text) arasında ne fark var ikiside aynı diyorsanız yanılıyorsunuz.
Font özellikleri metni oluşturan karakterlerini nasıl olacağını belirlerken, Metin(Text) özellikleri sayfadaki metinlerin düzenini kontrol eder. Metin özellikleri metin düzeni için çok avantajlı özellikler getirmiştir.
text-indent
Paragrafların ilk cümlelerin soldan içeriye kaydırılması için kullanılan bir özelliktir.
Yapısı : text-indent: <deger>
Aldığı Değerler : <uzunluk değeri > | <yüzde>
Başlnagıç değeri: 0
Uygulanabilen elementler: Blok-level elementler
Kalıtsallık: Var
p {
text-indent: 10px;
}
Internet Explorer 3+
Netscape 4+
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0
text-align
Bir elemntin diğerlerine göre hizasını berlilemek için kullanılır. Sadece metinler için kullanılmaz, diğer elementler içinde kullanılır.
Yapısı : text-align: <deger>
Aldığı Değerler : <uzunluk değeri > | <yüzde> | inherit
Başlnagıç değeri: 0
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok
p {
text-align: justify;
}
Internet Explorer 3+
Netscape 4+
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0
vertical-align
Bir elementin içeriğinin dikey hizalaması için kullanılır.
- 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)
Yapısı : vertical-align: <deger>
Aldığı Değerler :<yüzde> | baseline | sub | super | top | text-top | middle | bottom | text-bottom
Başlnagıç değeri: baseline
Uygulanabilen elementler: inline elementler
Kalıtsallık: Yok
img {
vertical-align: baseline;
}
Internet Explorer 4+
Netscape 6+
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0
line-height
Satırlar arasındaki yüksekliği belirler. normal, pixel veya yüzde değerlerin den birini alabilir.
Yapısı : line-height: <deger>
Aldığı Değerler : normal | <sayı> | <uzunluk değeri > | <yüzde>
Başlnagıç değeri: normal
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Var
div{
line-height:30px
}
Internet Explorer 3+
Netscape 4+
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0
word-spacing
Kelimeler arasındaki boşluk değerini belirler. Eksi değer alabilir.
Yapısı : word-spacing: <deger>
Aldığı Değerler : normal | <uzunluk değeri >
Başlnagıç değeri: normal
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Var
p {
word-spacing: 10px;
}
Internet Explorer 4.5+(Mac); 6 (Windows)
Netscape 6+
Opera 3.6+
W3C’s CSS Level 2+
letter-spacing
Harfler arasındaki boşluk değerini belirler. Eksi değer alabilir.
Yapısı : letter-spacing: <deger>
Aldığı Değerler : normal | <uzunluk değeri >
Başlnagıç değeri: normal
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Var
p {
letter-spacing: 5px;
}
Internet Explorer 4+
Netscape 4+
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0
text-transform
Metnin Büyük-Küçük harf çevirmek için kullanılır.
- uppercase(hepsini büyük harf yap)
- lowercase(hepsini küçük harf yap)
- capitalize(sadece baş harfleri büyük yap)
Yapısı : text-transform: <deger>
Aldığı Değerler : none | capitalize | uppercase | lowercase
Başlnagıç değeri: none
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Var
p {
text-transform: capitalize;
}
Internet Explorer 4+
Netscape 4+
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0
text-decoration
Bu özellik metinlerimize özel işaretler koymamızı sağlar. Örneğin metinlerizinaltını çizmek gibi.
Yapısı : text-decoration: <deger>
Aldığı Değerler : none | [ underline || overline || line-through || blink ]
Başlnagıç değeri: none
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok
a:link, a:visited, a:active {
text-decoration: none
}
Internet Explorer 3+
Netscape 4+
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0
text-shadow
Bu özellik CSS2 ile birlikte geldi ancak internet tarayıcıları bu özelliği desteklemeyince CSS2.1 kaldırıldı.
“text-transform” un yapısında bir küçük hata var. Bilginize.
bottom’ı anlamak için güzel bir örnek
http://www.fatihhayrioglu.com/dokumanlar/altKisim.htm
.bas {
width:650px;
margin-left:10px;
height:24px;
background:url(“bas/bas.png”) repeat-x;
font-family: “trebuchet ms”;
color: #666666;
bottom: 2px;
}
orneğin burada yazdığım yazının taban 2px olmasını istiyorum ama bottom: 2px; yazsamda sonuç alamıyorum
Genelde top,left,right ve bottom değerleri konumlandırma yaparken kullanılır.
left katmanınızı bağlı olduğu katmanının solundan belli bir mesafede tutmak için kullanılır. buna örnek olarak
http://www.fatihhayrioglu.com/?p=216 inceleyebilrisin.
ayrıca http://www.fatihhayrioglu.com/?p=151 makalesini okumanızı tavsiye ederim.
bottom için position:relative; uyuglanmış kapsayıcı katman içindeki position:absolute; tanımlı katmana bottom:0 değeri sizi kapsayıcı katmanın altına yaptırma yeteneği verecektir. Tabi ketmanınızın sabit bir yükseklik tanımlamanız şartı ile
bottom ve left gibi kodları css içinde nasıl kullanbşiliriz örneğin benim w:300 h:30 bir kutum var ben bunun içinde bir yazı yazmak istiyorum ve tabana bottoma 2px yakınlıkta olmasını istiyorum line-hight kullanarak olabilir belki ama değeri arttırırken bu kezde kutu ile bir altında yer verceğimiz ikinc,i başlık arasaı mesafe artmış oluyor.
Çok güzel bir çalışma tebrikler bu işe yeni başlayanlar burdan istediğini bulabilir
TEBRİKLER site yöneticilerine
Arkadaşlar süpersiniz
baya bir zamandır aradığım bir css kodunu buldum sizlere çok teşekkürler
çok işime yaradı çok sağolunn
iyi çalışmalar
text-shadow kaldırıldığı kötü olmuş
Eline sağlık güzel bir döküman olmuş.
fatih hayrioglu ‘ na bu çalışmasından dolayı teşekkür ediyorum.gerçekten çok işime yaradığını söleyebilirim.
Allah razı olsun