您的位置：首页 > CSS > 5个你应该知道的CSS技术

5个你应该知道的CSS技术

发表于 02. Mar, 2009, 分类: CSS , 4 条评论 »
标签：

这篇文章对一些人来说可能是多余的。我很肯定这些技术已经被到处谈论了，如果 你已经知道了，很好。对那些还不了解这些技术的人，打起精神来看看它们是如何做到 的吧。这些技术，熟练的 CSS 使用者都已经了然于心了，但是更多的新手或初学者还不知道。

无图片圆角

这个技术变得越来越流行，因为许多人现在转而使用像 Firefox 和 Safari 等更可靠并且(我敢说)兼容性更好的浏览器。

CSS

div.rounded {
	  -moz-border-radius: 10px;
	  -webkit-border-radius: 10px;
	  padding:10px;
	  border:3px solid #f3ddac;
	  background: #fff3d8;
}

HTML

<div class="rounded">
<h2>The Example</h2>
This is text within the DIV. This is just random meaningless stuff to make this DIV look like it contains something, thus making it a more aesthetic example rather than using a completely empty DIV to demonstrate this technique.
 
<span class="bright-red">Note:</span> <em>Only Firefox or Safari users will notice rounded edges on this DIV. If the corners of this DIV are square in your browser, I recommend <a href="http://www.mozilla.com/en-US/">downloading Firefox</a>.</em></div>

效果：

5-css-techniques-you-should-know-example

绝对定位技巧

当我学会这个技术时，我真想能早点知道它。它肯定能减少我因为试图把元素正确排列 而拿头撞桌子的痛苦。(可怜的桌子啊！ – 糖伴西红柿)

在页面上创建一个元素的时候，它被默认地设置为postion: static;，正常情况下这挺好。 但是，当你试图用position: absolute;来定位包含在其中的元素时，它却不会 相对于它的父元素绝对定位。它反而会相对于页面绝对定位。下面给出两个可视图表。

静态定位的父元素(默认)

相对定位的父元素

下面的代码帮助你理解怎么使用这个技术：

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title> new document </title>
  <meta name="generator" content="EditPlus 3">
  <style type="text/css">
   body {
    background:#f0f0f0;
    margin:0;
    padding:0;
   }
   div.static {
    background:url('http://eight7teen.com/wp-content/uploads/2009/02/postatic.jpg') no-repeat center center;
    margin:0 auto;
    width:400px;
    height:300px;
    border:3px solid #cb0000;
   }
   div.relative {
    background:url('http://eight7teen.com/wp-content/uploads/2009/02/porelative.jpg') no-repeat center center;
    margin:0 auto;
    position:relative;
    width:400px;
    height:300px;
    border:3px solid #cb0000;
   }
   img.tl {
    position:absolute;
    top:0;
    left:0;
   }
   img.tr {
    position:absolute;
    top:0;
    right:0;
   }
  </style>
 </meta></head>
<body>
<div style="clear:both;width:100%;height:30px;"></div>
 
<div class="static">
<img src="http://eight7teen.com/wp-content/uploads/2009/01/box_download_48.png" class="tl"/>
<img src="http://eight7teen.com/wp-content/themes/GrungeMag/images/twitter-trans.png" class="tr"/>
</div>
 
<div style="clear:both;width:100%;height:30px;"></div>
 
<div class="relative">
<img src="http://eight7teen.com/wp-content/uploads/2009/01/box_download_48.png" class="tl"/>
<img src="http://eight7teen.com/wp-content/themes/GrungeMag/images/twitter-trans.png" class="tr"/>
</div>
</body>
</html>

半透明背景-不透明文字

创建半透明层时，很多人就被难倒了。貌似大多数人认为，使用 CSS 调整 div 透明度 时，只有背景会受到影响。这是不对的。以如下代码段为例：

CSS

.transparent {
	padding:10px;
	color:#000;
	background:#cb0000;
	height:200px;
	width:250px;
	opacity: 0.4;
	filter:alpha(opacity=40);
	-moz-opacity:0.4;
	-khtml-opacity: 0.4;
	}

HTML

