开发学院网页设计 DivCss 用Firefox插件调整CSS 优化网页视觉体验阅读

用Firefox插件调整CSS 优化网页视觉体验

　2008-08-31 19:27:38　来源：WEB开发网　闂備線娼уΛ鎾箯閿燂拷

濠电姭鎷冮崨顓濈捕闂侀潧娲ゅú銊╁焵椤掍胶鈯曢柕鍥╁仧缁辩偤鏁撻敓锟�闂備線娼уΛ鎾箯閿燂拷　　闂備胶枪缁绘鈻嶉弴銏犳瀬闁绘劖顐煎☉妯锋瀻闁归偊鍓涘▔姘舵⒑閸涘⿴娈旀繛灞傚妼閳绘捇骞嬪┑鎰濡炪倖姊婚崢褏鎲撮敓锟�

核心提示：本文讨论如何利用Firefox的Stylish插件调整网页的CSS布局，让用户能更加轻松舒服地浏览网页，用Firefox插件调整CSS 优化网页视觉体验，现在有越来越多的人在使用Google Reader，利用Google Reader可以非常方便的订阅、阅读 rss，点击确定按钮保存设置，这样Google Reade

本文讨论如何利用Firefox的Stylish插件调整网页的CSS布局，让用户能更加轻松舒服地浏览网页。

现在有越来越多的人在使用Google Reader，利用Google Reader可以非常方便的订阅、阅读 rss。但Google Reader也有自己不足之处，主要是在阅读上不是很方便。RSS 内文的空间宽度以及字号比较窄了一点，阅读体验并不是很理想(图1)。

用Firefox插件调整CSS 优化网页视觉体验　　图1

如果你使用的是Firefox浏览器，可以利用一款Stylish的插件来改变Google Reader的布局，让阅读更加方便(点击下载)。

Stylish这款插件主要作用是让CSS样式的网页可以自由的变换，不管是背景、字型、行间距都可以配合我们的需要而改变。只要对 CSS 有基本的认识再配合插件，那么想要对某个网页进行大改造就变得易如反掌。

先将插件安装在Firefox。在Firefox中登录Google Reader网站，然后在下面会看到Stylish按钮。点击该按钮后，选择“撰写样式→空白样式”(图2)。

用Firefox插件调整CSS 优化网页视觉体验图2

在描述中输入Google，在下面文本框中输入CSS代码：

@-moz-document url-PRefix("http://www.google.com/reader") {
　　.entry .entry-body {max-width:100% !important; font-size:16px !important; line-height:150% !important;}
　　}

提示：max-width: 100%：指最大宽度为 100%;font-size: 16px：指字号为 16像素;line-height: 150%：指行高 (或称为行间距)为 150%，除了用百分比之外还可以用像素来指定行高，例如 32px。

可以根据自己的喜好来输入相对应代码，选择好之后点击预览按钮可以查看修改后的效果，如果觉得没有问题，点击确定按钮保存设置。这样Google Reader就会按照自己的设定来改变版面，以后再阅读起来就会方便很多。