Linkler web sayfalarında çok yaygındır, ancak birçok web tasarımcıları, CSS ile olan bağlantılarını etkin bir şekilde yönetmek ve yönetmek için sahip oldukları gücü fark etmemektedir. Ziyaret edilen, vurgulu ve aktif durumlarla bağlantıları tanımlayabilirsiniz. Bağlantılarınızı daha fazla pizzaz vermek veya düğmeler veya görüntüler gibi görünmesini sağlamak için kenarlıklar ve arka planlar ile de çalışabilirsiniz.
Çoğu web tasarımcısı, "a" etiketi üzerinde bir stil tanımlayarak başlar:
bir {color: kırmızı; }Bu , bağlantının tüm yönlerini stilleyecektir (vurgulu, ziyaret edilen ve aktif olan). Her bir parçayı ayrı ayrı biçimlendirmek için, bağlantı sözde sınıflarını kullanmalısınız.
Pseudo Sınıflarını Bağla
Tanımlayabileceğiniz dört temel bağlantı sözde sınıfı vardır:
- : link - bu bağlantı için varsayılan stil
- : ziyaret edildi - bağlantı tıklandıktan sonra
- : vurgulu - bir fare bir bağlantı üzerinden (önceden tıklama)
- : etkin - bağlantı tıklandığında sağda
Bir sahte sözde sınıf tanımlamak için, onu CSS seçicinizdeki bir etiketle kullanın. Bu nedenle, tüm bağlantılarınızın ziyaret edilen rengini griye dönüştürmek için şunu yazın:
a: ziyaret edilen {renk: gri; }Bir bağlantı sahte sınıfını stilliyorsanız, hepsini stil haline getirmek iyi bir fikirdir. Bu şekilde yabancı sonuçlardan şaşıracaksınız. Dolayısıyla, ziyaret edilen rengi griye dönüştürmek istiyorsanız, bağlantılarınızın diğer tüm sözde özellikleri siyah kalıyorsa şunları yazmış olursunuz:
a: bağlantı, a: vurgulu, a: etkin {color: black; } a: ziyaret edilen {renk: gri; }Bağlantı Renklerini Değiştirin
Stil bağlantılarının en popüler yolu, farenin üzerine geldiğinde rengi değiştirmektir:
bir {color: # 00f; } a: vurgulu {renk: # 0f0; }Ancak, bağlantının şu şekilde tıklandığından nasıl göründüğünü etkileyebildiğinizi unutmayın: active property:
bir {color: # 00f; } a: etkin {color: # f00; }Ya da bağlantıyı ziyaret ettikten sonra nasıl görünür: ziyaret edilen mülk:
bir {color: # 00f; } a: ziyaret edilen {renk: # f0f; }Hepsini bir araya getirmek için:
bir {color: # 00f; } a: ziyaret edilen {renk: # f0f; } a: vurgulu {renk: # 0f0; } a: etkin {color: # f00; }Simgeleri veya Madde İşaretlerini Ekleme Bağlantılarına Arka Planlar Ekleme
Şık Arka Plan makalesinde olduğu gibi bir bağlantıya arka plan yerleştirebilirsiniz, ancak arka planla biraz oynayarak ilişkili bir simgeye sahip bir bağlantı oluşturabilirsiniz. Metniniz daha büyük değilse, 15px by 15px boyutunda küçük bir simge seçin. Arka planı bağlantının bir tarafına yerleştirin ve tekrarlama seçeneğini tekrarlama olarak ayarlayın. Ardından, bağlantıyı metnin içindeki metni, simgeyi görmek için sola veya sağa yeterince taşınacak şekilde kaydırın.
bir {padding: 0 2px 1px 15px; arka plan: #fff url (ball.gif) sol merkez no-tekrar; renk: # c00; }Simgenizi aldıktan sonra, bağlantı değişikliğini yapmak için vurgulu, etkin ve ziyaret edilen simgeleriniz olarak farklı bir resim ayarlayabilirsiniz:
bir {padding: 0 2px 1px 15px; arka plan: #fff url (ball.gif) sol merkez no-tekrar; renk: # c00; } a: hover {background: #fff url (ball2.gif) sol merkez no-repeat; } a: etkin {background: #fff url (ball3.gif) sol merkez no-repeat; }Bağlantılarınızı Düğmelere Bakın
Düğmeler çok popüler, ancak CSS ortaya çıkana kadar, sayfalarınızı daha uzun sürecek şekilde, resimler kullanarak düğmeler oluşturmanız gerekiyordu. Neyse ki, CSS ile kolayca düğme benzeri bir efekt oluşturmanıza yardımcı olabilecek bir kenarlık stili var.
a {border: 4px outset; dolgu malzemesi: 2px; metin-dekorasyon: yok; } a: etkin {border: 4px eki; }Başlangıç ve renk stillerine renkler eklediğinizde, tarayıcıların beklediğiniz gibi oluşturma olasılığı yoktur. Bu yüzden, renkli kenarlıklı bir meraklısı düğmesi:
bir {border-style: katı; kenarlık genişliği: 1px 4px 4px 1px; metin-dekorasyon: yok; dolgu malzemesi: 4px; kenarlık rengi: # 69f # 00f # 00f # 69f; }Düğme bağlantısının hover ve aktif stillerini de etkileyebilir, sadece sözde sınıfları kullanabilirsiniz:
a: link {border-style: katı; kenarlık genişliği: 1px 4px 4px 1px; metin-dekorasyon: yok; dolgu malzemesi: 4px; kenarlık rengi: # 69f # 00f # 00f # 69f; } a: hover {border-color: #ccc; }