HTML ve CSS'ye Giriş (Bölüm 29): CSS ile Güzel Metinler (1)

CSS, metnin düzenlenmesi için birçok özelliği sağlar. Bunlar yazı tipinden font stiline ve gölgelere kadar uzanır.

CSS yazı tipi özellikleri arasında yazı tipi, yazı stil ve yazı ağırlığı bulunur. Bu özellikler tabii ki HTML öğeleri için tasarlanmıştır, yani metin içerikli öğeler (p, i vb.). Aynı zamanda tablolar için de kullanılabilirler.

font-family ile kullanılacak yazı tipi belirlenebilir.

<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
  p {font-family:verdana, sans-serif;} 
  h1 { font-family:"Courier New", Courier, monospace; }
</style>
</head>
<body>
<div>
  <h1>PSD-Tutorials.de</h1>
  <p>Das ist ein Absatz mit einem <strong>fetten Wort</strong>.</p>
  <h2>Das ist eine Überschrift mit einem <strong>fetten Wort</strong>.</h2>
</div>
</body>
</html>

Çıktı tarayıcıda şu şekilde görünüyor:

HTML ve CSS için başlangıç (Bölüm 29): CSS ile güzel metinler (1)

Tasarımcı yazı tiplerinden bazıları Arial, Helvetica ve Times Roman gibi örneklerdir. CSS özelliği olan font-family ile istenen yazı tipleri atanır. Birden fazla yazı tipi belirtiliyorsa, sıralama önemlidir. İlk belirtilen yazı tipi kullanılabilirse, o tercih edilir. Belirtilen yazı tipleri, aralarına virgül koyularak yazılır. Genellikle en sondaki talimat genel bir yazı tip ailesidir. Bu genel yazı tip ailesiyle tarayıcılara, en azından belirtilene benzer bir yazı tipi seçme imkanı sağlanır.

• serif = serifli bir yazı tipi

• sans-serif = serifsiz bir yazı tipi

• cursive = eğik yazı tipi

• fantasy = olağandışı yazı tipleri için

• monospace = eşit kalınlıkta karakterlere sahip yazı tipi.

Yazı Stili

font-style özelliği ile yazı stili belirlenebilir. Seçilen yazı tipi izin veriyorsa, italic değeriyle italik yazı oluşturulabilir.

HTML ve CSS'ye yeni başlayanlar için (Bölüm 29): CSS ile Güzel Metin (1)

Diğer yazı tipleri oblique ile eğilebilir.

Metin görünümünü etkileyen bir sonraki CSS özelliği olan font-variant ile "small-caps" tarzı kullanılabilir.

HTML & CSS'e yeni başlayanlar için (Bölüm 29): CSS ile güzel metinler (1)

Bu stil için font-variant özelliğine small-caps verilir.

Yazı Boyutu

Tabii ki yazı boyutunu belirtmek de önemlidir. CSS, bunun için font-size özelliğini sunar. Yazı büyüklükleri farklı birimlerle belirtilebilir.

• EM

• REM

• Piksel

• Yüzde

• Anahtar Kelimeler

Aşağıdaki anahtar kelimeler kullanılabilir:

• xx-small - çok, çok küçük

• x-small - çok küçük

• küçük - küçük

• küçük - üst öğeden daha küçük

• orta - orta

• büyük - büyük

• x-large - çok büyük

• xx-large - çok, çok büyük

• daha büyük - üst öğeden daha büyük

İşte yazı boyutunu belirlemek için örnek:

.eins {font-size: 10px;} 
.zwei {font-size: 20px;} 
.drei {font-size: 110%;} 
.vier {font-size: xx-large;}

Ve tarayıcıda görüntü şu şekildedir:

HTML ve CSS'ye yeni başlayanlar için (Bölüm 29): CSS ile Güzel Metinler (1)

