Codecademy.com CSS derslerinde öğrendiklerime, CSS içine not eklemeyi öğrenmekle devam edelim. Biliyorsunuz ki bir internet sayfası yaparken sayfalar dolusu HTML kodu yazıyorsunuz. CSS dosyanızın uzunluğu ise, sayfanızda kullandığınız farklı stil özelliklerinin sayısı ile doğru orantılı olarak artıyor. Bir noktadan sonra neyi nasıl ya da neden yaptığınızın notunu kendinize ya da başkalarına yazmak iyi bir fikir olabilir. Başkalarına derken, örneğin kodu siz yazsanız bile sayfayı bir başkası kullanıyorsa ve sonradan kodlarda değişiklik yapmak istiyorsa bu notlar işe yarayabiliyor. Bu notlara genel anlamda “comments” (“koments” şeklinde okunuyor) dendiğini, daha önce HTML – 5adlı yazımda HTML kodlarının içine not yazılmasını gösterirken söylemiştim. Şimdi gelelim CSS dosyası içine comment eklemeye.
/*Notu buraya yazıyoruz.*/
Yukarıdaki satırdaki gibi basit bir kod, CSS içine not eklemenizi sağlıyor. Yani bölü işareti, ardından yıldız ile notu açıp, notu yazıp sırasıyla yıldız ve bölü işaretleri ile notumuzu kapatıyoruz.
Bu ufak bilgiden sonra font-family terimi ile kodunu yazdığımız yazı tipleri hakkında birkaç şey söylemek istiyorum. Sayfanın kodunda ne yazarsa yazsın, aslında görüntülenebilen yazı tipleri konusunda bilgisayarımızda yüklü olan ve tarayıcımızın desteklediği yazı tiplerine bağımlıyız. Başka bir deyişle, internet sitesini hazırlayan kişinin kodunu yazdığı yazı tipini her zaman göremeyebiliriz. Bu konuda CSS’in bize sağladığı bir kolaylık var. CSS – 2 adlı yazıda bahsettiğim üzere, kod yazma aşamasında yazı tipi özelliğini tanımlarken tek bir değer girmek durumunda değilsiniz. Asıl gösterilmesini istediğiniz yazı tipini yazıp bir virgül koyup sonra, eğer o yazı tipi gösterilemiyorsa gösterilmesini istediğiniz ikinci ve hatta üçüncü yazı tiplerini yazabilirsiniz. Tabi o özellik için girmek istediğiniz son değerin sonuna, yine noktalı virgülü koyarak o özelliğin değerlerinin bittiği konusunda tarayıcıyı haberdar etmeyi unutmamak gerektiğini unutmamamız gerekiyor. Unutulmaması gereken bir diğer nokta da, önceden HTML derslerinde de dile getirmiş olduğum gibi, yazı tipinin büyük harf ile başlaması gerektiği.
Yukarıda bahsettiğim ve büyük harfle başlaması gereken yazı tipleri dışında CSS içine entegre olan yani default olarak CSS içinde kayıtlı olan üç çeşit yazı tipi sınıfı (typefaces) mevcut. Aşağıda bu yazı tipi sınıflarını sıralıyor ve o sınıflara dahil olan yazı tiplerine örnekler veriyorum.
- serif: Bu yazıda olduğu gibi harflerin uçlarında küçük dekoratif detayları olan yazı tipi. Örnekler:
- Garamond, serif sınıfında bir yazı tipidir.
- Georgia, serif sınıfında bir yazı tipidir.
- Times New Roman, serif sınıfında bir yazı tipidir.
- sans serif: Bu yazıda olduğu gibi harflerin uçlarında dekoratif detayları olmayan yazı tipi. Örnekler:
- Arial, sans serif sınıfında bir yazı tipidir.
- Calibri, sans serif sınıfında bir yazı tipidir.
- Verdana, sans serif sınıfında bir yazı tipidir.
- cursive: Burada olduğu gibi el ile yazılmış hissi veren yazı tipi. Örnekler:
- Comic Sans, cursive sınıfında bir yazı tipidir.
- Florence, cursive sınıfında bir yazı tipidir.
İnternet sayfanızda, yukarıda sözü geçen üç yazı tipi sınıfından birini kullanmak istiyorsanız kullanmanız gereken özellik yine font-family özelliği olacak ancak değerleri yazarken, yazı tiplerinde olduğu gibi ilk harfi küçük yapmayacağız. Ayrıca hatırlarsanız birden fazla kelime içeren yazı tipleri için değer adını TimesNewRoman şeklinde bitişik ve her bir kelimenin ilk harfi büyük olacak şekilde yazıyorduk yazı tipi sınıflarından iki kelimeden oluşan sans serif değerini yazarken ise sans-serif şeklinde yani iki kelimenin arasına bir tire işareti koyarak yazmamız gerekiyor.
Öneri olarak, sitenizde kullanacağınız yazı tipini kodladıktan sonra, o yazı tip hangi yazı tipi sınıfına ait ise, o sınıfı da eklemeniz. Böylece, eğer okuyucularınızın bilgisayarı ya da tarayıcısı sizin göstermek istediğiniz yazı tipini tanımıyor olsa bile, göstermek istediğinize yakın bir yazı tipi görüntülenmesini garantiye alabilirsiniz.
Hemen bir örnek verelim. Diyelim ki sayfanızda yazacağınız paragrafların Comic Sans yazı tipinde görüntülenmesini istiyorsunuz. CSS kodlarını yazarken, Comic Sans değerinin hemen ardından cursive değerini de yazarsanız, belirli bir bilgisayarda, görüntülenecek yazı tipinin Comic Sans olmasını garantileyemeseniz bile en azından bir çeşit el yazısı olmasını garantileyebilirsiniz. Böyle bir kodu aşağıdaki gibi yazıyoruz.
p {
font-family: ComicSans, cursive;
}
Yukarıdaki örnekte font-family özelliği için yazdığımız ilk değerden sonra virgül, ikinci yani son değerden sonra ise noktalı virgül koyduğumuza, yazı tipi olan Comic Sans değerindeki iki kelimeyi bitişik ve ilk harfleri büyük olarak, yazı tipi sınıfı olan cursive’i ise küçük harf ile yazdığımıza dikkat çekmek istiyorum.
İkinci bir örnek daha yapalım.
p {
font-family: Calibri, sans-serif;
}
Yukarıdaki örnekte ise dikkat edin, iki kelimeden oluşan yazı tipi sınıfını, kelimelerin arasına tire koyarak yazdık.
