CSS
1. Her zamanki gibi HTML kodları koyarak başlayın, sonrasında istediğiniz renkte linki ekleyin. Biz bu anlatımda Adobe DreamWeaver programı kullanacağız. Bağlantı (link) olarak google kullanacağız.
2. CSS ile sitenizin HEAD bölümüne yazmanız gerekmektedir. Yani;
<head>
<style type=”yazi/css”>
şeklinde yazmalısınız.
3. Bazı web site tasarımları kodlamayı tamamen bitirdikten sonra ilgili bağlantıları renklendirmesini yapmaktadırlar. Sizde dilerseniz önce kodlamanızı bitirirsiniz sonra bağlantınızın, linkinizin durumuna göre ilgili renklendirmeyi yapabilirsiniz. Linkler 4 unsurdan oluşmaktadır.Bunlar; link, vurgulu, ziyaret, aktif.
- Link birincil rengi, normal görüntünün rengini ifade eder.
- Vurgulu(hover) bağlantı rengi yapmak için mouse ile bağlantının üzerine gidildiğinde değişen renk anlamına gelir.
- Ziyaret(visited) ise örneğin google üzerinde herhangi bir siteyi ziyaret ettiğinizde tekrardan başka bir aramanızda o bağlantıyla karşılaşırsanız bunu önceden ziyaret ettiğiniz gösteren bağlantı rengidir.
- Aktif(active) için mouse ile ilgili kısmın üzerine gelip tıklandığında bağlantıyı aktifleştirmiş olursunuz. Onay kutusu bir şey düşünebilirsiniz.
4. CSS stylesheet üzerine ekleyin. Bir parantez ile bu işlemi yapmalısınız.
- a:link
- a:hover
- a:visited
- a:active
Bu komutlardan istediğiniz hangiyse onu kullanarak başlayabilirsiniz.
5. “color:” komutunu yazmanızdan sonra “Renk” seçeneği aktif olacaktır. Buna tıklayarak açılan pencereden dilediğiniz rengi seçebilirsiniz.
- İstediğiniz rengin renk kodunu biliyorsanız “{color: #[buraya rengin hex kodu];}” şeklinde yazmanız gerekmektedir.
6. Hover(vurgulama) ile yaptığınızda oluşan görüntü resimde görüldüğü gibidir. Renkleri istediğiniz şekilde ayarlamak istiyorsanız ya hex kodlarını bilmelisiniz ya da açılan listeden istediğiniz rengi seçmelisiniz. Alternatif olarak sadece bazı renkler için uygulanabilen “{color:[renk adını buraya yazmalısınız];} ”
- Bu şekildeki kodlamada renk adının ingilizce yazılması gerekliliğini unutmayın!
7. Bu kodlamayı yaptıktan sonra style etiketini “</style>” komutu ekleyerek kapatmanız gerektiğini unutmamalısınız.
8. Kodları daha sonrasında düzenlemek için yorum ekleyebilirsiniz. Bu elbette yapılması gereken bir şey değildir, ama hatırlatma açısından kullanılması size kolaylık sağlayabilir. Bir CSS stylesheet’de bunu yapmak için “/* [yorumunuzu buraya yazın] */” gibi bir yapı kullanmalısınız.
İpuçları:
- Gerekli yerlere yorumlar koymak daha sonra neyin nerede olduğunu bulmanıza yardımcı olacaktır.
- Burada bahsedilen 4 öğeyi kullanmanız şart değildir, ama herhangi bir bağlantıya ilgi çekmeniz için bunları kullanmanız önerilir.
Uyarılar:
- Eğer başlattığınız herhangi bir öğeyi kapatmazsanız ondan sonra gelen tüm kodları etkileyeceğinden dolayı bu durum tüm her şeyin istediğiniz gibi düzgün çalışmasını engelleyebilir.
- İnternet üzerinden ilgili renklerin HEX kodlarını birçok yerde bulabilirsiniz, sadece renk adlarıyla tüm renkleri elde edemezsiniz.