总结：用CSS进行网页样式设计攻略全集

• 　　h2 { font-size:1.6em; }

  　　十二.用正确的顺序指定链接的样式

  　　当你用CSS来定义链接的多个状态样式时，要注意它们书写的顺序，正确的顺序是::link :visited :hover :active。抽取第一个字母是"LVHA"，你可以记忆成"LoVe HAte"(喜?lt;a href="http://search.yesky.com/search?q=%B6%CC" class="bluekey" target="_blank">短盅?。为什么这么定义，可以参考Eric Meyer的《Link Specificity》。

  　　如果你的用户需要用键盘来控制，需要知道当前链接的焦点，你还可以定义:focus属性。:focus属性的效果也取决与你书写的位置，如果你希望聚焦元素显示:hover效果，你就把:focus写在:hover前面;如果你希望聚焦效果替代:hover效果，你就把:focus放在:hover后面。

  　　十三.清除浮动

  　　一个非常常见的CSS问题，定位使用浮动的时候，下面的层被浮动的层所覆盖，或者层里嵌套的子层超出了外层的范围。

  　　通常的解决办法是在浮动层后面添加一个额外元素，例如一个div或者一个br，并且定义它的样式为clear: both。这个办法有一点牵强，幸运的是还有一个好办法可以解决，参看这篇文章《How To Clear Floats Without Structural Markup》(注:本站将尽快翻译此文)。

  
  　　上面2种方法可以很好解决浮动超出的问题，但是如果当你真的需要对层或者层里的对象进行clear的时候怎么办?一种简单的方法就是用overflow属性，这个方法最初的发表在《Simple Clearing of Floats》，又在《Clearance》和《Super simple clearing floats》中被广泛讨论。

  　　上面那一种clear方法更适合你，要看具体的情况，这里不再展开论述。另外关于float的应用，一些优秀的文章已经说得很清楚，推荐你阅读:《Floatutorial》、《Containing Floats》和《Float Layouts》

  　　十四.横向居中(centering)

  　　这是一个简单的技巧，但是值得再说一遍，因为我看见太多的新手问题都是问这个:CSS如何横向居中?你需要定义元素的宽，并且定义横向的margin，如果你的布局包含在一个层(容器)中，就象这样:

  　　<-- 你的布局这里开始 -->

  　　你可以这样定义使它横向居中:

  　　#wrap {
　　width:760px; /* 修改为你的层的宽度 */
　　margin:0 auto;
　　}

  　　但是IE5/Win不能正确显示这个定义，我们采用一个非常有用的技巧来解决:用text-align属性。就象这样:

  　　body {
　　text-align:center;
　　}

  　　#wrap {
　　width:760px; /* 修改为你的层的宽度 */
　　margin:0 auto;
　　text-align:left;
　　}

  第一个body的text-align:center; 规则定义IE5/Win中body的所有元素居中(其他浏览器只是将文字居中) ，第二个text-align:left;是将#warp中的文字居左。

  　　十五.导入(Import)和隐藏CSS

  　　因为老版本浏览器不支持CSS，一个通常的做法是使用@import技巧来把CSS隐藏起来。例如:

  　　@import url("main.css");

  　　然而，这个方法对IE4不起作用，这让我很是头疼了一阵子。后来我用这样的写法:

  　　 @import "main.css";

  　　这样就可以在IE4中也隐藏CSS了，呵呵，还节省了5个字节呢。想了解@import语法的详细说明，可以看这里《centricle’s css filter chart》

  　　十六.针对IE的优化

  　　有些时候，你需要对IE浏览器的bug定义一些特别的规则，这里有太多的CSS技巧(hacks)，我只使用其中的两种方法，不管微软在即将发布的IE7 beta版里是否更好的支持CSS，这两种方法都是最安全的。

  　　1.注释的方法

  　　(a)在IE中隐藏一个CSS定义，你可以使用子选择器(child selector):

  　　html>body p {


• 上一页 [1] [2] [3] [4] [5] 下一页 
• 复制本页网址和标题，发送给你QQ/Msn的好友一起分享
  
  
• 总结：用CSS进行网页样式设计攻略全集 相关文章：
• ·CPU型号大全总结
• ·C/C++笔试、面试题目大汇总
• ·Outlook使用技巧大全总结之一
• ·寻根问底 系统无法启动原因总结
• ·Excel数据分类汇总满足多种数据整理需求
• ·模拟城市4-心得汇总 - 游戏攻略
• ·常见端口表汇总
• ·华为3com系列产品配置手册汇总
• ·MS-SQL开发常用汇总和t-sql技巧集锦
• ·某高手总结的电脑技巧
• 总结：用CSS进行网页样式设计攻略全集 相关软件
• ·重返德军总部2先锋部队
• ·WinXP总管[WinXP Manager] V5.21 简体中文版
• ·周恩来总理经典图片集
• ·重返德军总部
• ·Excel2000报表汇总系统 V1.70
• ·骨科相关知识点总结
• ·总管家综合人事管理系统 专业增强版 V9.33
• ·汽车总动员(Cars-PLEX)
• ·外科学总论部分复习笔记
• ·教师工作总结集 V1.0

上一篇:用好表单的按钮（二）

下一篇:Xhtml第8天：CSS布局入门技术

• 特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作
• 者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转
• 载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源：http://www.hackhome.com