Metin (Text) Ozellikleri
Metin (Text) ÖzellikleriMetin Girintileme (text-indent)
Paragraf başının başlangıç mesafesini belirlemek için kullanırız.. Alabileceği değerler (Uzunluk ve Yüzde değerleri) Örnek kullanımı aşağıdaki gibidir..
p {text-indent: 5%}
p {text-indent: 15px}
p {text-indent: 15px}
Metin Hizalama (text-align)
Bir elemanın diğerine göre hizasını belirlemek için kullanırız.. Metinler için olduğu gibi diğer elemanlar içinde kullanabiliriz.. Alabileceği değerler (left, center, right, justify)
Değer: left
yazısı sola yaslamamızı sağlar. Örnek kullanımı aşağıdaki gibidir..
p {text-align: left}
Değer: center
yazısı ortalamamızı sağlar. Örnek kullanımı aşağıdaki gibidir..
p {text-align: center}
Değer: right
yazısı sağa yaslamamızı sağlar. Örnek kullanımı aşağıdaki gibidir..
p {text-align: right}
Değer: justify
Yazıyı iki kenara yanaştırarak satıra dayar. Örnek kullanımı aşağıdaki gibidir..
p {text-align: justify}
Dikey Hizalama (vertical-align)
Bir elemanın içeriğinin dikey hizalanması için kullanırız.. Alabileceği değerler;
* baseline - orta (metin içeriğine göre)
* sub - alt simge
* super - üst simge
* top - Yukarı (elemana göre)
* text-top - Yukarı (Metin içeriğine göre)
* middle - Orta (elemana göre)
* bottom - Alt (elemana göre)
* text-bottom - Alt (Metin içeriğine göre)
Örneğin bir matematik sorusunda 10 üzeri 2 değerini göstermek istersek HTML sayfamıza aşağıdaki gibi bir kod yazmalıyız;
<p>10<span>2<span></p>
Daha sonra CSS'de 2'yi üst simge yapmak için vertical-align değeri olan super'ı kullanıcaz..
p span {vertical-align: super}
Sonuç olarak 10 üzeri 2 olduğunu göreceksiniz.. Videodada göreceksiniz zaten olduğunu
font boyutunu küçültürseniz daha net anlaşılacaktır üst simge olduğu..Satırlar Arası Yükseklik (line-height)
Satırlar arası yüksekliği bu özelliğimiz ile belirleriz.. Örnek kullanımı aşağıdaki gibidir..
p {line-height: 22px}
Birde ayrıca yazı tipi boyutunu belirttikten sonra slash (/) koyarak'da satır yükseklik değerini girebiliriz.. Bu olay sadece bu duruma mahsustur..
p {font: 12px/22px Arial}
Sözcükler Arası Mesafe (word-spacing)
Sözcükler arasındaki boşluk değerini belirleriz.. Alabileceği değerler uzunluk ve yüzde değerleridir.. Ayrıca (-) eksili değerleride kullanabiliriz.. Örnek kullanımı aşağıdaki gibidir..
p {word-spacing: 10px}
p {word-spacing: -8px}
p {word-spacing: -8px}
Harfler Arası Mesafe (letter-spacing)
Harfler arasındaki boşluk değerini belirleriz.. Alabileceği değerler uzunluk ve yüzde değerleridir.. Ayrıca (-) eksili değerleride kullanabiliriz.. Örnek kullanımı aşağıdaki gibidir..
p {letter-spacing: 5px}
p {letter-spacing: -5px}
p {letter-spacing: -5px}
Harf Büyüklüğü (text-transform)
Metnin büyük-küçük harflerini çevirmek için kullanırız.. Alabileceği 3 tane değer vardır..
* uppercase : tüm harfleri büyük yazdırır
* lowercase : tüm harfleri küçük yazdırır
* capitalize : her kelimenin ilk harfini büyük yazdırır
Örnek kullanımları aşağıdaki gibidir;
p {text-transform: uppercase}
p {text-transform: lowercase}
p {text-transform: capitalize}
p {text-transform: lowercase}
p {text-transform: capitalize}
Metnin altını, üstünü ve ortasını çizme (text-decoration)
Metnimizin altını, üstünü ve ortasını çizmeyi bu özelliğimiz ile sağlıyoruz.. Ayrıca default olarak gelen (örn: a elemanında) altı çizili olan elemanlarıda yine none değeri ile kaldırabiliyoruz.. Alabileceği 5 değer vardır..
* underline : altı çizili
* overline : üstü çizili
* line-through : ortası çizili
* blink : Yanıp Söner (IE7 ve altı sürümler desteklemiyor)
* none : çizgiyi kaldırır
Örnek kullanımları aşağıdaki gibidir;
a {text-decoration: none}
p {text-decoration: underline}
p {text-decoration: overline}
p {text-decoration: line-through}
p {text-decoration: blink}
p {text-decoration: underline}
p {text-decoration: overline}
p {text-decoration: line-through}
p {text-decoration: blink}
Boşlukların korunması (white-space)
Bu özellik boşlukların nasıl işlem göreceğini belirler.. Alabileceği 3 tane değer vardır;
* normal : Birden fazla boşluğu tek boşluk gibi sayar..
* pre : Birden fazla boşluğu birleştirmez (videoda daha iyi anlayacaksınız)
* nowrap :
etiketi kullanılması hariç hiçbir şekilde alt satıra geçirmez
Örnek kullanımları aşağıdaki gibidir..
p {white-space: normal}
p {white-space: pre}
p {white-space: nowrap}
p {white-space: pre}
p {white-space: nowrap}