101个CSS技术高级应用教程

《101个CSS技术高级应用教程》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、101个CSS技术高级应用教程(上)原文:101CSSTechniquesOfAllTime-Part1翻译:帕兰CSS从根本上改变了网页设计，它让网页样式与网页基本元素分离，只需要通过一个小小的style.css文件里面，对相应元素定义众多的属性，就可以实现完全的整站改变。CSS是强大的，是伟大的，是不可或缺的。要掌握CSS并不困难，帕兰随时自信满满的跟一些想学习CSS的朋友说:学会CSS所需要的时间，最短一天，最长一个星期。事实也确实如此。但要成为一个真正的CSS高手，那就不是一两天的事情了。你需要掌握一些比较高级的CSS应用技巧，甚至是去创建一些还未发掘出

2、来的CSS应用技巧。Noupe为我们收集了101个CSS技术的高级应用，这些CSS应用技巧里面，有的你甚至可能从来都没有听过，但如果你是一个网页设计爱好者，你应该去了解它。它们代表着当前最流行最实用的CSS应用，如果你能把它们都掌握并加以运用，你完全可以晋升为一个标准的CSS高手。CSSSprites－CSS背景图片的绝对定位应用CSSsprites，CSS妖精？这是一个无法用中文正确表达的意思，如果一定要找一个词，那就叫CSS背景图片的绝对定位应用好了。这项CSS技术是利用利用对一张背景图片的绝对定位来实现减少HTTP请求，从而达到网页提速。CSSsprite

3、最适合作用于背景图标或是背景装饰性的图片。这样说你可能还是不太明白。换言之，就是把许多背景图片整合成一张背景图片，然后通过限制要使用背景图片的元素的宽高，再通过background-repeat,background-position来对图片进行定位，这样做的好处就是减少网页加载时的HTTP请求，因为你每使用一张背景图片，加载网页时就会发出一个HTTP请求。平常你可能不太注意，其实这项CSS技术在很多大型网站都有应用，比如Google韩国首页那个著名的动画工具条，你可以查看一下背景图片，其实所有的图标都在一张背景图上面。再比如土豆网，你点击导航栏，选择查看背景图

4、片，可以看到，整个网页的大多数地方的背景图片都是集成在一张图片里的。你还可以在AOL、Yahoo之类的知名网站找到类似的CSSsprites应用，个人网页设计好像用的还比较少。CSSsprites也具有一定的局限性，比如每次都需要添加图片到整张背景图片中，而且需要精准的定位测量。下面是一些英文的关于CSSSprites的使用技巧，如果你要看中文，也可以自己去搜索一些。·CSSSprites:ImageSlicing’sKissofDeath·CSSSprites:WhatTheyAre,WhyThey’reCool,andHowToUseThem·CSSSpri

5、tes:HowYahoo.comandAOL.comImproveWebPerformanceCSSRoundedCorners－CSS圆角效果圆角效果是网页设计中最流行和最常使用的。下面是一些教你如何利用CSS达到圆角效果的技巧。·EvenMoreRoundedCornersWithCSS-基于PNG格式的图片建立圆角效果，并且支持边框，透明过渡,渐变,图案背景以及任何其它你能想象得到的效果Demo:·RoundedcornersinCSS-利用4个DIV层和4张背景图片实现圆角效果。·Liquidroundedcorners·MountaintopCorne

6、rs-一个简单的方法来实现圆角效果。ImageReplacementsTechnique－图像替换技巧ThierryImagePlacement:图片定位和图像替换这一项技术主要是应用于网页标题，用CSS对背景图片的定位来替换原来的HTML元素，达到更加漂亮的视觉效果。如果你需要这种CSS图片替换技巧，你可以查看DaveShea为你描述的如何达到利用CSS让文本达到镀金效果和闪电效果，或者是如何替换链接文本为CSS支持并且兼容IE和Mac，theGilderLevinRyznarJacoubsenIRmethod.SlidingDoors－滑动门SlidingD

7、oors是CSS引入的一项用来创造漂亮且实用的界面的新技术，它使用简单,我们只需要使用两张单独的背景图片，结合灵活的接口组件，就可以实现。SlidingDoors”Box–RoundedCornersforAllImageTextWrapTechnique－文本环绕图像技巧网页排版中最重要的一个元素就是图文混搭，以实现杂志志的效果。下面一些教程将告诉如何利用CSS实现文本环绕图像的效果，从而美化你的网页设计。·BIGBAERadvancedCSStechnique–thesandbagdiv.·CSSImageTextWrap·Fancytextwrapping

8、aroundanimag