222
发新话题
打印

css缩写

本主题由 大漠孤狼 于 2008-9-18 09:09 加入精华

css缩写

很多哦,随便写点:以后可以添加:
比如background-image,或者background-color, 都可以把后面取消了,直接 background:#FFFFFF;

元素之间是用  " ;  " 英文冒号隔开的,最后一个元素的后面的冒号可以省略,不过据说不省略比较规范些。

#FFFFFF 可以略写成 #FFF, #BBGG99 可以写成 #BG9。

font-family:
font-size:
font-bold:
等可以一起些写: font{400 12px/130% vedana}  
400可以省略,省略的话默认为400,700是粗体,一些浏览器不支持300 500 600 800 900 等字体粗细。
12px就是字体,130%是行高(line-height), verdana是字体。

如果你怕别人电脑没你的字体,可以多加一个预备,
font-family{arial,verdana}
如果别人电脑没有arial,网页字体就会变成verdana呈现在别人显示器上。还可以多加点字体,用逗号隔开。

border-width
border-color
border-style
这三个是写边框的,如果可以合成一起
border{1px solid #fff}
表示宽1px,实线,白色。


padding和margin:
padding-top
padding-bottom
padding-left
padding-right
可以合写:
padding{1px} 上下左右都是1px宽
padding{1px 5px} 上下是1px,左右是5px
padding{1px 2px 3px 4px} 上是1px,右是2px ,下是3px, 左是4px
padding{0 2px 3px}  上是0px, 左右是2px, 下是3px
如果不制指定,对于div就是默认全部0。对于ul li form 这些有其自己身的默认值,所以最好自己指定下,就能防止各个浏览器下不兼容的可能。

凡是0px,都可以写成0不要px或者 pt这些 。

z-index是div的上下层次优先,只要你的没重叠,这个可以省略的。

div 的 position:relative 这个可以省略,就默认为纯静止的div,起点是0.  如果要指定 相对层的位置,还是需要relative。

a{color:#000}
表示连接的几个状态都用颜色000,当然是否有下划线这些都一样。
包括了hover,active 等。
如果需要不一样的hover和active,只把要改变的元素写下就行了

暂时想起这些,不多,但是都常用且常见

[ 本帖最后由 ffnn 于 2008-9-17 15:56 编辑 ]

TOP

节省不了多少字节吧

TOP

我把8k的css压缩到6-5K。

可能是大漠对css不了解。
缩写下来很节约的其实。

[ 本帖最后由 ffnn 于 2008-9-18 09:34 编辑 ]

TOP

.maincontainer
{position:absolute;
width:833px;
top:50px;
left:170px;
z-index:2;
border:solid #ccc;
border-width:1px 0 1px 1px;
background:#fff}
把这个写成下面这个,一样能在排版上节省字节。

.maincontainer{position:absolute;width:833px;top:50px;left:170px;z-index:2;border:solid #ccc;border-width:1px 0 1px 1px;background:#fff}

TOP

网页占用多的主要是图片,所以应该把优化重点放在图片上
而w3c的目的就是规范代码,规范和有条理应该是最重要了

而css和html都可以用apache的deflate压缩,一般能压缩掉70%以上,差异很小了。所以我觉得没必要为了几kb去绞尽脑汁改css,而且有些地方还牺牲了代码的规范性

TOP

很实用,不错,帮你顶一个
成功只有努力去奋斗!

TOP

发新话题