CSS样式14个高级技巧精选

1.CSS 字体属性简写规则
一般用CSS 设定字体属性是这样做的：
font- weight:bold;
font- s tyle:italic;
font- varient:small- caps ;
font- s ize:1em;
line- height:1.5em;
font- family:verdana,sans - serif;
但也可以把它们全部写到一行上去：
font: bold italic small- caps 1em/1.5em
verdana,sans - serif;
注意：这种简写方法只有在同时指定font- s ize 和font- family 属性时才起作用。而且，如果你没有设定font- weight、font- s tyle以及font- varient ，他们会使用缺省值，这点要记住。

 

2.FireFox 移除超链接的虚线FireFox 下，当你点击一个超链接时会在外围出现一个虚线轮廓。这很容易解决，只需要在标签样式中加入

outline:none。
a{
outline: none;
}

 

3.让固定宽度的页面居中
为了让页面在浏览器居中显示，需要相对定位外层div，然后把margin 设置为auto。
#wrapper {
margin: auto;
pos ition: relative;
}

 

4.隐藏水平滚动条
为了避免出现水平滚动条，在body 里加入overflow- x:hidden。
body { overflow- x: hidden; }
当你决定使用一个比浏览器窗口大的图片或者flash 时，这个技巧将非常有用。

 

5.针对浏览器的选择器
这些选择器在你需要针对某款浏览器进行CSS 设计时将非常有用。
IE6 及其更低版本
* html {}
IE7 及其更低版本
*:firs t- child+html {} * html {}
仅针对IE7
*:firs t- child+html {}
IE7 和当代浏览器
html>body{}
仅当代浏览器(IE7 不适用)
html>/**/body{}
Opera9 及其更低版本
html:firs t- child {}
Safari
html[xmlns*=""] body:las t- child {}
要使用这些选择器，请将它们放在样式之前。例如：
#content- box {
width: 300px;
height: 150px;
}
* html
#content- box {
width: 250px;
} /* overrides the above s tyle and
changes the width to 250px in IE 6 and below
*/

 

6.同时使用两个类
一般只能给一个元素设定一个类（Clas s），但这并不意味着不能用两个。事实上，你可以这样：
<p clas s="text s ide">...</p>
同时给P 元素两个类，中间用空格隔开，这样所有text 和s ide 两个类的属性都会加到P 元素上来。如果它们两个类中的属性有冲突的话，后设置的起作用，即在CSS 文件中放在后面的类的属性起作用。
补充：对于一个ID， 不能这样写<pid="text s ide">...</p>。

 

7.CSS border 的缺省值
通常可以设定边界的颜色、宽度和风格，如：border: 3px solid #000。这里把边界显示成3 个像素宽，黑色，实线。但实际上这里只需要指定风格即可。如果只指定了风格，其他属性就会使用缺省值。一般地，Border 的宽度缺省是medium，一般等于3 到4 个像素；缺省的颜色是其中文字的颜色。如果这个值正好适的话，就不用设那么多了。

 

8.CSS 用于文档打印
许多网站上都有一个针对打印的版本，但实际上这并不需要，因为可以用CSS 来设定
打印风格。也就是说，可以为页面指定两个CSS 文件，一个用于屏幕显示，一个用于打印：
<link type="text/cs s " rel="s tylesheet" href="s tylesheet.cs s "media="screen" />
<link type="text/cs s " rel="s tylesheet" href="prints tyle.cs s "media="print" />
第1 行就是显示，第2 行是打印，注意其中的media 属性。应该在打印CSS 中写什么东西呢？你可以按设计普通CSS 的方法来设定它。设计的同时就可以把这个CSS 设成显示CSS 来检查它的效果。也许你会使用display: none 这个命令来关掉一些装饰图片，再关掉一些导航按钮。

 

