Использование onclick css для создания интерактивности и стилизации элементов при клике

Обработчик события `onclick` в CSS позволяет задать стили, которые будут применяться к элементу при щелчке на него мышью.

Для этого мы можем использовать псевдокласс `:active` в CSS. Когда элемент активен (нажат), то свойства, определенные для псевдокласса `:active`, будут применяться к нему.

Пример кода:

HTML:

html
Нажми меня!

CSS:

css
.btn {
  padding: 10px;
  background-color: #e3e3e3;
}
.btn:active {
  background-color: #999;
  color: white;
}

В этом примере, кнопка будет иметь серый фон и черный текст по умолчанию. Когда кнопка будет нажата (`:active`), фон кнопки станет серым цветом `#999`, а текст станет белым цветом.

Мы также можем использовать JavaScript, чтобы добавить дополнительные стили при клике на элемент. Для этого необходимо использовать метод `addEventListener()` для элемента, которому нужно добавить обработчик события.

Пример кода:

HTML:

html
Нажми меня!

CSS:

css
.btn {
  padding: 10px;
  background-color: #e3e3e3;
}
.btn.clicked {
  background-color: #999;
  color: white;
}

JavaScript:

javascript
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
  button.classList.toggle('clicked');
});

В этом примере, когда на кнопку нажимают, класс `clicked` добавляется или удаляется у элемента кнопки. При добавлении класса `clicked`, он изменяет стили кнопки, и фон становится серым `#999`, а текст становится белым цветом.