CSS Yazı (text) Özellikleri

Tanımlar

Dil-Kuralı Art-Alan Yazı Yazı-tipi Sınır Dışçizgi Kenarlar Dolgu Liste Tablo

Gelişmiş

Boyut Sınıflandırma Konumlama Sözde-Sınıf Sözde-Öğe Galeri Donukluk Ortam-Türü

Ardaşık Stil Sayfaları (CSS)

26 Ekim 2007

CSS Yazı (text) Özellikleri

CSS Yazı özelliği, yazının web sayfasında nasıl görüneceğini tanımlamanızı sağlar. Yazının rengini değiştirebilirsiniz, harfler arasındaki boşluğu çoğaltıp azaltabilirsiniz, yazıyı yanaştırabilirsiniz (sağa, sola ya da her iki yönde), yazıyı dekore edebilirsiniz. Yazının ilk satırının içerden yazılmasını ve daha birçok işlemi tanımlayabilirsiniz.

Özellik	Açıklama	Değerler	IE	F	N	W3C
color	Yazının rengini belirler	color	3	1	4	1
direction	Yazının yönünü belirler	ltr rtl	6	1	6	2
line-height	Satırlar arasındaki yüksekliği belirler	normal sayı uzunluk %	4	1	4	1
letter-spacing	Karakterler arası uzaklığı azaltır çoğaltır	normal uzunluk	4	1	6	1
text-align	Bir HTML öğesi içinde yazıyı yanaştırır (sağa, sola gibi)	left right center justify	4	1	4	1
text-decoration	Yazıya dekorasyon ekler	none underline overline line-through blink	4	1	4	1
text-indent	Bir öğenin ilk satırındaki yazının belirtilen uzunluk değeri kadar içerden başlamasını sağlar.	uzunluk %	4	1	4	1
text-shadow		none color uzunluk
text-transform	Bir öğedeki harfleri denetler	none capitalize uppercase lowercase	4	1	4	1
unicode-bidi		normal embed bidi-override	5			2
white-space	Bir öğe içinde boşlukların nasıl değerlendirildiğini belirtir	normal pre nowrap	5	1	4	1
word-spacing	Kelimeler arasındaki boşluğu büyütüp küçültmek için kullanılır.	normal uzunluk	6	1	6	1

Renk (color) özelliği

Yazının rengini ayarlama özelliğidir (Daha önce alt alan başlığı altında işlenmiştir).

Örnek:

ody
{ 
color: rgb(255,255,0)
}

Olası değerler:

