09 Mayıs 2024, 15:35
|
#1
|
|
Css Metin Özellikleri
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
|
|
|