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 评论:

虚飞 说...

这个方法不错。

sz-iris 说...

GG加在哪里啊?我试了N多地方都没什么效果...哎...

肖峰 说...

这个方法我在一个或两个月之前就给你留过言了,可能你一直没看到。
不过我现在已经不用ajax搜索了,觉得在中国用它网速不够理想,每换一个页面就要加载半天,影响心情。现在我直接用blogsearch。

GG 说...

应该是你记错了吧,所有的评论都存在我的邮箱里,刚刚搜索,没有你发的评论记录阿~~~:-P

其实你怕慢可以用侧边栏ajax搜索的形式,加载非常快,无需等待整个网页读完才加载。

肖峰 说...

sorry,可能是我记错了对象了,当时看到有个朋友讲ajax搜索框长度不好调整,也是下载了整个css来修改的。
你说的侧边栏加载是比放在页面中央来的快,我很久以前就关注你的blog了,速度快慢也有所体会,不过就算现在的速度我也不想忍受。我需要的是读者打开blog之后能尽快展开页面内容,而不是太多功能。毕竟读者最关心的是内容。
另外我也问了一些朋友,他们从来不用我以前放在侧栏的搜索,所以我最终还是选择把它去掉了。
btw,你的博客做的很不错,也非常热心,以后我还会继续关注。

GG 说...

其实习惯这个东西是慢慢培养的~~~

毕竟别说ajax搜索了,google搜索在国内都是少数派……

别说google搜索了,整个搜索市场在国内其实都是刚刚普及的程度,真正上网用搜索的网民其实根本就不多……大部分人连百度都没有听说过,何况google……

不过用了以后还是会发现非常方便的,所以一步步给大家普及网络知识吧:)

匿名 说...

replica Chanel alien their advocate new co-axial beat in the De Ville band in 1999. This architecture keeps absolute time after the charge of lubrication, which can abate the watch's durability. Movements are quartz on some models and automated on others. Some models accept the co-axial beat movement.

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