CSS'de Metni Biçimlendirme Kılavuzu

Bir web sitesi tasarlarken, metni biçimlendirmek, çekici ve okunabilir bir arayüz oluşturmanın önemli bir yönüdür.

CSS, yazı tipi rengi, boyutu, ailesi, hizalaması, aralığı ve daha fazlası dahil olmak üzere çeşitli metin öğelerini özelleştirmenize olanak tanıyan çeşitli özellikler sağlar.

Aşağıda, her bir özellik için örneklerle birlikte, her bir metin biçimlendirme özelliğine ilişkin ayrıntılı bir kılavuz bulunmaktadır.

 

Yazı rengi

Parametre: Bir renk adı(ör. red), onaltılık kod(ör. "#FF0000"), RGB değeri(ör. "rgb(255, 0, 0)") veya RGBA değeri(ör., "rgba(255, 0, 0, 0,5)").

p {  
  color: blue;  
}  

 

Yazı Boyutu

Parametre: Piksel(ör. "16px"), em birimleri(ör. "1em"), kalıcı birimler(ör. "1.2rem"), görüntü alanı genişlik birimleri(ör. "10vw") cinsinden olabilen bir boyut değeri, görüntü alanı yükseklik birimleri(örneğin, "5vh") veya diğer birimler.

h1 {  
  font-size: 24px;  
}  

 

Font ailesi

Parametre: Tercih edilen sırada belirtilen bir yazı tipi ailesi listesi. Yazı tipi adını(örn.,) belirtebilir Arial veya özel karakterler içeren yazı tipi adlarını çift tırnak içine alabilirsiniz(örn. " Times New Roman).

body {  
  font-family: Arial, sans-serif;  
}  

 

Yazı Tipi Ağırlığı ve Stili

Parametre font-weight: normal(default), bold, bolder, lighter veya 100'den 900'e kadar sayısal değerler.

parametre font-style: normal(default), italic.

em {  
  font-style: italic;  
}  
  
strong {  
  font-weight: bold;  
}  

 

Metin Dekorasyonu

Parametre: "none"(default), "underline", "overline", "line-through"  veya boşluklarla ayrılmış değerlerin birleşimi.

a {  
  text-decoration: underline;  
}  
  
del {  
  text-decoration: line-through;  
}  

 

Metin hizalama

Parametre: "left"(default), "right", "center" or "justify".

p {  
  text-align: center;  
}  

 

Satır Yüksekliği ve Kenar Boşlukları

Parametre satırı yüksekliği: Sayısal bir değer veya geçerli yazı tipi boyutunun yüzdesi.

Parametre marjı: Piksel(px), em birimi(em), rem birimi(rem) vb. gibi bir ölçüm değeri.

p {  
  line-height: 1.5;  
  margin-bottom: 10px;  
}  

 

Çok Sütunlu Metin Düzeni

Parametre: Pozitif bir tamsayı veya "auto"(default).

.container {  
  column-count: 2;  
}  

 

Fareyle Üzerine Geldiğinde Metin Rengi Değişimi

Belirli bir parametre yok, yalnızca sözde sınıfı kullanın :hover.

a:hover {  
  color: red;  
}  

 

Durumda Metin Rengi Değişimi(etkin, ziyaret edildi)

Belirli bir parametre yok, yalnızca sözde sınıfları kullanın :active  ve :visited.

a:visited {  
  color: purple;  
}  

 

Yukarıdaki açıklamaların ve örneklerin, web sitenizde görsel olarak çekici ve ilgi çekici bir metin arayüzü oluşturmak için CSS'deki metin biçimlendirme özelliklerini nasıl kullanacağınızı ve özelleştireceğinizi anlamanıza yardımcı olduğunu umuyoruz.