此文章主要为大家介绍了 CSS14 个实用技巧的精选推荐，具有一定的参考价值，学习觉得挺不错的，分享给大家。

创业项目 2018 优选

本页技巧目录：

1、CSS 字体属性简写规则 2、FireFox 移除超链接的虚线 3、让固定宽度的页面居中 4、隐藏水平滚动条 5、针对浏览器的选择器 6、同时使用两个类

1、CSS 字体属性简写规则

一般用 CSS 设定字体属性是这样做的：

font-weight:bold; font-style:italic; font-varient:small-caps; font-size:1em; line-height:1.5em; font-family:verdana,sans-serif;

但也可以把它们全部写到一行上去：

font: bold italic small-caps 1em/1.5em verdana,sans-serif;

注意：这种简写方法只有在同时指定 font-size 和 font-family 属性时才起作用。而且，如果你没有设定 font-weight, font-style, 以及 font-varient，他们会使用缺省值，这点要记上。

2、FireFox 移除超链接的虚线

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

a{outline: none;}

3、让固定宽度的页面居中

为了让页面在浏览器居中显示，需要相对定位外层 div，然后把 margin 设置为 auto。

wrapper {

margin: auto;

position: relative;

}

4、隐藏水平滚动条

为了避免出现水平滚动条，在 body 里加入 overflow-x:hidden。

body {overflow-x: hidden;}

当你决定使用一个比浏览器窗口大的图片或者 flash 时，这个技巧将非常有用。

5、针对浏览器的选择器

这些选择器在你需要针对某款浏览器进行 css 设计时将非常有用。

IE6 及其更低版本

• html {}

IE7 及其更低版本

:first-child+html {} html {}

仅针对 IE7

*:first-child+html {}

IE7 和当代浏览器

html>body{}

仅当代浏览器 (IE7 不适用)

html>/**/body{}

Opera9 及其更低版本

html:first-child {}

Safari

html[xmlns*=””] body:last-child {}

要使用这些选择器，请将它们放在样式之前。例如：

content-box {

width: 300px;

height: 150px;

}

• html

content-box {

width: 250px;

} / overrides the above style and changes the width to 250px in IE 6 and below /

6、同时使用两个类

一般只能给一个元素设定一个类（Class），但这并不意味着不能用两个。事实上，你可以这样：<p class=”text side”>…</p>

同时给 P 元素两个类，中间用空格格开，这样所有 text 和 side 两个类的属性都会加到 P 元素上来。如果它们两个类中的属性有冲突的话，后设置的起作用，即在 CSS 文件中放在后面的类的属性起作用。补充：对于一个 ID，不能这样写 <p id=”text side”>…</p> 也不能这样写本页技巧目录：7、CSS border 的缺省值 8、CSS 用于文档打印 9、图片替换技巧 10、CSS box 模型的另一种调整技巧 11、块元素居中对齐 12、用 CSS 来处理垂直对齐 13、CSS 在容器内定位 14、直通到屏幕底部的背景色

7、CSS border 的缺省值

通常可以设定边界的颜色，宽度和风格，如：border: 3px solid #000

这位把边界显示成 3 像素宽，黑色，实线。但实际上这里只需要指定风格即可。

如果只指定了风格，其他属性就会使用缺省值。一般地，Border 的宽度缺省是 medium，一般等于 3 到 4 个像素；缺省的颜色是其中文字的颜色。如果这个值正好合适的话，就不用设那么多了。

8、CSS 用于文档打印

许多网站上都有一个针对打印的版本，但实际上这并不需要，因为可以用 CSS 来设定打印风格。

也就是说，可以为页面指定两个 CSS 文件，一个用于屏幕显示，一个用于打印：

<link type=”text/css” rel=”stylesheet” href=”stylesheet.css” media=”screen” /> <link type=”text/css” rel=”stylesheet” href=”printstyle.css” media=”print” />

第 1 行就是显示，第 2 行是打印，注意其中的 media 属性。

但应该在打印 CSS 中写什么东西呢？你可以按设计普通 CSS 的方法来设定它。设计的同时就可以把这个 CSS 设成显示 CSS 来检查它的效果。也许你会使用 display: none 这个命令来关掉一些装饰图片，再关掉一些导航按钮。

9、图片替换技巧

一般都建议用标准的 HTML 来显示文字，而不要使用图片，这样不但快，也更具可读性。但如果你想用一些特殊字体时，就只能用图片了。

比如你想整个卖东西的图标，你就用了这个图片：<h1><img src=”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 {position: relative}

这样容器内所有的元素都会相对定位，可以这样用：<div id=”container”><div id=”navigation”>…</div></div> 如果想定位到距左 30 点，距上 5 点，可以这样：

navigation {position: 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。