Top

CSS Dersleri Bölüm 4 – Yazıların stillendirilmesi

CSS Dersleri Bölüm 4 – Yazıların stillendirilmesi

Text Color (Yazı rengi)

Renk özelliği yazının rengini değiştirebilmek için kullanılır.

CSS ile bir renk;

  • Bir hex değeri “#ff0000”
  • Bir rgb değeri “rgb(255,0,0)”
  • Bir renk ismi “red” ile tanımlanır.

CSS renk değerlerine ait referans Css derslerinin bitiminde verilecektir.

Sayfanın varsayılan rengi body seçicisinde tanımlanır. Misal;

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

W3C’nin css bildirisine göre; Color özelliğini verdiyseniz, background-color özelliğini de vermek zorundasınız.

Text Alignment (Yazı hizalama)

text-align özelliği yazının yatay hizalamasının ayarını tanımlar.

Yazı merkeze alınabilir veya sağa/sola hizalanabilir ve yahut iki tarafa hizalanabilir.

text-align, justify olarak belirlendiğinde ,her satır genişler iki yana yaslanmak için satır genişliğince ve sol ve sağ margin düz olur dergilerdeki ve gazetelerdeki gibi.

Text Decoration

text-decoration özelliği ile yazı süslemelerinin ekleyebilir ya da kaldırabilirsiniz.

text-decoration özelliğiyle,  tasarım amaçları arasında kullanım olarak alt çizgileri kaldırmaktır. Misal;

a {text-decoration:none;}

Hatta yazıyı süslemek için de kullanılır;

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

Bağlantı içermeyen yazılar için altçizgi eklemek doğru bir davranış değildir. Kullanıcının kafasını karırştırır.

Text Transformation

text-transform özelliği büyük boy ve küçük boy harflere çevirmeyi sağlar yazıda.

Her kelimenin ilk harfini büyük yapar, ya da tüm harfleri büyültür ya da küçültür. Misal;

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

Text-Indentation

text-indentation özelliği bir yazının ilk satırırının girintisini tanımlamak için kullanılır.

p {text-indent:50px;}

Ve örnekler ile uygulamaların daha fazlası;

Karakterler arasındaki boşluğu tanımlama
Karakterler arasındaki boşluğun nasıl artırılıp azaltılacağını gösterir.
Satırlar arası boşluk
Bir paragraftaki satırlar arası boşluğu tanımlar.

Bir elemente ait yazı yönünü tanımlar
Bir elemente ait yazının yönünün nasıl değiştirileceğine dair uygulama

Kelimeler arası beyaz alanının artırılması
Bir paragraftaki kelimeler arası beyaz alanın nasıl artırılacağına dair uygulama

Bir element içindeki yazıya ait yazı sarmalını kaldırma
Bir element içindeki yazının text Wrap özelliğini kaldırma uygulaması.

Bir resmin dikey hizalaması
Bir yazıdaki resmin dikey olarak nasıl hizalanacağını belirleyen uygulama.

Tüm CSS Text(yazı) Özellikleri

Özellik tanım
color Yazının rengi
direction Yazının veya yazımın yönü
letter-spacing Yazıdaki karakterlerin arasındaki boşlukların artırılması ya da azaltılması
line-height Satır yüksekliği
text-align Bir yazının yatay hizalaması
text-decoration yazıya süsleme eklenmesi ya da çıkarılması
text-indent Yazı bloku için ilk satırdaki girintinin belirlenmesi
text-shadow Yazıya gölge efekti verme
text-transform Yazı harflerinin boylarının değiştirilmesi
unicode-bidi
vertical-align Bir elementin dikey hizalaması
white-space Bir elementin içindeki beyaz alanın nasıl ele alınacağını tanımlar
word-spacing Bir yazıda kelimeler arasındaki boşluklar ayarlama

Siz neler düşünüyorsunuz? Yazımızı beğendiyseniz aşağıdaki butonlardan tavsiye edebilirsiniz, paylaşabilirsiniz veya yorumlarınızı sunabilirsiniz. Teşekkürler okuduğunuz için!

Bir önceki yazımız olan CSS Dersleri Bölüm 3 – Arkaplanların stillendirilmesi başlıklı makalemizde arkaplan, background ve css hakkında bilgiler verilmektedir. Daha fazla yazımızı görmek için HYTürkyılmaz Dijital pazarlama ve growth hacking blogu anasayfası'yı ziyaret edebilirsiniz. Yazımızı aşağıdaki paylaşım butonlarıyla paylaşarak sevginizi yayınız! Teşekkürler!

Hasan Yasin Türkyılmaz

Sosyolog, dijital stratejist. Dijital medya, reklam ve growth hacking eğitimleri ve hizmetleri sunarım. PC, konsol fark etmez. Oyun oynamayı severim.

Tüm yazıları - Websitesi

Beni takip edin!:
TwitterFacebookLinkedInPinterestGoogle PlusDiggFlickrStumbleUponYouTubeYelpRedditDelicious