color: Renk değeri o rengin adı (red), rgb değeri (rgb(255,0,0)), ya da hex sayı (#ff0000).
Varsayılan değer: Tarayici bağımlı

Yön (direction) özelliği

Yön (direction) özelliği yazının yönünü belirler.

Örnek:

div
{ 
direction: rtl
}

Olası değerler:

ltr: Varsayılan. Yazı soldan sağa doğrudur.
rtl: Yazı sağdan sola doğrudur.

Satır yüksekliği (Line-height) Özelliği

Bu özellik satırlar arasındaki yüksekliği belirler.

Sayısal değer kullanıldığında, satır yüksekliği buradaki yazı-tipi boyu ile belirtilen sayının çarpını olur. Bunun yüzde değerinden farkı kalıtımsal davranışlarındadır. Sayısal değer kullanıldığında içteki öğe belirtilen değeri kullanır ama yüzde tanımında sonuç değer kullanılır.

Örnek:

p
{ 
line-height: 1.4
}

p
{ 
line-height: 14pt
} 

p
{ 
line-height: 140%
}

Aşağıdaki örneklerin hepsinde satır yüksekliği aynıdır:
div { line-height: 1.2; font-size: 10pt }     /* sayı 1.2x10=12 */
div { line-height: 1.2em; font-size: 10pt }   /* uzunluk 1.2x10=12 */
div { line-height: 120%; font-size: 10pt }    /* yüzde 120x10/100=12 */

Olası değerler:

normal: Varsayılan değer. Satırlar arasındaki uzaklık kabul edilebilir uzaklıktadır.
sayı: Yazı-tipi boyuyla çarpılarak elde edilecek sayıyı tanımlar.
uzunluk: Satırlar arasında değişmez uzaklığı tamınlamak için tanımlanır.
% : Satırlar arasındaki uzaklığı yazı-tipi boyunun yüzdesi olarak belirtmeye yarar.

Harf aralığı (letter-spacing) Özelliği

Harf aralığı (letter-spacing) özelliği karakter arasındaki boşluğun azaltılması ya da çoğaltılması için kullanılır.

Uzunluk değeri karakterler arasındaki varsayılan boşluğa eklenecek değeri gösterir. Eksi değerlere izin verilir ama uygulamaya bağımlı sınırlamalar olabilir.

Örnek:

p
{ 
letter-spacing: 12px
}

p
{ 
letter-spacing: -0.5px
}

Bu örnekte blockquote öğesinin harf aralığı
0.1 kadar daha fazladır.

blockquote { letter-spacing: 0.1em }

Olası değerler:
normal : Varsayılan değer. Karakterler arasında normal uzaklığı tanımlar.
uzunluk: Karakterler arasında değişmez uzaklığı tanımlar. Uzunluk değeri karakterler arasındaki boşluğu değiştirir. Değer eksi olabilir. Uygulamayla sınırlı sonuçları olabilir.

Yazı Yanaştırma (text-align) Özelliği

Yazı yanaştırma özelliği bir öğe içindeki yazının yanaştırılması için kullanılır. kerçek algoritma tarayıcıya ve kullanılan dilin (Türkçe, İngilizce gibi) kurallarına bağlıdır

p
{ 
text-align: center
}

div.center { text-align: center }

Yazı yanaştırmasının (text-align) kalıtımsal özelliği vardır. Örneğin "div" öğesi ortalanıyorsa (center), içindeki blok düzeyli bir öğe de ortalanır. Öğelerin enine göre ortalama yapılır, tarayıcının pencere eni temel alınmaz. Eğer yanaştırma uygulanamıyorsa, tarayıcı Batı dilleri için sola yanaşık yazı yazmayı kullanacaktır. Olası değerler:
left : yazıyı sola yanaştırır. Varsayılan değer tarayıcıya göre değişir.
right: yazıyı sağa yanaştırır.
center: yazıyı ortalar
justify: Öğenin her iki yana dayanır...

Yazı dekorasyonu (text-decoration) Özelliği

Bu özellik yazıya süsleyici özellikler katar. Eğer öğede yazı yoksa (img öğesi gibi) ya da boşsa (<em> </em> gibi) özelliğin etkisi kalmaz. "blink" değeri yazının göz kırpmasını sağlar.

Yazı dekorasyonunda kullanılacak renkler "color" özelliğindeki değerlerden oluşur. Bu değer kalıtımsızdır ama daha önceki öğeye uyumludur. Eğer bir öğenin altı çizilmişse, çizgi altındaki öğelere de geçer. Altçizginin rengi, yazının rengi farklı olsa bile önceki değerle aynı olur.

p
{ 
text-decoration: underline
}

a:link, a:visited, a:active { text-decoration: underline }

Yukarıdaki örneklerde tüm bağların ve paragrafların altlarının çizilmesi belirtilir.

Kalıtımsal özelliği yoktur ama içteki öğenin uyumlu değeri olmalıdır.

Olası değerler:
none: Varsayılan. Normal yazıyı belirtir.
underline: Yazının altında bir çizgi olmasını sağlar.
overline: Yazının üstünde bir çizgi olmasını sağlar
line-through: Yazının ortasından geçen çizgiyi tanımlar.
link: Yanar döner yazıyı belirtir.

İçerlek Yazı (text-indent) Özelliği

Bir öğe içindeki yazının ilk satırını içerden yazılacağını belirtir.

Kalıplanan yazının ilk satırından önce ne kadar içeriden başlanacağını belirtir. Değeri eksi olabilir ama tarayıcı uygulamasına göre sınırlamaları bulunabilir.

p
{ 
text-indent: 20px
}

p
{ 
text-indent: -12px 
}

Olası değerler:
uzunluk: Değişmez içerlek yazıyı tanımlar
% : Öğenin yüzde ölçüsü kadar içerlek yazı tanımlar.

Yazı çevirme (text-transform) Özelliği

Bir öğe içindeki yazıları denetlemek için kullanılan özelliktir.

p
{ 
text-transform: uppercase
}

Olası değerler:
none: Varsayılan. Küçük ve büyük harfleriyle normal yazıyı tanımlar.
capitalize: Her kelimenin ilk harfi büyük harfe döner.
uppercase: Yazı büyük harflere çevrilir
lowercase: Yazı küçük harflere çevrilir

Düşey ayarlama (vertical-align) Özelliği

Düşey ayarlama özelliği öğenin düşey konumunu ayarlar.

Olası değerler:

Önceki öğeye göre kullanılabilen değerler:
baseline: Öğenin tabanını önceki öğenin tabanına oturtmaya yarar.
middle: Öğenin (resim öğesi gibi) yüksekliğinin yarısını önceki öğenin yarı yüksekliğine ayarlar
sub: Öğeyi alt yazı biçimine çevirir
super: Öğeyi üst yazı biçimine çevirir
text-top: Yazının üstünü önceki öğenin yazı-tipi üstüyle aynı sıraya getirir
text-bottom: Yazının altını önceki öğenin yazı-tipi altıyla aynı hizaya getirir

Öğenin içindeki diğer satırlara göre yapılan ayarlama değerleri şöyledir:
top: Öğenin üstünü öğe içindeki en uzun satırın üstüne göre ayarlamaya yarar
bottom: Öğenin altını en kısa satırın altına göre ayarlar.

Yüzde değerler öğenin satır-yüksekliğine göre hesaplanır. Bunlar öğenin tabanını önceki öğenin tabaından ne kadar yukarıya kaydırılacağını belirtir.
Eksi değerler yazılabilir. Çrneğin -100% öğeyi aşağıya kaydırır öyle ki öğenin altı bir sonraki satırın altının olması gerektiği yere iner. Bu yöntemle yazılar yerine kullanılan resimlerde şaşmaz düşey ayar yapabilme olanağı getirilmiş olunur.

Boşluk (white-space) Özelliği

Bir öğe içinde boşluğun nasıl ele alındığını tanımlamakta kullanılır.

p
{
white-space: normal
}

Olası değerler:
normal: Varsayılan. boşluklar tarayıcı tarafından önemsenmez.
pre: Boşluklaar taracyıcı tarafından olduğu gibi korunur.
nowrap: yazı satır sonunda alt satıra hiç bir zaman geçmez. Aynı satırda <br> görünceye dek devam eder.

Kelime boşluğu (word-spacing) Özelliği

Bu özellik kelimeler arasındaki boşluğu genişletir ya da daraltır. Uygulamaya bağımlı sınırlamalar olabilir. Kelimeler arasındaki boşluk her iki kenara yaslama işleminde (justify) otomatik olarak çağrılır.

p
{ 
word-spacing: 30px
}

p
{ 
word-spacing: -0.5px
}

Olası değerler:
normal: kelimeler arasında normal aralığı belirtir. Varsayılan değerdir.
uzunluk: Kelimeler arasında değişmez uzunluktaki aralığı tanımlar.