首 页 ┆ 源码下载 ┆ IT学院 ┆ 字体下载 ┆ 模板下载 ┆ 源码发布 ┆ 广告合作 ┆ 网站地图 ┆ 虚拟主机 ┆ 中文域名
► 设为首页
► 加入收藏
► 联系我们
源码下载 >> ASP源码 | PHP源码 | ASP.net源码 | JSP源码 | CGI源码 | VC/C++源码 | VB源码 | Delphi源码 | Flash源码
文章学院 >> 网络编程 | 网页设计 | 图形图象 | 数据库 | 服务器 | 网络媒体 | 网络安全 | 操作系统 | 办公软件 | 软件开发 | 黑客知识
字体下载 >> 精制字体 | 非英字体 | 艺术字体 | 著名字体 | 哥特式 | 简单字体 | 手写体 | 节假日 | 图案字体 | 精度像素 | 中文字体
模板下载 >> 企业门户 | 数码网络 | 休闲娱乐 | 影视音乐 | 旅游名胜 | 文化艺术 | 电子商务 | 个性展示 | 登陆导航 | Flash模板
►►您当前的位置:源码园 → IT学院 → 网页设计 → Html/Css → 文章内容

新手来简单学习CSS的display属性

作者:佚名  来源:网上收集  发布时间:2007-5-22 2:34:00

  操作HTML元素的诀窍在于明白它们工作的方法在于没有特定的形式。一些由标签组成的大部分页面可以设定任何样式。浏览器默认的样式里的大部分html元素由字体样式、margin,padding组成,本质上是显示类型。

  display属性基本上分为inline,block,和none。

  inline就像它的本意——显示为inline的元素为行。strong,anchor锚和em强调元素默认是行。
  block元素前后换行。标题和段落元素是块元素。

  none,意思不显示元素,在可用性上可以实现漂亮的效果,交替样式或hover效果的高级运用。

  设定表现可以更好运用在网页制作上。

h1 {
    display: inline;
    font-size: 2em;
}
#header p {
    display: inline;
    font-size: 0.9em;
    padding-left: 2em;
}

  设定标题h1为行元素,可以和后面的元素在同一行。

#navigation, #seeAlso, #comments, #standards {
    display: none;
}

  上面的代码可以使用在打印样式里,比如在导航使用,可以在打印时不显示导航这些无关紧要的东西。

  display:none和visibility:hidden;的不同在于display:none完全取消元素的显示,visibility:hidden保持元素位置但视觉上的内容不可见。例如,如果3的第二段设置为display:none,第一段将仅跟在第三段,如果设置为visibility:hidden,段落间就会空出。

  表格

  明白表格相关的表现属性值最好的方法想象html表格。table是最初的表现,你可以使用table-row模拟table-cell模拟td。

  display属性更进一步,可以通过使用table-column, table-row-group, table-column-group, table-header-group, table-footer-group and table-caption。现在可以直接使用columns构建表格,比在html中使用行构建快速。

  最后,inline-table设定表格前后不换行。

  使用CSS表格会严重损害可用性。HTML应该用来传递语意,所以如果你有表格数据,那可以使用HTML表格。使用CSS表格仅仅会产生糟糕的数据如果没有CSS数据将不可读。

  其他表现形式

  list-item列表项目,就像期待HTML里的li元素。它们需要嵌套在元素里面显示。

  run-in元素的表现形式由它的父元素决定。IE和Mozilla都不支持。

  compat根据上下阿文决定表现形式,同样IE和Mozilla都不支持。

  maker仅仅使用在:before和:after伪元素,设定content属性的表现。content属性默认表现就是maker,所以它只有在覆盖原来属性时才有用。

  content属性,它的默认就是maker,所以只有在覆盖原来属性时使用。


[] [返回上一页] [打 印]
  • 上一篇文章:DIV+CSS网页布局之边框的设置方法
  • 下一篇文章:学习网页技术CSS应用在特定场合的规则

  • 相关文章:
  • [组图]CSS滤镜之Xray属性
  • 新手来简单学习CSS的display属性
关于本站 - 网站帮助 - 广告合作 - 下载声明 - 友情连接 - 网站地图 - 源码发布
Copyright © 2003-2009 Ymyasp.Com. All Rights Reserved .
备案序号:粤ICP备07029071号