Menu
Coddy logo textTech
ÖĞRENMEYE BAŞLA
flag Tr iconTürkçedown icon

Aktif Menüyü Vurgulama

Coddy'nin HTML Journey'sinin CSS Mastery bölümünün bir parçası. Ders 39 / 43.

challenge icon

Görev

Kolay

Dört bağlantı içeren basit bir navigasyon menüsü verilmiştir. Göreviniz, sözde sınıfları (pseudo-classes) kullanarak bu menüyü daha etkileşimli hale getirmektir.

Aşağıdaki işlemleri yapacak CSS kodunu yazın:

  1. Bir kullanıcı bir bağlantının üzerine geldiğinde (hover), arka plan rengini rgba(50, 168, 82, 1) olarak değiştirin.
  2. Bağlantıya aktif olarak tıklandığında (active), metin rengini white olarak değiştirin.

Kendin dene

<html>
<head>
  <title>Highlight Active Menu</title>
  <style> 
    nav a {
      padding: 10px;
      text-decoration: none;
      color: black;
    }
    /* Add your styles here */

  </style>
</head>
<body>
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#" class="active">Blog</a>
    <a href="#">Contact</a>
  </nav>
</body>
</html>

CSS Mastery bölümündeki tüm dersler

1Seçici Uzmanlığı – Kombinasyon

GirişAlt Öğe SeçicisiÇocuk SeçiciBitişik Kardeş SeçicisiGenel Kardeş SeçicisiÖzet Meydan Okuması

4Açılır Menü Projesi

Alt Menüyü EkleAlt Menüyü GösterDaha Fazla Stil VermeInput ve Buton

7CSS Grid ile İnşa Edin

Grid TemelleriGrid-row Öğe Yerleşimiİsimlendirilmiş AlanlarTekrar Görevi

2Etkileşimli Sözde Sınıflar

Sözde SınıflarHover EfektleriOdaklanma EfektleriAktif StillerÖzet Meydan Okuması

5Görsel Efektler

GradyanlarCSS FiltreleriTransformGeçişler ve Hover EfektleriTekrar Meydan Okuması

8Flavor Fiesta web sitesi

Grid yapısını kurmaHeaderAna bölümFooter

3Yapısal sözde sınıflar

Yapısal sözde sınıflarİlk Çocuğu HedeflemeSon Çocuğu HedeflemeDesen Gücü: nth-child KullanımıÖzet Meydan Okuması

6Açılış Sayfası

Header Bölümünü Stilize EtButonu Stilize EtBölüm DüzeniKart DüzeniSon Dokunuşları Ekle

9Son Meydan Okumalar

Aktif Menüyü VurgulamaZebra Tablo SatırlarıButon Hover EfektiGrid Kart DüzeniBulanık Hero Görseli

Kendi başına pratik yap: Web playground