Chrome 擴充 Stylish ：給不喜歡某個網站一鍵「換膚」

標籤：自己的   origin   連網   適用於   git   ati   關注   透明   new t   

原文地址：http://whosmall.com/?post=419 本文標籤： Chrome擴充 Chrome瀏覽器 Chrome外掛程式 Chrome擴充Stylish Stylish是什麼Stylish 是什嗎？

開門見山，Stylish 的作用是，它可以把百度首頁變成這樣：

它還能把知乎「拍扁」，讓微博網頁版變得簡潔無比，讓 Feedly 用上 Material Design……

這個神奇的 Stylish 實際上是一個瀏覽器外掛程式，適用於 Chrome，Firefox，Opera 以及 Safari 瀏覽器（點擊瀏覽器名稱即可下載）。Stylish 通過替換網頁本身的 CSS 來達到的「美化」的目的。

什麼是 CSS？CSS 的中文全稱是 層疊樣式表，是一種用來表現HTML 或 XML ……這是個晦澀的東西。換個通俗易懂說法，CSS 就好比是一個網頁的衣服，雖然不能添加網頁本身的功能，但可以決定排版、字型，甚至捲軸等一切與外表有關的東西。至於外表的重要性，我想不必多言，你也許比我更有體會。

CSS 高深但 Stylish 也可以很易用

Stylish 的基本用法非常簡單，從官網安裝 Stylish 到你的瀏覽器。在 Stylish 的選項菜單中你可以更新、停用、卸載、編輯已經安裝的 CSS，這和 Chrome 的擴充程式管理類似。

* 不同瀏覽器介面略有區別，但使用方法相同，本文以 Chrome 為例

現在你的 Stylish 裡面空空如也，接下來就是要添加 CSS 樣式模板了。別怕，你只需要信手開啟一個網站，開啟 Stylish 的菜單，點擊「尋找適合此網站的更多樣式」，Stylish 就會為你列出該網站合適的 CSS 模板。

你也可以直接前往 userstyles.org 尋找已經編寫好的 CSS 模板，這裡就是 Stylish 的「市集」，不過網站的介面並不友好，建議善用左上方的搜尋功能。

 

找到心儀的模板之後，點擊綠色按鈕即可安裝，像安裝瀏覽器外掛程式一樣無痛。而某些 CSS 還有更多可選項，。

你應該試試這些 CSS 模板1. 給你一個乾淨的微博：Weibo_v6

這款 CSS 和一款叫做「微博急簡」的 Chrome 外掛程式有同樣的功效，把微博來個大換裝，去掉廣告等多餘元素，重新排版，給你一個乾淨的微博。

2. 百度也用上 Material Design：百度輕

這就是文首看到的能讓百度用上 Material Design 風格的 CSS 了。它同樣適用於搜尋結果頁面。

3. Google 搜尋的再美化：Google Search - Material Design

這款 CSS 是根據 Dribbble 上的設計師 Aurélien Salomon ? 重新設計的 Google 搜尋做出來的。類似上文的百度輕，由於 Google 本身已經很乾淨，所以效果提升並沒有百度那麼明顯，好看倒是真的。

4. 扁平版知乎：Flat_Zhihu

這款 CSS 不僅是把知乎拍平，還最佳化了字型，動效，以及頁面寬度。總之看起來比原版舒服多了，看知乎終於不用開頁面縮放了。

5. 全域夜間模式：NightShift - eye care

這款全域 CSS 能將頁面中白色的部分變黑，圖片亮度降低，用起來就像開了「夜間模式」一樣。會出現些許相容問題，不影響使用。

6. Mac 風格捲軸：Universial Minimalist Scroll Bar

這是針對 Windows 系統的全域 CSS 樣式。他能讓你的瀏覽器擁有 Mac OS X 樣式的透明極簡捲軸。

使用 Stylish 自訂網頁字型

除了使用上面的模板改變網頁樣式之外，很多人都希望能用自己喜歡的字型來瀏覽網頁，使用 Stylish 可以輕鬆達到這個目的，在 userstyles 網站搜尋「字型」，你可以輕鬆找到很多現成的模板供你挑選使用，下載後幾乎不需調整即可直接使用。

在這裡要推薦一款叫做 ForceMyFont 的模板，這個模板內建的選項非常豐富，允許你手動選擇多款中英文字型，即使你對於 CSS 一竅不通，也可以輕鬆地完成字型設定，在列表中選定你要使用的字型，之後選擇安裝即可，非常方便。不過要注意你的電腦上是否已經安裝了對應字型，如果沒有則需要額外下載安裝。