9.图片替换技巧
一般都建议用标准的HTML 来显示文字，而不要使用图片，这样不但快，也更具可读性。但如果你想用一些特殊字体时，就只能用图片了。比如你想整个卖东西的图标，你就用了这个图片：
<h1><img s rc="widget- image.gif"alt="Buy widgets " /></h1>
这当然可以，但对搜索引擎来说，和正常文字相比，它们对alt 里面的替换文字几乎没有兴趣，这是因为许多设计者在这里放许多关键词来骗搜索引擎。所以方法应该是这样的：
<h1>Buy widgets</h1>
但这样就没有特殊字体了。要想达到同样效果，可以这样设计CSS：
h1 { background: url(widget- image.gif) no- repeat; height: image height text- indent: - 2000px }
注意把image height 换成真的图片的高度。这里，图片会当作背景显示出来，而真正的文字由于设定了- 2000 像素这个缩进，它们会出现在屏幕左边2000 点的地方，就看不见了。但这对于关闭图片的人来说，可能全部看不到了，这点要注意。

 

10.CSS box 模型的另一种调整技巧这个Box 模型的调整主要是针对IE6 之前的IE 浏览器的，它们把边界宽度和空白都算在元素宽度上。比如：
#box { width: 100px; border: 5px; padding: 20px }
这样调用它：
<div id="box">...</div>
这时盒子的全宽应该是150 点，这在除IE6 之前的IE 浏览器之外的所有浏览器上都是正确的。但在IE5 这样的浏览器上，它的全宽仍是100 点。可以用以前发明的Box 调整方法来处理这种差异。但用CSS 也可以达到同样的目的，让它们显示效果一致。
#box {width: 150px } #box div { border: 5px; padding: 20px }
这样调用：
<div id="box"><div>...</div></div>
这样，不管什么浏览器，宽度都是150 点了。

 

11.块元素居中对齐
如果想做个固定宽度的网页并且想让网页水平居中的话，通常是这样：
#content {width: 700px; margin: 0 auto}
你会使用<div id="content"> 来围上所有元素。这很简单，但不够好，IE6 之前版本会显示不出这种效果。改CSS 如下：
body { text- align: center } #content {
text- align: left; width: 700px; margin: 0 auto
}
这会把网页内容都居中，所以在Content中又加入了text- align: left 。

 

12.用CSS 来处理垂直对齐
垂直对齐用表格可以很方便地实现，设定表格单元vertical- align: middle 就可以了。但对CSS 来说这没用。如果你想设定一个导航条是2em 高，而想让导航文字垂直居中的话，设定这个属性是没用的。CSS 方法是什么呢？对了，把这些文字的行高设为2em：line- height: 2em ，这就可以了。

 

13.CSS 在容器内定位
CSS 的一个好处是可以把一个元素任意定位，在一个容器内也可以。比如对这个容器：
#container { pos ition: relative }
这样容器内所有的元素都会相对定位，可以这样用：
<div id="container"><div id="navigation">...</div></div>
如果想定位到距左30 点，距上5 点，可以这样：
#navigation { pos ition: absolute; left: 30px; top: 5px }
当然，你还可以这样：
margin: 5px 0 0 30px
注意4 个数字的顺序是：上、右、下、左。当然，有时候用定位的方法而不是用边距的方法更好些。

 

14.直通到屏幕底部的背景色
在垂直方向进行控制是CSS 所不能的。如果你想让导航栏和内容栏一样直通到页面底部，用表格是很方便的，但如果只用这样的CSS：
#navigation { background: blue; width:150px }
较短的导航条是不会直通到底部的，半路内容结束时它就结束了。该怎么办呢？不幸的是，只能采用欺骗的手段了，给这较短的一栏加上个背景图，宽度和栏宽一样，并让它的颜色和设定的背景色一样。
body { background: url(blue- image.gif) 0 0 repeat- y }
此时不能用em 做单位，因为那样的话，一旦读者改变了字体大小，这个花招就会露馅，只能使用px。