CSS Link Özellikleri

CSS İle Linklerin Şekillendirilmesi

CSS özelliklerini kullanarak linkleri farklı şekillerde kullanıcılara gösterebiliriz. Yazı olarak kullanabileceğimiz gibi linkleri bir buton veya resim ile birlikte de kullanabiliriz. Linkler herhangi bir CSS özelliğini alabilirler.

Linkleri şekillendirirken şu anda bulundukları duruma göre özellikleri kullanabiliriz. Bu durumlar:

  • a:link – normal, henüz ziyaret edilmemiş link
  • a:visited – kullanıcı tarafından ziyaret edilmiş
  • a:hover – mouse imleci üzerinde iken
  • a:active – linkin üzerine tıkladığımız andaki durum

Bir örnek verelim

Örneği yazıp çalıştırdığınızda linkin ilk olarak kırmızı renkte olduğunu, imleç üzerine geldiğinde pembe, tıkladığınızda mavi ve ziyaret ettikten sonra yeşil rengini aldığını görebilirsiniz. Bu durumları kullanırken dikkat etmemiz gereken bazı sıralama kuralları bulunmakta.

  1. a:hover durumu a:link ve a:visited durumlarından sonra kullanılmalı
  2. a:active durumu a:hover durumundan sonra kullanılmalı

Tüm linkler için bu durumları kullanacağımızı varsayalım. Sıralamamız

  1. a:link
  2. a:visited
  3. a:hover
  4. a:active

şeklinde olmalıdır. Linklerdeki yazıları da istediğimiz gibi şekillendirebiliriz. Kimi durumlarda altı çizili yapmak isteyebilir, kimi durumlarda ise şekillendirme olmadan kullanmak isteyebiliriz. Bu özelliği yukarıdaki durumlarla birleştirerek örnek verelim:

Örnekte link için ilk olarak şekillendirme kullanmamasını istedik. İmleç üzerine geldiğinde ve tıklandığında altı çizili olmasını istedik. Son olarak ziyaret edildikten sonra yine şekillendirmenin kaldırılmasını belirttik. Linkleri buton olarak veya yazı biçiminde de kullandığımızda arka plan rengini değiştirme imkanımız bulunuyor. Bunun için “background-color” özelliğini kullanacağız.

Linklerin şu anki durumlarını da kullanarak arka plan renklerini istediğimiz gibi değiştirmiş olduk.

Linklere Farklı Şekiller Vermek

Kullandığımız linklere kullanıcılar için farklı şekiller verebiliriz. Örneğin bir linke tıkladıklarında linkteki yazıyı büyütebilir, üzerine geldiğinde yazı rengini değiştirebilir veya farklı bir font kullanabiliriz. Bir örnekle açıklayalım.

Örnekte ilk olarak beş linki oluşturduk. Bu linklerin tarayıcıda anlaşılır görünmesi için <p> ve <b> etiketlerini de kullandık. Ardından her bir linke sınıf değeri verdik. Son olarak linkleri sınıf değerlerine göre şekillendirmiş olduk.

Buton Halinde Link Oluşturmak

Kullandığımız linkleri bir buton haline getirerek daha farklı kullanmak isteyebiliriz. Örnekle açıklayalım.

css link

 

 

Linki oluşturduktan sonraki adımları açıklayalım.

  • display: inline-block özelliği ile link hem inline hem block özelliklerini kullanmış oldu.
  • padding özelliği ile linkte yazı ile butonun köşeleri arasında boşluk bırakmış olduk.
  • text-align ile yazıyı  ortaladık.
  • border-radius ile butonun köşelerini daha oval hale getirdik.

Diğer özellikler daha önceden bildiğimiz şeylerdi. Son olarak farklı bir şekilde butonu kullanalım.

css link

 

 

Bu örnekte farklı olarak yaptığımız tek şey, arka plan rengini beyaz köşeleri ise border özelliği ile yeşil renkte verdik. Butonun üzerine geldiğimizde ve tıkladığımızda ise arka plan rengini yeşile yazı rengini ise beyaza çevirdik.

Etiketler:, ,

Yorum Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

error: