新型SEO思维就是从一个全新的层次上提升seo优化的水平,达到网络信息最佳化的展示效果!
马海祥博客 > 网站制作 > css教程 > 网页制作中常用的20个优化CSS代码技巧

网页制作中常用的20个优化CSS代码技巧

时间:2013-03-01   文章来源:www.mahaixiang.cn   访问次数:

大家非常的清楚CSS是我们Web制作中不可或缺的一部分。HTML提供了Web制作的结构,但他不能让我们实现美丽的页面制作,此时我们需要CSS的帮助。CSS虽然能帮我们完善Web制作的效果,但其在不同的浏览器下是有不可预知的效果,为了让你的CSS能解决这些不一致,今天马海祥博客给大家介绍20个CSS技巧代码,相信这些对你应该有很大的帮助。

网页制作中常用的20个优化CSS代码技巧-马海祥博客

1、使用text-indent来隐藏文本

这个常用在图片替换文本中,最常见的就是使用使用图片来替换Logo,这个是非常有用的,使用“text-indent”我们可以达到图片替换文本的效果,而且方便搜索引擎的优化,还能支持阅读器阅读网页内容:

网页制作中常用的20个优化CSS代码技巧-马海祥博客

当然,这个只是使用“text-indent"替换文本的一种效果,其实他还有更多的方法。 

2、根据文件格式设置链接图标

这个技巧主要是针对用户体验,让用户能很清楚点击的链接是有关于什么方面的内容,比如说,点击某个链接会到跳到站外。换句话说使用属性选择器器,给不同的链接设置不同的图标,让用户很轻松的明白相应的链接是有关于什么方面的内容:

网页制作中常用的20个优化CSS代码技巧-马海祥博客

3、在IE浏览器中删除textarea的滚动条

IE浏览器中textarea默认就有滚动条出现,为了达到所有浏览器默认下一致的效果,其实我们可以使用代码让他达到一致的效果:

网页制作中常用的20个优化CSS代码技巧-马海祥博客

4、段落首字下沉

有杂志排版中我们常看到第一个段落的首字下沉的效果,其实这种效果实现是相当的容易:

网页制作中常用的20个优化CSS代码技巧-马海祥博客

5、所有浏览器下的CSS透明度

元素透明度时常是个恼人的问题,下面这种方式可以实现所有浏览器下的透明度设置:

网页制作中常用的20个优化CSS代码技巧-马海祥博客

 6、Reset Css

Eric Meyer的重置CSS几乎已经成为标准,用来重置浏览器的默认样式:

网页制作中常用的20个优化CSS代码技巧-马海祥博客

但这样的重置样式并非适合每一个人,我就在此基础上精减了部分代码,因为我发现我们有很多标签是不怎么使用的:

网页制作中常用的20个优化CSS代码技巧-马海祥博客

7、图片预加载

图片预加载有时是非常有用的,这样当某个元素需要时,他就已经被加载了,此时就不会有任何延误或闪烁的现像:

网页制作中常用的20个优化CSS代码技巧-马海祥博客

8、基本的CSS Sprite按钮

CSS Sprite我想大家一定是非常熟悉,我们时常在按钮或链接中使用CSS Sprites,用来提搞用户的体验。比如说,我们有一个按钮,当用户鼠标在按钮上时需要显示另一种背景,那么我们就可以使用这样的技术:

网页制作中常用的20个优化CSS代码技巧-马海祥博客

9、Google Font API

Google Font给我们提供一个新的字体设置。

 网页制作中常用的20个优化CSS代码技巧-马海祥博客

10、浏览器的专用hack

浏览器的兼容问题向来都是很烦的事情,特别是在IE下的兼容问题。但有时我们为了达到一致的效果,不得不使用浏览器的兼容:

网页制作中常用的20个优化CSS代码技巧-马海祥博客

11、固定页脚

固定页脚在屏幕的底部,在现代浏览器来说是一件非常容易的事情,但是在IE6下还是需要特殊的处理:

网页制作中常用的20个优化CSS代码技巧-马海祥博客

12、翻转图片

翻转图像随着CSS3的transform越来越实用,不需要重新加载图片,就可以实现一个图片的旋转。常见的是一个三角型效果,我们想让他在不同状态展示不同的风格:

