稀为人知的几个有用的Css技巧
新客网 XKER.COM 2008-09-12 来源： 收藏本文
1. 关于background的写法
DIV.comment{background:#f0f0f0 url(url address) repeat-x left top}
1）您可以看到background的第一个定义是一个颜色值这表示在背景图片失效的时候颜色将起作用。
2）url括号中的引号是没有必要的，我们可以不写引号
2. 关于Border的写法，如果您想定义div的四个边的颜色不同，而粗度和样式都一样，您可以这样写：
DIV.special{border:1px solid; border-color:color1 color2 color3 color4}
四种颜色一次是上，右，下，左的颜色
3. 为了兼容所有的浏览器都可以显示半透明效果的写法
.tranparent{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity:0.5;
-kHTML-opacity:0.5;
opacity: 50%;
position:absolute;/*注意必须是absolute的*/
top:100px;
left:100px;
}
4. _height,_width的作用
使用_height解决float的div不闭合的问题，您可以将_height属性去掉就可以开到效果了。
#wrap{ border:6px #ccc solid; overflow:auto; _height:1%;}
.column_left{ float:left; width:20%; padding:10px;}
.column_right{ float:right; width:75%; padding:10px; border-left:6px #eee solid;}
<div id="wrap">
<div class="column_left">
<h1>Float left</h1>
</div>
<div class="column_right">
<h1>Float right</h1>
</div>
</div>
5. 使用min-height min-width解决div，或者span的固定高度问题
有时候我们需要设定某个元素固定高度，但是在firefox或者opera下面只设置高度，在内容不够多的时候，达不到预想的效果，这时候我们可以使用min-height
6. 使用!important改变样式的优先级
所谓的样式优先级是指，浏览器在应用样式时总是根据就近原则来应用样式，假定我们在一个页面中有三处都有对某个元素的定义，一处是在外部的CSS文件中，一处是在文件的head标签中定义内联CSS，另一处是在这个元素的标签内，那么根据就近原则此元素最终使用的样式是在标签内定义的样式，如果我们需要打破这种规则我们就可以使用!important指令
a.test{color:red!important}
这样即使在A元素内定义了color也不会应用，而是应用上面的定义
7. 使用media指令引入两种CSS：打印版本的CSS和屏幕显示的CSS
<link type="text/CSS" rel="stylesheet" href="url " media="screen" charset="utf-8" />
<link type="text/CSS" rel="stylesheet" href="url" media="print" charset="utf-8" />
8. > 符号（目前ie不支持）
我们可以使用DIV A的方式来定义所有在div里面的所有A标签的样式，包括div下面的span中的div；如果我们只想定义DIV下面一级子节点的A标签我们可以使用“>”符号，例如：
DIV>A{color:red}
现在只有是DIV的直接子节点A标签的颜色是红色
9．:first-child :last-child 在非ie的浏览器下面可以通过这两个指示符，取到父元素的第一个元素或者最后一个元素
20070412 21：05增加
10. ：hover等伪类可以这样使用
<style type="text/CSS">
.menu{}
.menu ul{display:none}
.menu:hover{}
.menu:hover ul{display:block}
</style>
<ul>
<li class="menu">
menu title
<ul>
<li>first</li>
<li>last</li>
</ul>
</li>
</ul>
这样我们就可以做只用CSS控制的菜单，在ie6，ie7，firefox1.5，opera9.0下面测试通过
11.我们可以使用page-break-after，page-break-before控制打印时的分页
20070413 12:13
12. * HTML{}的作用是为了兼容6.0以下的IE版本，对HTML节点的选取，其他的浏览器都认为HTML标签是文档的根节点，而ie6以下的ie版本却认为在HTML标签的上面还有一个根节点
---感谢calmzeal的解释
13. CSS 的class可以有多个值，我们只需要将多个值用空格隔开就可以了
14. 颜色的缩写 我们可以将#ff0033缩写成#f03
15. 使用text-indent显示图片，而隐藏文字（这种做法据说有助于SEO）
h1 { background: url(widget-image.gif) no-repeat; height: image height text-indent: -2000px }
<h1>Buy widgets</h1>
16. 为了避免不同浏览器对不同标签的padding，margin不同的解释可以在样式表的前面定义
*{margin:0px;padding:0px;}
DIV.comment{background:#f0f0f0 url(url address) repeat-x left top}
1）您可以看到background的第一个定义是一个颜色值这表示在背景图片失效的时候颜色将起作用。
2）url括号中的引号是没有必要的，我们可以不写引号
2. 关于Border的写法，如果您想定义div的四个边的颜色不同，而粗度和样式都一样，您可以这样写：
DIV.special{border:1px solid; border-color:color1 color2 color3 color4}
四种颜色一次是上，右，下，左的颜色
3. 为了兼容所有的浏览器都可以显示半透明效果的写法
.tranparent{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity:0.5;
-kHTML-opacity:0.5;
opacity: 50%;
position:absolute;/*注意必须是absolute的*/
top:100px;
left:100px;
}
4. _height,_width的作用
使用_height解决float的div不闭合的问题，您可以将_height属性去掉就可以开到效果了。
#wrap{ border:6px #ccc solid; overflow:auto; _height:1%;}
.column_left{ float:left; width:20%; padding:10px;}
.column_right{ float:right; width:75%; padding:10px; border-left:6px #eee solid;}
<div id="wrap">
<div class="column_left">
<h1>Float left</h1>
</div>
<div class="column_right">
<h1>Float right</h1>
</div>
</div>
5. 使用min-height min-width解决div，或者span的固定高度问题
有时候我们需要设定某个元素固定高度，但是在firefox或者opera下面只设置高度，在内容不够多的时候，达不到预想的效果，这时候我们可以使用min-height
6. 使用!important改变样式的优先级
所谓的样式优先级是指，浏览器在应用样式时总是根据就近原则来应用样式，假定我们在一个页面中有三处都有对某个元素的定义，一处是在外部的CSS文件中，一处是在文件的head标签中定义内联CSS，另一处是在这个元素的标签内，那么根据就近原则此元素最终使用的样式是在标签内定义的样式，如果我们需要打破这种规则我们就可以使用!important指令
a.test{color:red!important}
这样即使在A元素内定义了color也不会应用，而是应用上面的定义
7. 使用media指令引入两种CSS：打印版本的CSS和屏幕显示的CSS
<link type="text/CSS" rel="stylesheet" href="url " media="screen" charset="utf-8" />
<link type="text/CSS" rel="stylesheet" href="url" media="print" charset="utf-8" />
8. > 符号（目前ie不支持）
我们可以使用DIV A的方式来定义所有在div里面的所有A标签的样式，包括div下面的span中的div；如果我们只想定义DIV下面一级子节点的A标签我们可以使用“>”符号，例如：
DIV>A{color:red}
现在只有是DIV的直接子节点A标签的颜色是红色
9．:first-child :last-child 在非ie的浏览器下面可以通过这两个指示符，取到父元素的第一个元素或者最后一个元素
20070412 21：05增加
10. ：hover等伪类可以这样使用
<style type="text/CSS">
.menu{}
.menu ul{display:none}
.menu:hover{}
.menu:hover ul{display:block}
</style>
<ul>
<li class="menu">
menu title
<ul>
<li>first</li>
<li>last</li>
</ul>
</li>
</ul>
这样我们就可以做只用CSS控制的菜单，在ie6，ie7，firefox1.5，opera9.0下面测试通过
11.我们可以使用page-break-after，page-break-before控制打印时的分页
20070413 12:13
12. * HTML{}的作用是为了兼容6.0以下的IE版本，对HTML节点的选取，其他的浏览器都认为HTML标签是文档的根节点，而ie6以下的ie版本却认为在HTML标签的上面还有一个根节点
---感谢calmzeal的解释
13. CSS 的class可以有多个值，我们只需要将多个值用空格隔开就可以了
14. 颜色的缩写 我们可以将#ff0033缩写成#f03
15. 使用text-indent显示图片，而隐藏文字（这种做法据说有助于SEO）
h1 { background: url(widget-image.gif) no-repeat; height: image height text-indent: -2000px }
<h1>Buy widgets</h1>
16. 为了避免不同浏览器对不同标签的padding，margin不同的解释可以在样式表的前面定义
*{margin:0px;padding:0px;}
标签：CSS
最新相关文章发表评论
评论内容：不能超过250字，需审核后才会公布，请自觉遵守互联网相关政策法规。
【重要声明】：新客网刊载此文仅为提供更多信息的目的，并不代表新客网同意文章的说法或描述，也不构成任何建议，对本文有任何异议，请在上面提出建议。