HTML Yazı Tipi Rengi Nasıl Değiştirilir

Sitenizi özelleştirmeye gelince, yazı tipi rengi genellikle gözden kaçar. Çoğu durumda, web sitesi sahipleri siyah gibi varsayılan yazı tipi rengini veya tema stillerinin gövde ve başlık metni rengi için tanımladığı gibi bırakır.

Ancak, çeşitli nedenlerle web sitenizdeki HTML yazı tipi rengini değiştirmek iyi bir fikirdir. HTML yazı tipi rengini değiştirmek göz korkutucu görünebilir, ancak oldukça basittir. Web sitenizdeki yazı tipi rengini değiştirmenin birkaç yolu vardır.

Bu gönderide, size web sitenizin yazı tiplerinin rengini değiştirmenin farklı yollarını göstereceğiz ve bunu neden ilk başta yapmak istediğinizi tartışacağız.

HTML Yazı Tipi Rengini Neden Değiştirmelisiniz?

Yazı tipi rengini değiştirmek istersiniz çünkü bunu yapmak web sitenizin okunabilirliğini ve erişilebilirliğini iyileştirmeye yardımcı olabilir. Örneğin, siteniz daha koyu bir renk düzeni kullanıyorsa, yazı tipi rengini siyah bırakmak web sitenizdeki metni okumayı zorlaştırır.

Yazı tipi rengini değiştirmeyi düşünmenizin bir başka nedeni de, markanızın renk paletinden daha koyu bir renk kullanacak olmanızdır. Bu, markanızı güçlendirmek için başka bir fırsat. Marka tutarlılığı oluşturur ve tüm pazarlama kanallarınızdaki metnin aynı görünmesini sağlar.

Bunun dışında, HTML yazı tipi rengini nasıl tanımlayabileceğinize ve değiştirebileceğinize bakalım.

Sitenizi özelleştirmeye gelince, yazı tipi rengi genellikle gözden kaçar... ama bu, çok fazla kişilik katabilecek basit bir düzenlemedir! Tweetlemek için tıklayın

Rengi Tanımlamanın Yolları

Ad, RGB değerleri, hex kodları ve HSL değerleri dahil olmak üzere web tasarımında rengi tanımlamanın birkaç yolu vardır. Nasıl çalıştıklarına bir göz atalım.

Renk Adı

Renk adları, CSS stillerinizde bir renk tanımlamanın en kolay yoludur. Renk adı, HTML renginin özel adını ifade eder. Şu anda desteklenen 140 renk adı vardır ve bu renklerden herhangi birini stillerinizde kullanabilirsiniz. Örneğin, tek bir öğenin rengini mavi olarak ayarlamak için "mavi" kullanabilirsiniz.

Ancak bu yaklaşımın dezavantajı, tüm renk adlarının desteklenmemesidir. Başka bir deyişle, desteklenen renkler listesinde olmayan bir renk kullanırsanız, tasarımınızda renk adıyla kullanamazsınız.

RGB ve RGBA Değerleri

Sırada RGB ve RGBA değerleri var. RGB, Kırmızı, Yeşil ve Mavi anlamına gelir. Gerçek bir palet üzerinde bir rengi nasıl karıştıracağınıza benzer şekilde, kırmızı, yeşil ve mavi değerleri karıştırarak rengi tanımlar.

RGB değeri şöyle görünür: RGB(153.0,255). İlk sayı kırmızı renk girişini, ikincisi yeşil renk girişini ve üçüncüsü mavi renk girişini belirtir.

Her renk girişinin değeri 0 ile 255 arasında değişebilir; burada 0, rengin hiç olmadığı ve 255, belirli rengin maksimum yoğunluğunda olduğu anlamına gelir.

RGBA değeri, karışıma bir değer daha ekler ve bu, opaklığı temsil eden alfa değeridir. 0 (şeffaf değil) ile 1 (tamamen şeffaf) arasında değişir.

HEX Değeri

Onaltılı renk kodları, RGB kodlarına benzer şekilde çalışır. 0'dan 9'a kadar rakamlardan ve A'dan F'ye kadar harflerden oluşurlar. Onaltılık kod şuna benzer: #800080. İlk iki harf kırmızı rengin yoğunluğunu, ortadaki iki sayı yeşil rengin yoğunluğunu ve son ikisi mavi rengin yoğunluğunu belirtir.

HSL ve HSLA Değerleri

HTML'de renkleri tanımlamanın başka bir yolu da HSL değerlerini kullanmaktır. HSL, ton, doygunluk ve hafiflik anlamına gelir.

Ton, 0 ile 360 ​​arasındaki dereceleri kullanır. Standart bir renk tekerleğinde kırmızı, 0/360 civarında, yeşil 120'de ve mavi 240'dadır.

