CSS使用技巧大全

1. 文字的水平居中：text-align:center;

2. 容器的水平居中

方法一：div#container {width:760px; margin:0 auto;}

方法二：left:50%; margin-left:-266px; width:500px; position:absolute;

       div的垂直居中 vertical-align:middle;

3. 文字的垂直居中

div#container {height: 35px; line-height: 35px;}     //如果有n行文字，那么将行高设为容器高度的n分之一即可。

4. 容器的垂直居中

比如，有一大一小两个容器，请问如何将小容器垂直居中？

<div id="big">
            <div id="small"></div>
</div>

div #big{ position:relative; height:480px;}

div #small { position: absolute; top: 50%; height: 240px; margin-top: -120px;}

5. 图片宽度的自适应

如何使得较大的图片，能够自动适应小容器的宽度？CSS可以这样写：img {max-width: 100%}

但是IE6不支持max-width，所以遇到IE6时，使用IE条件注释，将语句改写为：img {width: 100%}

6. 3D按钮+透明按钮

3D按钮 将它的左上部边框设为浅色，右下部边框设为深色即可：#button {background: #888;border: 1px solid;border-color: #999 #777 #777 #999;}

透明按钮：#button {background:transparent; border:0; cursor:pointer;}       //<input   type="submit"   οnfοcus="this.blur();" />去掉链接虚线更美观。详见26。

7. font属性的快捷写法

body {font: font-style font-variant font-weight font-size/ line-height font-family;}

所以，body {font-family: Arial, Helvetica, sans-serif;font-size: 13px;font-weight: normal;font-variant: small-caps;font-style: italic;line-height: 150%;}

可以被写成：body {font: italic small-caps normal 13px/150% Arial, Helvetica, sans-serif;}

8. link状态的设置顺序  L-V-H-A  a:link --a:visited --a:hover --a:active

9. IE条件注释

你可以利用条件注释，设置只对IE产生作用的语句：

<!--[if IE 6]>这段文字仅显示在IE版本。(targets IE6 only)< ![endif]-->

<!--[if lte IE 6]> 这段文字仅显示在 IE6及IE6以下版本。(targets IE6 and below) <![endif]-->

<!--[if gte IE 6]> 这段文字仅显示在 IE6及IE6以上版本。(targets IE6 and above) <![endif]-->

<!--[if gt IE 6]> 这段文字仅显示在 IE6以上版本（不包含IE6）。(targets IE7 and above) <![endif]-->

<!--[if IE 5.5]> 这段文字仅显示在 IE5.5。 <![endif]-->

<!--[if lte IE 6]> 这段文字仅显示在 IE5.5及IE5.5以下版本。(targets IE5.5 and below)<![endif]-->
缺点是在IE浏览器下可能会增加额外的HTTP请求数。

10. IE6专用语句：方法一

由于IE6不把html视为文档的根元素，所以利用这一点，可以写出只有IE6才能读到的语句：

/* the following rules apply only to IE6 */

* html{ }

* html body{ }

* html .foo{ }

IE7专用语句则要写成

/* the following rules apply only to IE7 */

*+html .foo{ }

11. IE专用语句：方法二

除了IE6以外，所有浏览器都不能识别属性前的下划线。而除了IE7之外，所有浏览器都不能识别属性前的*号，因 此可以写出只有这两个浏览器才能读到的语句：

.element {
background: red; /* modern browsers */
*background: green; /* IE 7 and below */
_background: blue; /* IE6 exclusively */
}

IE都能识别*;FF不能识别；

!important:IE6以上才能识别，FF能识别!important;

