【087】Stylish & Greasemonkey

　　Stylish 和 Greasemonkey 是 Firefox 中的两个比较经典的扩展，前者主要用来装饰页面的，通过 CSS 来美化页面，因为任何页面的美化都是由 CSS 来完成的，所以让那些收费的主题去死吧！Greasemonkey 就更加碉堡了，通过 JavaScript 语言来改变页面内部的格局，重新设计，可谓无所不能，这个博客主要介绍一点我在学习过程中的一点总结！另外 Greasemonkey 中还用到了很多 jQuery 的知识！

<I> Stylish

1. 全局“微软雅黑”字体

*

{

font-family: "Microsoft Yahei" !important;

}

2. 修改背景颜色、背景图片和字体颜色

div.uname, div.handle

{

color: #00FF00 !important;

background-color: #222222 !important;

background-image: url("http://24.media.tumblr.com/tumblr_maw5xgAWmq1rytmx2o1_1280.png") !important;

}

3. 边框设计，图片(img)也可以！

div.logo div.container {

border-style: none !important;

border-radius: 7px 7px 7px 7px !important;

width: 99% !important;

}

4. 调整页面的宽度

body 

{ 

margin-left: -10px !important; 

margin-right: 0px !important; 

}

注：优酷主页很奇怪，为了保证下面没有滚动条，我就要缩到很小，但是这个时候，两边又空的很大，所以一直很纠结，因为稍微让两边的宽度保持最合适，下面又出现滚动条，用上面的代码，可以减少左边的边距，从而达到效果！另外 margin 表示边界，即外部，padding 表示填充，即内部。

5. Firefox 渐变颜色（只用 background 就行）

• background: -moz-linear-gradient：线性渐变！
• background: -moz-radial-gradient：射线渐变！

　　
　　background-image:-moz-linear-gradient(top, #999999, #333333);
　　或
　　background-image:-moz-linear-gradient(center top , #999999, #333333);

---

　　
　　background-image:-moz-linear-gradient(0deg, blue, cyan);　　(=left)　　→

---

　　
　　background-image:-moz-linear-gradient(90deg, blue, cyan);　　(=bottom)　　↑

---

　　
　　background-image:-moz-linear-gradient(180deg, blue, cyan);　　(=right)　　←

---

　　
　　background-image:-moz-linear-gradient(270deg, blue, cyan);　　(=top)　　↓

---

　　
　　background-image:-moz-linear-gradient(left, red, orange, yellow, green, cyan, blue, purple);　　(rainbow)

---

　　
　　background-image:-moz-linear-gradient(left, blue, white 80%, orange);　　(0%, 80%, 100%)

---

　　
　 　background-image:-moz-linear-gradient(left, blue, white 10%, blue 20%, white 30%, blue 40%, white 50%,
　　blue 60%, white 70%, blue 80%, white 90%, blue 100%);

参考：html5+css3中的background: -moz-linear-gradient 用法

参考：Firefox的Linear Gradients (线性渐变) -Css3演示

6. 背景图片的添加

html

{

background:url(http://www.ttdesk.com/resources/upfile/ttdesk/holiday/eerie_autumn_halloween_desktop/1366x768/15eerie15.jpg) fixed !important;

background-size:100% auto !important;

}



body

{

background:transparent !important;

}

html 部分加入了图片，图片是固定的，图片在整个页面的后面~
body 部分则要透明，这样才能显示 body 后面的背景，这个部分可以针对不同的标签来设置透明度！
另外也可以直接在 body 的背景中插入图片，如下面的代码所示，此代码只是在 body 部分显示图片，其他的部分则保持不变！

body

{

background:url(http://www.ttdesk.com/resources/upfile/ttdesk/holiday/eerie_autumn_halloween_desktop/1366x768/15eerie15.jpg) fixed !important;

background-size:100% auto !important;

}

 

 

<II> Greasemonkey

1. 将所有链接调节成在当前页面打开

// ==UserScript==

// @name        当前页面打开

// @namespace   McDelfino

// @description 当前页面打开

// @include     *

// @grant       none

// @version     1

// ==/UserScript==



(function(){

    var links=document.getElementsByTagName('a');

    for(i=0;i<links.length;i++) {

         links[i].target="_self";

    }

})();