如果你懂一些 CSS 樣式，你當然也可以手動編寫頁面效果。這樣做的好處是自由度高，可以按自己的喜好想改啥改啥，但使用門檻也成正比的高。在這裡我舉一個自訂字型 CSS 的例子。 

首先，開啟 Stylish 的選項菜單，選擇「編寫新樣式」，填入下面的代碼：

*{font-weight:600!important;}

*{font-family: Arial, ”方正蘭亭黑簡體”;}

其中第一行是定義字型的粗細，越大越粗。第二行是指定的字型，填入一個電腦中已安裝的字型就好。

如果你喜歡字型陰影，可以加入下面這行代碼：

*{text-shadow:0.01em 0.01em 0.01em #999999 !important;}

其中的數值依次代表陰影的 X 軸位移、Y 軸位移、陰影大小，以及字型顏色。

當填寫好「應用對象」之後去頁面查看一下效果吧。如果想要應用到全域，如配置即可。

最後要說一下，如果你是 Mac 使用者，想要調用最新的 San Francisco 字型，可能會發現這個字型並不在 Font Book 裡，而在 CSS 中直接鍵入"San Francisco" 也沒有效果，這是因為蘋果並沒有把這個字型放在 Font Book 中供大家使用，如果想在網頁上使用這個字型，需要用 -apple-system, BlinkMacSystemFont, 才行

最後

可以看到，Stylish 可以最佳化頁面的樣式。對於大多數普通使用者來說，使用 Stylish 套用那些現成的模板，來最佳化那些設計不佳或風格不喜歡的網站，是個很好的解決方案。

更進階一點的話，Stylish 實際上還可以實現去除廣告、補全瀏覽器部分功能。但這不在本文的範圍之中，這篇文章僅作為拋磚引玉，以便讓更多人Crowdsourced Security Testing道並初步瞭解這樣一款瀏覽器延伸。

歡迎各位在評論裡一起討論 Stylish 的更多用法，或分享你喜歡的 CSS 模板。

寫在最後：FOR Freedom 看看外邊的世界，以及IT這一行，少不了去Google查資料，最後，安利一些速器代理。

加速器推薦	免費方案	付費方案	官方網站
一枝紅杏加速器	免費方案暫無，穩定高速	輸入8折優惠碼wh80，年付只需80元/年	官網直達
安雲加速器	最好用的外貿VPN	最低￥30/月	官網直達
LoCo加速器	每天免費2小時	最低￥15/月	官網直達

本文標籤： Chrome擴充 Chrome瀏覽器 Chrome外掛程式 Chrome擴充Stylish Stylish是什麼 Extentions Google

轉自 SUN‘S BLOG - 專註互連網知識，分享互連網精神！

原文地址： 《Chrome 擴充 Stylish ：給不喜歡某個網站一鍵「換膚」》

相關閱讀：《將 QQ 音樂、網易雲音樂和蝦米音樂資源「整合」一起的Chrome 擴充Listen 1》

相關閱讀：《8 個「新標籤頁」Chrome 擴充： 教你把 New Tab 頁面玩的溜溜溜》

相關閱讀：《7 款實用 Chrome 擴充推薦：幫你提升 Chrome 使用體驗》

相關閱讀：《無擴充就不是 Chrome 了：15 款優質的Chrome 擴充推薦給大家》

相關閱讀：《12 款不能少的使網頁瀏覽獲得的最佳體驗Chrome 擴充》

相關閱讀：《5 款可以帶來幸福感的 Chrome 擴充》

相關閱讀： 《關於 Android 中的 Palette 類的使用案例：色彩自適應的 Toolbar》

相關閱讀:《GIT能做什麼、它和SVN在深層次上究竟有什麼不同》

相關閱讀:《分享一些對開發人員最有用的、方便使用和功能豐富的Google Chrome擴充工具》

相關閱讀:《分享一些實際Android開發過程中很多相見恨晚的工具或網站》

相關閱讀:《我是 G 粉，一直關注 Google，最近 Google 有一些小動作，可能很多人不太瞭解》

相關閱讀:《機器學習引領認知領域的技術創新，那麼SaaS行業會被機器學習如何改變？》

相關閱讀:《VPS 教程系列：Dnsmasq + DNSCrypt + SNI Proxy 順暢訪問 Google 配置教程》

相關閱讀: 對程式員有用：2017最新能上Google的hosts檔案下載及總結網友遇到的各種hosts問題解決方案及配置詳解

相關BLOG：SUN’S BLOG - 專註互連網知識，分享互連網精神！去看看：www.whosmall.com

原文地址：http://whosmall.com/?post=419

Chrome 擴充 Stylish ：給不喜歡某個網站一鍵「換膚」