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

Chrome explorer Firefox
+ + +

Mobil Tarayicilar

Android Mobil Safari Chrome
+ + +

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

Chrome explorer Firefox
+ + +

Mobil Tarayicilar

Android Mobil Safari Chrome
+ + +

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

Chrome explorer Firefox
+ + +

Mobil Tarayicilar

Android Mobil Safari Chrome
+ + +

line-height

Satirlar arasindaki yüksekligi belirler. normalpixel 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

Chrome explorer Firefox
+ + +

Mobil Tarayicilar

Android Mobil Safari Chrome
+ + +

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

Chrome explorer Firefox
+ + +

Mobil Tarayicilar

Android Mobil Safari Chrome
+ + +

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

Chrome explorer Firefox
+ + +

Mobil Tarayicilar

Android Mobil Safari Chrome
+ + +

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

Chrome explorer Firefox
+ + +

Mobil Tarayicilar

Android Mobil Safari Chrome
+ + +

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

Chrome explorer Firefox
+ + +

Mobil Tarayicilar

Android Mobil Safari Chrome
+ + +

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



Adınız Soyadınız
İçerik
Son Eklenenler Konular
  • E-Ticaret çalismasi Satis sitesi
  • 2017-2018 Normal Ögretim Konu Anlatim Listesi
  • Asp Net- Veritabani Olusturma ve GridView Ekleme Kayit
  • Asp Net-Master page ile admin paneli
  • Vize 2 Mesleki Yabanci Dil 1
  • Vize 2 için Ag temelleri
  • Vize2 Internet Programciligi I
  • Vize 2 için ödev listesi- Programlamanin Temelleri
  • Programlamanin Temelleri Akis Diyagramlari Örnekleri
  • Bilgisayar Aglari-Ag Temelleri
  • Bilgisayar Mesleki Yabanci Dil Dersi Için Kelimeler 1
  • 2015-2016 Staj Kabul Listesi
  • 2016-2017 Yaz Staji Yapacaklarin Listesi
  • ASP NET ile veritabanindaki alani gösterirken kisaltarak görüntüleme
  • ASP NET - Plesk ile veritabani olusturma ve MS SQL veritabani olusturma islemleri
  • Dreamveaver
  • ASP Net
  • CSS
  • Html
  • Visual Studio C# ve C Console
  • Programlamanin Temelleri-Algoritma
  • Mesleki Yabancı Dil
  • Windows Server 2012
  • Ag Temelleri-Bilgisayar Aglari
  • Staj
  • Copyright (c) Ferdi DOĞAN