[dropcap]M[/dropcap]erhaba Zingocan.com Takipçileri.. Dün bahsettiğim gibi en basitten alarak CSS derslerine başlamıştık.. Bu kısa dersimizde de CSS Text Stilling denilen Yazı stilleri, yazılara stil kazandırma özelliklerini göstereceğim.. Bu özellik bir kaç bölümden oluşacaktır. İlk olarak;

Yazı Renkleri (Text Color):

CSS üzerinde çalışırken renk ayarlarını 3 şekilde gösteririz. Bunlar;

• İsim – Rengin ingilizce ismi, Örneğin; red, green, black gibi.
• RGB – RGB Değeri girerek, Örneğin;”rgb(255,0,0)”
• Hex – Hex değeri olarak geçen, türkçeye çevirdiğimizde tam karşılamasa da renk kodlarını kullanarak, Örneğin;”#ff0000″

Şimdi bir örnek ile açıklayalım;

body {color:blue;}
 h1 {color:#00ff00;}
 h2 {color:rgb(255,0,0);}

Yukarıda dün bahsettiğimiz gibi body etiketinin içerisindeki bütün renkleri blue olarak belirledik, fakat daha sonra bir özelleştirme ekleyerek h1 renklerine #00ff00 renk kodunu ve  h2 etiketine de rgb(255,0,0) RGB değeri ekledik.

[message type="info"]W3 standartlarına göre hareket etmek istiyorsanız renk kodlarının yanında ayrıca background-color değerini de girmeniz gerekir![/message]

Yazı Hizalama (Text Alignment)

CSS’te metin hizalama özelliği yatay düzendeki yazıları hizalamak için kullanılır.

Metin merkezli, sağ ya da sola dayalı metinleri hizalamaya yarar..Bir örnek ile açıklayalım;

h1 {text-align:center;}
 p.date {text-align:right;}
 p.main {text-align:justify;}

h1 etiketindeki yazılar sayfa boyunca ortalanmıştır.

P etiketinin içerisindeki date sınıfı sağa dayalı şekilde, main sınıfı ise gazete ve dergi yazılarındaki gibi sağ ve sol tarafta eşit aralıklar bırakarak hizalama özelliği getirmiştir.

Yazı Dekorasyonu (Text Decoration)

Text Decoration özelliği yazılarımızın dekorasyonunu ayarlarmak ya da silmek için kullanılır. Örnek olarak;

a {text-decoration:none;}

Yukarıda a tagına etki eden bütün text-decoration özelliklerini sildik..Bir örnek daha;

h1 {text-decoration:overline;}
 h2 {text-decoration:line-through;}
 h3 {text-decoration:underline;}
 h4 {text-decoration:blink;}

h1 etiketinin yazılarının üst kısmı çizgili,

h2 etiketinin yazılarının oratadan çizgili,

h3′ ün altı çizgili,

h4 ise yanıp sönen bir yazı stiline ayarlanmıştır, fakat blink özelliği IE, Chrome, ya da  Safari tarayıcılarında desteklenmemektedir.

[message type="warning"]Altı çizgili yazı tipi Default CSS ayarlarında sadece linklerin altında kullanıldığı için, normal yazılarda kullanıcıyı yanıltmamak için pek tavsiye edilmez.[/message]

Yazı Dönüşümleri (Text Transformation)

Bu özellik pek fazla kullanılmasa da çok yararlı bir CSS özelliğidir.. Amacı yazı içerisinde belirlediğimiz ayarlarda bazı harflarin büyük ya da küçük harflerle tarayıcıya yansıtılmasıdır.. Örneğin;

p.uppercase {text-transform:uppercase;}
 p.lowercase {text-transform:lowercase;}
 p.capitalize {text-transform:capitalize;}

Örnekte P içerisinde ki uppercase sınıfında bütün harfler büyük olarak görünür, lowercase sınıfında bütün harfler küçük görünürken, capitalize sınıfında ise sadece kelimelerin ilk harfleri büyüktür.

Metin Girintisi (Text Indentation)

Bu özellikte yazılarımıza paragraf şekli vermeyi, ilk satırda belirleyeceğimiz büyüklükte bir girinti oluşmasını sağlar.Örnek;

p {text-indent:50px;}

P etiketinin başladığı yere 50px büyüklüğünde bir girinti mevcuttur ve daha sonra yazılarımız paragraf şeklinde devam eder.

Şimdi birkaç Örnek dahilinde yazılara nasıl şekil veririz bunu görmek için sizlere hazırladığım basit bir demo sayfasını inceleyebilirsiniz.

Bütün CSS Yazı Stilleri ve Açıklamaları

CSS sütünündaki 1 ve 2 değerleri CSS1 ve CSS2 olarak hangisinde kullanıldığı gösterildi.

Özellik	Açıklama	Değerler	CSS
color (renk)	Yazının Rengini ayarlar	color	1
direction (yön)	Yazının yönünü ayarlar	ltr rtl	2
line-height (çizgi yüksekliği)	Çizgiler arasındaki mesafeyi ayarlar	normal number length %	1
letter-spacing (harf aralığı)	Her karakter arasındaki boşluğu ayarlar	normal length	1
text-align (yazı hizalama)	Yazı elemanlarının hizalamasını yapar.	left right center justify	1
text-decoration (yazı dekorasyonu)	Yazılara dekorasyon ekler	none underline overline line-through blink	1
text-indent (yazı girintisi)	Yazı içerisindeki elemanlara ya da çizgilere girinti oluşturur.	length %	1
text-shadow (yazı gölgesi)	Yazıları gölgelemeye yara.r	none color length
text-transform (yazı dönüşümü)	Yazı elemanlarının dönüşümünü sağlar. (büyük – küçük harf)	none capitalize uppercase lowercase	1
unicode-bidi		normal embed bidi-override	2
vertical-align (Düşey hizalama)	Belirlediğimiz düşey bölgedeki elemanları hizalar.	baseline sub super top text-top middle bottom text-bottom length %	1
white-space	Beyaz bir elemanla boşluk işleme özelliği.	normal pre nowrap	1
word-spacing	İki yazı arasına boşluk bıraktırır.	normal length	1

Bugünkü dersimizde bu kadar arkadaşlar.. Güneşli Günler dilerim.