Önceki dersimize devam ediyoruz. Renklendirme ve hex kodlarıyla ilgili bu bölümde birkaç konuya değiniyoruz. Renk özellikleri için hexadecimal (onaltılık) kodlara bakıyoruz bu bölümde. Yazılarımızın renklerini ayarlıyoruz. Örneğin body { color: #000000;} ile tüm sayfamızdaki yazıların renklerini siyah yapabiliyoruz. İsterseniz bu hex kodları ile sadece yazı değil herşeyi renklendirebilirsiniz. Örneğin body{ background: #ffffff; } ile zemin rengini beyaz verebilirsiniz.
Hexadecimal Kodlar
pound işaretinden (#) sonra gelen altı haneli kodlardır. #ffffff beyaz kodundan başlar #000000 siyah koduna kadar devam eder.
#ffffff, #eeeeee, #dddddd, #cccccc, #bbbbbb, #aaaaaa, #999999, #888888, #777777, #666666, #555555, #444444, #333333. #222222, #111111
İlk iki hane kırmızı, Üçüncü ve dördüncü hane yeşil, son iki hane mavidir. Örneğin #ff0000 kırmızıyı, #550000 koyu kırmızıyı, #00ff00 yeşili, #0000ff maviyi gösterir. Sarı nerde peki? #ffff00
1. Adım
body {} altına kodlarımızı yerleştirelim.
a:link, a:visited{
text-decoration: underline;
color: #336699;
}
text-decoration: underline; ile tüm linklerin altı çizgili yapıyoruz. color: #336699; ile mavi rengi veriyoruz. Mavinin tonlarını kullanıyoruz. Mavi ağırlık olsun istediğimiz için son iki hane yüksek değerler seçiyoruz. Son iki hane maviyi temsil ediyor.
a:link bağlantılar için kullanacağımız stilleri belirtiyoruz. <a> ve </a> etiketleri arasında kullandığımız kelimelere link veriyoruz. Bu kelimeleri a:link ile stillerini ayarlıyoruz.
a: visited ziyaret ettiğimiz yada tıkladığımız sayfaları belirtir. Bu tıklanan yerleri farklı renkle de belirtebiliriz. Daha önce burayı ziyaret etmiştiniz gibi bir anlam çıkartılsın diye. Fakat biz bu örnekte ziyaret edilen ve edilmeyen bağlantıların aynı olmasını istedik.
İsterseniz yukarıdaki kodlama yerine
a:link{
text-decoration: underline;
color: #336699;
}
ve
a:visited{
text-decoration: underline;
color: #336699;
}
kodlarını da kullanabilirsiniz.
Biz virgül (,) işareti ile a: visited ve a:link stillerini ayırıyoruz. Her iki stil için de aynı stilleri kullandığımız için ikisini aynı kodla gösterebilirsiniz.
2.Adım
a:link, a:visited{} kodlarının altına yeni kodlar yerleştiriyoruz.
a:hover{
text-decoration: none;
}
Bu kod ile bağlantıların üzerine geldiğimiz zaman bağlantılar altı çizgili olmayacak.
Ayrıca isterseniz rengini de değiştirebilirsiniz.
a:hover{
text-decoration: none;
color: #ff0000;
}
Kaynak: http://www.wpdesigner.com/2007/03/10/wp-theme-lesson-10-hex-codes-and-styling-links/
