CSS技巧心得

1) 火狐和IE下都可以实现半透明效果：
filter:alpha(opacity=50);/*这句为IE下有效*/
opacity:0.5;/*这句为FireFox下有效*/
之前还不知道，以为滤镜只有IE有，火狐无法实现半透明呢，这下好了~~

2) 同时使用背景图和背景色：
background: url(../image/bg.gif) #EEEEEE no-repeat right bottom;
这样就可以看到一个灰色（#EEEEEE)背景上放置着指定的图片啦
图片位置是右下角（right bottom)
背景图片不自动重复(no-ripeat)

比较适合做小型表单区域的背景，如果是做表头，一般让一个背景图在X轴平铺，把no-repeat换成repeat-X

3) 图层(DIV)水平居中显示：
margin:0 auto;
其实关键就是让div的margin属性左右方向为auto就可以了，因此如下写法都是正确的：
margin:0 auto 0 auto;
/**/
margin-left:auto;
margin-right:auto;
/**/
margin:auto;

4) 在一个父图层中，一左一右放置两个子图层：
关键是需要指定两个子图层的浮动方式（float）
<div>
    <div class="left"></div>
    <div class="right"></div>
</div>
样式表里就这样对应：
.left{
    float:left;
}
.right{
    float:right;
}

当一个父层里嵌套了很多子层进行布局的时候，如果遇到层错位，不妨试试看指定各个层的浮动方式，另外也需要建材父层是否指定了clear:both，这句话是取消浮动的意思，如果子层需要指明对齐方式，这句是不能要的

5) select和file组件是不能设计样式的:
select指定样式后，外观不会改变，只有当下拉框出现时，下拉菜单才会按照我们设计的样式显示
file由于是两个组件组合起来的，所以无法设置具体样式，我们可以指定他们的边框，也可以设置长度，不过长度将只对那个文本框有效

这两种组件如果想变漂亮，我们只能想别的办法，用其他自己设计的组件来替代他们

6) div和span的区别

div只是一个分块的标签，他可以将网页分成几个区块。div里面可能包含一个标题，一个段落，也可能包含图片在内的很多元素，甚至div也可以再包含div。

span是行级元素(行内标签)，通常情况下它都用来定义一小段文字的样式。

区别：
div会造成换行，而span则不会。

7) IE的if条件Hack
    <!--[if IE]> Only IE <![endif]-->
    所有的IE可识别
    <!--[if IE 5.0]> Only IE 5.0 <![endif]-->
    只有IE5.0可以识别
    <!--[if gt IE 5.0]> Only IE 5.0+ <![endif]-->
    IE5.0包换IE5.5都可以识别
    <!--[if lt IE 6]> Only IE 6- <![endif]-->
    仅IE6可识别
    <!--[if gte IE 6]> Only IE 6/+ <![endif]-->
    IE6以及IE6以下的IE5.x都可识别
    <!--[if lte IE 7]> Only IE 7/- <![endif]-->
    仅IE7可识别

8) 如何去除点击链接时出现的虚线框(强烈推荐)
在IE下，需要在标签 a 的结构中加入 hidefocus="true" 属性。即：
<a href="http://www.taobao.com" hidefocus="true" title="淘宝网，淘我喜欢">淘宝网</a>

而在FF等浏览器中则相对比较容易，直接给标签 a 定义样式 outline:none; 就可以了，即：
a {
 outline:none;
}

9) 定义超链接的样式

a:link{...}{font-size : 18pt ;text-decoration : none ;color : blue ;}
a:visited {...}{font-size : 18pt;text-decoration : none ;color : brown ;}
a:hover {...}{font-size : 24pt ;text-decoration : underline ;color : red;}
a:active {...}{font-size : 24pt ;text-decoration : none ;color : green ;}

以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”

10) 控制文本显示的样式(英文显示)
textBox.Attributes.CssStyle.Add("text-transform","uppercase");

capitalize : 　将每个单词的第一个字母转换成大写，其余无转换发生
uppercase : 　转换成大写
lowercase : 　转换成小写
注意，这里只是控制了显示效果，而文本本身并没有发生变化

11) 使用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" />

12) 使用min-height min-width解决div，或者span的固定高度问题

有时候我们需要设定某个元素固定高度，但是在firefox或者opera下面只设置高度，在内容不够多的时候，达不到预想的效果，这时候我们可以使用min-height

13) :first-child :last-child 在非ie的浏览器下面可以通过这两个指示符，取到父元素的第一个元素或者最后一个元素

14) 关闭输入法状态，使用户只能输入英文状态下的字符，类似输入密码

input {...}{...}{ime-mode: disabled ; }

15) 同比改变图片大小
img.style.zoom = 0.5;

From: http://blog.csdn.net/gaoyunpeng/archive/2007/08/08/1732081.aspx