Yazı renklendirme HTML veya CSS iki ayrı tarzda

İnternette site veya blog herhangi web sayfalarında yazı renklendirme konusu detaylarıyla ve örnekleriyle aşağıda açıklandı. Sayfa rengi, yazı rengi, link rengi ve sütunlar vesaire gibi pekçok biçimlendirmelerde renklendirmeler iki şekilde sağlanır. Bunlardan biri: Sadece HTML sayfalarında hedef kelimeyi veya bölümü kodlar arasına alarak tüm ayarları kod içinde belirmekle yaparız. Diğeri: Html sayfasında ilgili yeri yine kodlar içine alırız, div veya span vesaire kodlarına isim veririz. Ama bu isimlere göre tüm ayarları CSS sayfasına yazarız. Bu iki yoldan birini uygularsak diğerine gerek kalmaz.

Sadece HTML sayfası içindeki uygulamayla yazı renklendirme nasıl yapılır?

Renkli olmasını istediğimiz şey tek bir harf, bir kelime, ya da bir paragraf hangisi olursa olsun önce renk kodlarına ihtiyacımız var. Meselâ beyaz renk kodu: #FFFFFF kırmızı renk kodu: #FF0000 Renk kodları harflerden, rakamlardan veya harflerin ve rakamların karışık sıralanmasından olur.

Renk kodu ile yazı renklendirme kodu yapılır. Renkli olacak harfin, kelimenin veya paragrafın en başına bu kod, sonuna ise ilgili kapatma kodu konur. böylece renkli olacak yer sınırlanır, renk sadece orası için geçerli olur.

İnternet ve bilgisayar kelimelerini kırmızı yapalım. Aşağıda HTML sayfasındaki görüntüsünün örneği var. Baştaki ve sondaki kodlara dikkat edin:
<font color="#FF0000">İnternet ve bilgisayar</font>
Bu da normal sayfadaki görüntüsü: İnternet ve bilgisayar

Peki başka web sayfalarının linklerini yazılarımızda vereceksek onları nasıl istediğimiz renge sokarız? Çünkü yukarıdaki kodlama linklerde işe yaramıyor. Cevap aşağıda.

HTML sayfası ayarıyla linkleri istediğimiz renkte yapmanın yolu

Link renklendirme biraz karmaşık. Bu sitemin linkini örnek alarak göstereyim. Önce link nedir üstünde duralım:
https://azbitki.com/ sitemin URL’sidir. Link olabilmesi için üzerine tıklayan kişileri siteye götürmesi gerekir. İşte linkin ne işe yaradığını öğrendiniz. Link oluşturmada URL adresi kullanılır ama normal sayfalarda görünmesi şart değil. Mesela https//:azbitki.com URL adresini “Ana Sayfa” kelimelerine gizleyelim ve o kelimeleri link haline getirelim:

<a href="https://azbitki.com/">Ana Sayfa</a>

Yukarıdaki görüntü html sayfasındaki kod görünümüdür. Normal sayfada şöyle görünür: Ana Sayfa

Liklere isim vermeyi istediğiniz gibi yapmakta özgürsünüz. Değişik kelimeler linki bozmaz. Hatta o kısma isim değil paragraf ya da resim bile koysanız yine çalışır.

Gelelim linki istediğimiz renkte yapmaya

Linke ne isim vermişseniz o isim renkli olacaktır. HTML sayfasındaki link kodunun içine style ayarları koymak gerekiyor.
style="color:#FF0000;" gibi. İşte bunu link kodunun içine aşağıdaki gibi koyarsınız:
<a style="color:#FF0000;" href="https://azbitki.com/">Ana Sayfa</a>

Ve normal sayfadaki kırmızı renkli görünümü:
Ana Sayfa

Kıyaslayın
Sade kod:
<a href="https://azbitki.com/">Ana Sayfa</a>
HTML sayfası ayarıyla kırmızı renk veren kod:
<a style="color:#FF0000;" href="https://azbitki.com/">Ana Sayfa</a>

CSS usulüyle yazıları renkli etme

HTML sayfalarında çok sayıda kodlar kullanmak iyi değil. Yukarıda nasıl yapacağınızı okudunuz. Kullansanız olur. İşe yarar. Ama daha iyisi kullanmamaktır. Tüm kod ayarlamalarının CSS sayfasından tayin edilmesi daha sağlıklıdır. [Güncelleme: 2020 itibarı ile artık bu düzen isteyen kurallar değil, sadece ve sadece web sitelerinin hızlı olması önemlidir. Yani istediğiniz gibi yapmanızda sakınca yok.]

Yine yukarıdaki örnekleri ele alalım. Orada HTML sayfasında renk kodu içeren kod ayarı ile yazıları renkli etmeyi nasıl yapacağımızı internet ve bilgisayar kelimelerinde göstermiştim. Aynı kelimelerin CSS sayfasında belirlenen kodlar yoluyla adeta uzaktan kumanda gibi renkli olmasının yolu: Renkli olmasını istediğimiz kısmın başlangıcına div class koymaktır. Bunu CSS sayfasının anlaması, kabul etmesi için isim veririz. Mesela o isim kmz olsun. div class=kmz şeklinde olacak. Bir de bunun sivri parantezler içine almak lazım. Ayrıca renklendirilecek kısmın en sonuna div’in kapatma kodunu yine sivri parantez içinde koymamız gerekiyor. Aşağıdaki örneği inceleyin.

<div class="kmz">internet ve bilgisayar</div>

Yukarıda html sayfasında yaptığımız ayarı görüyorsunuz. Peki o nasıl olacak da kırmızı olacak? Hem CSS sayfasına yazılacak renk kodu onu nasıl anlayacak da orayı kırmızı yapacak? Şöyle:

HTML’deki div ayarına ne isim vermişsek CSS sayfasında o isim ile ve div class’ı temsil eden nokta işaretini en başa koymakla hallederiz. Böylece o kısım kırmızı olacaktır. CSS sayfasındaki kodlama aynen aşağıdaki gibi olur:

.kmz{color:FF0000;}

Peki CSS sayfasının komutlarıyla linklere nasıl renklilik sağlarız?

Evet, yukarıdaki kodlama linklere etki etmez. Linkli olmayanlarda işe yarar. Linklerde etkili olması için CSS kodları bir “a” harfiyle şöyle olmalıdır:

.kmz a{color:FF0000;}

Bakın br “a” harfi o kmz adlı div class alanı içerisindeki linki veya linkleri kırmızı eder.

Not: div class CSS sayfasında nokta işareti (.) ile, div id ise CSS sayfasında kare işareti (#) ile olmak zorunda.

Yazar: Erdal Yüksel

Kategori: Yaşam

Etiketler:

'Yazı renklendirme HTML veya CSS iki ayrı tarzda' hakkında sorular, açıklamalar

  1. Enre dedi ki:

    div color: #ff0000; Şeklinde verilen css kodu hangi html elemanlarına(tag) etki eder ve ne yapar?
    ***
    Belirlendiği yerdeki yazıların ve border denen alt, üst veya kenarlara tayin edilen çizgilerin rengini kırmızı renkli yapar.


Sorunuzu / Yorumunuzu Aşağıya Yazabilirsiniz.

Lütfen sorunuzu konu ile ilgili sayfaya yazmaya gayret edin.

Sorunuzu/Yorumunuzu yazın:

Sorunuz cevabımla birlikte 1 veya birkaç saat içinde burada görünür olacaktır. Lütfen ara sıra kontrol edin.