CSS'de yazı tipi boyutlarını nasıl değiştireceğinizi bilmiyorsanız, bir web geliştiricisi olarak ilerleyemezsiniz. Neyse ki, bu kılavuz sizi kapsıyor.
HTML sayfanızın farklı yönlerini şekillendirebilmek, web tasarımcıları ve geliştiricileri için önemli bir beceridir. HTML web sayfalarınızı yazı tipi renkleri ve boyutlarıyla biçimlendirmek için CSS'ye aşina olmanız gerekir. Yazı tipi boyutunu özel olarak hedeflemek için CSS yazı tipi boyutu özelliğini kullanabilirsiniz.
CSS kullanarak HTML yazı tipi boyutunu değiştirmenin bir yolunu arıyorsanız, sizin için hazırladık. CSS yazı tipi boyutu özelliğine bir girişle başlayalım .
CSS yazı tipi boyutu Özelliğini anlama
CSS'deki font-size özelliği, HTML metninin boyutunu değiştirmeniz gerektiğinde kullanışlıdır. Bir HTML sayfasındaki her metin parçasının boyutunu değiştirmek veya değiştirilecek belirli öğeleri hedeflemek için bu özelliği kullanabilirsiniz.
Genellikle her şeyin aynı boyutta olmasını istemediğiniz için belirli öğelerin hedeflenmesi önerilir. Görsel bir hiyerarşiyi takip etmeyen metnin taranması ve üst düzey başlıkları düşük düzeyli başlıklardan ayırt etmesi zordur.
Daha basit bir ifadeyle, font-size özelliğini kötüye kullanmayın. Bir başlığın öne çıkmasını istiyorsanız, bunun için farklı HTML başlık etiketleri vardır. Açıklamalarla birlikte farklı etiketler, nitelikler ve daha fazlası için HTML temelleri hile sayfamıza göz atın .
CSS yazı tipi boyutu özelliği iki tür değer alır: mutlak ve göreli.
Mutlak uzunluk değerleri (yani px ) sabittir, göreceli olanlar (örneğin em ve ex ) esnektir. Örneğin, em gibi yazı tipine bağlı bir birim için, boyut genellikle üst öğenin yazı tipi boyutu tarafından belirlenir. Ancak, rem gibi kök tabanlı yazı tipiyle ilgili birimler , kök öğenin yazı tipi boyutundan ( <html> ) etkilenir .
Her birinin artıları ve eksileri vardır, ancak her şeye odaklanmanın özünde, bu makalede bunları tartışmayacağız.
CSS'de Bir HTML Öğesinin Yazı Tipi Boyutu Nasıl Değiştirilir
Bazı standart CSS sözdizimini kullanarak HTML metninin yazı tipi boyutunu değiştirebilirsiniz.
İlk önce seçiciyi (değiştirmek istediğiniz metni) belirtin ve bazı küme parantezlerini açın. Ardından, iki nokta üst üste gelen font-size özelliğini girin, HTML metninizin sunulmasını istediğiniz belirli boyutu belirtin ve noktalı virgülle kapatın.
İşte sözdizimi:
CSS selector {Konsepti daha iyi anlamak için, birkaç ek kod satırı (bir başlık ve bir paragraf) içeren aşağıdaki HTML standart şablonunu inceleyin:
font-size: value;
}
<!DOCTYPE html>Paragraf öğesinin yazı tipi boyutunu değiştirmek istiyorsanız, onu seçmeniz (sınıf, etiket veya kimlik aracılığıyla) ve CSS yazı tipi boyutu özelliğini kullanarak tercih ettiğiniz birimlerle özel bir değer ayarlamanız gerekir. Örneğimizde piksel ( px ) kullanacağız.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Simple HTML Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>This is my first heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</body>
</html>
p {Büyük projelerde satır içi CSS genellikle tavsiye edilmese de, HTML metninin boyutunu değiştirmek için de kullanabilirsiniz. Yukarıdaki harici CSS kodundan not alarak, aynı şeyi satır içi şu şekilde uygulayabiliriz:
font-size: 18px;
}
<!DOCTYPE html>HTML etiketindeki metin artık yeni bir özel boyuta sahip olacak.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Simple HTML Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>This is my first heading</h1>
<p style="font-size:18px">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</body>
</html>
CSS'de HTML Yazı Tipi Boyutunu Değiştirirken Oluşan Hataları Giderme
CSS'de metin boyutunu değiştirme sürecinin tamamı kolay görünse de, her zaman tam olarak beklediğiniz gibi sonuçlanmayabilir. Sorun yaşarsanız, değişiklikleri dosyanıza kaydedip kaydetmediğinizi kontrol ederek başlayın (ayrıca CSS sayfanızı HTML dosyanıza bağladığınızdan emin olun). Bunu yaptıysanız, satır içi yöntemi kullanmayı deneyin ve ardından sayfayı yenileyin.
Çalışırsa, CSS kodunuzla ilgili bir sorun olabilir. !important etiketini kullanmayı deneyin ve işe yararsa, bazı çakışan kodlar olmalıdır. Bu hatayı yakalamak için CSS kodunuzu satır satır ayrıştırın.
