Yazı Tipi Boyutu

Coddy'nin HTML Journey'sinin CSS ile Stil Verme bölümünün bir parçası. Ders 19 / 76.

CSS'te font-size özelliği, bir HTML öğesindeki metnin boyutunu kontrol etmek için kullanılır.

Yazı tipi boyutlarını belirtmek için kullanılan bazı yaygın birimler şunlardır:

Pikseller (px): Yazı tipi boyutunu piksel cinsinden belirten mutlak bir birimdir. Yazı tipi boyutlarını ayarlamak için en basit ve en sık kullanılan birimdir.

Ems (em): Üst öğenin yazı tipi boyutunu temel alan göreli bir birimdir. Örneğin, üst öğenin yazı tipi boyutu 16px ise 1em, 16px değerine; 2em ise 32px değerine eşittir ve bu şekilde devam eder.

Rem (rem): Kök öğenin (<html>) yazı tipi boyutuna bağlı olan göreli bir birimdir. Üst öğelerin yazı tipi boyutundan etkilenmediği için belge genelinde daha tutarlı bir ölçüm sağlar.

Yüzdeler (%): Üst öğenin yazı tipi boyutuna bağlı olan, em birimine benzer göreli bir birimdir. Örneğin, üst öğenin yazı tipi boyutu 16px ise 100%, 16px değerine; 150% ise 24px değerine eşittir ve bu şekilde devam eder.

Örneğin:

p {
    font-size: 16px;
}

h1 {
    font-size: 2.5em;
}

body {
    font-size: 1.4rem;
}

.small-text {
    font-size: 80%;
}

Bu örnekte, tüm <p> (paragraf) öğelerinin yazı tipi boyutu 16px olarak ayarlanır, tüm <h1> başlıkları 2.5em olarak ayarlanır (bu değer, üst öğelerinin yazı tipi boyutuna göre belirlenir), belgenin temel yazı tipi boyutu 1.4rem olarak ayarlanır ve small-text sınıfına sahip tüm öğelerin yazı tipi boyutu 80% olarak ayarlanır (bu değer, üst öğelerinin yazı tipi boyutuna göre belirlenir).

Görev

Kolay

Sana bir başlık (<h1>), bir paragraf (<p>) ve bir bölüm (<div>) içeren bir HTML belgesi verildi. Bu öğeleri biçimlendirmek için font-size özelliğini kullanman gerekiyor. Aşağıdaki adımları izle:

<h1> öğesini hedefleyen bir CSS kuralı yaz. font-size değerini 40px olarak ayarla.
<p> öğesini hedefleyen bir CSS kuralı yaz. font-size değerini 1.2em olarak ayarla.
<div> öğesini hedefleyen bir CSS kuralı yaz. font-size değerini 120% olarak ayarla.

Kendin dene

<html>
<head>
    <title>Font Size</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>