CSS On Click是一種在用戶點擊元素時觸發樣式變化的技術。它非常有用，因為它可以幫助我們向用戶傳達更多的信息，增加交互性，并提高用戶體驗。下面我們將介紹如何使用CSS On Click。

p {
font-size: 16px;
font-weight: bold;
color: #333;
cursor: pointer;
}
p:hover {
color: #f00;
}
p:active {
color: #00f;
}

首先，我們需要為要觸發CSS On Click的元素設置樣式。在上面的代碼中，我們為所有的段落元素設置了字體大小、字重、顏色和光標樣式。我們還為鼠標停留在元素上時設置了另一個樣式，并在點擊時設置了另一個樣式。

在上面的代碼中，我們使用了:hover偽類來設置停留樣式，使用了:active偽類來設置點擊樣式。 :hover偽類表示鼠標停留在元素上時所觸發的樣式，而:active偽類表示點擊時所觸發的樣式。

實際上，我們可以使用任何CSS屬性來設置CSS On Click效果。例如，我們可以使用背景顏色來創建一個點擊效果，如下所示：

button {
background-color: #333;
color: #fff;
border: none;
padding: 10px 20px;
cursor: pointer;
}
button:focus {
outline: none;
}
button:active {
background-color: #f00;
}

在上面的代碼中，我們為按鈕元素設置了背景顏色、字體顏色、邊框和填充。我們還為獲得焦點時設置了樣式，并在點擊時設置了另一個樣式。

總之，CSS On Click是一種非常有用的技術，可以幫助我們增加交互性，并提高用戶體驗。無論是在網頁設計中還是應用程序開發中，都應該掌握這個技術。