Evet, arkadaşlar daha önceki yazımda tasarım için gerekli hazırlıklarımızı yaptık ve şimdi tasarımımızın css kodlama bölümüne geçiyoruz. İlk olarak sizlere Font ve Text özelliklerinden bahsetmek istiyorum.
İlk olarak Font etiketinden başlayalım css de sitemizdeki yazıların yazı tipleri, renkleri, büyüklükleri gibi özellikleri Font etiketi ile tanımlıyoruz. Fakat bir çok özelliği barındırsada Font etiketi ile yapamadığımız birkaç özelliği de text etiketi sayesinde kullanabiliyoruz.
Font Etiketi Özellikleri
Font-size: Font büyüklüğü
Kullanımdaki standart değerler tercih edilebileceği gibi direkt olarak punto (pt)
değeri de verilebilir.
Standart değerler:
• xx-large (en büyük )
• x-large (biraz büyük)
• large (büyük)
• medium (orta)
• small (küçük)
• x-small (biraz küçük)
• xx-small (en küçük)
Alt Özellikler:
• font-family : Yazı tipini belirler. Arial, Arial Black, Verdana gibi yazı tipi
isimlerini alabilir.
• font-weight : Yazı tipinin kalınlık incelik durumunu belirler.
• bold : Yazıyı kalın yapar.
• normal : Yazının normal halde olmasını sağlar. Bu özellik yazılmadığında
normal özellik alınır.
• font-style : Yazının yatık olup olmamasını sağlar.
• italic : Yazının sağa doğru yatık olmasını sağlar.
• color : Yazının rengini belirler. Gray, yellow, green gibi renklerin ingilizce
karşılıklarını alabilir.
Font Etiketi Kullanımı:
Bu örnekte paragraf etiketi olan “p” yi kapsayan font özelliklerini tanımlıyoruz.
p {
font-size : 16pt;
font-family : Arial Black;
font-weight : bold;
font-style : italic;
color : #0707FF;
}
Text Etiketi Özellikleri
text-transform :
• lowercase : Yazının tümünün küçük harf olmasını sağlar.
• uppercase : Yazının tümünün büyük harf olmasını sağlar.
• capitalize : Yazının istenilen şekilde kalmasını sağlar.
text-decoration :
• underline : Yazının altının çizili olmasını sağlar.
• overline : Yazının üstünün çizili olmasının sağlar.
• line-through : Yazının üstünün çizili olmasını sağlar.
• none : Yazının herhangi bir yerine çizgi çekilmemesini sağlar.
text-align:
• left: Yazının sola bitişik olmasını sağlar.
• center : Yazının ortada olmasının sağlar.
• right : Yazının sağa bitişik olmasını sağlar.
• line-height :Yazının normal satırdan çizgi yüksekliğini belirler. 3px, 5px
gibi değerler alır.
• text-ident : Yazının soldan ne kadar boşlukla içeriden başlayacağını
belirler. 5px, 10px gibi değerler alır.
Kullanımı:
Bu örnekte paragraf etiketi olan “p” yi kapsayan text özelliklerini tanımlıyoruz.
p {
text-transform : uppercase;
text-decoration : overline;
text-align : right;
line-height : 5px;
text-indent : 10px;
}