网页制作中常用的20个优化CSS代码技巧-马海祥博客

13、clearfix

clearfix主要是使用他来清除浮动,只需要添加这个类名无需加上任何HTML标记,就可以达到清除浮动的效果:

网页制作中常用的20个优化CSS代码技巧-马海祥博客

14、圆角

随着CSS3的属性的出现,我们制作圆角效果就不需要在像以前那样的辛苦了,可以使用CSS3的border-radius来实现,只是在IE-6-8下无法实现,我们来看现代浏览器下如何制作圆角:

网页制作中常用的20个优化CSS代码技巧-马海祥博客

15、!important

!important有时可以帮我们做很多事,他可以覆盖任何相同的样式,换句话说他可以改为样式的权重:

网页制作中常用的20个优化CSS代码技巧-马海祥博客

16、@font-face

@font-face也是CSS3的属性之一,他能在所有浏览器下运行。最大的作用就是让用户没有字体的浏览下也能支持网页字体,具体使用:

网页制作中常用的20个优化CSS代码技巧-马海祥博客

17、页面水平居中

如何使一个网站的页面水平居中显示,我想这个不用我说大家也知道,因为大家肯定使用过多次了。

网页制作中常用的20个优化CSS代码技巧-马海祥博客

18、最小高度min-height

在IE6浏览器下是不支持最小高度这个属性的,为了解决这个问题,我们可以使用下面这样的代码来处理:

网页制作中常用的20个优化CSS代码技巧-马海祥博客

19、垂直居中

水平居中处理起来相当的简单的,但是垂直居中处理起来还是相当的烦,特别是要兼容IE的浏览器情况下:

网页制作中常用的20个优化CSS代码技巧-马海祥博客

20、::selection

有很多朋友肯定不知道这个属性的作用。它可以改变选择的文本的背景色和前景色,突出你的浏览器中的选择文本效果:

网页制作中常用的20个优化CSS代码技巧-马海祥博客

马海祥博客知识扩展——附:几个常用到的CSS样式:

(1)、中文字两端对齐:text-align:justify;text-justify:inter-ideograph;

(2)、固定宽度汉字截断:overflow:hidden;text-overflow:ellipsis;white-space:nowrap;(不过只能处理文字在一行上的截断,不能处理多行。)(IE5以上)FF不能,它只隐藏。

(3)、固定宽度汉字(词)折行:table-layout:fixed; word-break:break-all;(IE5以上)FF不能。

(4)、<acronym title=”输入要提示的文字” style=”cursor:help;”>文字</acronym>用鼠标放在前面的文字上看效果。这个效果在国外的很多网站都可以看到,而国内的少又少。

(5)、FLASH透明:选中swf,打开原代码窗口,在</object>前输入<param name=”wmode” value=”transparent”> 以上是针对IE的代码。针对FIREFOX 给<embed> 标签也增加类似参数wmode=”transparent” 。

(6)、在做网页时常用到把鼠标放在图片上会出现图片变亮的效果,可以用图片替换的技巧,也可以用如下的滤镜:

.pictures img {
  filter: alpha(opacity=45);
  }
  .pictures a:hover img {
  filter: alpha(opacity=90);
  }

(7)、图片设为半透明:.halfalpha { background-color:#000000;filter:Alpha(Opacity=50)}在IE6及IE5测试通过,FF未通过,这是因为这个样式是IE私有的东西。

做过跟网页制作有关的工作人员应该知道,网站越大,CSS样式越多,所以开始做前,请做好充分的准备和策划,包括命名规则。页面区块划分,内部样式分类等,这样才不至于在以后的网站维护中再经常的优化代码。

本文为马海祥博客原创文章,如想转载,请注明原文网址摘自于http://www.mahaixiang.cn/css/183.html,注明出处;否则,禁止转载;谢谢配合!

相关热词搜索: CSS代码 优化CSS技巧 常用CSS代码

上一篇:如何通过修改CSS样式来增强平板电脑的用户体验
下一篇:CSS常用代码使用技巧大全

今日话题更多>

SEO研究院 更多 >>