Css Text (Metin) Özellikleri ve Kullanımı

Merhaba Arkadaşlar,
Bu makalede Css’te text (metin) özelliklerini ve bunları nasıl kullanabileceğimizi öğreneceğiz.Text özellikleri ile yazının boyutunu, tipini, kalınlığını, stilini vb.. düzenliyebiliriz.Şimdi tek tek bu özellikleri uygulamalı bir şekilde inceleyelim.

1 – color : Bu özellik ile yazılara istediğimiz renkleri verebiliriz.Dilerseniz direk renk adını verebileceğiniz gibi renklerin rgb ve hex kodlarınıda kullanabilirsiniz. Renk kodlarıyla ilgili daha fazla bilgi edinmek isterseniz Tüm Renk İsimleri ve Renk Kodları (Html, Css, Hex, Rgb) yazımı inceleyebilirsiniz. 

Örneğimizde 3 adet <p> etiketi tanımlayıp color değerlerini 3 farklı şekilde verelim ve tarayıcıdaki durumlarını inceleyelim.

css-dersleri-color-kullanimi

2 – text-align : Bu özellik ile yazıları yatayda hizalayabiliriz.Yani yazının sağda, solda, ortada veya sağa ve sola dayalı şekilde olmasını sağlayabiliriz.text-align özelliğine şu değerleri verebiliriz :

     ► right

     ► left

     ► center

     ► justify

     ► end

     ► start

Örneğimizde 3 adet <p> etiketi tanımlayalım, text-align özelliğine right, left, center değerleri verelim ve tarayıcıdaki durumlarını inceleyelim.

css-dersleri-text-align-kullanimi

Şimdi de 2 <div> etiketi tanımlayalım, text-align özelliğine left ve justify değerleri verelim ve tarayıcıdaki durumlarını inceleyelim.Gördüğünüz gibi justify değeri verildiğinde yazımız sağa ve sola yaslanmış hale geliyor.

css-dersleri-text-align-kullanimi-1

Dikkat : Block etiketlerde hizalama işlemlerini yapabilirken, inline etiketlerde hizalama işlemleri işlevsel değildir.Inline etiketlerde hizalama işlemlerini yapmak için bu etiketleri bir block etiket içerisine almamız gerekiyor.Çünkü hizalama yapabilmek için etiketin tüm satırı kaplaması gerekiyor.

3 – text-decoration : Bu özellik ile yazıların altını, üstünü, üzerini çizebiliriz yada bu etkileri kaldırabiliriz.text-decoration özelliğine şu değerleri verebiliriz :

     ► underline : yazının altını çizer.

     ► line-through : yazının üzerini çizer.

     ► overline : yazının üstünü çizer.

     ► none : varolan etkileri kaldırır.

Örneğimizde 4 adet <p> etiketi tanımlayıp text-decoration değerlerini vererek tarayıcıdaki durumlarını inceleyelim.

css-dersleri-text-decoration-kullanimi

4 – text-transform : Bu özellik ile yazılarda küçük harfleri büyük harfe, büyük harfleri küçük harfe dönüştürebiliriz.Aynı zamanda sadece ilk harfleri büyük diğerleri küçük olacak şekilde kelime ve cümlelerde oluşturabiliriz.text-transform özelliğine şu değerleri verebiliriz :

     ► uppercase : Küçük harfleri büyük harfe dönüştürür.

     ► lowercase : Büyük harfleri küçük harfe dönüştürür.

     ► capitalize : İlk harf büyük diğer harfler küçük olacak şekilde dönüştürür.

Örneğimizde 3 adet <p> etiketi tanımlayıp text-transform değerlerini vererek tarayıcıdaki durumlarını inceleyelim.

css-dersleri-text-transform-kullanimi

5 – text-indent : Bu özellik ile yazının ilk satırının daha içerden başlamasını sağlayabiliriz.Değeri px olarak verebiliriz.Örneğin bir <p> etiketi tanımlayalım ve belli bir genişlik değeri verelim.text-indent uygulanmış ve uygulanmamış durumlarını tarayıcıda inceleyelim.

css-dersleri-text-indent-kullanimi

6 – letter-spacing : Bu özellik ile yazının karakterleri arasındaki boşluğu artırabiliriz.Negatif değerler verdiğimizde ise aradaki boşluklar azalır.Örneğin 3 <p> etiketi tanımlayalım ve ilkinde herhangi bir işlem yapmayalım.İkincisinde karakterler arasına 10px boşluk verelim.Üçüncüsünde ise -2px ile aradaki boşluğu azaltıp durumlarını tarayıcıda inceleyelim.

css-dersleri-letter-spacing-kullanimi

