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.

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.

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.

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.

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.

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.

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.

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.

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)

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)

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)

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

Son Eklenen Yazılar