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:
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 belgesinin tarayıcı görüntüsüne bakalım:
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ı:
2-Letter-Spacing
Kelime içerisindeki harfler arasındaki genişliği tanımlamamıza olanak tanır.
Örnek Kullanımı:
3-Text-Decoration
Birden çok alt özellik barındırmaktadır:
a-Underline
Kelimenin altının çizili olmasını sağlar:
b-Overline
Kelimenin üstünü çizer:
c-Line-Through
Kelimenin yatay ortasından çizer:
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;
b-Right
Metin tamamen sağa yaslanır.
Örneğin;
c-Center
Metin yatay düzlemde ortalanır.
Örneğin;
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;
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;
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 metin özellikleri buraya kadar,umarım makalemi severek okumuşsunuzdur.
Bir sonraki makalemizde görüşmek dileğiyle,hoşçakalın :)
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:
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 belgesinin tarayıcı görüntüsüne bakalım:
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ı:
2-Letter-Spacing
Kelime içerisindeki harfler arasındaki genişliği tanımlamamıza olanak tanır.
Örnek Kullanımı:
3-Text-Decoration
Birden çok alt özellik barındırmaktadır:
a-Underline
Kelimenin altının çizili olmasını sağlar:
b-Overline
Kelimenin üstünü çizer:
c-Line-Through
Kelimenin yatay ortasından çizer:
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;
b-Right
Metin tamamen sağa yaslanır.
Örneğin;
c-Center
Metin yatay düzlemde ortalanır.
Örneğin;
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;
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;
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 metin özellikleri buraya kadar,umarım makalemi severek okumuşsunuzdur.
Bir sonraki makalemizde görüşmek dileğiyle,hoşçakalın :)
beğenmedim yanlış oldu sinetinizi okumadım bile