CSS ile Metinlere Özellikler Verme
13.04.2017
Font özellikleri metni olusturan karakterlerini nasil olacagini belirlerken, Metin(Text) özellikleri sayfadaki metinlerin düzenini kontrol eder. Metin özellikleri metin düzeni için çok avantajli özellikler getirmistir.
text-indent
Paragraflarin ilk cümlelerin soldan içeriye kaydirilmasi için kullanilan bir özelliktir.
Yapisi : text-indent: (deger) Aldigi Degerler : (uzunluk degeri) | (yüzde) Baslnagiç degeri: 0 Uygulanabilen elementler: Blok-level elementler Kalitsallik: Var
p {
text-indent: 10px;
}
Tarayici Destegi
Mobil Tarayicilar
text-align
Bir elemntin digerlerine göre hizasini berlilemek için kullanilir. Sadece metinler için kullanilmaz, diger elementler içinde kullanilir.
Yapisi : text-align: (deger) Aldigi Degerler : [ start | end | left | center | right | justify | match-parent ] || (sözdizimi) Baslnagiç degeri: 0 Uygulanabilen elementler: tüm elementler Kalitsallik: Yok
p {
text-align: justify;
}
Tarayici Destegi
Mobil Tarayicilar
vertical-align
Bir elementin içeriginin dikey hizalamasi için kullanilir.
- baseline : Orta(metin içerigine göre)
- sub : Altsimge
- super : Üstsimge
- top : Yukari(elemente göre)
- text-top: Yukari (Metin içerigine göre)
- middle : Orta (Elemente göre)
- bottom : Alt (Elemente göre)
- text-bottom : Alt(Metin içerigine göre)
Yapisi : vertical-align: (deger) Aldigi Degerler : baseline | sub | super | top | text-top | middle | bottom | text- bottom | (yüzde) | [uzunluk degeri] Baslnagiç degeri: baseline Uygulanabilen elementler: inline elementler ve tablo hücreleri Kalitsallik: Yok
img {
vertical-align: baseline;
}
Tarayici Destegi
Mobil Tarayicilar
line-height
Satirlar arasindaki yüksekligi belirler. normal, pixel veya yüzdedegerlerin den birini alabilir.
Yapisi : line-height: (deger) Aldigi Degerler : (uzunluk degeri) | (yüzde degeri) | (sayi degeri) | normal | noneBaslnagiç degeri: normal Uygulanabilen elementler: tüm elementler Kalitsallik: Var
div{
line-height:30px
}
Tarayici Destegi
Mobil Tarayicilar
word-spacing
Kelimeler arasindaki bosluk degerini belirler. Eksi deger alabilir.
Yapisi : word-spacing: (deger) Aldigi Degerler : [ normal | (uzunluk degeri) | (yüzde degeri) ]{1,3} Baslnagiç degeri: normal Uygulanabilen elementler: tüm elementler Kalitsallik: Var
p {
word-spacing: 10px;
}
Tarayici Destegi
Mobil Tarayicilar
letter-spacing
Harfler arasindaki bosluk degerini belirler. Eksi deger alabilir.
Yapisi : letter-spacing: (deger) Aldigi Degerler : [ normal | (uzunluk degeri) | (yüzde degeri) ]{1,3} Baslnagiç degeri: normal Uygulanabilen elementler: tüm elementler Kalitsallik: Var
p {
letter-spacing: 5px;
}
Tarayici Destegi
Mobil Tarayicilar
text-transform
Metnin Büyük-Küçük harf çevirmek için kullanilir.
- uppercase(hepsini büyük harf yap)
- lowercase(hepsini küçük harf yap)
- capitalize(sadece bas harfleri büyük yap)
Yapisi : text-transform: (deger) Aldigi Degerler : uppercase | lowercase | capitalize | none Baslnagiç degeri: none Uygulanabilen elementler: tüm elementler Kalitsallik: Var
p {
text-transform: capitalize;
}
Tarayici Destegi
Mobil Tarayicilar
text-decoration
Bu özellik metinlerimize özel isaretler koymamizi saglar. Örnegin metinlerizinaltini çizmek gibi.
Yapisi : text-decoration: (deger) Aldigi Degerler : none | [ underline || overline || line-through || blink ]Baslnagiç degeri: none Uygulanabilen elementler: tüm elementler Kalitsallik: Yok
a:link, a:visited, a:active {
text-decoration: none
}
Tarayici Destegi
Mobil Tarayicilar
text-shadow
Bu özellik CSS2 ile birlikte geldi ancak internet tarayicilari bu özelligi desteklemeyince CSS2.1 kaldirildi. CSS3 ile birlikte tekrar geldi.
kaynak:http://fatihhayrioglu.com
|