Lütfen unutmayın, yazı boyutu tanımlama konusu oldukça karmaşıktır, çünkü farklı ölçülerin kendi avantaj ve dezavantajları vardır.

Hangi ölçü biriminin ne zaman en iyi kullanılacağı konusunda iyi bir genel bakış için buradan faydalanabilirsiniz. Okumak istemeyenler için: Ekranlar için em gibi göreceli değerler kullanın. Baskı düzenleri için ise mutlak birimler olan pt kullanın.

Yazı Ağırlığı

Son olarak, yazı ağırlığına geçiyoruz. Bu özellikle yazının kalınlığını ve gücünü belirler. Bunu yapmak için font-weight özelliği kullanılır.

.fett {
   font-weight:bold; 
}

Bu sözdizimi, vurgulanan metni kalın yazı tipiyle gösterir.

HTML ve CSS'ye Giriş (Bölüm 29): CSS ile Güzel Metinler (1)

Mümkün olan değerler bold (kalın), bolder (çok kalın), lighter (daha ince) ve normal'dır. Ayrıca 100, 200, 300, 400, 500, 600, 700, 800 ve 900 sayısal değerler de izinlidir. Bunlar, ekstra ince (100) ile özellikle kalın (900) arasında değişir.

Definitionleri Özetleme

Yazı tanımlarıyla ilgili olarak line-height özelliği de önemli bir rol oynamaktadır, bu özellik sayesinde satır yüksekliği tanımlanır. Bu özelliğe daha sonra detaylı olarak tekrar değineceğim. Bu noktada sadece bahsedilmesi gerektiği için, ardından gösterilen font özelliği ile ilgili bir rol oynar.

Şimdiye kadar sunduğumuz yazı görüntüleme bilgilerini birlikte kullanabilirsiniz. Bunun için genel font özelliğini kullanabilirsiniz. Bu özellik aşağıdaki tekil bilgileri içerir veya bunları kapsar.

• font-style

• font-variant

• font-weight

• font-size

• line-height

• font-family

font ile çeşitli yazı biçimlendirmeleri bir araya getirilebilir. Önce belirtilen özellikleri verebilirsiniz, ancak hepsini kullanmanız gerekmez. Ancak yazı boyutu ve yazı ailesi özellikleri zorunludur.

Kısayol yazımı sayesinde CSS dosyalarını daha kısa ve anlaşılır hale getirebilirsiniz.

Ancak aşağıda gösterildiği gibi sıralama yapılmalıdır. Eğer font-size ve line-height özellikleri belirtilmişse, bunlar arasına bir eğik çizgi konulur. Bu noktada sadece bir değer verilirse, bu font-size için geçerli olacaktır.

Bir örnek:

p { 
    font: italic small-caps bold 1.3em/1.5em Georgia,Times,serif; 
 }

font-size-adjust, yazı tiplerini neredeyse aynı büyüklükte gösterebilmek için geliştirildi. Aynı yazı tipleri aynı yazı yüksekliğine sahip olsa da farklı x-yüksekliklere sahiptir. Ancak daha büyük x-yüksekliğe sahip yazı tipleri daha okunaklıdır. Bu nedenle, orijinal yazı tipinin mevcut olmadığı ve daha küçük bir x-yüksekliğe sahip başka bir yazı tipiyle değiştirildiğinde, belge zor okunabilir hale gelebilir. font-size-adjust ile bu fark dengelenebilir.

Bir örnek:

h1 {
    font-family: Verdana, 
    'Times New Roman', 'Courier New';
    font-size-adjust: 0.61;
 }

Sonraki öğreticide, web sitenizin yazı görüntüsünü nasıl ayarlayabileceğinizi öğreneceksiniz.

HTML ve CSS'ye Giriş (Bölüm 28): Seçicilerle Erişim Nasıl Sağlanır (3)

HTML & CSS yeni başlayanlar için (Bölüm 30): CSS ile metni güzelleştirme (2)