前端技術分享:一個超級好用的CSS樣式表

千鋒武漢發表於2021-03-15

大家可以經常逛一些程式設計師比較喜歡的論壇貼吧,你會有不一樣的驚喜呢,今天小千就來給大家分享一個在GitHub上面發現的超級好用的CSS樣式表,來看一看。

看名稱本以為是一個動畫庫,但是看下來才發現這是一個改變預設HTML元素樣式的css,而且不需要新增額外class!!

在網上其實有很多更改預設樣式的css庫,但是大多需要新增class,那麼多class每次還需要查文件,萬一寫上頭忘記加,一看頁面,一個大大的白眼送給自己

只需要在自己的專案中引用一個css檔案即可,而且提供了三種主題

1、Automatic:根據頁面中設定的prefers-color-scheme自動識別開啟深夜模式

2、Dark theme:深夜模式

3、Light theme:預設的正常白天模式

下面我們就來列舉一些谷歌中 預設樣式 and 美容後 的樣式對比

1、一般輸入框

<input type="text">

2、只讀輸入框

<input type="text" readonly placeholder="readonly輸入框">

3、禁用輸入框

<input type="text" disabled placeholder="disabled輸入框">

4、按鈕

<input type="submit">

<input type="button" value="按鈕">

5、捲軸

當然,water.css並不只對以上的內容進行了美化。當我們不想花費太長時間做一個demo頁面,但又不想做的太丑時,就可以選擇試一試這個css,最重要的是,不需要新增額外class呀!閉眼寫就完事了!


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/31548651/viewspace-2762844/,如需轉載,請註明出處,否則將追究法律責任。

相關文章