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'yi kullanabilirsiniz. yazı Boyutu Emlak.

CSS kullanarak HTML yazı tipi boyutunu değiştirmenin bir yolunu arıyorsanız, sizin için hazırladık. CSS'ye giriş yaparak başlayalım yazı Boyutu Emlak.

CSS yazı tipi boyutu Özelliğini anlama

bu yazı Boyutu CSS'deki özellik, 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, kötüye kullanmayın

yazı Boyutu Emlak. Bir başlığın öne çıkmasını istiyorsanız, bunun için farklı HTML başlık etiketleri vardır. göz atın HTML temelleri hile sayfası açıklamalarla birlikte farklı etiketler, nitelikler ve daha fazlası için.

CSS yazı Boyutu özellik iki tür değer alır: mutlak ve göreli.

Mutlak uzunluk değerleri (ör. piksel) göreli olanlar (örn. em ve eski) esnektir. Örneğin, yazı tipine bağlı bir birim için em, boyut genellikle üst öğenin yazı tipi boyutuna göre belirlenir. Ancak, kök tabanlı yazı tipine bağlı birimler geri kök öğenin yazı tipi boyutundan 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, girin yazı Boyutu özelliği, ardından iki nokta üst üste, HTML metninizin sunulmasını istediğiniz belirli boyutu belirtin ve noktalı virgülle kapatın.

İşte sözdizimi:

CSS seçici {
 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:

Bu benim ilk başlığım

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut emek ve dolore magna aliqua. Ut enim ad minim veniam, quis nostrud egzersiz ullamco Laboris nisi ut aliquip ex ea commodo consequat.

Paragraf öğesinin yazı tipi boyutunu değiştirmek istiyorsanız, onu seçmeniz (sınıf, etiket veya kimlik aracılığıyla) ve CSS'yi kullanmanız gerekir. yazı Boyutu özelliği, tercih ettiğiniz birimlerle özel bir değer belirleyin. Örneğimizde pikselleri kullanacağız (piksel).

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:

Bu benim ilk başlığım

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut emek ve dolore magna aliqua. Ut enim ad minim veniam, quis nostrud egzersiz ullamco Laboris nisi ut aliquip ex ea commodo consequat.

içindeki metin P HTML etiketi artık yeni bir özel boyuta sahip olacak.

İlişkili: Her Geliştiricinin Bilmesi Gereken Temel CSS İpuçları ve Püf Noktaları

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. kullanmayı deneyin !önemli etiketi 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.

10 Dakikada Öğrenebileceğiniz 10 Basit CSS Kodu Örneği

CSS ile ilgili yardıma mı ihtiyacınız var? Başlamak için bu temel CSS kodu örneklerini deneyin, ardından bunları kendi web sayfalarınıza uygulayın.

Sonrakini Oku

Yazar hakkında