CSS Dersleri 13 - Metin (Text) Özellikleri

Merhaba değerli Kodlama Vakti takipçileri, bu dersimizde CSS Text (Metin) Özellikleri konusunu öğreneceğiz.

color : Metin Rengi

CSS'de "color" özelliği, metnin rengini ayarlamak için kullanılır.Bir sayfa için varsayılan metin rengi body seçicisinde tanımlanır.

body {
  color: blue;
}

h1 {
  color: green;
}

text-align : Metin Hizalama

CSS'de "text-align" özelliği , bir metnin yatay hizalamasını ayarlamak için kullanılır.Metin sola , sağa hizalanmış, ortalanmış veya iki yana yaslanmış olabilir.

Aşağıdaki örnek ortaya , sola ve sağa hizalanmış metni gösterir (metin yönü soldan sağa ise sola hizalama varsayılan, metin yönü sağdan sola ise sağa hizalama varsayılandır):

h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}

"text-align" özelliği "justify" olarak ayarlandığında, her satırın genişliği eşit olacak ve sol ve sağ kenar boşlukları düz olacak şekilde uzatılır.

div {
  text-align: justify;
}

direction : Metin Yönü

CSS'de "direction" ve "unicode-bidi" özellikleri, bir etiketin metin yönünü değiştirmek için kullanılabilir. Genellik sağdan yaslamalı dillerde (Arapça) kullanılır.

p {
  direction: rtl;
  unicode-bidi: bidi-override;
}

vertical-align : Dikey hizalama

CSS'de "vertical-align" özelliği , bir etiketin dikey hizalamasını ayarlar.

img.top {
  vertical-align: top;
}

img.middle {
  vertical-align: middle;
}

img.bottom {
  vertical-align: bottom;
}

text-decoration : Metin Biçimlendirme

CSS'de "text-decoration" özelliği, metindeki biçimlendirmeleri ayarlamak veya kaldırmak için kullanılır. Bu özelliği genelde linklerde ki alt çizgiyi kaldırmak için kullanırız.

a {
  text-decoration: none;
}

h1 {
  text-decoration: overline;
}

h2 {
  text-decoration: line-through;
}

h3 {
  text-decoration: underline;
}

text-transform : Metin Dönüşümü

CSS'de "text-transform" özelliği , bir metindeki büyük ve küçük harfleri belirtmek için kullanılır. Bir metindeki harflerin tamamını ya büyük yada küçük yapmak için veya sadece baş harflerini düzenlemek için kullanılır.

p.uppercase {
  text-transform: uppercase;
}

p.lowercase {
  text-transform: lowercase;
}

p.capitalize {
  text-transform: capitalize;
}

text-indent : Metin Girintisi

CSS'de "text-indent" özelliği, bir metnin ilk satırının girintisini belirtmek için kullanılır:

p {
  text-indent: 50px;
}

letter-spacing : Harf Boşluğu

CSS'de "letter-spacing" özelliği, bir metindeki karakterler arasındaki boşluğu belirtmek için kullanılır.

h1 {
  letter-spacing: 3px;
}

h2 {
  letter-spacing: -3px;
}

line-height : Satır Yüksekliği

CSS'de "line-height" özelliği, satırlar arasındaki boşluğu belirtmek için kullanılır:

p.small {
  line-height: 0.8;
}

p.big {
  line-height: 1.8;
}

word-spacing : Kelime Boşluğu

CSS'de "word-spacing" özelliği, bir metindeki kelimeler arasındaki boşluğu belirtmek için kullanılır.

h1 {
  word-spacing: 10px;
}

h2 {
  word-spacing: -5px;
}

white-space : Beyaz Boşluk

CSS'de "white-space" özelliği, bir etiket içindeki beyaz boşluğun nasıl işlendiğini belirtir.

p {
  white-space: nowrap;
}

text-shadow : Metin Gölgesi

CSS'de "text-shadow" özelliği, bir metne gölge ekler.

h1 {
  text-shadow: 2px 2px 5px red; /* yatay gölge,dikey gölge,renk ve dağılım */
}