　　.searchInput { *background-color:#666　!important; /* 只有IE7 IE8识别*/　}

*+html与*html是IE特有的标签, FF暂不支持。

　　.searchInput {background-color:#333;}

　　*html .searchInput {background-color:#666;}/*仅IE6*/

　　*+html .searchInput {background-color:#555;}/*仅IE7*/

屏蔽IE浏览器：

　　select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。

　　*:lang(zh) select {font:12px  !important;} /*FF的专用*/

　　select:empty {font:12px  !important;} /*safari可见*/ 

IE6可识别：

　　这里主要是通过CSS注释分开一个属性与值，注释在冒号前。 

　　select { display /*IE6不识别*/:none;}

12. CSS的优先性

基本规则是：行内样式 > id样式 > class样式 > 标签名样式

比如：<div id="ID" class="CLASS" style="color:black;"></div>

行内样式是最优先的，然后其他设置的优先性，从低到高依次为：div < .class < div.class < #id < div#id < #id.class < div#id.class

13. IE6的min-height

IE6不支持min-height，有两种方法可以解决这个问题：

方法一：

.element {
min-height: 500px;
height: auto !important;
height: 500px;
}

共有三条CSS语句，第一句是针对其他浏览器设置最小高度，第三句是针对IE设置最小高度，第二句则是让其他浏览器覆盖第三句的设置。< /p>

方法二：

.element {
min-height: 500px
_height: 500px
}

_height只有IE6能读取。

14. font-size基准

浏览器的缺省字体大小是16px，你可以先将基准字体大小设为10px：body {font-size:62.5%;}

后面统一采用em作为字体单位，2.4em就表示24px。h1 {font-size: 2.4 em}

15. Text-transform和Font Variant

Text-transform用于将所有字母变成小写字母、大写字母或首字母大写：

p {text-transform: uppercase}
p {text-transform: lowercase}
p {text-transform: capitalize}

Font Variant用于将字体变成小型的大写字母（即与小写字母等高的大写字母）。

p {font-variant: small-caps}

16. CSS重置

CSS重置用于取消浏览器的内置样式，请参考YUI和Eric Meyer的样式表。

17. 用图片充当列表标志

默认情况下，浏览器使用一个黑圆圈作为列表标志，可以用图片取代它：

ul {list-style: none}

ul li {background: url("path-to-your-image")   no-repeat   0 0.5em;}

18. 透明

将一个容器设为透明，可以使用下面的代码：

.element {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

在这四行CSS语句中，第一行是IE专用的，第二行用于Firefox，第三行用于webkit核心的浏览器，第四行用于Opera。< br /> 

19. CSS三角形

如何使用CSS生成一个三角形？

先编写一个空元素

<div class="triangle"></div>

然后，将它四个边框中的三个边框设为透明，剩下一个设为可见，就可以生成三角形效果：

.triangle {
border-color: transparent transparent green transparent;
border-style: solid;
border-width: 0px 300px 300px 300px;
height: 0px;
width: 0px;
}

20. 禁止自动换行

如果你希望文字在一行中显示完成，不要自动换行，CSS命令如下：

h1 { white-space:nowrap; }

带缺省标记（…）的禁止自动换行 防止溢出

.font1 {width:200px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

21. 用图片替换文字

h1 {
text-indent:-9999px;
background:url("h1-image.jpg") no-repeat;
width:200px;
height:50px;
}

22. 获得焦点的表单元素

当一个表单元素获得焦点时，可以将其突出显示：input:focus { border: 2px solid green; }

23. !important规则

多条CSS语句互相冲突时，具有!important的语句将覆盖其他语句。由于IE不支持!important，所以也可以利用它区分不同的浏览器。

h1 {color: red !important;color: blue;}

上面这段语句的结果是，其他浏览器都显示红色标题，只有IE显示蓝色标题。

BOX模型在firefox和IE中的解释相差2px的解决方法:div{margin:30px !important ; margin:28px;}

24. CSS提示框

当鼠标移动到链接上方，会自动出现一个提示框。

<a class="tooltip" href="#">链接文字 <span>提示文字</span></a>

CSS这样写：

a.tooltip {position: relative}
a.tooltip span {display:none; padding:5px; width:200px;}
a:hover {background:#fff;} /*background-color is a must for IE6*/
a.tooltip:hover span{display:inline; position:absolute;}

25. 固定位置的页首

当页面滚动时，有时需要页首在位置固定不变，CSS语句可以这样写，效果参见http://limpid.nl/lab/css/fixed/header：

body{ margin:0;padding:100px 0 0 0;}

div#header{
position:absolute;
top:0;
left:0;
width:100%;
height:20px;
}

@media screen{
body>div#header{position: fixed;}
}

* html body{overflow:hidden;}

* html div#content{height:100%;overflow:auto;}

25.ico图标

<link href="favicon.ico" rel="shortcut icon" type="image/x-icon"/>
<link href="favicon.ico" rel="icon" type="image/x-icon"/>

<link rel="icon" href="animated_favicon1.gif" type="image/gif" > ff支持gif动画

<link rel="Bookmark" href="favicon.ico" /> 书签

26.a链接的虚线

当点击的时候会在FF、IE 等出现虚线

html<a href="#">去掉点击链接时出现的虚线</a>

解决方法：ff中在css里面写a{outline:none;}

                  IE中,针对IE的 οnfοcus="this.blur();"

                   <a href="#" οnfοcus="this.blur();" >去掉点击链接时出现的虚线</a>

                   或者在css中写入expression：a{blr:expression(this.onFocus=this.blur());}

27.CSS全局定义

body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, table, td, img, div, a, span {border:0 none; margin:0; padding:0;}

.clear{ clear:both;}

ul,li{ list-style:none;}

body a{ text-decoration:none;}

a:link,a:hover, a:active{ color:#218ADE; text-decoration:underline;}

28.ul在Firefox和IE下表现不同
　　ul在ff下有padding值，没有margin值。IE下有margin值，没有padding值。在ff下，ul的list-style默认是处于内容的外边缘的(outside)。
　　构建网站时CSS样式可写为：padding:0; margin:0; list-style:inside;/list-style:none;
29.margin的默认效果
　　div中的内容，ie默认为居中，而ff默认为左对齐。使内容居中的方法是将CSS样式定义为：div{margin:auto;}
30.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会.故需要用 !important 多设一个 height 和 width
31.cursor:pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以
32.FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。
33.margin加倍的问题:设置为float的div在ie6下设置的margin会加倍。解决方案是在这个div里面加上display:inline;
34.flash透明<param name="wmode" value="transparent" />

35.IE不能正确显示透明PNG图片
　　header内加入：
 程序代码
<script language="javascript">
　　function correctPNG(){
　　　for(var i=0; i<document.images.length; i++){
   　　　　var img = document.images[i]
   　　　　var imgName = img.src.toUpperCase()
　　　　　　if (imgName.substring(imgName.length-3, imgName.length) == "PNG"){
　　　　　　　　var imgID = (img.id) ? "id='" + img.id + "' " : ""
　　　　　　　　var imgClass = (img.className) ? "class='" + img.className + "' " : ""
　　　　　　　　var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
　　　　　　　　var imgStyle = "display:inline-block;" + img.style.cssText
　　　　　　　　if (img.align == "left") imgStyle = "float:left;" + imgStyle
　　　　　　　　if (img.align == "right") imgStyle = "float:right;" + imgStyle
　　　　　　　　if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle 
　　　　　　　　var strNewHTML = "<span " + imgID + imgClass + imgTitle + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";" + 

"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
　　　　　　　　 img.outerHTML = strNewHTML
　　　　　　　　i = i-1
　　　　　　　}
　　　　　}
　　　}
　　window.attachEvent("onload", correctPNG);
</script>

36.清除浮动

　　在Firefox中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除浮动的HACK来对父级做一次定义，那么就可以解决这个问题。

　　select:after {

　　content:”.”;

　　display:block;

　　height:0;

　　clear:both;

　　visibility:hidden;}

37.文件命名规范

　　全局样式：global.css；

　　框架布局：layout.css；

　　字体样式：font.css；

　　链接样式：link.css；

　　打印样式：print.css;

      也可以用  style.css  home.css

 

　　页　眉：header

　　内　容：content

　　容　器：container

　　页　脚：footer

　　版　权：copyright　

       导　航：menu

　　主导航：mainMenu

　　子导航：subMenu

　　标　志：logo

　　标　语：banner

　　标　题：title

　　侧边栏：sidebar

　　图　标：Icon

　　注　释：note

　　搜　索：search

　　按　钮：btn

　　登　录：login

　　链　接：link

　　信息框：message

常用类的命名应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。对于二级类/ID命名，则采用组合书写的模式，后一个单词的首字母应大写：诸如“搜索框”则应命名为“searchInput”、“搜索图标”命名这“searchIcon”、“搜索按钮”命名为“searchBtn”。

38. IE与宽度和高度的问题 

IE6不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。 
比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样： 
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

39.在html或者body里添加一句谷歌浏览器专有的属性。

html,body{
      -webkit-text-size-adjust:none;
}

注意：如果使用了这个属性，浏览器的字体将不能使用放大缩小功能！（就是按住CTRL键上下滚动鼠标中键的那功能）

40.谷歌浏览器下放至小于12px的字体

<div style="-webkit-transform:scale(0.5);-webkit-transform-origin:0 0;font-size:12px;">文字文字文字文字文字</div>