Selamlar,

Daha önce ki CSS yazımda sizlere width ve height değerlerinin kullanımını göstermiştim. Bu yazımda ise CSS’de Text (Metin) Özellikleri konusunu anlatacağım. Yazı olmadan bir website olmaz arkadaşlar, yazılar websitelerin yapı taşlarından bir tanesi ama önemli olan bir yapı taşıdır. Bu yüzden websitelerimizi hazırlerken dikkat etmemiz gereken husus text (metin)’lerdir. CSS’de websitemizin tasarımını yaparken en önemli olan, kullanıcının dikkatini vereceği kısım olan yazılarımızıda css ile düzenlememiz, özellikler vermemiz gerekiyor.

CSS’de Text (Metin) Özellikleri, metinlere özel stil tanımlaması yapmak için kullanılır.CSS içerisinde metinlere etki etmek için tanımlı 12 tane metin özelliği vardır. Bunları sırasıyla anlatmaya ve birer örnek ile de göstermeye çalışacağım.

[button url=”https://www.huseyinkorbalta.com/kategori/css/” block=”true” style=”dark” target=”_blank”]Diğer CSS Derslerim için tıklayın.[/button]

CSS’de Text (Metin) Özellikleri

  • Color
  • Direction
  • Line-height
  • Letter-spacing
  • Text-Align
  • Text-decoration
  • Text-indent
  • Text-shadow
  • Text-transform
  • Unicode-bidi
  • White-space
  • Word-spacing

Color (Renk) Özelliği

Metinlere renk vermek için color özelliği kullanılır.Renk oluşturmak için kullanılan yöntemleri CSS’de Renklerin Kullanımı konusunda öğrenmiştiniz.Dilerseniz hatırlamak için tekrar bakabilirsiniz.

Örnek Kullanımı:

[syntax type=”css”]

body {
color: green;
}
h1 {
color: #ff0000;
}

[/syntax]

Body elementimize yeşil rengi verdik.Başlık etiketimize (h1) kırmızı rengi verdik.Artık sayfanın varsayılan yazı rengi yeşil, başlık rengi kırmızdır.

Direction Özelliği

Yazının yazım yönünü belirlemek için direction kullanılır.Özel olarak ltr ve rtl diye iki değeri vardır.Varsayılan değeri ltr‘dir.Yani metinler soldan başlayarak yazılır.Özellikle Arapça gibi yazıma sağdan başlanan diller için bu özellik kullanılır.

Örnek Kullanımı:

[syntax type=”css”]

div {
  direction: rtl;
}

[/syntax]

Yukarıda ki örneğimizde yazdığımız yazılar soldan başlayarak değil de sağdan başlayarak yazılacaktır.

Line-Height Özelliği

Metin satırları arasında ki boşluğu ayarlamak için kullanılır.

Örnek Kullanımı:

[syntax type=”css”]

span {
  line-height: 12px;
}
p {
/* Yukarıdakine göre metin satırlarının arasını daha fazla açar*/
  line-height: 18px;
}

[/syntax]

Letter-spacing Özelliği

Harfler ve sözcükler arasındaki boşluğu ayarlamak için letter-spacing özelliği kullanılır.

Örnek Kullanımı:

[syntax type=”css”]

p {
  letter-spacing: 4px;
}
span {
  letter-spacing: -0.5px;
}

[/syntax]

Text-align Özelliği

Metinleri sağ, sola ya da ortaya hızalamak için kullanılan bir css özelliğidir. İngilizce yer-yön ifadelerini parametre olarak almaktadır.

Örnek Kullanımı:

[syntax type=”css”]

p {
/*Yazıları sola yaslar*/
  text-align: left;
}
span {
/*Yazıları sağa yaslar*/
  text-align: right;
}
h1 {
/*Yazıları ortalar*/
  text-align: center;
}

[/syntax]

Text-decoration Özelliği

Metinlere çizgi eklemek ya da var olan çizgileri kaldırmak için text-decoration özelliği kullanılır.Varsayılan olarak linkler altı çizgili olarak gelir.Bu çizgiyi kaldırmak için text-decoration kullanılır.

CSS’in text-decoration özelliği 5 tane parametre almaktadır ancak bu parametrelerden bir tanesi güncel tarayıcılar tarafından artık kabul edilmemektedir ve web standartları arasından da çıkartılmıştır. CSS3 ile de tamamen kullanımı kalkmıştır. Anlatmasam da olur yani 🙂 Ama bilin diye göstereceğim yine de 🙂

Bu özelliğin alabileceği parametreler:

  • overline (Yazıların üstüne çizgi eklemek için kullanılır.)
  • underline (Yazıların altına çizgi eklemek için kullanılır.)
  • line-through (Yazıların üzerini çizmek için kullanılır. Örnek canlı gösterimi: böyle 😀 )
  • none (Yazıların hiçbiryerinde çizgi olmamasını sağlar. Yani altında,üstünde vb çizgileri yazının ya da linkin kaldırır.)
  • blink  (Son olarakta blink parametresi bu artık kullanılmıyor önceden dediği gibi ancak daha önceliri kullanılırken yaptığı işlem yazıların yanıp sönmesini sağlamaktı. Böyle yazılar yanıp yanıp sönüyordu. Eski sürüm tarayıcılarda bu özelliğin halen desteklendiğini ve çalıştığını görebilirsiniz.)

Bütün bu parametrelerin örnek kullanımı:

[syntax type=”css”]

/* Yazının üstüne çizgi ekler */

p {text-decoration: overline;}

/* Yazının altına çizgi ekler */

p1 {text-decoration: underline;}

/* Yazının üstünü çizer */

p2 {text-decoration: line-through;}

/* Yazıda ki tüm çizgileri kaldırır. */

a {text-decoration: none;}

/* Artık kullanılmayan bir özelliktir. */

/*Kullanıldığı zaman ki işlevi yazıların yanıp,sönmesini sağlamaktır.*/

p3 {text-decoration: blink;}

[/syntax]

Text-indent Özelliği

Metinlerin ilk satırına istenilen girintiyi vermek için text-indent özelliği kullanılır.

Örnek kullanımı:

[syntax type=”css”]

p {
  text-indent: 12px;
}

[/syntax]

Text-shadow Özelliği

Metinlere gölge vermek için text-shadow özelliği kullanılır.

Örnek kullanımı:

[syntax type=”css”]

p {
  text-shadow: 3px 3px red;
}

[/syntax]

Text-transform Özelliği

Kullanıldığı elementteki tüm yazıların bütük ya da küçük olmasını ayarlamak için kullanılır. İki tane parametre almaktadır. Bunlar; uppercase (Bütün harfleri büyük yapar. BÖYLE) ve lowercase (Bütün harfleri küçük yapar. böyle)

Örnek kullanımı:

[syntax type=”css”]

h1 {
/*Bütün harfleri büyük yapar*/
text-transform: uppercase;
}

span {
/*Btün harfleri küçük yapar*/
text-transform: lowercase;
}

[/syntax]

Unicode-bidi

Arapça gibi ters yönde yazılan metinler için direction özelliği ile birlikte kullanılan tanımlama özelliğidir.

Örnek kullanımı:

[syntax type=”css”]

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

[/syntax]

White-Space Özelliği

Metinler arasında ki beyaz boşlukların kullanımını belirler.

Örnek kullanımı:

[syntax type=”css”]

div {
white-space: pre;
}

[/syntax]

Word-spacing Özelliği

Kelimeler arasındaki boşlukları ayarlamak için word-spacing özelliği kullanılır.

Örnek kullanımı:

[syntax type=”css”]

p {
  word-spacing: 20px;
}
span {
word-spacing: -4px;
}

[/syntax]

Bitti 😀 Bu dersimde sizlere CSS’de Text (Metin) Özellikleri ni anlattım ve bildiğim bütün metin özelliklerini tek tek yazdım ve birer örnek ile de anlatmaya çalıştım. Bir sonra ki css ders yazımda görüşmek dileği ile esen kalın.

Esen Kalın
CSS’de Text (Metin) Özellikleri

Bir önceki yazım olan CSS Dersleri 8: CSS'de Yükseklik ve Genişlik Değerleri (Width - Height) başlıklı yazımı da okumanızı tavsiye ederim.

Hüseyin Körbalta

23 Nisan 1995 tarihinde Aksaray'da dünyaya geldim. Çocukluğumdan beri ilgi alanım bilgisayar ve web tasarım bu alanda kendimi sürekli geliştirmek için çabalıyorum. Şu son 3 senedir de yoğun olarak arayüz geliştiriciliğine ve back-end geliştiriciliğine önem veriyorum...

Bir Cevap Yazın

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