Css Metin Özellikleri

**Ada** · 09 Mayıs 2024, 15:35

Css Metin Özellikleri

Css dilinde metin düzenleme işlemleri (metnin rengini, boyutunu, konumunu,harfler ve kelimeler arası boşluk, büyük harf, küçük harf vb.) yapılmaktadır. Html biçimlendirme isimli dersimizde anlattığımız gibi Css dilinde de biçimlendirme (metin düzenleme) işlemlerinin nasıl yapıldığını öğreneceksiniz.

Css Metin Özellikleri:

color
text-align
text-decoration
text-transform
text-indent
letter-spacing
word-spacing
line-height
text-shadow
Css Color Özelliği
Css color özelliği metnin rengini belirlemek için kullanılır. Değer olarak rengin ingilizce ismi, hex veya rgb kodu kullanılabilir.

Css Color Özelliği Kullanımı
<style>

.renk
{
color:blue;
}

</style>
Kodu Çalıştır

Css Text-align Özelliği
Css text align özelliği metnin konumunu belirlemek için kullanılır. Metnin konumunu yani hizalama işlemi yapmak için text-align özelliğine ait değer bulunmaktadır. Bunlar:

Right : Metni sağa hizalamak için kullanılır.
Left : Metni sola hizalamak için kullanılır.
Center : Metni ortaya hizalamak için kullanılır.
Justify : Metindeki sağ ve sol boşlukları doldurarak sayfaya sığdırma işlemi yapar. Dergi ve gazetelerde bu yöntem kullanılır.
Right Değeri Kullanımı
<style>

.sag{

text-align:right;

}
</style>
Kodu Çalıştır

Left Değeri Kullanımı
<style>

.sol{

text-align:left;

}
</style>
Kodu Çalıştır

Center Değeri Kullanımı
<style>

.orta{

text-align:center;

}
</style>
Kodu Çalıştır

Justify Değeri Kullanımı
<style>

.metin{

text-align:justify;

}
</style>
Kodu Çalıştır

Css Text-decoration Özelliği
Css text-decoration özelliği metnin altı çizili, üstü çizili, ortası çizili veya linklerde olan alt çizgiyi kaldırmak için kullanılır. Text-decoration özelliğine ait 4 değer bulunmaktadır. Bunlar:

None : Bağlantılarda kullanılır ve bağlantının altında bulunan çizgiyi kaldırmak için kullanılmaktadır.
Underline : Metni altı çizili yapmak için kullanılır. Html dilindeki u etiketi ile aynı işlemi yapar.
Overline : Metnin üstü çizili yapmak için kullanılır.
Line-through: Metnin ortası çizili silinmiş yapmak için kullanılır. Html dilndeki del etiketi ile aynı işlemi yapar.
None Değeri Kullanımı
<style>

.baglanti{

text-decoration:none;

}
</style>
Kodu Çalıştır

Underline Değeri Kullanımı
<style>

.alticizili{

text-decoration:underline;

}
</style>
Kodu Çalıştır

Overline Değeri Kullanımı
<style>

.tepesicizili{

text-decoration:overline;

}
</style>
Kodu Çalıştır

Line-through Değeri Kullanımı
<style>

.silinmis{

text-decoration:line-through;

}
</style>
Kodu Çalıştır

Css Text-transform Özelliği
Css text-transform özelliği metinde bulunan harfleri küçük,büyük veya ilk harfleri büyük olarak yapmak için kullanılır. Text-transform özelliğine ait 3 değer bulunmaktadır. Bunlar:

Uppercase :Metindeki tüm harfleri büyük harfe dönüştürmek için kullanılır.
Lowercase : Metindeki tüm harfleri küçük harfe dönüştürmek için kullanılır.
Capitalize : Metindeki tüm kelimelerin ilk harfini büyük harfe dönüştürmek için kullanılır.
Uppercase Değeri Kullanımı
<style>

.buyuk{

text-transform:uppercase;

}
</style>
Kodu Çalıştır

Lowercase Değeri Kullanımı
<style>

.kucuk{

text-transform:lowercase;

}
</style>
Kodu Çalıştır

Capitalize Değeri Kullanımı
<style>

.ilkharfbuyuk{

text-transform:capitalize;

}
</style>
Kodu Çalıştır

Css Text-indent Özelliği
Css text-indent özelliği girinti eklemek yani paragraf eklerken ne kadar içten başlayacağını belirlemek için kullanılır. Değer olarak pixel olarak girilebilmektedir.

Text-indent Özelliği Kullanımı
<style>

.paragraf{

text-indent:25px;

}
</style>
Kodu Çalıştır

Css Letter-spacing Özelliği
Css letter-spacing özelliği metinde bulunan harfler arasında ne kadar boşluk mesafe olacağını belirlemek için kullanılır.

Letter-spacing Özelliği Kullanımı
<style>

p{

letter-spacing:5px;

}
</style>
Kodu Çalıştır

Örnek:
<style>

.bes{

letter-spacing:5px;

}

.on{

letter-spacing:10px;

}

.onbes{

letter-spacing:15px;

}
</style>
Kodu Çalıştır

Css Word-spacing Özelliği
Css word-spacing özelliği metinde bulunan kelimeler arasında ne kadar boşluk mesafe olacağını belirlemek için kullanılır.

Word-spacing Özelliği Kullanımı
<style>

.kelimelerarasi{

word-spacing:25px;

}

</style>
Kodu Çalıştır

Css Line-height Özelliği
Css line-height özelliği satırlar arasındaki mesafeyi ayarlamak için kullanılır.

Line-height Özelliği Kullanımı
<style>

.satirarasi{

line-height:10px;

}

</style>
Kodu Çalıştır

Css Text-shadow Özelliği
Css text-shadow özelliği metne gölge eklemek için kullanılır.

Texth-shadow Özelliği Kullanımı
text-shadow: Kaç Pixel Yanda Olacağı; Kaç Pixel Altta Olacağı; Renk;

Örnek:
<style>
.golge{
text-shadow:30px 10px blue;
}
</style>
Kodu Çalıştır

www.forumbizim.com

**iÇRe** · 09 Mayıs 2024, 20:19

Emeğine sağlık canım🥰💐

Forum	Bilgilendirme
Powered by vBulletinÂ® Version 3.8.6 Copyright Â©2000 - 2023, Jelsoft Enterprises Ltd. ForumBizim.Com Forum Sahibi: ForumBizim	5846 sayılı Fikir ve Sanat Eserleri Kanunu geregince sitemizde telif hakkı bulunan mp3,video v.b. eserlerin paylaşımı yasaktır. Yasal işlem olması halinde paylaşan kişi yada kişilerin bilgileri gerekli kuruma verilecektir.

Konuyu Toplam 1 Üye okuyor. (0 Kayıtlı üye ve 1 Misafir)