Oca 12
15
Css Site İçinde Farklı Tasarımda Linkler
Web tasarım yapmaya yeni başlayan arkadaşlar bu konuda oldukça zorluk çekmektedir.Site içerisindeki menü için class css kodları oluşturan arkadaşlar aynı şekilde kod oluşturduğunda ve tasarımı farklı yaptığında sayfadaki diğer linklerin değişmediğini görüyor.Bu konuda size şu şekilde yardımcı olabilirim.
Linklerin birbirine karışmaması için ve bir sayfa içinde farklı tasarımda linkler tanımlamak için Css‘de şunu yaparız.
Şimdi yazacağım kodlar ana menü linkleriniz için olsun.
a:link {
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
line-height: 45px;
color: #009;
text-decoration: none;
font-weight: normal;
}
a:hover {
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
line-height: 45px;
color: #68A70A;
text-decoration: none;
}
a:visited {
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
line-height: 45px;
color: #000;
text-decoration: none;
float: left;
width: 100px;
height: 46px;
border-bottom-width: 0px;
border-bottom-style: solid;
}
a:active {
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
line-height: 45px;
color: #06F;
text-decoration: none;
}
Şimdi birde sitenin alt kısmı için farklı tasarımda linkler oluşturalım.
.footer_link:link {
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
color: #CCC;
text-decoration: none;
line-height: 25px;
}
.footer_link:hover {
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
line-height: 25px;
color: #CCC;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #82c102;
text-decoration: none;
}
.footer_link:visited {
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
line-height: 25px;
color: #CCC;
text-decoration: none;
}
.footer_link:active {
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
line-height: 25px;
color: #CCC;
text-decoration: none;
}
Tek yaptığımız yeni isimde bir link oluşturma ve başına “.” işareti koymaktır.Linke uygulamak için ise;önce yazıya link verin.İlk olarak tanımladığınız link tasarımlarını otomatik atayacaktır.Dreamweaver kullanıyorsanız linki seçip properties panelinden class bölümünü .footer_link yapın.(tabi siz verdiğiniz ismi yapın:))Eğer yazıyorsanız kod bölümünü açıp aynı şekilde link class’ının ismini değiştirin.