CSS’de yazı tipi boyutlarını nasıl değiştireceğinizi bilmiyorsanız, bir web geliştiricisi olarak ilerleyemezsiniz. Neyse ki, bu yazı 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. 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. 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 etkilenir.
Neyse ki bu CSS ölçü birimleri ile ilgili sitemizde yazımız mevcut. CSS ölçü birimleri ile ilgili daha detaylı bilgi için bağlantıya tıklayabilirsiniz.
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:
1 2 3 4 5 | secici{ font-size:deger } |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html lang="tr"> <head> <style> p { font-size: 18px; } </style> </head> <body> <h1>Tasarım Kodlama</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt nulla assumenda excepturi, suscipit dicta facere. Non inventore reiciendis odio nihil, ex itaque totam. Recusandae, ipsam minima inventore unde officia assumenda.</p> </body> </html> |
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:
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html> <html lang="tr"> <head> </head> <body> <h1>Tasarım Kodlama</h1> <p style="font-size:18px;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt nulla assumenda excepturi, suscipit dicta facere. Non inventore reiciendis odio nihil, ex itaque totam. Recusandae, ipsam minima inventore unde officia assumenda.</p> </body> </html> |
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.
Yorum Yap