HTML'de Yazı Rengi Nasıl Değiştirilir?

Ortak yazar: wikiHow Kadrosu

Yazı rengini HTML’nin <font> etiketi ile değiştirebilecek olsan da bu yöntem HTML5’te artık desteklenmiyor. Bunun yerine, yazının sayfandaki çeşitli elemanlarda nasıl görüneceğini belirlemek için temel CSS kodlarını kullanırsın. CSS kullanmak web sayfanın olası tüm tarayıcılarla uyumlu olduğundan emin olmanı sağlar.

CSS Kullanmak

  1. 1
    HTML dosyanı aç. Yazının rengini değiştirmenin en iyi yolu CSS kullanmaktır. Eski HTML özniteliği HTML5’te artık desteklenmiyor. Elemanlarının stilini belirlemek için tercih edilen yöntem CSS kullanmaktır.
    • Bu yöntem harici stil dosyalarında da (ayrık CSS dosyaları) çalışır. Aşağıdaki örnekler, dâhili bir stil dosyası kullanan bir HTML dosyası içindir.
  2. 2
  3. Fare imlecini <head> etiketi içine getir. Dâhili bir stil dosyası kullanıyorsan stillerini bu etiketin içinde belirlersin.
  4. Dâhili bir stil dosyası oluşturmak için <style> yaz. <style> etiketi <head> etiketi içinde olduğu zaman <style> etiketi içindeki CSS kodları sayfadaki tüm uygulanabilir elemanlar için geçerli olur. İşin bittiği zaman HTML dosyanın başlangıcı şuna benziyor olmalı:[1]
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    
    </style>
    </head>
    
  5. Yazı font rengini değiştirmek istediğin elemanı yaz. Sayfandaki farklı elemanların görünüşünü belirlemek için <style> bölümünü kullanırsın. Örneğin; sayfanın gövdesindeki tüm yazıların stilini değiştirmek için aşağıdaki kodu yaz:
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    body {
    
    }
    </style>
    </head>
    
  6. Eleman seçicisine color: özniteliğini yaz. color: özniteliği sayfaya o eleman için hangi yazı renginin kullanılacağını söyler. Bu örnekte öznitelik, gövdede bulunan tüm yazıların rengini değiştirir ki bu, sayfandaki tüm yazıların varsayılan elemanıdır.
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    body {
    	color:
    }
    </style>
    </head>
    
  7. Yazı için bir renk yaz. Bir renk girmenin üç yolu vardır: rengin adı, hex değeri veya RGB değeri. Örneğin; mavi için blue, rgb(0, 0, 255) veya #0000FF yazabilirsin.
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    body {
    	color: red;
    }
    </style>
    </head>
    
  8. Çeşitli elemanların rengini değiştirmek için başka seçiciler ekle. Sayfanın farklı yerlerindeki yazı rengini değiştirmek için farklı seçiciler kullanabilirsin.
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    body {
    	color: red;
    }
    h1 {
    	color: #00FF00;
    }
    p {
    	color: rgb(0,0,255)
    }
    </style>
    </head>
    <body>
    
    <h1>Bu başlık yeşil olur.</h1>
    
    <p>Bu paragraf mavi olur.</p>
    
    Bu gövde yazısı kırmızı olur.
    </body>
    </html>
    
  9. Bir elemanı değiştirmek yerine bir CSS sınıfı tanımla. Bir sınıf tanımlayabilir ve bunu, sınıf stilini hızlıca ekleyebilmek için sayfadaki istediğin tüm elemanlara uygulayabilirsin. Örneğin; aşağıdaki dosyada ".redtext" sınıfı, uygulandığı tüm elemanların yazı rengini kırmızı yapar:
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .redtext {
    	color: red;
    }
    </style>
    </head>
    <body>
    
    <h1 class="redtext">Bu başlık kırmızı olur</h1>
    <p>Bu paragraf normal olur.</p>
    <p class="redtext">Bu paragraf kırmızı olur</p>
    
    </body>
    </html>
    

Satır İçi Stil Özniteliklerini Kullanmak

  1. HTML dosyanı aç. Sayfandaki tek bir elemanın stilini değiştirmek için satır içi stil özniteliklerini kullanabilirsin. Bu, stilde yapılacak bir-iki küçük değişiklik için kullanışlı olabilir; ama kapsamlı olarak kullanılması önerilmez. Kapsamlı stil değişiklikleri yapmak için önceki yöntemi kullan.[2]
  2. Değiştirmek istediğin elemanı dosyada bul. Elemanlarının herhangi birinin yazı rengini değiştirmek için satır içi stil özniteliklerini kullanabilirsin. Örneğin; belli bir başlığın yazı rengini değiştirmek istiyorsan başlığı dosyanda bul:
    <!DOCTYPE html>
    <html>
    <body>
    
    <h1>Değişiklik yapmak istediğin başlık bu</h1>
    
    </body>
    </html>
    
  3. Elemana stil özniteliğini ekle. Değiştirmek istediğin elemanın açılış etiketinin içine style="" yaz:
    <!DOCTYPE html>
    <html>
    <body>
    
    <h1 style="">Değişiklik yapmak istediğin başlık bu</h1>
    
    </body>
    </html>
    
  4. color: özniteliğini "" içine yaz. Örneğin:
    <!DOCTYPE html>
    <html>
    <body>
    
    <h1 style="color:">Değişiklik yapmak istediğin başlık bu</h1>
    
    </body>
    </html>
    
  5. Yazının almasını istediğin rengi yaz. Bir rengi ifade etmenin üç yolu vardır. Rengin adını yazabilir, RGB değerini girebilir veya hex değerini yazabilirsin. Örneğin; rengi sarıya döndürmek için yellow;, rgb(255,255,0); veya #FFFF00; yazabilirsin:
    <!DOCTYPE html>
    <html>
    <body>
    
    <h1 style="color:#FFFF00;">Bu başlık artık sarı</h1>
    
    </body>
    </html>
    

İpuçları

  • Desteklenen renk isimlerinin bir listesini ve bu renklerin hex değerlerini http://www.w3schools.com/colors/colors_names.asp sayfasında görebilirsin.

Bununla İlgili wikiHow'lar

Bu wikiHow makalesi hakkında

Ortak Yazar:
wikiHow Editör Ekibi
Bu makale editörler ve araştırmacılardan oluşan, makalenin doğruluğu ile kapsamlılığını onaylayan, eğitimli bir ekip tarafından ortaklaşa yazılmıştır.

Referans

Bu makale işine yaradı mı?

Evet
Hayır
Reklam