CSS Metin (Text)

CSS Metin (Text)

CSS, metni biçimlendirmek için birçok özelliğe sahiptir.

Metin Rengi (Text Color)

color özelliği, metnin rengini ayarlamak için kullanılır. Renk şu şekilde belirlenir:

• renk adı (name) - "kırmızı" gibi
• HEX değeri - "#ff0000" gibi
• RGB değeri - "rgb(255,0,0)" gibi

Bir sayfa için varsayılan metin rengi, gövde (body) seçicisine tanımlanır.

Örnek:

body {
  color: blue;
}

h1 {
  color: green;
}

Metin Rengi ve Arka Plan Rengi (Text Color and Background Color)

Aşağıdaki örnekte, hem background-color özelliğini hem de color özelliğini kullanıyoruz:

Örnek:

body {
  background-color: lightgrey;
  color: blue;
}

h1 {
  background-color: black;
  color: white;
}

div {
  background-color: blue;
  color: white;
}

Metin Hizalama (Text Alignment)

Metin hizalama özelliği, bir metnin yatay hizalamasını ayarlamak için kullanılır.

Bir metin sola veya 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ılandır ve metin yönü sağdan sola ise sağa hizalama varsayılandır):

Örnek:

h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}

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

Örnek:

div {
  text-align: justify;
}

Son Satır Hizalama (Text Align Last)

text-align-last özelliği, bir metnin son satırının nasıl hizalanacağını belirtir.

Örnek:

p.a {
  text-align-last: right;
}

p.b {
  text-align-last: center;
}

p.c {
  text-align-last: justify;
}

Metin Yönü (Text Direction)

Direction ve unicode-bidi özellikleri, bir elemanın metin yönünü değiştirmek için kullanılır.

Örnek:

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

Dikey Hizalama (Vertical Alignment)

Dikey hizalama özelliği, bir öğenin dikey hizalamasını ayarlar.

Örnek:

img.a {
  vertical-align: baseline;
}

img.b {
  vertical-align: text-top;
}

img.c {
  vertical-align: text-bottom;
}

img.d {
  vertical-align: sub;
}

img.e {
  vertical-align: super;
}

Metin Dekorasyonu (Text Decoration)

text-decoration özelliği, metin süslemelerini ayarlamak veya kaldırmak için kullanılır.

text-decoration: none; genellikle bağlantılardan alt çizgileri kaldırmak için kullanılır.

Örnek:

a {
  text-decoration: none;
}

Örnek 2:

h2 {
  text-decoration: overline;
}

h3 {
  text-decoration: line-through;
}

h4 {
  text-decoration: underline;
}

Metin Dönüştürme (Text Transformation) 

text-transform özelliği, bir metinde büyük ve küçük harfleri belirtmek için kullanılır.

Her şeyi büyük veya küçük harflere dönüştürmek ya da her kelimenin ilk harfini büyük harf yapmak için kullanılabilir.

p.uppercase {
  text-transform: uppercase;
}

p.lowercase {
  text-transform: lowercase;
}

p.capitalize {
  text-transform: capitalize;
}

CSS Metin Aralığı (CSS Metin Aralığı)

Metin Girintisi (Text Indentation)

text-indent özelliği, bir metnin ilk satırının girintisini belirtmek için kullanılır.

Örnek:

p {
  text-indent: 50px;
}

Harf Boşluğu (Letter Spacing)

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

Aşağıdaki örnek, karakterler arasındaki boşluğun nasıl artırılacağını veya azaltılacağını göstermektedir.

h1 {
  letter-spacing: 5px;
}

h2 {
  letter-spacing: -2px;
}

Satır Yüksekliği (Line Height)

line-height özelliği, satırlar arasındaki boşluğu belirtmek için kullanılıyor.

p.small {
  line-height: 0.8;
}

p.big {
  line-height: 1.8;
}

Kelime Aralığı (Word Spacing)

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

Aşağıdaki örnek, kelimeler arasındaki boşluğun nasıl artırılacağını veya azaltılacağını göstermektedir.

p.one {
  word-spacing: 10px;
}

p.two {
  word-spacing: -2px;
}

Beyaz Boşluk (White Space)

white-space özelliği, bir elementin içindeki boşlukların nasıl işlendiğini belirtir.

Aşağıdaki örnek, bir öğenin içindeki metin kaydırmanın nasıl devre dışı bırakılacağını göstermektedir.

Örnek:

p {
  white-space: nowrap;
}

Metin Gölgesi (Text Shadow)

text-shadow özelliği metne gölge ekler.

En basit kullanımında, yalnızca yatay gölgeyi (2px) ve dikey gölgeyi (2px) belirtirsiniz.

Örnek: 

h3 {
  text-shadow: 2px 2px;
}

Ardından, gölgeye bir renk (kırmızı) ekleyelim.

Örnek:

h3 {
  text-shadow: 2px 2px red;
}

Ardından, gölgeye bir bulanıklık efekti (5 piksel) ekleyelim.

Örnek:

h3 {
  text-shadow: 2px 2px 5px red;
}