怎么让CSS样式表优化简单

html-css07

怎么让CSS样式表优化简单,第1张

CSS简写就是指将多行的CSS属性声明化成一行,又称为CSS代码优化。CSS简写的最大好处就是能够显著减少CSS文件的大小,其实还有很多其他益 处。臃肿而杂乱的CSS样式表会使你遇到问题是难以调试。尤其是当一个团队在进行设计的时候,你的臃肿的CSS代码会使你的团队其他成员的工作效率下降。

今天,整理了一些CSS简写技巧,它们其实是CSS最常用的写法,但是太多的人使用Dreamweaver这种所见即所得软件来编写CSS,使得代码过 于臃肿。不过没关系,看过本文之后,你一能能掌握CSS代码优化的技巧,今后让你的每一个CSS样式表都看起来整洁而简短吧。

属性值为0

书写原则是如果CSS属性值为0,那么你不必为其添加单位(如:px/em),你可能会这样写:

padding:10px5px0px0px

试试这样吧:

padding:10px5px00

移除选择器

选择器是你在为一些元素应用CSS样式时的基本方法,比如h1,h2,h2,div,strong,pre,ul,ol等等…如果你使用了class(.类名)或ID(#id名),那么就不用再在声明CSS时包含选择器了。

div#logowrap

尝试扔掉多余的选择器吧:

#logowrap

在这个例子中所谓的那个选择器就是div

*总爱和你开玩笑

要明智的使用*而避免它在整个CSS样式表中乱开玩笑,*是个通配符,你可以使用它来为你的设计部分或全部进行一系列CSS声明。例如:

*{

margin:0

}

这个声明会将所有元素的margin值设置为0,同样的,为了严谨起见,你可以尝试这样设置:

#menu*{

margin:0

}

这样的声明是指将#menu下的所有元素的margin设为0。

背景

背景(background)属性可能会包含设置背景色、背景图、背景图的位置和背景图重复方式的参数,你可能会写成:

background-image:url(”logo.png”)

background-position:topcenter

background-repeat:no-repeat

其实可以写成:

background:url(logo.png)no-repeattopcenter

颜色

颜色(color)属性在CSS通常指定为一个十六进制的值,一个#加6位数,他的简写方式是如果颜色值由成对儿出现的三对而数字组成,你可以省略掉没对中的一个数字。

#000000可以写成#000,#336699可以写成#369

这种简写技巧只适用于成对出现的颜色值,其它颜色值不适用这种技巧,比如:

#010101,#223345,#FFF000

Margin(外边距/空白边)

声明CSSmagin值得时候通常会写成这样:

margin-top:0px

margin-right:10px

margin-bottom:0px

margin-left:10px

让我们试试把值为0的单位去掉,并把4条声明合并成一条声明:

margin:010px010px

当你生命padding、margin、border(还有一些其他属性)时,记得要把按照顺时针的方向来声明属性值,也就是按照上-右-下-左的方 向。关于这些属性还有另一个更加简单的写法,看看属性中上和下、左和右是否值是相等的,如果是那么就可以进一步优化了,你可以省略掉后两个值,剩下的两个 值前者指上下,后者指左右:

margin:010px

它是指左右的值为10px,上下的值为0;

Padding(内边距)

padding的简写技巧等同于margin:

padding-top:0px

padding-right:10px

padding-bottom:0px

padding-left:10px

可以写成:

padding:010px

Borders(边框)

边框的简写方式相比其它生命来说会比较复杂,很多CSSer一开始都容易记混它的简写顺序,如果你想声明一个1像素宽的实线黑色边框,可能会写成:

border-width:1px

border-style:solid

border-color:#000

其实可以写成:

border:1pxsolid#000

注意:这里的颜色值已经使用了上面讲过的颜色简写方法了哦。

我们还可以为四个边设置不同的宽度:

border-top-width:1px

border-right-width:2px

border-bottom-width:3px

border-left-width:4px

可以简写成:

border-width:1px2px3px4px

最后,我们还可以只设置左和右的边的样式:

border-right:1pxsolid#000

border-bottom:1pxsolid#000

虽然并没减少多少代码,但暴风彬彬建议写成这样:

border:1pxsolid#000

border-width:01px1px0

先设置四个边的默认风格,然后声明具体的哪个边要显示。

文字

文字属性也有很多可能会用到的属性值,像背景一样,你可能会声明这种复杂的文字样式:

font-style:italic

font-variant:small-caps

font-weight:bold

font-size:1em

line-height:150%

font-family:宋体,Arial,sans-serif

其实可以优化成一行:

font:italicsmall-capsbold1em/150%宋体,Arial,sans-serif

列表

list-style-type:square

list-style-position:inside

list-style-image:url(filename.gif)

可以写成:

list-style:squareinsideurl(filename.gif)

可以把大的CSS裁开啊

例如

INDEX.HTML INDEX.ASP INDEX1.ASP

调用 公共.CSS INDEX.CSS

SOFT.HTM SOFT.ASP ..

调用 公共.CSS SOFT.CSS

把公共的文本样式集中到一个CSS

再把单个或一个类型的文件的DIV样式等集中到一个CSS里

如果还想进一步优化

不需要反复更新调用的小类可以用self方式调用

样式表定义如何显示 HTML 元素,就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档,外部样式表使你有能力同时改变站点中所有页面的布局和外观。

由于允许同时控制多重页面的样式和布局,CSS 可以称得上 WEB 设计领域的一个突破。作为网站开发者,你能够为每个 HTML 元素定义样式,并将之应用于你希望的任意多的页面中。如需进行全局的更新,只需简单地改变样式,然后网站中的所有元素均会自动地更新。