Doygunluk, rengin ne kadar doygun olduğunu tanımlamak için yüzdeleri kullanır. 0 siyah beyazı ve 100 tam rengi temsil eder.

Son olarak, hafiflik doygunluğa benzer yüzdeler kullanır. Bu durumda, %0 siyahı ve %100 beyazı temsil eder.

Örneğin, bu makale boyunca kullandığımız mor renk HSL'de şöyle görünür: hsl(276, 100%, 50%) .

HSL, RGB gibi opaklığı destekler. Bu durumda, A'nın alfa anlamına geldiği ve 0 ile 1 arasında bir sayı ile tanımlandığı HSLA değerini kullanırsınız, örneğin morun opaklığını azaltmak isteseydik, şu kodu kullanırdık: hsl(276, 100%, 50%, .85) .

Artık rengi nasıl tanımlayacağınızı bildiğinize göre, HTML yazı tipi rengini değiştirmenin farklı yollarına bakalım.

Eski: <font> Etiketleri

HTML5 tanıtılıp kodlama standardı olarak ayarlanmadan önce, yazı tipi etiketlerini kullanarak yazı tipi rengini değiştirebiliyordunuz. Daha spesifik olarak, metin rengini ayarlamak için yazı tipi etiketini color özniteliği ile kullanırsınız. color , adıyla veya onaltılı koduyla belirtildi.

İşte bu kodun onaltılı renk koduyla nasıl göründüğüne dair bir örnek:

 <font color="#800080">This text is purple.</font>

Ve bu şekilde renk adını kullanarak metin rengini mor olarak ayarlayabilirsiniz.

 <font color="purple">This text is purple.</font>

Ancak, <font> etiketi HTML5'te kullanımdan kaldırılmıştır ve artık kullanılmamaktadır. Yazı tipi rengini değiştirmek bir tasarım kararıdır ve tasarım HTML'nin birincil amacı değildir. Bu nedenle, <font> etiketlerinin artık HTML5'te desteklenmemesi mantıklıdır.

Peki <font> etiketi artık desteklenmiyorsa, HTML yazı tipi rengini nasıl değiştirirsiniz? Cevap Basamaklı Stil Sayfaları veya CSS ile.

Yeni: CSS Stilleri

HTML yazı tipi rengini CSS ile değiştirmek için uygun seçiciyle eşleştirilmiş CSS renk özelliğini kullanacaksınız. CSS, rengi belirtmek için renk adlarını, RGB, hex ve HSL değerlerini kullanmanızı sağlar. Yazı tipi rengini değiştirmek için CSS kullanmanın üç yolu vardır.

Satır içi CSS

Satır içi CSS, doğrudan HTML dosyanıza eklenir. <p> gibi HTML etiketini kullanacak ve ardından CSS color özelliğiyle şöyle biçimlendireceksiniz:

 <p>This is a purple paragraph.</p>

Bir onaltılık değer kullanmak istiyorsanız, kodunuz şöyle görünecektir:

 <p>This is a purple paragraph.</p>

RGB değerini kullanacaksanız şöyle yazacaksınız:

 <p>This is a purple paragraph.</p>

Son olarak, HSL değerlerini kullanarak şu kodu kullanırsınız:

 <p>This is a purple paragraph.</p>

Yukarıdaki örnekler, web sitenizdeki bir paragrafın rengini nasıl değiştireceğinizi gösterir. Ancak yalnızca paragraflarla sınırlı değilsiniz. Bağlantıların yanı sıra başlıklarınızın yazı tipi rengini de değiştirebilirsiniz.

Örneğin, yukarıdaki <p> ​​etiketini <h2> ile değiştirmek, o başlık metninin rengini değiştirirken, onu <a> etiketiyle değiştirmek o bağlantının rengini değiştirir. Herhangi bir miktarda metni renklendirmek için <span> öğesini de kullanabilirsiniz.

Tüm paragrafın veya bir başlığın arka plan rengini değiştirmek istiyorsanız, yazı tipi rengini nasıl değiştireceğinize çok benzer. Bunun yerine background-color özelliğini kullanmanız ve rengi ayarlamak için renk adı, onaltılık, RGB veya HSL değerlerini kullanmanız gerekir. İşte bir örnek:

<p>

Gömülü CSS

Gömülü CSS, <style> etiketlerinin içindedir ve HTML belgenizin head etiketleri arasına yerleştirilir.

Renk adını kullanmak istiyorsanız kod şöyle görünecektir:

 <!DOCTYPE html> <html> <head> <style> <p> { color: purple; } </style> </head>

