CSS14个实用技巧的精选和推荐

此文章主要为你们介绍了CSS14个实用技巧的精选推荐，具备必定的参考价值，学习以为挺不错的，分享给你们。

创业项目 2018优选

本页技巧目录：

一、CSS字体属性简写规则　　二、FireFox移除超连接的虚线　　三、让固定宽度的页面居中　　四、隐藏水平滚动条　　五、针对浏览器的选择器　　六、同时使用两个类

一、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 ，他们会使用缺省值，这点要记上。

二、FireFox移除超连接的虚线

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

a{　　outline: none;　　}

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

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

wrapper {

margin: auto;

position: relative;

}

四、隐藏水平滚动条

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

body { overflow-x: hidden; }

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

五、针对浏览器的选择器

这些选择器在你须要针对某款浏览器进行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 /

六、同时使用两个类

通常只能给一个元素设定一个类（Class），但这并不意味着不能用两个。事实上，你能够这样：　　<p class="text side">...</p>

同时给P元素两个类，中间用空格格开，这样全部text和side两个类的属性都会加到P元素上来。若是它们两个类中的属性有冲突的话，后设置的起做用，即在CSS文件中放在后面的类的属性起做用。　　补充：对于一个ID，不能这样写<p id="text side">...</p>也不能这样写本页技巧目录：　　七、CSS border的缺省值　　八、CSS用于文档打印　　九、图片替换技巧　　十、CSS box模型的另外一种调整技巧　　十一、块元素居中对齐　　十二、用CSS来处理垂直对齐　　1三、CSS在容器内定位　　1四、直通到屏幕底部的背景色

七、CSS border的缺省值

一般能够设定边界的颜色，宽度和风格，如：border: 3px solid #000

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

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

八、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 这个命令来关掉一些装饰图片，再关掉一些导航按钮。

九、图片替换技巧

通常都建议用标准的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点的地方，就看不见了。但这对于关闭图片的人来讲，可能所有看不到了，这点要注意。

十、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点了。

十一、块元素居中对齐

若是想作个固定宽度的网页而且想让网页水平居中的话，一般是这样：

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 。

十二、用CSS来处理垂直对齐

垂直对齐用表格能够很方便地实现，设定表格单元 vertical-align: middle 就能够了。但对CSS来讲这没用。若是你想设定一个导航条是2em高，而想让导航文字垂直居中的话，设定这个属性是没用的。 宝宝起名宝典

CSS方法是什么呢？对了，把这些文字的行高设为 2em：line-height: 2em ，这就能够了。

1三、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个数字的顺序是：上、右、下、左。固然，有时候定位的方法而不是边距的方法更好些。

1四、直通到屏幕底部的背景色

在垂直方向是进行控制是CSS所不能的。若是你想让导航栏和内容栏同样直通到页面底部，用表格是很方便的，但若是只用这样的CSS：

navigation { background: blue; width: 150px }

较短的导航条是不会直通到底部的，半路内容结束时它就结束了。该怎么办呢？

不幸的是，只能采用欺骗的手段了，给这较短的一栏加上个背景图，宽度和栏宽同样，并让它的颜色和设定的背景色同样。

body { background: url(blue-image.gif) 0 0 repeat-y }

此时不能用em作单位，由于那样的话，一旦读者改变了字体大小，这个花招就会露馅，只能使用px。