20个CSS实战技巧
作者：大漠 日期：2011-10-17 点击：1285
特别声明：如果您喜欢小站的内容，可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法，欢迎发送邮件至: airenliao@gmail.com!或添加QQ：874472854(^_^)
前面我在《13个CSS技巧》和《7个不能遗忘的CSS样式》收集了一些实用的CSS技巧，主要是用来处理一些CSS的样式。今天在这篇教程，我依旧收集和整理了一些CSS技巧，其中有一些技巧大家可能已经使用过了，有些可能大家在实际项目中并碰到，另外有一些技巧我也在以前的教程中有单独提出来并做了详细的解说，今天主要是把他们放在一起，方便大家的查阅和学习。这些CSS技巧能帮大家解决一些恼人的问题，从而也能帮大家提高自己CSS方面的技术。别的先不说了，我们一起开始吧。
一、跨浏览器的兼容
浏览器的兼容问题，大家都有碰到过了。兼容问题对于新手来说都是一件棘手的事情。下面的一些hack写法，可能帮你解决浏览器的特定问题。
/***** Selector Hacks ******/
/* IE6 and below */
* html selector { property: value }
/* IE7 */
*:first-child+html selector { property: value }
/* IE7, FF, Saf, Opera */
html>body selector { property: value }
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body selector { property: value }
/* Opera 9.27 and below, safari 2 */
html:first-child selector { property: value }
/* Safari 2-3 */
html[xmlns*=""] body:last-child selector { property: value }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) selector { property: value }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type selector { property: value }
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
selector { property: value }
}
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
selector { property: value }
}
/* Safari 2 - 3.1 */
html[xmlns*=""]:root selector { property: value }
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] selector { property: value }
/* Everything but IE6-8 */
:root *> selector { property: value }
/* IE7 */
*+html selector { property: value }
/* Firefox only. 1+ */
selector, x:-moz-any-link { property: value }
/* Firefox 3.0+ */
selector, x:-moz-any-link, x:default { property: value }
/***** Attribute Hacks ******/
/* IE6 */
selector { _property: value }
/* IE6, IE7 */
selector { *property: value }
/* Everything but IE6 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8 */
selector { property: value\9 }
/* IE7, IE8 */
selector { property/*\**/: value\9 }
/* IE6, IE7 -- acts as an !important */
selector { property: value !ie; } /* string after ! can be anything */
有关于各浏览器下兼容的Hack写法，本站在《浏览器兼容之旅的第二站:各浏览器的Hack写法》一文中有做详细的陈述，当然大家也可以参考Paul Irish的《Browser CSS hacks》，里面也做了相关的介绍。虽然Hack能解决很多问题，但我还是要强烈建议，不要使用Hack来解决兼容问题，因为很多浏览器的兼容的问题都是我们自己代码产生的Bug,除非万不得已的情况之下，才来考虑使用Hack来解决浏览器的兼容问题。
二、图片水平垂直居中
如何在一个不知道尺寸的图片在容器中水平垂直居中，实现的方法有多种多样，在这里我给大家推荐的一种极简单的方法，并且同时能兼容所有浏览器：
HTML Code
<figure class='logo'> <span></span> <img class='photo'/> </figure>
CSS Code
.logo {
display: block;
text-align: center;
text-align: center;
vertical-align: middle;
border: 4px solid #dddddd;
padding: 4px;
height: 74px;
width: 74px;
}
.logo * {
display: inline-block;/*important*/
height: 100%;
vertical-align: middle;/*important*/
}
.logo .photo {
height: auto;/*important*/
width: auto;
max-width: 100%;
max-height: 100%;
}
上面的方法只是其中的一种解决图片水平垂直居中的方法，前面本站在《CSS制作图片水平垂直居中》教程中介绍了多种让图片水平垂直居中的方法，大家也可以参考《Cross Browser Vertically and Horizontally Centered Images in CSS without Tables》。这两篇是介绍让图片水平直垂直居中的方法，有时也会碰到别的元素水平垂直居中的制作，如果你对这个也感兴趣，你可以点击《CSS制作水平垂直居中对齐》，查看具体的解决方法。
三、跨浏览设置透明度
使用下面一段代码，你可以让任何元素都具有透明度。
selector {
filter: alpha(opacity=50); /* internet explorer */
-khtml-opacity: 0.5; /* khtml, old safari */
-moz-opacity: 0.5; /* mozilla, netscape */
opacity: 0.5; /* fx, safari, opera */
}
这种方法设置元素的透明是很方便，但是会存在一个严重的Bug问题，会使用后代元素也具有透明度。如果需要解决这样的问题，大家可以参考《CSS3 RGBA》一文，当然更好的办法，你可以使用CSS3中的RGBA方法来设置元素透明效果，只是这种方法只有支持CSS3属性的浏览器才能有效果。有关于Opacity设置元素的透明度，大家还可以点击Jeff Starr写的《Cross-Browser Transparency via CSS》。
四、CSS Box Shadow
以前实现元素的阴影，我们都是使用添加额外的元素来模仿制作，但现在有CSS3的box-shadow的属性后，我们制作阴影效果就不会那么麻烦了。
1、外阴影
.shadow {
-moz-box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;
box-shadow: 5px 5px 5px #ccc;
}
2、内阴影
.shadow {
-moz-box-shadow:inset 0 0 10px #000000;
-webkit-box-shadow:inset 0 0 10px #000000;
box-shadow:inset 0 0 10px #000000;
}
有关于CSS3的box-shadow具体使用，大家可以点击本站的教程《CSS3 Box-shadow》，并且我在《CSS3 制作Drop Shadow效果》一文中介绍了近15种不同的阴影效果。
五、跨浏览器的最小高度
最小高度的实现，有些朋友在IE6下实现还是很困惑，只要你使用下面的代码，你就可以轻意解决。
#div {
min-height: 500px;
height:auto !important;
height: 500px;
}
这个问题是典型的IE6下的Bug。在《浏览器兼容之旅的第四站:IE常见Bug——part2》一文中也介绍了min-height的处理方法，并且文中还介绍了修复min-width/max-width和max-heigt/min-height的Bug的方法。
六、固定页脚
固定页脚在页面的底部效果，时常都有碰到，但是在IE6下的position:fixed是无法正常实现的，往往是我们使用:expression来解决
#footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}
/* IE 6 */
* html #footer {
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
有关于详细的解说大家可以参考《Fixierter Footer, nur mit CSS》和《浏览器兼容之旅的第五站:IE常见Bug——part3》。
七、清除浮动
清除浮动的方法，现在有多种多样，但目前在项目中使用较多的是
/* slightly enhanced, universal clearfix hack */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
上面的只是用得较多的一种方法，我在《Clear Float》一文中也介绍了多种清除浮动的方法。而且Jeff Starr在《Lessons Learned Concerning the Clearfix CSS Hack》对使用“clearfix”清除浮动进行过详细的论述，有兴趣的可以参考一下。
八、八种通用的Web字体
/* The Times New Roman-based serif stack: */ font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif; /* A modern Georgia-based serif stack:*/ font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif; /*A more traditional Garamond-based serif stack:*/ font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif; /*The Helvetica/Arial-based sans serif stack:*/ font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; /*The Verdana-based sans serif stack:*/ font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif; /*The Trebuchet-based sans serif stack:*/ font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif; /*The heavier “Impact” sans serif stack:*/ font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif; /*The monospace stack:*/ font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
网页的字体很多种类，上面列出的是通用的Web制作的字体。具体的解说，大家可以阅读由Michael Tuck写的《8 Definitive Web Font Stacks Article》
九、为可点击元素添加手型光标
在Web制作中，有时会碰到可点击的元素在浏览器中不会改变光标形状，可以使用以下方法来改变,让光标形状改变为手型
a[href],
input[type='submit'],
input[type='image'],
label[for],
select,
button,
.pointer {
cursor: pointer;
}
上面代码来自于CSS Tricks的《Give Clickable Elements a Pointer Cursor》。
十、iPad的CSS设置
随着移动端的高速发展，我们的项目在iPad上的运行也越来越有要求了，我们可以使用下面的方法来让iPad读取其自己的样式：
<!-- css -->
@media only screen and (max-device-width: 1024px) and (orientation:portrait) {
.landscape { display: none; }
}
@media only screen and (max-device-width: 1024px) and (orientation:landscape) {
.portrait { display: none; }
}
<!-- example markup -->
<h1 class="portrait">Your device orientation is "portrait"<h1>
<h1 class="landscape">Your device orientation is "landscape"<h1>
有关于这方面更多的消息，大家可以点击desideratum的《iPad Orientation CSS (Revised)》一文。其实这个就是在不同的媒体上指定不同的样式，前面我在《CSS3 Media Queries》也对Css的Media进行过介绍，感兴趣的同学可以进去看看，了解一下其相关内容。
十一、pre标签样式的设置
pre标签的样式设置，大家都知道pre是一种预标记，下面的代码就是如何设置这个pre标记内的文本样式
pre{
height: 120px;
overflow: auto;
font-family: “Consolas”,monospace;
font-size: 9pt;
text-align:left;
background-color: #FCF7EC;
overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not*/
margin: 0px 0px 0px 0px;
padding:5px 5px 3px 5px;
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
white-space : normal; /* crucial for IE 6, maybe 7? */
}
pre标签虽然应用中并不很常见，但在代码处理上应用还是很广范的，具体的有关于pre标签的解说，你可以点击longren.org的《Wrapping Text Inside Pre Tags》，而且本站在《CSS3 Word-wrap》一文中也进行过详细的介绍。
十二、CSS3 Media Queries
CSS3中的Media Queries增加了更多的媒体查询，同时你可以添加不同的媒体类型的表达式用来检查媒体是否符合某些条件，如果媒体符合相应的条件，那么就会调用对应的样式表。换句简单的说，“在CSS3中我们可以设置不同类型的媒体条件，并根据对应的条件，给相应符合条件的媒体调用相对应的样式表”。
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
有关于更多的CSS3 Media Queries介绍，大家可以点击本站的CSS3教程中的《CSS3 Media Queries》，Stuffandonsense.co.uk中《Hardboiled CSS3 Media Queries》也进了详细的介绍。
十三、多个边框
使用CSS制作多边框效果，在CSS3中我们可以使用Border-color可以轻松的实现（详细的介绍可以点击《CSS3 Border-color》），但在CSS2中实现，我们需要借助元素的“:before”等属性来实现。
#borders {
position:relative;
z-index:1;
padding:30px;
border:5px solid #f00;
background:#ff9600;
}
#borders:before {
content:"";
position:absolute;
z-index:-1;
top:5px;
left:5px;
right:5px;
bottom:5px;
border:5px solid #ffea00;
background:#4aa929;
}
#borders:after {
content:"";
position:absolute;
z-index:-1;
top:15px;
left:15px;
right:15px;
bottom:15px;
border:5px solid #00b4ff;
background:#fff;
}
大家可以点击Necolas给我们提供的DEMO，具体如何实现的过程，大家要是感兴趣的话可以阅读Necolas写的《Multiple Backgrounds and Borders with CSS 2.1》教程。
十四、上下标的设置
往往上下标的设置都会破坏行的样式设置，为了能理好的显示sub和sup的，希望在你的代码中加入下面的代码：
sup, sub {
vertical-align: baseline;
position: relative;
top: -0.4em;
}
sub { top: 0.4em; }
有关于这两个标签的详细解说，大家可以点击Paularmstrongdesigns.com的《Stop Superscripts from Breaking Line-Heights Once and for All 》。
十五、圆角的使用
最爽的就是CSS3的Border-radius属性，有了这个属性，前端攻城师不在需要复杂的html结构、使用定制的图片或者说难懂的js来制作圆角了。我们可以直接使用CSS3的Border-radius来制作不同的圆角效果。
虽然CSS3很多浏览器不支持，但在Mozilla Firefox、Google Chrome、Safari和Opera可以完全运行，具体如何使用，可以点击本站的教程《CSS3的圆角Border-radius》。
十六、简单漂亮的Blockquote样式
在项目制作中“blockquote”标签的样使用相对来说较少些，如果你有需要使用时，设置下面的样式，你可以轻松得到一个简单明了又漂亮的“Blockquote”效果：
blockquote {
background:#f9f9f9;
border-left:10px solid #ccc;
margin:1.5em 10px;
padding:.5em 10px;
quotes:"\201C""\201D""\2018""\2019";
}
blockquote:before {
color:#ccc;
content:open-quote;
font-size:4em;
line-height:.1em;
margin-right:.25em;
vertical-align:-.4em;
}
blockquote p {
display:inline;
}
十七、:-moz-placeholder
:-moz-placeholder是用来设置表单文本框的占位文本的样式。其默认的是一个浅灰色，如果你改变了文本框的相关属性，可能会无法正常工作，比如说改变其背景色之类，设置颜色十分相似的时候，为了能让其正常显示，我们就可以使用:-moz-placeholder来解决：
input:-moz-placeholder {
color: green;
}
有关于“:-moz-placeholder”更详细的介绍，大家可以点击这里，也可以查看在线的DEMO。
十八、页脚永远在页面底部
前面介绍了如何将页脚部分永远固定在浏览器底部，下面这个方法是如何将页脚固定在页面的底部，其实现方法也有多种，这里只给大家展示的是其中一种：
HTML Code
<div id="wrap">
<div id="main" class="clearfix">content </div>
</div>
<div id="footer">footer content</div>
CSS Code
* { margin:0; padding:0; }
html, body, #wrap { height: 100%; }
body > #wrap {height: auto; min-height: 100%;}
#main { padding-bottom: 150px; } /* must be same height as the footer */
#footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}
/* CLEAR FIX*/
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
有关于面脚永远固定在页面底部的处理方法，前面我在《如何将页脚固定在页面底部》一文中介绍了四种处理方法，当然大家也可以查阅 csstickyfooter的《How to Use the Sticky Footer Code》。
十九、使用CSS制作文旋转
值得庆幸的是，现在大多数浏览器都支持HTML元素的旋转，而且在ＩＥ下也能运行正常，那具体是如何运行的呢？让我们一起来看吧，首先我们一起来看看HTML
<div class="example-date"> <span class="day">31</span> <span class="month">July</span> <span class="year">2009</span> </div>
在Mozilla Firefox、Google Chrome、Safari和Opera等现代浏览器中，你可以使用CSS3中的transform中的Rotate方法来和旋转，
-webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg);
如果需要在IE6-8上也能运行正常，这就需要使用下面的滤镱代码：
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
具体的制作文字旋转，大家可以阅读snook.ca的Snookca写的《Text Rotation with CSS》，Snookca在此文中详细介绍了制作文本旋转效果的全部过程，如果你对transform属性不太熟悉，那你也可以点击本站的CSS3的教程——《CSS3 Transform》。
二十、首字下沉
在书籍和报刊杂志中，常看到首字下沉的效果，其实在Web的制作中，同样可以实现这样的效果。那就是利用CSS的“:first-letter”来实现
p:first-letter{
display:block;
margin:5px 0 0 5px;
float:left;
color:#FF3366;
font-size:60px;
font-family:Georgia;
}
“:first-letter”是CSS选择器中伪类选择器之一，如果想了解更多的可以点击《CSS3 选择器——伪类选择器》。
上面主要收集了一些CSS常常使用的一些技巧片段，可以里面很多技巧性的东西，大家都有使用到了，但对于一些初学的朋友，我想还是有一定的帮助。里面虽然展示的都是一些技巧片段代码，但在相对应的技巧下面都附上了相应解说的链接地址，如果你对其中的某个技巧感兴趣，你可以点击相应链接地址进入原文阅读。然后这些内容能对您有所帮助，如果你有更好的东西分享，请在下面的评论中直接给我留言。谢谢！
如需转载烦请注明出处：W3CPLUS
View products by sport
