CSS METİN (TEXT) ÖZELLİKLERİ

Merhaba...

Css ile sayfadaki metin ve yazılara bir çok farklı özellik ekleyebiliyoruz.. HTML etiketleri ile yapılan tüm metin özelliklerin ( b, u, i vs) dışında , CSS ile yazılar için kullanılan bir çok farklı özellikle daha esnek ve çeşitli yazı görünümler elde edilebiliyor...

CSS METİN (TEXT) ÖZELLİKLERİ

CSS ile sayfadaki metinlerin rengi , boyutu,  tipi  gibi bir çok özelliği değiştirilebiliyor.. Bazı özellikler metinlerin stilini değiştiriken ,i bazı özellikler ise metinlerin ve içindekilerin yerleşimlerini belirler..

COLOR

Yazıların rengini ayarlar. Renkler farklı şekillerde yazılabilir. HTML ve CSS için kullanılan renk seçme ve  oluşturma yolları için aşağıdaki yazılara bakabilirsiniz..

• HTML İNGİLİZCE RENKLER ve HEX KODLARI
• HTML - RENK BELİRLEMEK
• HTML W3SCHOOL RENK YARDIMCILARI

CSS

span { color:red }
p { color:#fda12a;}
div { color:hsl(125,80%,15%) }

HTML

<span> Kırmızı yazı.. </span>
<p>Turuncu yazı..</p>
<div>Yeşil yazı...</div>

EKRAN

TEXT-ALIGN

Yazı ve satır içi elemanların yatayda hizalanmasını ayarlar. Blok kapsayıcı elemanlara uygulanabilir.

• LEFT - (SOLA HİZALI) 
• RIGHT (SAĞA HİZALI)
• CENTER (ORTALANMIŞ)
• JUSTIFY (İKİ YANA YASLANMIŞ)

olmak üzere 4 farklı şekilde kullanılabilir.. JUSTIFY değeri genelde kitap, tez gibi yazımlarda , satır başı ve sonlarının alt alta denk gelmesi için kullanılır. Tarayıcılar kelimeler arası boşlukları kendilğinden ayarlayarak , yazıların her iki yana yasalanmasını sağlarlar..

CSS

p:nth-child(1) {text-align:left;}
p:nth-child(2) {text-align:right;}
p:nth-child(3) {text-align:center;}
p:nth-child(4) {text-align:justify;}

HTML

 <p> Sola hizalı yazı (LEFT) </p>
 <p> Sağa hizalı yazı (RIGHT) </p>
 <p> Ortalanmış yazı (CENTER) </p>
 <p> <b>JUSTIFY - İki yana yaslanmış yazı</b> Lorem ipsum, dolor sit amet consectetur adipisicing, elit. Odio illum qui eum eligendi unde facere dolorum, fugit possimus expedita. Accusantium, earum beatae ut itaque, aspernatur quidem? Corporis unde ab tempora. Lorem ipsum, dolor sit amet consectetur adipisicing, elit. Odio illum qui eum eligendi unde facere dolorum, fugit possimus expedita. Accusantium, earum beatae ut itaque, aspernatur quidem? Corporis unde ab tempora.
 </p>

EKRAN

Yatay hizalama sadece yazılaar için değil , diğer satır içi elemanlar içinde kullanılır. Örneğin bir div içerisindeki resimler (<img>) , bu kapsayıcı DIV'e text-align uygulanarak yatayda hizalanabilir..

CSS

div {text-align:center;} 

HTML

<div>
    <img src="https://erkanunlu.com.tr/resim/asansor.webp" width="100" height="100">
    <img src="https://erkanunlu.com.tr/resim/asansor.webp" width="100" height="100">
</div>

EKRAN

Yukarıda div içerisinde resimler text-align:center özelliği ile div içerisinde ortalanmış olur..

TEXT-DECORATION

Genellikle bağlantıların (link) altındaki çizgileri kaldırmakla birlikte metinlerin üst tarafını çizmeyi, altını çizmeyi, üzerini çizmeyi sağlar. 

• NONE; Genellikle a etiketine uygulanır, alt çizgiyi kaldırır. 
• UNDERLINE; Yazıyı altı çizili yapar.
• OVERLINE; Metnin üst tarafını (tepesini) çizili yapar.
• LINE-THROUGH; Metnin üzerinden (ortasından) çizgi geçirir.

olmak üzere 4 farklı şekilde kullanılabilir.. J

CSS

p  {text-decoration:underline;}
a  {text-decoration:none;}
div {text-decoration:overline;}
span {text-decoration:line-through;}

HTML

 <p> Altı çizli yazı (underline) </p>
 <a href=""> Lütfen Tıklayın..   </a><!-- none ile linkteki varsayılan alt çizgi kaldırılmış olur..-->
 <div> Üstü çizili yazı..   (overline) </div>
 <span> Ortası çizili yazı (line-through)  </span>

EKRAN

TEXT-TRANSFORM

Bir metindeki karakterleri büyük veya küçük harfe çevirebilir ya da metindeki kelimelerin ilk harflerini büyütebilir. 

• UPPERCASE; (Metindeki tüm harfleri büyük harfe çevirir.)
• LOWERCASE; (Metindeki tüm harfleri küçük harfe çevirir.)
• CAPITAL; (Metindeki kelimelerin ilk harflerini büyük hale çevirir.) 
• NONE : Metin dönüşümü yapılmaz. Varsayılan değerdir..

olmak üzere 4  farklı şekilde kullanılabilir.. 

CSS

p  {text-transform:uppercase;}
div {text-decoration:lowercase;}
span {text-decoration:capitalize;}

HTML

 <p> Tüm harfler büyük (uppercase) </p>
  <div> Tüm harfler küçük (lowercase)</div>
 <span> Tüm kelimelerin ilk harfi büyük (capitalize) </span>

EKRAN

TEXT-INDENT

Metinlerde paragraf boşluğu bırakır. Yani metinlerin ilk satırı ile satır başı arasındaki boşluk miktarıdır. Eğer metin 1 satırdan fazla ise , ilk satır bu boşluğu alaırken , diğer satırlar satır başından başlayacaktır. Padding-left ile  karıştırılmamalıdır...

CSS

p  {text-indent: 2rem;}

HTML

 <p> Lorem ipsum, dolor sit amet consectetur adipisicing, elit. Odio illum qui eum eligendi unde facere dolorum, fugit possimus expedita. Accusantium, earum beatae ut itaque, aspernatur quidem? Corporis unde ab tempora.</p>

EKRAN

Paragraf boşluğu 2rem olarak belirlendiği için ilk satır sol kenardan (satır başı) 2rem öteden başlar..,

LETTER-SPACING

Metin içinde yer alan karakterler arasındaki boşluğu ayarlamak için kullanılır.

CSS

p  {letter-spacing: 5px;}

HTML

 <p> Lorem ipsum, dolor sit amet consectetur adipisicing, elit. Odio illum qui eum eligendi unde facere dolorum, fugit possimus expedita. Accusantium, earum beatae ut itaque, aspernatur quidem? Corporis unde ab tempora.</p>

EKRAN

Harf boşluğu 5px olarak belirlendiği için paragraftaki tüm harfler arasındaki mesafe 5px olur...

WORD-SPACING

Metin içinde yer alan kelimeler arasındaki boşluğu ayarlamak için kullanılır.

CSS

p  {word-spacing: 50px;}

HTML

 <p> Lorem ipsum, dolor sit amet consectetur adipisicing, elit. Odio illum qui eum eligendi unde facere dolorum, fugit possimus expedita. Accusantium, earum beatae ut itaque, aspernatur quidem? Corporis unde ab tempora.</p>

EKRAN

Kelimeler arası boşluk 50px olarak belirlendiği için paragraftaki tüm kelimeler arasındaki mesafe 50px olur...

LINE HEİGHT

Yazı ve metinlerde satır yüksekliğini belirler.. Bİrden fazla satırı olan paragraflarda etkisi daha çok anlaşılır.. 

CSS

p:first-child { line-height:20px; color:orange } 
p:last-child { line-height: 30px; } 

HTML

<p> Lorem ipsum, dolor sit amet consectetur adipisicing, elit. Odio illum qui eum eligendi unde facere dolorum, fugit possimus expedita. Accusantium, earum beatae ut itaque, aspernatur quidem? Corporis unde ab tempora.</p>

<p> Lorem ipsum, dolor sit amet consectetur adipisicing, elit. Odio illum qui eum eligendi unde facere dolorum, fugit possimus expedita. Accusantium, earum beatae ut itaque, aspernatur quidem? Corporis unde ab tempora.</p>

EKRAN

Turuncu paragrafta satır yüksekliği 20px iken ,   siyah paragrafta satır yüksekliği 30px olacaktır..

Görüşmek üzere...