最下面的两个CSS技巧可以重点了解一下,也许可以给你带来一些意想不到的收获。
颜色缩写
我们可以将#ff0099缩写成#f09,#ffffff,
缩写成#fff。(小技巧,用记事本等工具的替换功能,可直接输入#ff0099将CSS文件内全部替换成#f09)
使用 line-height 垂直居中
例如:line-height:22px;
固定宽度的容器需要一行垂直居中时,使用 line-height 即可。
背景(background)属性多参数简写
例如:
background-image: url("huceo.png");
background-position: top center;
background-repeat: no-repeat;
其实可以写成:
background: url(huceo.png) no-repeat top center;
背景图片路径不加引号
background:url("image/huceocom.gif") #999;
可以写为
background:url(images/huceo.gif) #999;
定位属性值为0的值可去掉单位(如:px/em)
例如:padding: 10px 8px 0px 0px;
简写:padding: 10px 8px 0 0;
有相等值可合并
例如:padding: 10px 8px 10px 8px;
简写:padding: 10px 8px;
Margin(外边距/空白边),Padding(内边距)声明:
例如:
margin-top:0px;
margin-right:10px;
margin-bottom:0px;
margin-left:10px;
简写:
margin:0 10px 0 10px;(上-右-下-左)
再简写:
margin:0 10px;(上下值为0,左右值为10)
Borders(边框属性)
例如:
border-width:1px;
border-style:solid;
border-color:#000;
简写:
border:1px solid #000;
多组共用属性
例如:规定h1到h6使用同一属性(英文逗号间隔)
h1,h2,h3,h4,h5,h6
margin:0;
padding:0;
font-size:12px;
font-weight:normal;
....
当CSS中有相同属性时都可以归类到一起,使用共同属性
CSS简写技巧有很多,更具体的可以百度一下。建议大家尽量使用CSS简写来优化代码,减少文件体积。
清除容器浮动
#main {
overflow:hidden;
}
不让链接折行
a {
whitewhite-space:nowrap;
}
始终让 Firefox 显示滚动条
html {
overflow:-moz-scrollbars-vertical;
}
跨浏览器的支持
body, html {
min-height:101%;
}
最简单的 CSS 重置
* {
margin: 0; padding: 0
}
CSS 图片拼合 (CSS sprites)
可有效降低图片文件的HTTP请求数,可以将多个小图片将以一定间距合并为一个大图片文件.例如,本站侧栏图标(包括搜索框图标)和评论框上面的三个图标(名称,邮箱,网址)都是拼合在一起的。
拼合完成后,系统自动给出background-position定位属性代码来显示拼合图片中的指定位置。
http://cn.spritegen.website-performance.org/
使用CSS压缩
百度一下,可以在应用框内直接压缩CSS文件
压缩后去除空格,代码可读性降低,但可以节省文件体积,加快下载速度。压缩后代码可读性差的问题不用担心,可以随时还原。为了维护修改更加方便,也可以将CSS原文件放在与压缩后的文件放在同一目录内,修改时对照下就行了
颜色缩写
我们可以将#ff0099缩写成#f09,#ffffff,
缩写成#fff。(小技巧,用记事本等工具的替换功能,可直接输入#ff0099将CSS文件内全部替换成#f09)
使用 line-height 垂直居中
例如:line-height:22px;
固定宽度的容器需要一行垂直居中时,使用 line-height 即可。
背景(background)属性多参数简写
例如:
background-image: url("huceo.png");
background-position: top center;
background-repeat: no-repeat;
其实可以写成:
background: url(huceo.png) no-repeat top center;
背景图片路径不加引号
background:url("image/huceocom.gif") #999;
可以写为
background:url(images/huceo.gif) #999;
定位属性值为0的值可去掉单位(如:px/em)
例如:padding: 10px 8px 0px 0px;
简写:padding: 10px 8px 0 0;
有相等值可合并
例如:padding: 10px 8px 10px 8px;
简写:padding: 10px 8px;
Margin(外边距/空白边),Padding(内边距)声明:
例如:
margin-top:0px;
margin-right:10px;
margin-bottom:0px;
margin-left:10px;
简写:
margin:0 10px 0 10px;(上-右-下-左)
再简写:
margin:0 10px;(上下值为0,左右值为10)
Borders(边框属性)
例如:
border-width:1px;
border-style:solid;
border-color:#000;
简写:
border:1px solid #000;
多组共用属性
例如:规定h1到h6使用同一属性(英文逗号间隔)
h1,h2,h3,h4,h5,h6
margin:0;
padding:0;
font-size:12px;
font-weight:normal;
....
当CSS中有相同属性时都可以归类到一起,使用共同属性
CSS简写技巧有很多,更具体的可以百度一下。建议大家尽量使用CSS简写来优化代码,减少文件体积。
清除容器浮动
#main {
overflow:hidden;
}
不让链接折行
a {
whitewhite-space:nowrap;
}
始终让 Firefox 显示滚动条
html {
overflow:-moz-scrollbars-vertical;
}
跨浏览器的支持
body, html {
min-height:101%;
}
最简单的 CSS 重置
* {
margin: 0; padding: 0
}
CSS 图片拼合 (CSS sprites)
可有效降低图片文件的HTTP请求数,可以将多个小图片将以一定间距合并为一个大图片文件.例如,本站侧栏图标(包括搜索框图标)和评论框上面的三个图标(名称,邮箱,网址)都是拼合在一起的。
拼合完成后,系统自动给出background-position定位属性代码来显示拼合图片中的指定位置。
http://cn.spritegen.website-performance.org/
使用CSS压缩
百度一下,可以在应用框内直接压缩CSS文件
压缩后去除空格,代码可读性降低,但可以节省文件体积,加快下载速度。压缩后代码可读性差的问题不用担心,可以随时还原。为了维护修改更加方便,也可以将CSS原文件放在与压缩后的文件放在同一目录内,修改时对照下就行了