7 – word-spacing : Bu özellik ile yazının kelimeleri arasındaki boşluğu artırabiliriz.Negatif değerler verdiğimizde ise aradaki boşluklar azalır.Örneğin 3 <p> etiketi tanımlayalım ve ilkinde herhangi bir işlem yapmayalım.İkincisinde kelimeler arasına 10px boşluk verelim.Üçüncüsünde ise -5px ile aradaki boşluğu azaltıp durumlarını tarayıcıda inceleyelim.

css-dersleri-word-spacing-kullanimi

8 – line-height : Bu özellik ile bir satırın diğer satırlar ile arasındaki mesafeyi yani satırın yüksekliğini ayarlayabiliriz.Örneğin 3 <p> etiketi tanımlayalım ve birincisinde satır yüksekliğini 16px verelim.İkincisinde satır yüksekliğini 32px verelim.Üçüncüsünde ise 8px verelim ve durumlarını tarayıcıda inceleyelim.

css-dersleri-line-height-kullanimi

9 – direction : Bu özellik ile bir yazının yönünü değiştirebiliriz.direction özelliğine şu değerleri verebiliriz :

     ► ltr : soldan sağa

     ► rtl : sağdan sola

Örneğimizde 2 adet <p> etiketi tanımlayıp direction değerlerini vererek tarayıcıdaki durumlarını inceleyelim.

css-dersleri-direction-kullanimi

10 – white-space : Bu özellik ile yazılardaki boşlukların nasıl değerlendirileceğini ayarlıyabiliriz.white-space özelliğine şu değerleri verebiliriz :

     ► normal

     ► nowrap

     ► pre

     ► pre-line

     ► pre-wrap

Örneğimizde 5 adet <p> etiketi tanımlayıp belirli bir genişlik değeri verelim.white-space değerlerini vererek tarayıcıdaki durumlarını inceleyelim.

css-dersleri-white-space-kullanimi

11 – text-overflow : Bu özellik ile yazılarımızın sığmadığı durumlarda yazının devamının olduğunu belirtmek için “…” (üç nokta) koyabiliriz.text-overflow özelliğine şu değerleri verebiliriz :

     ► clip : varsayılan olarak gelen değer.

     ► ellipsis : yazının taştığını belirten “…” (üç nokta) koyar.

Örneğimizde 2 adet <p> etiketi tanımlayalım ve text-overflow değerlerini vererek tarayıcıdaki durumlarını inceleyelim.Burda dikkat etmemiz gereken konu, text-overflow kullanırken onunla beraber şu iki css kodunuda yazmamız gerekiyor.

css-dersleri-text-overflow-kullanimi

12 – word-wrap : Bu özellik ile bulunduğu alana sığmayacak kadar uzun olan kelimeleri satır sonunda bölebiliriz.word-wrap özelliğine şu değerleri verebiliriz :

     ► normal : Varsayılan olarak gelen değer.

     ► break-word : Sığmayan kelimeyi böler.

Örneğimizde 2 adet <div> etiketi tanımlayalım ve içerisine sığmayacak şekilde bir kelime yazalım.İlk örnekte kelime satır sonunda bölünürken, ikinci örnekte bölünmeyip taşacaktır.

css-dersleri-word-wrap-kullanimi

13 – word-break : Bu özellik ile satır sonlarındaki kelimeleri, satırı tam kaplayacak şekilde bölebiliriz.word-break özelliğine şu değerleri verebiliriz :

     ► keep-all : Varsayılan olarak gelen değer.Satır sonundaki kelimeler bölünmez.

     ► break-word : Satır sonundaki sığmayan kelimeler bölünür.

Örneğimizde 2 adet <div> etiketi tanımlayalım ve içerisine birkaç cümle yazalım.İlk örnekte satır sonundaki kelimeler durumunu korurken, ikinci örnekte satır sonlarındaki kelimeler bölünecektir.

css-dersleri-word-break-kullanimi

14 – writing-mode : Bu özellik ile yazılarımızın dikey bir hale dönüşmesini sağlayabiliriz.writing-mode özelliğine şu değerleri verebiliriz :

     ► horizontal-tb : Yazı yatay halde olur.

     ► vertical-lr : Yazı dikey halde olur.

     ► vertical-rl : Yazı dikey halde olur.

Örneğimizde 3 adet <p> etiketi tanımlayalım ve writing-mode değerlerini vererek tarayıcıdaki durumlarını inceleyelim.

css-dersleri-writing-mode-kullanimi

Yeni bir makalede görüşmek üzere.

Önceki : Css Dersleri 2 – Seçiciler 

Sonraki : Css Dersleri 4 – Background Kullanımı

Leave a Reply

TASARIMLARINIZDA KULLANABİLECEĞİNİZ TAM 150 FARKLI RENK PALETİRenkleri Göster
+ +