Popüler Aramalar:  TLS Nedir?  MyBB SSL Ayarları  MyBB 1.8 Linkleri Gizleme Eklentisi  Wordpress LiteSpeed Cache Ayarları  Wordpress Eklentisiz Breadcrumb  Yandex Webmaster
CSS Dersleri 9: CSS’de Text (Metin) Özellikleri

CSS Dersleri 9: CSS’de Text (Metin) Özellikleri

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

 Yazı Bağlantısını Kopyala & Paylaş

Benzer Yazılar

  • En Popüler 5 CSS Kütüphanesi 2019

    En Popüler 5 CSS Kütüphanesi 2019

    Web geliştiricileri olarak işimizi büyük ölçüde kolaylaştıran CSS kütüphaneleri mevcut. CSS3 teknolojisinin ortaya çıkmasıyla kazanılan kolaylıklar bu CSS kütüphanelerinin artmasını sağladı. Kütüphanelerin çeşidi ve sayısı artıkça arayüz ya da bir değiş ile ön yüz geliştiricilerin işi bir hayli kolaylaştı. Projelerinizi çok daha etkin ve kolay yönetebilmenizi, efekt verebilmenizi sağlayan bu…
  • Sık Kullanılan CSS Ölçü Birimleri

    Sık Kullanılan CSS Ölçü Birimleri

    Yaklaşık 2 hafta önce bir start-up projesinde front end developer olarak işe başladım. Bu başladığım yeni proje tamamen özel yazılmış bir yazılım olduğu için tasarım yapısını, kodlama yapısını çözmem zamanımı aldı. Bir web arayüzü geliştiricisi için CSS'de ki "px" değeri can damarıdır tasarımın. Oluşturulmuş bir yapıyı alıp, ete kemiğe büründüren…
  • CSS Dersleri 10: CSS’de Font Özellikleri ve Kullanımı

    CSS Dersleri 10: CSS’de Font Özellikleri ve Kullanımı

    Selamlar, Daha önce ki CSS ders yazımda CSS'in text özelliğini, yazı özelliğini anlatmıştım. Önceki dersimizde yazılara biçim vermiştik, işte üstü çizili,altı çizili gibi bir takım text özellikleri anlatmıştım. Bu yazımda ise CSS'de Font Özellikleri ve Kullanımı anlatacağım. Daha önce ki css derslerim için buraya tıklayınız. CSS, font özellikleri metinlerin yazı tipi,kalınlık,boyut gibi…
  • CSS Dersleri 8: CSS’de Yükseklik ve Genişlik Değerleri (Width – Height)

    CSS Dersleri 8: CSS’de Yükseklik ve Genişlik Değerleri (Width – Height)

    Selamlar, CSS derslerimize kaldığımız yerden devam ediyoruz. Bu dersimizde CSS'de Yükseklik ve Genişlik Değerleri ni nasıl kullanacağımızı, html elemenlerimize nasıl yükseklik ve genişlik vereceğimizi öğreneceğiz. Daha önce ki css derslerime göz atarak eksikleriniz var ise tamamlayabilirsiniz. [mks_icon icon="fa-folder-open" color="#1e73be" type="fa"] Diğer CSS Dersleri: CSS Dersleri 1: CSS Nedir ? CSS…
CSS Dersleri 9: CSS’de Text (Metin) Özellikleri için Yorum'da Bulun

Bir Cevap Yaz

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

 Lütfen, en az 15 karakterli bir yorum belirtiniz.

 Lütfen,isminizi belirtiniz.
 Lütfen, kullanmakta olduğunuz bir e-mail adresi giriniz.
 Yukarıda ki alanı işaretlemeniz zorunludur.Aksi takdirde yorumunuz gönderilemeyecektir.

izmir escort