CSS是網頁設計中非常重要的一部分，可以幫助我們美化頁面，增加用戶體驗。但是，在編寫CSS代碼時，我們不免會犯錯，這時候就需要在網頁上實時查看效果了。

通常情況下，我們會在head標簽中添加style標簽，然后在其中編寫CSS代碼。但是，如果想要實時查看效果，就需要將代碼放到HTML標簽中，并使用style屬性。比如：

<div style="background-color: red; color: white; font-size: 24px">
這是一個DIV標簽
</div>

這樣，在瀏覽器中打開頁面時，就可以立即看到div標簽的背景色為紅色，字體顏色為白色，字體大小為24px。

如果我們想要查看更多復雜的CSS效果，比如動畫，可以使用CSS的兼容性測試網站。其中比較常用的有caniuse.com和browserstack.com。這些網站可以模擬各種瀏覽器和設備的環境，讓我們預先查看不同環境下的效果。

除了上述方法，還可以使用瀏覽器自帶的開發者工具來實時查看效果。比如，Chrome瀏覽器可以通過F12打開開發者工具，然后在Elements面板中選擇要修改的HTML元素，右側的Styles面板中就可以實時修改CSS屬性，并查看效果。

總之，實時查看CSS在網頁上的效果是非常重要的，可以讓我們更好地調試代碼，快速找到問題并解決。