Merhaba sevgili TürkHackTeam üyeleri, CSS derslerimize kaldığımız yerden devam ediyoruz, bu dersimizde CSS ile Text ve Font özelliklerini anlatmaya çalışacağım. Öncelikle bu derste sıklıkla CSS seçicileri kullanacağımızı belirtmek isterim. Eğer bu konuyla ilgili yeterli bilgi sahibi değilseniz daha önceden açmış olduğum CSS derslerine göz atmanızı tavsiye ederim. Tüm text ve font özelliklerine değinmeyeceğim, sadece en çok ihtiyaç duyulan özelliklerden bahsedeceğim.
Color
Color özelliği metnin rengini değiştirmek için kullanılır. Bir metnin rengi değiştirilirken 3 farklı türde değer atanabilir.
Rengin İngilizce ismini yazarak (red, blue, green)
Rengin HEX kodunu yazarak. (#ff45ca)
Rengin RGB değerini yazarak. Örneğin rgb(255,0,113)
Kod:
body {
color: black;
}
h1 {
color:# 494949;
}Yukarıda kodlara baktığımızda sayfanın tümünde kullanılacak varsayılan yazı rengi siyah olarak, tüm h1 başlıklar ise HEX kodu verilen renkte biçimlendirilecektir.
Font Size
Font-size özelliği metnin yazı büyüklüğünü ayarlamak için kullanılmaktadır. Büyüklük değerleri piksel(px), punto (pt), em(em), yüzde(%) gibi değerler alabilir. Font-size özelliğinin varsayılan değeri, paragraflar için 16px=1 em=12pt=100% dür.
Kod:
p {
font-size: 14px;
}
h1 {
font-size:150%;
}Font Family
Font-family özelliği metinin yazı tipini değiştirmek için kullanılır. Font-family özelliği yazılırken tarayıcı desteğini tamamen sağlamak için 3 farklı yazı tipi aralarında virgül olacak şekilde yazılabilir. Bu bir zorunluluk değildir.
Kod:
p {
font-family: "Times New Roman", Times, serif;
}Dikkat edeceğiniz üzere birden fazla kelimeden oluşan yazı tipleri çift tırnak arasına alınarak kullanılmıştır.
Text Aligment
Text-aligment metni yatayda hizalamak için kullanılır. Metin sağa (right), sola (left) ve ortaya (center) hizalanabileceği gibi iki yana da yaslanabilir (justify)
Kod:
h1 {
text-align: center;
}Text Decoration
Text-decoration özelliği metnin altı çizgili(underline), üstü çizgili gibi şekillerde biçimlendirilmesini sağlar. En çok kullanıldığı yer ise menüler yaparken <a> etiketinin varsayılan altı çizgili halini iptal etmektir.
Kod:
a {
text-decoration: none;
}Önemli noktaların altını çizmek için bir class yazmak istersek;
Kod:
.alticizili {
text-decoration: underline;
}Font Style
Font-style özelliği genellikle metni italik yapmak için kullanılır.
Kod:
.normal {
font-style: normal;
}
.italik {
font-style: italic;
}Font Weight
Font-weight özelliği metni kalınlaştırmak veya inceltmek için kullanılır. Bu özellik normal, bold (kalın) gibi değer alabileceği gibi 100,200 900 gibi değerlerde alabilir.
Kod:
p.kalin{
font-weight: bold;
}
