CSS Metin Özellikleri Nelerdir ve Nasıl Uygulanır?

CSS metin (Text) özellikleri ile Yazı tipi (font) özellikleri arasındaki fark; yazı tipi özellikleri metni oluşturan karakterlerin 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. Şimdi CSS metin özellikleri alt başlıklarını tek tek inceleyelim.

Metin Girintileme (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 degeri> | <yüzde> | inherit

Başlangıç Değeri: 0

Uygulanabilen elemanlar: Blok seviyesinden elemanlar

Kalıtsallık: Var

p
{
   text-indent:5px;
}

Windows ortamında Internet Explorer 5.5 ve altı sürümlerinde satır içi elemanlara girinti özelliği eklemek için width değeri auto olarak atanmalıdır.

Opera uçuk değerleri yorumlamıyor. Örneğin resimli düğme (button) yaparken metni yok etmek için -999px; atması yaptığınızda Opera bunu algılamayacaktır.

Metin Hizalama (text-align)

Bir elemanın diğerlerine göre hizasını belirlemek için kullanılır. Sadece metinler için kullanılmaz, diğer elemanlar içinde kullanılır.

Yapısı: text-align: <deger>

Aldığı Değerler: left | center | right | justify | inherit

Başlangıç Değeri: Kullanıcı arayüzüne ve yazım yönüne bağlı

Uygulanabilen elemanlar: Blok seviyesinden elemanlar

Kalıtsallık: Var

p
{
   text-align:right;
}

left: Metni sola yanaştırır.

right: Metni sağa yanaştırır.

center: Metni ortalar.

justify: Metni iki kenara yanaştırarak satıra yayar.

Dikey Hizalama (vertical-align)

Bir elemanın içeriğinin dikey hizalaması için kullanılır.

Yapısı: vertical-align: <deger>

Aldığı Değerler: <yüzde> | baseline | sub | super | top | text-top | middle | bottom | text-bottom

Başlangıç Değeri: baseline

Uygulanabilen elemanlar: Satır içi seviyeden ve table-cell elemanları

Kalıtsallık: Yok

p
{
   vertical-align:middle;
}

· baseline: Orta (metin içeriğine göre)

· sub: Altsimge

· super: Üstsimge

· 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)

Internet Explorer 7 ve alt sürümlerinde bottom ve top değerleri textbottom ve text-top gibi yorumlanır.

Satırlar Arası Yükseklik (line-height)

Satırlar arasındaki yüksekliği belirler. normal, piksel veya yüzde değerlerin den birini alabilir.

Yapısı: line-height: <deger>

Aldığı Değerler: normal | <sayı> | <uzunluk değeri> | <yüzde> | inherit

Başlangıç Değeri: normal

Uygulanabilen elemanlar: Tüm elemanlar

Kalıtsallık: Var

p
{
   line-height:20px;
}

Internet Explorer 7 ve alt sürümlerinde eğer satır içinde yerleştirilen bir eleman (resim veya form elemanları gibi) varsa bu özelliği yanlış uygular.

Firefox 1.0.0.8 ve alt sürümlerde sayısal değerlerin uygulamasında sorun yaşanır.

Sözcükler Arası Mesafe (word-spacing)

Sözcükler arasındaki boşluk değerini belirler. Eksi değer alabilir.

Yapısı: word-spacing: <deger>

Aldığı Değerler: normal | <uzunluk degeri> | inherit

Başlangıç Değeri: normal

Uygulanabilen elemanlar: Tüm elemanlar

Kalıtsallık: Var

p
{
   word-spacing: 1 cm;
}

Sözcükler arası boşluk algoritmaları kullanıcı arayüzüne bağlıdır. Sözcükler arası boşluklar ayrıca satır iki kenara yayılarak hizalama yapılırken değişebilir.

Firefox 2 ve alt sürümlerinde ve Opera9.2 ve alt sürümlerinde Satır içi çocuk elemanların arasındaki boşluğun asgari genişliği sıfırdır.

Harfler Arası Mesafe (letter-spacing)

Harfler arasındaki boşluk değerini belirler. Eksi değer alabilir.

Yapısı: letter-spacing: <deger>

Aldığı Değerler: normal | <uzunluk degeri> | inherit

Başlangıç Değeri: normal

Uygulanabilen elemanlar: Tüm elemanlar

Kalıtsallık: Var

p
{
   letter-spacing: 5 mm;
}

Harfler arası boşluk algoritması kullanıcı arayüzüne bağlıdır. Harfler arası boşluklar ayrıca satır iki kenara yayılarak hizalama yapılırken değişebilir.

Harf Büyüklüğü (text-transform)

Metnin büyük-küçük harf çevirmek için kullanılır.

Yapısı: text-transform: <deger>

Aldığı Değerler: none | capitalize | uppercase | lowercase |inherit

Başlangıç Değeri: none

Uygulanabilen elemanlar: Tüm elemanlar

Kalıtsallık: Var

p
{
   text-transform: capitalize;
}

