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ı.
demek istediğim;
bir yazı var yazı uzun div içerisine koyduk ve height değerini 100px yaptık.
yani yazının yarısını göstereceğiz 100px height sine kadar
sorun olan şu ben 100px le kadar uzunluk veriyorum ama yazı divden taşıyor.
taşmaması için ne yapmamız gerekiyor.
<div style="height:100px; width:235px; text-align:justify; border:1px solid black;">
Fenerbahçe Kulübü, Türkiye'nin aday olduğu 2016 Avrupa Futbol Şampiyonası için maçların oynanacağı statlar arasında FB Şükrü Saracoğlu Stadı'nın gösterilmemesi nedeniyle TFF'yi topa tuttu.
</div>
diyeceksinizki yazıyı 100px uzunluğa göre yaz ama ben veritabanından çekeceğim yazıyı uzun olunca taşıyor divden.
umarım anlatabildim hocam.
Tam olarak anladım desem yalan olur. ama anladığım kadarına cevap vereyim. Anladığm kadaır ile eğer içerik 100px den küçük ise içerik 100px fazla ise içerik kadar görünsün isitorsanız. min-height özelliğini kullanın http://www.fatihhayrioglu.com/genislik-ve-yuksekl…
Hocam bir div içerisine yazdığımız 200 karakterlik yazıyı nasıl 100 karaktere düşürebiliriz.
hight verince taşma oluyor opera ve İE6 da.
umarım anlatabildim :(
Anlamadım.
Teşekkürler Abi çok faydası dokundu sayende yeni bir şeyler öğrendim
Oluşturduğum kutunun ortasına dikeyde metini hizalamaya çalışıyorum ve bunun için;
vertical-align:baseline;Kullanıyorum fakat sonuç alamadım yanlış yaptığım yada eksik yaptığım bişey mi var sizce ?
d,keyde ortalama için
http://www.fatihhayrioglu.com/css-ile-dikey-ortalama/
kısmını inceleyin. Eğer ortalama işi sadece bir metin ise padding ile de yapabilrisiniz.
tşkler hocam bu cssı sayende öğrenecez
@Aruz vakti zamanıda bununla ilgili bir yazı yazmıştım.
http://www.fatihhayrioglu.com/?p=213
ama yeni çıkan tarayıcılar da sorun çıkmaya başladı tam bir çözüm olmadı yani
paylasım için tesekkürler….
Hocam taşmaları nasıl önleriz? Boşluksuz mesela şu satır:
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
Bu satırın taşmasını nasıl önleriz? Yani sınırdan kesip alt tarafa aktarılmasını?
font size ie ve mozillada farklı gözüküyor.
bi yerde gördüm.
font:14px/30px Verdana, Arial, Helvetica, sans-serif;
bu şekilde sorun kalkıyor
benim sormak istediğim
14px/30px neden 30px
her iki browserda fontlarım nasıl aynı gözükür.
kolay gelsin.
düzelttim.Uyarı için teşekkürler