CSS Yazı Özellikleri

Web tasarım derslerimizin CSS bölümüne yazı özellikleriyle devam ediyoruz. Herkese başarılar dilerim.

Metin Rengi

color özelliği seçili metnin rengini belirlemek için kullanılır.

CSS’te renkleri şu şekilde belirleriz:

• Bir renk adı ile – “red” gibi
• Bir hex değeri ile – “#ff0000” gibi
• Bir RGB değeri ile – “rgb(255,0,0)” gibi

Bir web sayfasının varsayılan yazı rengini ayarlamak için sayfanın gövdesi olan body etiketine yazarız.

Örnek:

body {
    color: blue;
}

h1 {
    color: green;
}

Metin Hizalama

text-align özelliğini web sayfalarımızda metni yatayda hizalamak için kullanırız.

Aşağıdaki örnekte bir metnin ortaya, sola ve sağa hizalanmış şekilleri gösterilmektedir.

h1 {
    text-align: center;
}

h2 {
    text-align: left;
}

h3 {
    text-align: right;
}

text-align değeri justify olarak girilirse metin, sol ve sağ kenarları (dergi ve gazetelerde olduğu gibi) düz olacak şekilde iki yana yaslanır.

div {
    text-align: justify;
}

Metin Dekorasyonu

text-decoration özelliği metne süsleme vermek ya da istenmeyen süslemeleri kaldırmak için kullanılır.

Örneğin text-decoration: none; bağlantı yazılarındaki alt çizgileri kaldırmak için kullanılır.

Elbette bu özellik yalnızca bu amaçla kullanılmıyor; aynı zamanda metinlere stil vermek ve süslemek için de kullanılır.

h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

h3 {
    text-decoration: underline;
}

Metin Dönüşümü

text-transform seçilen metinde büyük ve küçük harfleri belirlemek için kullanılır.

Tüm metni büyük ya da küçük harflerle yazmak veya her kelimenin baş harfini büyük yapmak gibi işlemleri bu özellik sayesinde yapabiliriz.

p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

p.capitalize {
    text-transform: capitalize;
}

Metin Girintisi

text-indent seçilen metnin ilk satırına girinti vermek için kullanılır.

p {
    text-indent: 50px;
}

Harf Boşluğu

letter-spacing özelliğini seçilen metinde karakterler arasındaki boşluğu ayarlamak için kullanırız. Aşağıdaki örnek, karakterler arasındaki boşluğu nasıl artırıp azaltabileceğinizi göstermektedir.

h1 {
    letter-spacing: 3px;
}

h2 {
    letter-spacing: -3px;
}

Satır Yüksekliği

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

Örnek:

p.small {
    line-height: 0.8;
}

p.big {
    line-height: 1.8;
}

Metin Yönü

direction özelliği bir öğedeki metnin hangi yöne doğru yazılacağını belirlemek için kullanılır (rtl: sağdan sola, örneğin Arapça).

div {
    direction: rtl;
}

Kelime Aralığı

word-spacing seçili metnin kelimeleri arasındaki boşluğu belirlemek için kullanılır.

h1 {
    word-spacing: 10px;
}

h2 {
    word-spacing: -5px;
}

Metin Gölgesi

text-shadow seçili metne gölge vermek için kullanılır.

h1 {
    text-shadow: 3px 2px red;
}

Web tasarım derslerimizin CSS yazı özellikleri bölümünü işledik. Herkese başarılar dilerim.