Css ile Text ve Fonts Kullanımı

Değerli dostlar bu dersimizde Css ile Text yani yazılarımızı nasıl özelleştireceğimizi öğreneceğiz. Css ile Text özelliklerini öğrendikten sonra Css Font özelliği ile yazılarımızın yazı tiplerini değiştirmeyi öğreneceğiz.

Dilerseniz hiç vakit kaybetmeden Css Text özelliklerimiz ile başlayalım.

Css Text Yazı Özelleştirme

Bu konu başlığımız altında Css ile en çok kullandığımız Text özelliklerini açıklaması ile göstereceğiz. Aşağıda yer alan örnek kodlarımızı inceleyelim.

{
  color: blue; /* yazı rengi */
  text-align: center; /* yazı ortalama */
  text-align: left; /* yazıyı sola yaslama */
  text-align: right; /* yazıyı sağa yaslama */
  text-align: justify; /* yazıyı sığdırma */
  text-decoration: none; /* Yazı alt çizgi kaldırma */
  text-decoration: overline; /* yazının üstünü çizme */
  text-decoration: line-through; /* yazının ortasını çizme */
  text-decoration: underline; /* yazının altını çizme */
  text-transform: uppercase; /* yazılar büyük harf */
  text-transform: lowercase; /* yazılar küçük harf */
  text-transform: capitalize; /* yazının ilk harfi büyük */
  text-indent: 50px; /* yaznın solundan boşluk bırakır */
  letter-spacing: 3px; /* yazı içerisinde harfler arası boşluk yaratır */
  line-height: 0.8; /* yazıya yukarıdan ve aşağıdan boşluk yaratır */
  word-spacing: 10px; /* yazı içerisinde kelimeler arası boşluk yaratır */
  text-shadow: 3px 2px red; /* yazıya gölge özelliği katar */
}

Evet dostlar yukarıda Css ile Text özelliklerinden en önemlilerini açıklamaları ile yazdım. Sizlerde kendiniz deneyerek alıştırmalar yapabilirsiniz.

Css Font Yazı Tipi Değiştirme

Css ile sayfamıza bir Font özelliği vermediğimizde varsayılan olarak Times New Roman yazı tipinde olarak gelir. Bu yazı tipini değiştirmek mümkündür. Bunun için Css de font-family özelliğini kullanırız. Aşağıdaki örnek kodumuzu inceleyelim.

p {
  font-family: "Times New Roman", Times, serif;
}

Yukarıda yer alan örnek kodumuzda <p> Html elementimize Font özelliği kazandırdık. Şimdi dilerseniz Css içerisinde yer alan diğer Font özelliklerini inceleyelim.

{
  font-style: normal; /* normal yazı */
  font-style: italic; /* eğik yazı */
  font-style: oblique; /* eğik yazı */
  font-size: 40px; /* yazı boyutu */
  font-weight: normal; /* yazı kalınlığı normal */
  font-weight: bold; /* kalın yazı */
}

Evet dostlar yukarıda yer alan örnek kodumuzda belirli Css Font özelliklerini açıklamaları ile yazdım. Örnekler ile konuyu pekiştirmeyi unutmayın. Diğer bir derste görüşmek üzere.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Shares