· uppercase: Hepsini büyük harf yapar.

· lowercase: Hepsini küçük harf yapar.

· capitalize: Sadece baş harfleri büyük yapar.

Satırın Altını, Üstünü, Ortasını Çizme ve Yanıp Sönme (text-decoration)

Bu özellik metinlerimize özel işaretler koymamızı sağlar. Metinlerinizin altını çizmek örnek olarak gösterilebilir.

Yapısı: text-decoration: <deger>

Aldığı Değerler: none | [ underline || overline || line-through || blink ] | inherit

Başlangıç Değeri: none

Uygulanabilen elemanlar: Tüm elemanlar

Kalıtsallık: Yok

p
{
   text-decoration: underline;
}

Internet Explorer 7 ve altı sürümlerinde blink değerini desteklemez.

Internet Explorer 6 ve altı sürümlerinde line-through ile çizilen çizgi diğer tarayıcılara göre daha yukarıdadır.

Firefox 2 ve alt sürümlerde metin süsleme atamalarını float uygulanmış alt elemanlara da uygular.

Boşlukların Korunması (white-space)

Yapısı: white-space: <deger>

Aldığı Değerler: normal | pre | nowrap | inherit

Başlangıç Değeri: normal

Uygulanabilen elemanlar: Blok seviyeden elemanlar

Kalıtsallık: Var

p
{
   white-space: nowrap;
}

white-space özelliği elemanların boşluklarının nasıl işlem göreceğini belirler. 3 değer alır.

normal: Birden fazla boşluğu tek boşluk gibi sayar.

pre: Birden fazla boşluğu birleştirmez.

nowrap: <br> etiketi hariç alt satıra geçişe izin vermez.

Internet Explorer 7 ve alt sürümlerinde pre-line veya pre-wrap degerlerini desteklemiyor. textarea elemanı için normal ve pre atamaları pre-wrap gibi davranır. textarea elemanı için nowrap degeri pre-line gibi davranır.

Firefox 2 ve alt sürümlerinde pre-line ve pre-wrap değerlerini desteklemiyor (bunu yerine benzer -moz-pre-wrap uygulanır.) textarea elemanı için normal ve pre atamaları pre-wrap gibi davranır.

Opera 9.2. ve alt sürümlerinde pre-line özelliğini desteklemiyor. textarea elemanı için normal ve pre atamaları pre-wrap gibi davranır. textarea elemanı için nowrap değeri pre-line gibi davranır.

Metin Yazma Yönü (direction)

Yapısı: direction: <deger>

Aldığı Değerler: ltr | rtl | inherit

Başlangıç Seğeri: ltr

Uygulanabilen elemanlar: Tüm elemanlar

Kalıtsallık: Var

p
{
   direction: ltr;
}

Bu özelliğin aşağıdakileri belirler:

· Blogun yazma yönünü belirler.

· Unicode çift yönlülük (Unicode-bidi) için iç içelik ve üst üste gelme yönünü belirler.

· Tablo sütunlarının yerleşim yönünü belirler.

· Yatay tasma yönünü belirler.

· Bir blokta text-align: justify tanımlaması yapıldığında son satırın yönünü belirler.

direction özelliğinin satır içi seviyeden elemanlar üzerinde etkili olabilmesi için unicode-bidi özelliğinin değerinin embed veya override olması gerekir. Normalde bu özellik DTD içerisinde tanımlanır, ancak CSS2.1 önemine binaen bu özellikleri eklemiştir.

Çok Yönlülük Algoritması (unicode-bidi)

Yapısı: unicode-bidi: <deger>

Aldığı Değerler: bidi-override | embed | normal | inherit

Başlangıç Değeri: normal

Uygulanabilen elemanlar: Tüm elemanlar

Kalıtsallık: Yok

p
{
   unicode-bidi: normal;
}

Bazı diller sağdan sola yazılırken bazı diller solda sağa doğru yazılır. Bazı dokümanlarımızda her ikisini birden kullanabiliriz buna çok yönlülük denir kısaca bidi. Bu özellik direction ile birlikte çok yönlü blokları idare etmemizi sağlar. Eğer bir sayfada birden fazla yönlü blok kullanacaksak buna özel tanımlamalar yapmalıyız.

CSS metin (Text) özellikleri konusunu gördük. Konu ile ilgili soru, öneri ya da fikirlerinizi aşağıda bulunan yorumlar kısmına yazarak bize iletebilirsiniz. CSS ile ilgili konuları aşağıdaki linke tıklayarak CSS kategorisi altındaki başlıklardan öğrenebilirsiniz. Ayrıca aşağıdaki Instagram ve Twitter logolarına tıklayarak bizi Instagram ve Twitter üzerinde de takip edebilirsiniz.

https://yazilimdelisi.com/category/web-gelistirme/css/

Sosyal Medya Hesaplarımız

instagram logo
twitter logo

Son Eklenen Yazılar

Bir Cevap Yazın

%d blogcu bunu beğendi: