CSS Yazı (Text) Özellikleri

Jurgen Klopp

Yarbay

2222 Mesaj

Tüm Başarılarını Gör

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:

color: Yazının rengini belirler. Değeri: color olarak geçerlidir.

direction: Yazının yönünü belirler. Değeri: ltr, rtl

line-height: Satırlar arasındaki yüksekliği belirler. Değeri: normal sayı uzunluk %

letter-spacing: Karakterler arası uzaklığı azaltır çoğaltır. Değeri: normal, uzunluk

text-align: Bir HTML öğesi içinde yazıyı yanaştırır (sağa, sola gibi). Değeri: left, right, center, justify

text-decoration: Yazıya dekorasyon ekler. Değeri: none, underline, overline, line-through, blink

text-indent: Bir öğenin ilk satırındaki yazının belirtilen uzunluk değeri kadar içerden başlamasını sağlar. Değeri: uzunluk, %

text-shadow: none, color, uzunluk

text-transform: Bir öğedeki harfleri denetler. Değeri: none, capitalize, uppercase, lowercase

unicode-bidi: Değeri: normal, embed, bidi-override

white-space: Bir öğe içinde boşlukların nasıl değerlendirildiğini belirtir. normal, pre, nowrap

word-spacing: Kelimeler arasındaki boşluğu büyütüp küçültmek için kullanılır. Değeri: normal, uzunluk

Renk (color) özelliği:
Yazının rengini ayarlama özelliğidir

 ody 
  { 
  color: rgb(243,142,2) 
  }

Olası değerler:

color: Renk değeri o rengin adı (red), rgb değeri (rgb(243,142,2)), ya da hex sayı (#f38e02).
Varsayılan değer: Tarayici bağımlı

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

 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.

 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.

 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.

Benzer içerikler