15个CSS技巧和窍门
作者：大漠 日期：2011-11-07 点击：408
前面我也发了几节内容收集了一些CSS的小技巧，比如说《20个CSS实战技巧》、《7个不能遗忘的CSS样式》和《13个CSS技巧》等，今天我又搜集了15个CSS的小技巧和窍门，或许和前面的部分有累同，但希望这些小技巧能帮您在平时的工作中带来些许的帮助。
一、避免CSS Hack使用条件样式
css样式是不是很难学习呢？其实并不是这样的，真正难处理的是保证所有浏览器的一致性，可是在平时制作中，我们不免碰到一些兼容的问题。大家提意使用CSS的Hack来处理。我持有一种不同意见，我们应该避免使用CSS的Hack，除非没有其他办法解决的情况之下。因为，我们将无法知道这些CSS的Hack将什么时候不能使用。我认为最常用的方法应该使用条件样式来处理这些兼容的问题，我们可以使用if语句来对不同的版本使用不同的样式：
<!--[if gt IE 7]> <link rel="stylesheet" type="text/css" href="ie8-and-up.css"> <![endif]-->
上面我只是展示了其中一种写法而以，具体有关于如何创建所需的条件样式，大家可以点击本站的《浏览器兼容之旅的第一站:如何创建条件样式》。
二、使用群组选择器
如果我们多个元素使用的样式完全相同，或者部分相同，我们就可以采用群组选择器来操作。这将是一个很好的办法，可以节省几个字节，也减少了你的编辑工作量，如：
不建议采用的写法
h1 {
font-family:arial;
margin:0.5em 0;
padding:0;
}
h2 {
font-family:arial;
margin:0.5em 0;
padding:0;
}
h3 {
font-family:arial;
margin:0.5em 0;
padding:0;
}
建议采用的方法：
h1,h2, h3 {
font-family:arial;
margin:0.5em 0;
padding:0;
}
三、元素居中
有关于元素的居中问题，我们一起讨论过很多次了。但很多同学常在IE下碰到不能水平居中的问题，这里我给出一个技巧，这样你将不在会为这个不能居中而烦了：
HTML Markup
<body> <div class="container">居中的内容</div> </body>
CSS Code
body {
text-align:center; /* for ie */
}
.container {
width:800px;
margin:0 auto;
text-align:left;/*重置内容左对齐*/
}
现代浏览器居中很简单，给容器定一个固定宽度，并将左右margin都设置成“auto”就ＯＫ了，这里我们针对IE浏览器的怪异模式在“body”中设置一个文本中间对齐，然后在容器中重新设置回来文本左对齐。有关于居中的问题，大家还可以参阅《CSS制作水平垂直居中对齐》了解有关于元素的水平垂直居中对齐的几种制作方法，大家要是感兴趣还可以阅读《CSS制作图片水平垂直居中》学习一下有关于图片的水平垂直居中的制作方法。
四、CSS定位
我这里所说的CSS定位是有关于CSS的相对定位(relative)和绝对定位（absolute）之间的关系。前段时间也有好几位网友向我问起他们的关系，其实简单一点来说：相对定位的元素是元素相对于其本身定位，同时他会占有元素以前所在位置的空间；而绝对定位是会完全脱离文档流，并且其定位是相对于离元素最近的祖元素是否设置了相对定位关系。下面是一个简单的例子：#box在容器#container中，而且#box是相对于#container进行绝对定位，并且距容器左边是200px ，顶部是50px：
HTML Markup
<div id="container"> <div id="box">box</div> </div>
CSS Code
#container {
position: relative;
width:500; height:300;
}
#box {
position: absolute;
left: 200px;
top: 50px;
}
如果大家对这个还不是了解的话，我建议你仔细阅读一下《Document Flow and CSS Positioning》、《CSS Layout》和《Absolute vs. Relative - Explaining CSS Positioning》等教程。
五、文本转换
这个技巧可以说不是技巧，但有时使用是非常方便的，这个所谓的文本转换其实就是CSS中的text-transform属性，他具有三个值：uppercase(将所有字母转换为大写字母)、capitalize(所有单词第一个字母大写)、lowercase(所有字母小写)，具体应用如下所示：
h1 {
text-transform:uppercase;
}
h2 {
text-transform:capitalize;
}
p {
text-transform:lowercase;
}
如果你还没有真正使用过这个属性，你不仿现在动手试试，想更了这个属性的使用，你可以点击阅读W3chools.com的text-transform。
六、删除链接和文本输入框高亮下的这外边框
这个问题常发生在链接和文本输入框止面，你点击后会有一个点划线状的四边形，特别是在Mac机下面，有时我们使用图片替换链接时，采用了“-999em”，那么你点击链接，会有一个长长的边框至浏览器边上，这样直接影响了站点的美观，那么要解决这样的问题，我们需要使用outline来设置：
a, input {
outline:none;
}
有关于a元素中是否设置“outline:none”适当，大家可以点击《a { outline: none; }—— Don't do it!》，里面进行过详细的讨论，大家也可以点击Chris Coyier的《Removing The Dotted Outline》，告诉我们如何移出这个虚线框的方法。
七、隐藏文本内容
这个隐藏文本常用在图片替代文字的时候，不过现在做seo优化也使用这种方法来实现搜索引擎对关键字的寻找，我认为比较好的方法是使用“text-indent”来实现：
a {
text-indent:-999em;
outline:none;
background: url(button.jpg) no-repeat 0 0;
width:100px;
height:50px;
display:block;
}
八、保持一致的sup和sub
常常使用sup和sub时，在各浏览器中会有不一致的渲染效果，今天我发现了一个比较好的处理方法：
sup,
sub {
height: 0;
line-height: 1;
vertical-align: baseline;
_vertical-align: bottom;
position: relative;
}
sup {
bottom: 1ex;
}
sub {
top: .5ex;
}
有关于具体的解说，大家可以点击Keep consistent line spacing with sup and sub 。
九、设置跨浏览器的透明问题
大家平时都有制作元素透明的问题，常用的是opacity方法：
.opacity {
filter:alpha(opacity=50); /* ie */
-moz-opacity:0.5; /* old mozilla browser like netscape */
-khtml-opacity: 0.5; /* for really really old safari */
opacity: 0.5; /* css standard, currently it works in most modern browsers like firefox, */
}
可是这种方法会造成其子元素也跟随变成透明，随后css3提出一个rgba：
.rgba{
background: rgba(255,255,255,0.5);
}
可这种方法又不能实现跨浏览器的支持，今天在Sofish大神那学习了一种跨浏览器的兼容方法：
/* * filter 渐变滤镜详细用法，参见这里 * StartColorStr 和 EndColorStr: * #4c000000 是 30% 透明度的 #000000 的意思 * 组成: # + 透明度 + 颜色 * 算法: Math.floor(0.6 * 255).toString(16); */ .rgba{ background:rgba(0, 0, 0, 0.3); filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#4c000000', EndColorStr='#4c000000'); }
其实这种方法就是rgba的扩展，早在《CSS3 RGBA》一文中我也有提到过，只是没有Sofish大神那样理解透，如果你想了解的更清楚，就点击Sofish大神写的《背景半透明最佳实践》教程。
十、IE6下png透明问题
有关于IE6下的PNG透明问题，都是老生常谈的问题了，以前在《Drupal7中解决IE6的png透明问题》一文中介绍了使用DD_belatedPNG来解决透明问题，但时常碰到一些Js冲突问题，今天我在给大家介绍一种另外的解决办法：
.png_hack{
background-image: url(../img/the_image.png) !important;
background-image: none;
filter: none !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/the_image.png');
}
有关这方面的具体介绍，大家感兴趣可以点击Twinhelix.com的IE PNG Fix 2.0 Alpha 4。
十一、防止换行
这是一个CSS的小技巧，或许有些同学不知道，其实他是很强大的，能让文本在一行中显示，不换行：
element {
white-space: nowrap;
word-break: keep-all;
}
相关介绍可以参阅本站的《CSS3 Word-wrap》或者quirksmode介绿的《white-space》
十二、CSS制作的3Ｄ的Button效果
使用CSS制作3D效果的button，主要依靠的是button的边框色的配置：
a {
display: block;
border: 1px solid;
border-color: #aaa #000 #000 #aaa;
width: 8em;
background: #fc0;
}
a:hover {
position: relative;
top: 1px;
left: 1px;
border-color: #000 #aaa #aaa #000;
}
十三、链接的顺序
链接的样式设置，其顺序是非常的关键，对于新同学来说，可能常碰到，怎么没有效果呢，其实你只要遵循下面的顺序，一切皆有了：
a:link {
color: #000;
text-decoration: underline
}
a:visited {
color: #666;
}
a:hover {
color: #333;
text-decoration: none;
}
a:active {
color: #333;
text-decoration: none;
}
其实这有一个法则，大家都称之为“爱恨法则”——LoVe——HAte也就是：Link——Visited——Hover——active。详细一点的介绍大家可以参考《CSS Links》和《Link Styles》。
十四、CSS的简写
这一点主要是罗列了一些CSS中能简写的规则样式：
/* MARGIN */
h1 {margin:1em 0 2em 0.5em;}
h1 {margin-top:1em;
margin-right:0;
margin-bottom:2em;
margin-left:0.5em;
}
/* BORDER */
h1 {border:1px solid #000;}
h1 {border-width:1px;
border-style:solid;
border-color:#000;
}
/* BORDER WIDTH */
h1 {border-width:1px 2px 3px 4px;}
h1 {border-top-width:1px;
border-right-width:2px;
border-bottom-width:3px;
border-left-width:4px;
}
/* BACKGROUND */
div {background:#f00 url(background.gif) no-repeat fixed 0 0;}
div {background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;
}
/* FONT */
h1 {font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;}
h1 {font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:"Lucida Grande",sans-serif;
}
/* LIST STYLE */
ul {list-style:square inside url(image.gif);}
ul {list-style-type:square;
list-style-position:inside;
list-style-image:url(image.gif);
}
/* OUTLINE */
h1 {outline:#f00 solid 2px;}
h1 {outline-color:#f00;
outline-style:solid;
outline-width:2px;
}
这些对于一个前端人员来说都是最基础的了，我这里罗列出来是方便新手学习，希望对他们有一定的帮助，而且dustindiaz也提供了一份《CSS Shorthand Guide》，想了解的同学就去看看吧。
十五、打印文档的强制作分页符
最后一点但并不是最重要的一点，我想给大家说的是打印样式中如何设置强制分页符，这个使用相对来说，但要创建一个好的打印样式，有时还是少不了他们的：
h1{
page-break-before:always;
}
h2{
page-break-after:avoid;
}
h2{
page-break-inside:always;
}
想了解更多这方面的知识，大家可以点击W3C CSS Print Reference或者CSS3 stardard。
今天主要是和大家一起学习了一些CSS的小技巧和窍门，其中有很多是很基础的东西，也有很多是大有常用到的知识，我主要把他们罗列到一起方便大家的查找和学习，希望对大家有所帮助，如果您有一些CSS的小技巧或小窍门，记得与大家一起分享。
如需转载烦请注明出处：W3CPLUS