Yukarıdaki kod, sayfadaki her paragrafın rengini mor olarak değiştirecektir. Satır içi CSS yöntemine benzer şekilde, başlıklarınızın ve bağlantılarınızın yazı tipi rengini değiştirmek için farklı seçiciler kullanabilirsiniz.

Hex kodunu kullanmak istiyorsanız, kodun nasıl görüneceği aşağıda açıklanmıştır:

 <!DOCTYPE html> <html> <head> <style> <p> { color: #800080; } </style> </head>

Aşağıdaki örnek, opaklığı ayarlamanın bir örneğini görebilmeniz için RBGA değerlerini kullanır:

 <!DOCTYPE html> <html> <head> <style> <p> { color: RGB(153,0,255,0.75), } </style> </head>

Ve HSL kodu şöyle görünür:

 <!DOCTYPE html> <html> <head> <style> <p> { color: hsl(276, 100%, 50%), } </style> </head>

Harici CSS

Son olarak, web sitenizdeki yazı tipi rengini değiştirmek için harici CSS kullanabilirsiniz. Harici CSS, genellikle style.css veya stylesheet.css olarak adlandırılan ayrı bir stil sayfası dosyasına yerleştirilen CSS'dir.

Bu stil sayfası, sitenizdeki tüm stillerden sorumludur ve yazı tipi renklerini ve yazı tipi boyutlarını, kenar boşluklarını, dolguları, yazı tipi ailelerini, arka plan renklerini ve daha fazlasını belirtir. Kısacası, sitenizin görsel olarak nasıl göründüğünden stil sayfası sorumludur.

Yazı tipi rengini harici CSS ile değiştirmek için, HTML'nin istediğiniz bölümlerine stil vermek için seçicileri kullanırsınız. Örneğin, bu kod sitenizdeki tüm gövde metnini değiştirecektir:

 body {color: purple;}

Yazı tipi rengini değiştirmek için yalnızca renk adlarını değil, RGB, hex ve HSL değerlerini de kullanabileceğinizi unutmayın. Stil sayfasını düzenlemek istiyorsanız, bunu bir kod düzenleyicide yapmanız önerilir.

Satır İçi, Gömülü veya Harici?

Artık yazı tipi rengini değiştirmek için CSS'yi nasıl kullanabileceğinizi biliyorsunuz. Ama hangi yöntemi kullanmalısınız?

Satır içi CSS kodunu kullanırsanız, onu doğrudan HTML dosyanıza eklersiniz. Genel olarak konuşursak, bu yöntem hızlı düzeltmeler için uygundur. Tek bir sayfadaki belirli bir paragrafın veya başlığın rengini değiştirmek istiyorsanız, bu yöntem bunu yapmanın en hızlı ve en az karmaşık yoludur.

Ancak satır içi stiller, HTML dosyanızın boyutunu büyütebilir. HTML dosyanız ne kadar büyükse, web sayfanızın yüklenmesi o kadar uzun sürer. Buna ek olarak, satır içi CSS, HTML'nizi dağınık hale getirebilir. Bu nedenle, HTML yazı tipi rengini değiştirmek için CSS kullanmanın satır içi yöntemi genellikle önerilmez.

Gömülü CSS, <head> etiketlerinin arasına ve <style> etiketlerinin içine yerleştirilir. Satır içi CSS gibi, hızlı düzeltmeler ve harici bir stil sayfasında belirtilen stilleri geçersiz kılmak için iyidir.

Satır içi ve gömülü stiller arasındaki dikkate değer bir ayrım, bunların head etiketlerinin yüklendiği herhangi bir sayfaya uygulanacakları, satır içi stillerin ise yalnızca bulundukları belirli sayfa için, genellikle o sayfada hedefledikleri öğe için geçerli olmalarıdır.

Son yöntem olan harici CSS, görsel stillerinizi tanımlamak için özel bir stil sayfası kullanır. Genel olarak konuşursak, tüm stillerinizi düzenlemenin kolay olduğu tek bir yerde tutmak için harici bir stil sayfası kullanmak en iyisidir. Bu aynı zamanda sunum ve tasarımı birbirinden ayırır, böylece kodun yönetimi ve bakımı kolaydır.

Satır içi ve gömülü stillerin, harici stil sayfasında ayarlanan stilleri geçersiz kılabileceğini unutmayın.

Yazı Tipi Etiketleri veya CSS Stilleri: Artıları ve Eksileri

HTML yazı tipi renklerini değiştirmenin iki ana yöntemi, yazı tipi etiketini veya CSS stillerini kullanmaktır. Bu yöntemlerin her ikisinin de artıları ve eksileri vardır.

HTML Yazı Tipi Etiketleri Artıları ve Eksileri

HTML yazı tipi etiketinin kullanımı kolaydır, bu nedenle bu onun lehine bir profesyoneldir. Tipik olarak, CSS daha karmaşıktır ve öğrenmesi <font color="purple"> yazmaktan daha uzun sürer. HTML5 kullanmayan daha eski bir web siteniz varsa, yazı tipi etiketi, yazı tipi rengini değiştirmek için uygun bir yöntemdir.

Yazı tipi etiketinin kullanımı kolay olsa da, web siteniz HTML kullanıyorsa onu kullanmamalısınız. Daha önce belirtildiği gibi, yazı tipi etiketi HTML5'te kullanımdan kaldırıldı. Tarayıcılar herhangi bir zamanda onu desteklemeyi bırakabileceğinden, kullanımdan kaldırılmış kodu kullanmaktan kaçınılmalıdır. Bu, web sitenizin bozulmasına ve düzgün çalışmamasına veya daha da kötüsü, ziyaretçileriniz için hiç görüntülenmemesine neden olabilir.

CSS Artıları ve Eksileri

Yazı tipi etiketi gibi CSS'nin de artıları ve eksileri vardır. CSS kullanmanın en önemli avantajı, yazı tipi rengini değiştirmenin ve web siteniz için diğer tüm stilleri belirtmenin doğru yolu olmasıdır.

Daha önce de belirtildiği gibi, sunumu tasarımdan ayırarak kodunuzun yönetimini ve bakımını kolaylaştırır.

Olumsuz tarafı, eski kod yazma yöntemine kıyasla CSS ve HTML5'in düzgün bir şekilde öğrenilmesi ve yazılması zaman alabilir.

CSS ile yazı tipi rengini değiştirmenin farklı yollarınız olduğunu ve daha önce tartışıldığı gibi bu yöntemlerin her birinin kendi artıları ve eksileri olduğunu unutmayın.

HTML Yazı Tipi Rengini Değiştirmek İçin İpuçları

Artık HTML yazı tipi rengini nasıl değiştireceğinizi bildiğinize göre, işte size yardımcı olacak birkaç ipucu.

Bir Renk Seçici Kullan

Renkleri rastgele seçmek yerine, doğru renkleri seçmek için renk seçicileri kullanın. Renk seçicinin yararı, size renk adını ve kodunuzda kullanmanız gereken doğru onaltılı, RGB ve HSL değerlerini vermesidir.

Kontrastı Kontrol Et

Koyu arka plana sahip koyu metin ve açık arka plana sahip açık metin birlikte iyi çalışmaz. Sitenizdeki metnin okunmasını zorlaştıracaklar. Ancak, sitenizin renklerinin erişilebilir olduğundan ve metnin okunmasının kolay olduğundan emin olmak için bir kontrast denetleyicisi kullanabilirsiniz.

İnceleme Yöntemini Kullanarak Rengi Bulun

Bir web sitesinde beğendiğiniz bir renk görürseniz, rengin onaltılı, RGB veya HSL değerini almak için kodu inceleyebilirsiniz. Chrome'da tek yapmanız gereken, imlecinizi web sayfasının incelemek istediğiniz kısmına yöneltmek, sağ tıklayıp İncele öğesini seçmektir . Bu, bir web sitesinin HTML kodunu ve ilgili stilleri görebileceğiniz kod inceleme panelini açacaktır.

Sitenizdeki yazı tipi rengini değiştirmek mi istiyorsunuz? Basit! Bu kılavuz başlamanıza yardımcı olacak ️ Tweetlemek için tıklayın

Özet

HTML yazı tipi rengini değiştirmek, web sitenizin okunabilirliğini ve erişilebilirliğini iyileştirmeye yardımcı olabilir. Ayrıca, web sitesi stillerinizde marka tutarlılığı oluşturmanıza yardımcı olabilir.

Bu kılavuzda, HTML yazı tipi rengini değiştirmenin dört farklı yolunu öğrendiniz: renk adları, onaltılık kodlar, RGB ve HSL değerleri.

Yazı tipi rengini satır içi, gömülü ve harici CSS ile nasıl değiştirebileceğinizi ve yazı tipi etiketini ve her yöntemin artılarını ve eksilerini nasıl kullanabileceğinizi de ele aldık. Şimdiye kadar, HTML yazı tipi rengini değiştirmek için hangi yöntemi kullanmanız gerektiğini iyi anlamış olmalısınız, bu nedenle şimdi yapmanız gereken tek şey bu ipuçlarını sitenize uygulamak.

CSS ve yazı tipi etiketi ile yazı tipi rengini değiştirme hakkında ne düşünüyorsunuz? Yorumlar bölümünde bize bildirin!