Blog

CSS’de HTML Yazı Tipi Ve Boyutu Nasıl Değiştirilir?

CSS’de HTML yazı tipi ve boyutu nasıl değiştirilir? bilmiyorsanız, bir web geliştiricisi olarak ilerleyemezsiniz. Bu okuyacağınız makalede kendinizi daha da çok geliştirebilirsiniz.

HTML sayfanızın farklı alanlarını iyileştirebilmek için, 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. Bu özelliği, bir HTML sayfasındaki her metin parçasının boyutunu değiştirmek veya değiştirilecek belirli öğeleri hedeflemek için 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. CSS yazı tipi boyutu özelliği iki tür değer alır.

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?

azı 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 {
yazı tipi boyutu: değer;
}

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:

<!DOCTYPE html> 
<html lang="tr"> 
<kafa> 
<meta karakter kümesi="UTF-8"> 
<meta name="viewport" content="width=cihaz genişlik, ilk ölçek=1.0"> 
<meta http-equiv="X-UA-Uyumlu" içerik="ie=edge"> 
<title>Site başlığı HTML Sayfası</title> 
<link rel="stylesheet" href="style.css"> 
</head> 
< body> 
<h1>yazı başlığı</h1> 
<p>site</p> aracılığıyla.</p> 
< 
/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.

P {
yazı tipi boyutu: 18 piksel;
}

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:

<!DOCTYPE html> 
<html lang="tr"> 
<kafa> 
<meta karakter kümesi="UTF-8"> 
<meta name="viewport" content="width=cihaz genişlik, ilk ölçek=1.0"> 
<meta http-equiv="X-UA-Uyumlu" içerik="ie=edge"> 
<title>Sayfa Başlığı Sayfası</title> 
<link rel="stylesheet" href="style.css"> 
</head> 
<body > 
<h1>Yazı Başlığı</h1> 
<p style="font-size:18px">Site Açıklaması.</p> 
</body> 
</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şıyorsanı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.

Daha fazla makale için Blog sayfamızı ziyaret edebilirsiniz.

Yunus AKIN

Ben Yunus AKIN Webtasarm ve Grafik tasarım üzerinde çalışmalarım olmaktadır. Müsait olduğum zamanlarda bloğum için içerikler üretmeye çalışıyorum. Daha fazla detay için hakkımda bölümünü inceleyebilirsiniz

İlgili Makaleler

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.

Başa dön tuşu