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

时间：2022-05-29 18:15:01 | 来源：网络营销

时间：2022-05-29 18:15:01 来源：网络营销

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

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

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

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

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

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

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

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

4、段落首字下沉

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

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

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

6、Reset Css

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

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

7、图片预加载

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

8、基本的CSS Sprite按钮

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

9、Google Font API

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

10、浏览器的专用hack

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

11、固定页脚

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

12、翻转图片

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

13、clearfix

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

14、圆角

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

15、!important

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

16、@font-face

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

17、页面水平居中

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

18、最小高度min-height

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

19、垂直居中

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

20、::selection

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

亿企邦知识扩展——附：几个常用到的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样式越多，所以开始做前，请做好充分的准备和策划，包括命名规则。页面区块划分，内部样式分类等，这样才不至于在以后的网站维护中再经常的优化代码。