<div class="transparent">
Most people think this text should be fully opaque rather than dimming with the background...</div>

效果：

5-css-techniques-you-should-know-1

像你所看到的，应用 CSS 透明的元素，其里面包含的文本也同样受到影响。当然， 也可以用一点 CSS 和另一个容器来覆盖掉：

CSS

.transparent {
	 position:absolute;
	 top:0;
	 left:0;
	 padding:10px;
	 background:#cb0000;
	 height:200px;
	 width:250px;
	 opacity: 0.4;
	 filter:alpha(opacity=40);
	 -moz-opacity:0.4;
	 -khtml-opacity: 0.4;
}
.text {
	 position:absolute;
	 top:0;
	 left:0;
	 padding:10px;
	 color:#000;
	 height:200px;
	 width:250px;
}
<div class="text">This is an example of fully opaque text overlain on a semi-transparent background DIV</div>

效果：

5-css-techniques-you-should-know-2

模拟双边框

这个技术已经出现很久了，但是还是有很多人不知道怎么用 CSS 实现这个效果。 因此，我打算详细阐述下这个技术并给出一些进一步展示页面元素美感的例子。

例一：

这个例子简单地在图片周围加了一像素的边框。通过 CSS 设置的 background-color 和 padding 使图片看起来有了多个边框。

CSS

img.demo1 {
	padding:2px;
	border:1px solid #ababab;
	background:#dcdcdc;
}

HTML

<img class="demo1" src="yourimagehere.jpg" alt="Example of an image with double borders" />

例二： 这个例子使用较小的 padding 和 较大的 border-width，并且用较淡的背景色和 较深的边框色来反转了上个例子的效果。 CSS

img.demo2 {
	padding:1px;
	border:2px solid #dcdcdc;
	background:#ababab;
}

HTML

<img class="demo1" src="yourimagehere.jpg" alt="Example of an image with double borders" />

例三：

这个例子展示了利用上例中同样的技术和一点点想象力能实现的效果。我们只给图片 的两个边设置 padding 和 border，这就实现了阴影效果。

CSS

img.demo3 {
	padding:0 2px 2px 0;
	border:0;
	border-right:2px solid #eee;
	border-bottom:2px solid #eee;
	background:#d1d1d1;
}

HTML

<img class="demo1" src="yourimagehere.jpg" alt="Example of an image with double borders" />

创建链接块

这个技术越来越普遍，因为它不仅可以用来增强网站的美感，而且，如果使用正确， 理论上来说还可有助于页面上的 SEO。下面是一个快速创建链接块的指南：

CSS
CSS

a.blocklink {
	display:block;
	width:160px;
	background:#f0f0f0;
	color:#999;
	font-family:corbel, verdana, sans-serif;
	padding:4px;
	text-decoration:none;
	font-weight:normal;
	font-size:0.72em;
	border:1px solid #dadada;
}
a.blocklink strong {
	font-family:georgia, helvetica, sans-serif;
	display:block;
	color:#656565;
	font-weight:bold;
	font-size:1em;
	margin:0 0 3px 0;
	font-style:italic;
}
a.blocklink:hover {
	background:#dcdcdc;
	color:#303030;
	border:1px solid #adadad;
}
a.blocklink:hover strong {
	color:#cb0000;
}

HTML

<a class="blocklink" href="#">
<strong>Link Block Heading</strong>
This is the text contained within the link block... It has no real meaning. It's just here to make it look pretty...
</a>

效果：

5-css-techniques-you-should-know-linksblock

糖伴西红柿说：

如文章所说，这些技术都已经流传好久了，现在都不新鲜了。不过也算得上一个很好的总结，这篇文章比较 细致地讲了各种技术的实现方法，看起来很理论，其实很实用。

原文：http://eight7teen.com/articles/5-css-techniques-you-should-know

作者: 糖伴西红柿
用macbook的非果粉，喜欢精致的东西，喜欢听 Linkinpark Coldplay follow me on twitter: @gaowhen
如果你喜欢本文，欢迎 订阅本站 以获得本站最新内容。

您或许也会喜欢：

4 个评论

发表评论