在Web開發中，經常需要使用CSS來美化頁面的外觀。但是有時候我們想要看到一個網站的具體CSS屬性，該怎么辦呢？這時候，可以使用點擊顯示CSS的方法。
在HTML中，我們可以使用pre標簽來展示代碼。而為了達到點擊顯示CSS的效果，我們需要借助Javascript。具體方法如下：
首先，我們需要在CSS的外部文件中定義一個CSS樣式，并為此樣式指定一個類名。例如：
```
.my-style {
color: red;
font-size: 20px;
}
```
在HTML中，我們使用一個div來包裹我們想要點擊顯示的CSS代碼：
```在這里我們也是使用了pre標簽來展示代碼，但是加入了預覽效果。
綜上所述，使用點擊顯示CSS是一種方便且實用的方法，既可以增加頁面交互性，也可以更方便地查看CSS代碼。
點擊顯示CSS
.my-style {
color: red;
font-size: 20px;
}```
在Javascript中，我們使用querySelector方法選中click-me元素，并添加點擊事件。點擊事件的處理函數中，我們將選擇pre元素（即，我們想要顯示的CSS代碼所存在的元素），并將其樣式display的值設為“block”。也就是說，我們通過點擊事件來改變pre元素的可見性。
```
var clickMe = document.querySelector('.click-me');
clickMe.addEventListener('click', function(e) {
var myStyle = document.querySelector('.my-style');
myStyle.style.display = 'block';
});
```
這樣，當用戶點擊click-me元素時，就會顯示出預設的CSS樣式。
值得一提的是，在CSS樣式表中定制完CSS后，可以通過嵌套一個pre標簽在樣式表HTML文件中來實現樣式預覽。實現代碼如下：樣式表
{{ asset('css/all.css')|raw }}樣式預覽
{{ asset('css/all.css')|raw }}