Sözde sınıflar, bir öğenin belirli bir durumuna göre stil vermek için kullanılabilir. Durumlar, kullanıcının bir öğenin üzerine(hover) gelmesi veya bir öğenin geçersiz(invalid) olması olabilir.
Bunu yazı serisini bölümlere ayırdım. CSS Sözde Sınıflar konusu ile ilgili diğer bölümleri de aşağıdaki bağlantılarda bulabilirsiniz.
- Bağlantı Sözde Durumları
- Form Sözde Durumları
- Element Durum Seçicileri
- Diğer Sözde Durumlar
- Dil Bilimsel Durumlar
Bağlantı Sözde Durumları
Bu bölümde ele alınacak seçenekler aşağıdaki gibidir:
:link: Bağlantı ziyaret edilmeden önce:visited: Bağlantı ziyaret edildikten sonra:active: Şu anda bir tıklama gibi onunla etkileşim kurduğunda:hover: Fare üzerine geldiğinde:target: Kullanıcı#bolum-1gibi bir adres gittiğinde:focus: Elemente odaklandığında:focus-within: Bir çocuk elmentine odaklandığında:focus-visible: Sadece klavye olayı ile odaklandığında
:link & :visited
:link seçici, kullanıcı tarafından hangi sayfaların daha önce ziyaret edildiğini belirtmek için uygulanabilir.
Genellikle bir bağlantının daha az parlak görünmesini sağlamak için kullanılır, böylece kullanıcı o sayfayı zaten ziyaret ettiğini bilir.
Aşağıdaki örnekte, varsayılan bağlantıları kırmızı yaptım ve onları ziyaret ettiğinizde griye dönüyorlar.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <style> a:link { color: #C82647; } a:visited { color: #60646D; } </style> </head> <body> <a href="https://www.tasarimkodlama.com">Tasarım Kodlama</a> </body> </html> |
Ekran çıktısı şu şekilde olacaktır.
:active & :hover
Bu ikisi, bir bağlantıyla kullanıcı etkileşimlerini belirtmek için kullanılabilir. :hover, faremizi bir öğenin üzerine getirdiğimiz ve üzerine tıkladığımızda aktif olduğumuz zamandır.
CSS’nizde, etkin durumun her zaman fareyle üzerine gelme durumundan sonra gelmesi gerektiğini bilmek güzel. Aksi takdirde, vurgulu bunun önceliğini alacaktır.
Bu örnekte, vurgulu bağlantıların mor bir arka plana ve beyaz bir metne sahip olmasını sağlayacağız ve tıkladığımızda kırmızıya dönecekler.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <head> <style> a:hover { background: purple; color: white; } a:active { background: transparent; color: red; } </style> </head> <body> <a href="https://www.tasarimkodlama.com">Tasarım Kodlama</a> </body> </html> |
:target
Bu süper havalı ve genellikle gözden kaçıyor. Hangi öğeye tıklandığını ve hangi öğeye gidildiğini belirtmek için kullanılabilir.
Bu, aşağıdaki kurulum gibi bir şeyle belirli bir bölüme bağlanan tek sayfalar için çalışır:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <head> <style> #bolum-2:target { background: yellow; color:#000; } </style> </head> <body> <section id="bolum-1"> Merhaba, burası bölüm 1 <br /> <a href="#bolum-2">Bölüm 2 için tıklayın</a> </section> <section id="bolum-2">Burası bölüm 2</section> </body> </html> |
#bolum-2 bağlantısına tıklandığında ekran çıktısı aşağıdaki gibi olacaktır.
:focus, :focus-within, & :focus-visible
Bunları biraz yaymaya çalışalım. Birincisi :focus. Bir öğenin odak alıp almadığını belirtmek için kullanılabilir. Genel olarak, bu, giriş alanları için iyi çalışır, ancak bunu, bugün bizim havamız olacak olan düğmeler için kullanabilirsiniz.
Varsayılan odak durumu için aşağıdaki CSS’yi kullanabiliriz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <style> button:focus { outline: 2px dashed purple; outline-offset: 2px; } </style> </head> <body> <p>Tab tuşu ile butonları kullanın</p> <button>Buton 1</button> <button>Buton 2</button> </body> </html> |
Butona tıklandığında yada butonlar üzerinde tab tuşu ile hareket edildiğinde aşağıdaki gibi bir çıktı oluşacaktır.
4 Yorum