CSS'de Metin Özellikleri

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.

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;
}

# 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 */
}