用 Stylish 自定制页面风格的基本方法

大部分网页设计者都喜欢用白色来做网页的底色，因为这样容易配色。但是，如果长时间盯着以白色为底色、文字为主的网站，看的时间一久，就会觉得白色很刺眼，太伤眼睛了。在这种情况下，我喜欢用以深色为底、文字颜色为浅绿色的配色方案，对，就像一个 Term 终端的配色一样。

如果是使用 Firefox 浏览器，我们可以用 Stylish 这个插件来重写某个页面的 CSS 样式。Stylish 的语法很简单，基本要点有两个：

重载当前站点已有的 CSS 样式要重载当前站点已有的 CSS 样式，只要找到你想重载的样式的类名 ( Class ) 或是 ID 号，就可以直接在 Stylish 里用 CSS 来重载定义。最重要的是，一定要在结尾加上 !important 这个标记，例如：

<pre><span>#example </span>{ <span>color</span>: blue <span>!important</span>; }

用 -moz-document 规则来指定应用自定义 CSS 样式的网页地址，示例如下：

@-moz-document domain(‘images.example.com’), url-prefix(‘http://example.com/images') {
/*
the code in here only apply to:
-pages on the domain images.google.com
-pages whose URLs start with http://example.com/images
*/
}

如果运用得好，可以定制出非常漂亮的风格。我就利用 Stylish 和 Firebug 定制了一下水木社区的页面风格，现在再也不用盯着水木那白晃晃地页面看导读了。

原创文章，如转载请注明：转载自细节之锤 [ http://blog.WaterLin.org/ ]

文章目录