Aktif Stiller

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

:active sözde sınıfı, bir öğe kullanıcı tarafından etkinleştirildiğinde (genellikle bir kullanıcı bir öğeye tıkladığında ve fare düğmesini basılı tuttuğunda) o öğeye stiller uygular.

Örneğin:

<button class="action-button">Click Me!</button>

Düğme aktif olduğunda stil vermek için CSS ekleyin:

.action-button {
  background-color: blue;
}
.action-button:active {
  background-color: darkblue;
}

Butona tıklayıp basılı tuttuğunuzda, rengi maviden koyu maviye (darkblue) dönüşecektir. Bu, kullanıcılara eylemlerinin kaydedildiğine dair görsel bir geri bildirim sağlar.

Kendini test et

Bu ders kısa bir quiz içerir. Soruları yanıtlamak ve ilerlemeni kaydetmek için derse başla.

Kendini test et

Bu ders kısa bir quiz içerir. Soruları yanıtlamak ve ilerlemeni kaydetmek için derse başla.

Görev

Kolay

.special-link sınıfı için, bağlantı aktif olduğunda aşağıdaki stilleri ekleyen CSS'i yazın:

Metin rengini #e74c3c olarak değiştirir
1px 1px 2px rgba(0,0,0,0.3) değerinde bir metin gölgesi ekler

Kopya kağıdı

:active sözde sınıfı (pseudo-class), bir öğe kullanıcı tarafından etkinleştirildiğinde, genellikle fare düğmesine basılı tutulduğunda stiller uygular.

.action-button {
  background-color: blue;
}
.action-button:active {
  background-color: darkblue;
}

Bu, kullanıcının eyleminin kaydedildiğine dair görsel bir geri bildirim sağlar.

Kendin dene

<!DOCTYPE html>
<html>
<head>
    <title>Active Pseudo-class</title>
    <style>
        /* Write your CSS here */
        
    </style>
</head>
<body>
    <a href="#" class="special-link">Interactive Link</a>
</body>
</html>

Kendini test et

Bu ders kısa bir quiz içerir. Soruları yanıtlamak ve ilerlemeni kaydetmek için derse başla.