校园学生学习娱乐资源第一门户 校园第一站 源于校园 服务于校园 分享资源和快乐 网站地图 高级搜索 RSS订阅 收藏本站 设为首页
首页 | 校园 | 教育 | 考试 | 电脑 | 英语 | 读书 | 就业 | 论文 | 体育 | 健康 | 图片 | 分类信息
Q Q | 下载 | 游戏 | 音乐 | 影视 | 专题 | 祝福 | 百科 | 问答 | 博客 | 会员 | 社区 | 校园论坛
·偶像剧免费在线收看
·DEDECMS免费模板规则下载
·
·全能空间、网站建设仅200
Dreamweaver | FrontPages | HTML | Javascript | 文章搜索:
  当前位置: 主页>电脑>网页设计>DIV+CSS> 文章正文

CSS网页样式设计攻略全集

http://www.xydyz.com 来源:网络收集 2008-07-12 阅读: 评论



  color:#333;
  margin:1em 0;
  }

  如果在使用时,有个别元素需要定义独立样式,你可以再加上新的定义,可以覆盖老的定义,例如:

  h1 { font-size:2em; }
  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方法更适

  十四.横向居中(centering)

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

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

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

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

  body {
  text-align:center;
  }
错误,你就要象排版工人,逐行分析CSS代码。我通常在出问题的层上定义一个背景颜色,这样就能很明显看到层占据多大空间。有些人建议用border,一般情况也是可以的,但问题是,有时候border 会增加元素的尺寸,border-top和boeder-bottom会破坏纵向margin的值,所以使用background更加安全些。

  #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 {
  /* 定义内容 */
  }

  (b)下面这个写法只有IE浏览器可以理解(对其他浏览器都隐藏)

  * html p {
  /* declarations */
  }

  (c)还有些时候,你希望IE/Win有效而IE/Mac隐藏,你可以使用"反斜线"技巧:

  /* \*/
  * html p {
  declarations
  }
  /* */

  2.条件注释(conditional comments)的方法

  另外一种方法,我认为比CSS Hacks更加经得起考验就是采用微软的私有属性条件注释(conditional comments)。用这个方法你可以给IE单独定义一些样式,而不影响主样式表的定义。就象这样:

  十七.调试技巧:层有多大?

  当调试CSS发生

  另外一个经常出问题的属性是outline。outline看起来象boeder,但不会影响元素的尺寸或者位置。只有少数浏览器支持outline属性,我所知道的只有Safari、OmniWeb、和Opera。

  十八.CSS代码书写样式

  在写CSS代码的时候,对于缩进、断行、空格,每个人有每个人的书写习惯。在经过不断实践后,我决定采用下面这样的书写样式:




【责任编辑:admin 】




评论
用户名: 新注册) 密码: 匿名评论
评论内容:不能超过250字,请自觉遵守互联网相关政策法规。
  相关文章
Div+CSS布局入门教程
如何使用CSS来进行网页排版
DIV+CSS树型菜单
css样式做细线表格
CSS滤镜-Xray属性
  最新图片
如何使用CSS来进行网页排版
如何使用CSS来进行网
Div+CSS布局入门教程
Div+CSS布局入门教程
CSS滤镜-Xray属性
CSS滤镜-Xray属性
CSS滤镜-Wave属性
CSS滤镜-Wave属性
CSS滤镜-Shadow属性
CSS滤镜-Shadow属性
CSS滤镜-Mask属性
CSS滤镜-Mask属性
CSS滤镜-alphInvert属性
CSS滤镜-alphInvert属
CSS滤镜-Gray属性
CSS滤镜-Gray属性
24小时TOP
   
·CSS+DIV网页样式与布局视频教程全集
·如何使用CSS来进行网页排版
·Div+CSS布局入门教程
·CSS滤镜-Xray属性
·CSS教程:li和ul标签
·DIV CSS制作网页时易犯的错误总结
·CSS滤镜-Shadow属性
·CSS滤镜-Chroma属性
热门图片
  更多>>>
如何使用CSS来进行网页排版
如何使用CSS来进行
Div+CSS布局入门教程
Div+CSS布局入门教
CSS滤镜-Xray属性
CSS滤镜-Xray属性
CSS滤镜-Shadow属性
CSS滤镜-Shadow属性
焦点聚焦
  更多>>>
·Div+CSS布局入门教程
·DIV CSS制作网页时易犯的错误总结
论坛精华
  更多>>>
·真钱斗地主轧金花龙虎板玖和百家乐http://c
·22岁女大学生要嫁48岁乞丐(图)
·一条短信毁了一种水果 “蛆橘”传言流变调
·蒙古风情十四怪 (一)
·《中国高新技术企业》--www.txrb.com--科信
·东莞大金空调官方介绍 13559702882卢生
·乐众国际最新博彩游戏!真实!新鲜!刺激!
·快国庆了大家怎么安排
最新图片
  更多>>>
如何使用CSS来进行网页排版
如何使用CSS来进行
Div+CSS布局入门教程
Div+CSS布局入门教
CSS滤镜-Xray属性
CSS滤镜-Xray属性
CSS滤镜-Wave属性
CSS滤镜-Wave属性
推荐文章
  更多>>>
·如何使用CSS来进行网页排版
·Div+CSS布局入门教程
·CSS滤镜-Xray属性
·CSS滤镜-Wave属性
·CSS滤镜-Shadow属性
·CSS滤镜-Mask属性
·CSS滤镜-alphInvert属性
·CSS滤镜-Gray属性
关于我们 - 版权声明 - 免责声明 - 欢迎投稿 - 广告服务 - 友情链接 - 网站建设 - 诚聘英才 - 联系我们 - -
Copyright @2007-2009 www.xydyz.com © All rights reserved.
校园第一站 版权所有 客服E-Mail:hyperblue@163.comn 点击这里给我发消息
Site design by hyperblue 鄂ICP备07009403号 Powered by DedeCms