Serkan Ayyıldız

Meraklı bir yazılım uzmanı...

CSS Metin Özellikleri

Selam web tasarım meraklıları :)

Yeni bir web tasarım konusunda daha yine birlikteyiz ve bugünkü konumuz css metin özellikleri,ancak önceki CSS makalemiz olan yazı tipleri konusuna birazcık benziyor.Bunu ayırt etmenin en kolay tanımı ise; font özellikleri yazının kendisiyle alakalı olurken,metin özellikleri bizzat metnin sayfadaki duruş ve biçimleriyle alakalıdır.

Konuyu örneklerle devam edebilmek için öncelikle boş bir HTML sayfası oluşturalım ve sayfamıza Div nesnesi ekleyelim:

XHTML

CSS

Div nesnemize stillerimizi ve divin içerisindeki çocuk nesnelerin (ilerideki makalelerde göreceğiz) yazı rengini #FFF ile 
beyaz rengini verdikten sonra örnek metinlerimiz için p tagını div tagları arasına yerleştiriyoruz:

HTML-Div

HTML belgesinin tarayıcı görüntüsüne bakalım:

CSS-Style

Artık hazırız :)

Şimdi metin özelliklerine sırayla bakalım:

1-Word-Spacing

İki kelime arasındaki boşluğu belirlememizi sağlar ve ölçü birimi olarak daha önce gördüğümüz birimlerden herhangi 
birisini kullanma şansına sahibiz.

Örnek kullanımı:

CSS-Word-Spacing

Word-Spacing

2-Letter-Spacing

Kelime içerisindeki harfler arasındaki genişliği tanımlamamıza olanak tanır.

Örnek Kullanımı:

CSS-Letter-Spacing

Letter-Spacing

3-Text-Decoration

Birden çok alt özellik barındırmaktadır:

a-Underline
Kelimenin altının çizili olmasını sağlar:

Text-Decoration

Underline

b-Overline
Kelimenin üstünü çizer:

CSS-Overline

Overline

c-Line-Through
Kelimenin yatay ortasından çizer:

CSS-Line-Through

Line-Through

d-None
Kelimeler üzerinde herhangi bir çizgi olmaz.

e-Blink
Sadece Mozilla Firefox tarayıcısında çalışan bu özellikle harfler yanıp söner.

4-Vertical-Align

Metnin dikey olarak nasıl hizalanacağını belirleriz,bu özellik aynı zamanda negatif değer alabilmektedir.Böylece metnin 
dikey hizasını belirlememizde ayrıca avantaj sunmaktadır.

Alt özellikleri ise şöyledir:

a-baseline
Metin üzerinde bulunduğu DOM nesnesinin tabanına oturur.

b-sub
Metin alt simge şeklinde hizalanır.

c-Top
Metin üzerinde bulunduğu nesnenin en tepesin yapışır.

d-Text-Top
Top özelliğinden farkı;metin, ikinci bir nesnenin varlığı durumunda ikinci nesnenin yüksekliğini baz alarak hizalanır.

e-Middle
Metin dikey olarak tam ortada olacak şekilde hizalanır.

f-Text-Bottom
Nesne,metnin tabanına göre dikey olarak hizalanır.

5-Text-Align

Vertical-Align özelliğinden farkı; metin yatay konumda ortalanır.
Alt özellikleri ise şu şekildedir:

a-Left
Metin tamamen sola yaslanır.
Örneğin;

Text-Align

CSS-Text-Align

b-Right
Metin tamamen sağa yaslanır.
Örneğin;

CSS-Text-Align

Text-Align-Right

c-Center
Metin yatay düzlemde ortalanır.
Örneğin;

Text-Align

CSS-Text-Align-Center

6-Text-Transform

Kelimelerin büyük veya küçük harf olmasını sağlar.
Alt özellikleri ise:

a-Capitalize
Kelimelerin baş harflerinin büyük olmasını sağlar.

b-Lowercase
Kelimelerin bütün harflerini küçük yapar.

c-Uppercase
Kelimelerin tamamının büyük harflere dönüştürmesini sağlar.

7-Text-Indent

Metnin soldan ne kadar boşlukla yazılacağını belirtir ve bütün CSS ölçü birimlerini alabilir.
Örneğin;

CSS-Text-Indent

Text-Indent

8-Line-Height

Metnin font-size özelliğinden bağımsız olarak satır yüksekliğini belirler ve normal,px,% birimlerini kullanır.
Örneğin;

CSS-Line-Height

Line-Height

Görselde eksiklik yok,satır yüksekliği metnin boyutundan küçük olduğu için dikey düzlemde metin eksik gibi görünüyor.

9-Text-Shadow

CSS 2.0 sürümüyle geldi,ancak tarayıcılar destek vermedikleri için CSS 2.1 sürümünde kaldırılmıştır.

10-Direction

Text-Align özelliğine çok benzeyen bu CSS stili ile metin sağa veya sola yaslanmaktadır.Alt özellikleri olarak "ltr" ile 
metin sola, "rtl" ile sağa yaslanır.

11-Unicode-Bidi

Tek başına kullanıldığında diller ailesinin yazım yönüyle ilgili metnin sağdan veya soldan başlayarak yazılmasını sağlar 
ancak direction ile birlikte kullanıldığında yazılan cümle tersten simetrik biçimi almaktadır ve yanlış bilmiyorsam bu CSS 
özelliği ile kuş dili metinler yazabiliyoruz :)

Örneğin;

CSS-Unicode

Unicode-Bidi

CSS metin özellikleri buraya kadar,umarım makalemi severek okumuşsunuzdur.
Bir sonraki makalemizde görüşmek dileğiyle,hoşçakalın :)

1 Yorum:

  1. ahmet
    11/12/2013

    beğenmedim yanlış oldu sinetinizi okumadım bile

Bir yorum bırak E-posta adresiniz yayınlanmayacaktır.

Menu