CSS Yazı (text) Özellikleri

Php, Asp, Perl, Html - CSS Yazı (text) Özellikleri Sponsorlu Bağlantılar 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 ...

Cevapla
CSS Yazı (text) Özellikleri
Gökhan TEKİN isimli Üye şimdilik offline konumundadır

Gökhan TEKİN

ARTniyetli

Fotoğrafçı / Bursa

Standart

CSS Yazı (text) Özellikleri

Alt 06-05-2010 #1
Sponsorlu Bağlantılar

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.
Bu mesajdan alıntı yap
Sponsor Links

Grafikerler.net Reklamları

ahmetsngr38 isimli Üye şimdilik offline konumundadır

ahmetsngr38

Hiç Biri / Çorum

Standart
Alt 16-05-2010 #2
                             Sponsorlu Bağlantılar
paylaşım işin tşk ederim bayağı işime yarayacak bu kodlar
Bu mesajdan alıntı yap
Cevapla

Tags
color, css, css yazı özellikleri, direction, letter-spacing, line-height, ltr, rtl, text-align, text-shadow, text-transform, unicode-bidi, white-space, word-spacing

Benzer Konular
Konu Konu Bilgileri Forum Cevaplar Son Mesaj
corel draw x3 ve x4 dikey yazı makrosu hotel text graphicturk Corel Draw 6 15-01-2010 15:27:17
photoshop cs2 text yazı coders Photoshop Soru ve Sorunlarınız 1 12-01-2010 09:11:59
[Soru] - Yazı özellikleri için klavye kısayolları salih_kent InDesign 5 05-05-2009 08:39:51
3D Yazı (Text) Yapımı Angelsmone Photoshop Dersleri 1 11-02-2009 10:17:01
Text alanını 4 e bölüyorum ama yazı kayboluyor grafok InDesign 7 08-01-2009 10:32:56

Kapat
Şifremi Unuttum?