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
  • 2018-2019 Asp Net vize 2
  • 2018-2019 Web tasariminin temelleri vize 2 konulari
  • 2018-2019 Mesleki Yabanci Dil II Vize 2 Konular
  • 2018-2019 Web tasariminin temelleri web proje konulari
  • 2018-2019 Konu anlatim listesi
  • 2018-2019 güz Mesleki yabanci dil Vize2
  • 2018-2019 Ag temelleri Vize 2 Ödevleri
  • 2018-2019 Aspnet Vize 2 Ödevleri
  • Ders icerik notlari
  • 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
  • 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