2007年3月4日星期日

css:重写覆盖前面的CSS规则的方法(侧边栏google搜索api升级)

一直因为那个侧边栏型式的google搜索api的超大CSS头疼不已。因为直接引用那个最快的api自带的存储在google服务器上的css文件会把搜索栏搞得老大,根本没法用……那个css设定搜索框长达300px阿,把博客撑爆了!

而把css下到自己服务器上,又没有好用快速的服务器,googlepages可以引用经常出问题,而且比较慢。google code比较快,可是不能引用。不信你自己试试看,引用了和没有引用一样,不知道为什么……

国内的不敢想,3天两头出问题,所以最后决定那么大的一个CSS文件整体复制到了博客html模板里……但是把模板撑那么大总是不好,但是一直没有解决办法也就不了了之了……

今天突然灵光乍现想起来以前那个那个不是有个hack当时也是给了CSS的,然后又在后面单独列出可以自定义的css内容吗?他是怎么做的啊?问题是就是想不起来那个hack是在哪里看到的了。

最后干脆自己找,搜索重写特定css规则的方法,找出一些讲解CSS的文章,快速浏览一遍,总算找到偶要找的方法。放到博客上测试,成功~~哈哈

其实就是在css代码后面加上一条重新定义的css 即可……如果觉得不够劲,再加个 ! important 强调一下:)
代码如下:

<style type="text/css">
.gsc-control {
width: 95%; ! important
}
</style>

另外某些博客因为字体的原因可能导致在IE下显示不清楚搜索框的“X”清除按钮。
所以可以再加上一行这个代码:

td.gsc-clear-button {
width : 1%;
}

这样火狐和IE下那个X都很清楚了。

所以今天学到了CSS的覆盖, ! important 表示不可覆盖,强调。

恩,另外还有google搜索API升级了一个图书搜索出来。只需要在你想显示的地方加上如下代码即可:
searchControl.addSearcher(new GbookSearch());

我还在看最近google搜索ajax API的另外一个升级,看懂了再来跟大家分享:)

7 评论:

发表评论: ☆欢迎灌水☆言论自由☆交流快乐☆