[互联网]第6章 web_di css.ppt

Id和class选择器的区别：除了使用符号有差别之外（.和#之外），主要差别在于id在同一个页面内部只能使用一次，而class主要描述出现多次的元素。如果试图在一个页面多次使用同一个id，页面通常可以正常显示，但，会给后期带来不便。 * 提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。 提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。 另外，:link,:visited只能用于 ，：hover，：active，等理论上可以应用于任何元素，不幸的是，只有少数现代浏览器，比如火狐支持这些功能；而ie6只应用active和hover选择器。 * 注意：样式（border-style）是边框最重要的一个方面，这不是因为样式控制着边框的显示（当然，样式确实控制着边框的显示），而是因为如果没有边框样式，将根本没有边框。记住这一点非常重要。事实上，忘记声明边框样式是一个常犯的错误。由于 border-style 的默认值是 none，如果没有声明样式，就相当于 border-style: none。因此，如果您希望边框出现，就必须声明一个边框样式。 * 提示： 1、这些效果实现的原因；（后设置的样式起作用） * 类似于表格的cellpadding属性； 默认情况下，背景会以padding的左上角为基点在盒子中进行平铺。 * margin 的默认值是 0，所以如果没有为 margin 声明一个值，就不会出现外边距。但是，在实际中，浏览器对许多元素已经提供了预定的样式，外边距也不例外。例如，在支持 CSS 的浏览器中，外边距会在每个段落元素的上面和下面生成“空行”。因此，如果没有为 p 元素声明外边距，浏览器可能会自己应用一个外边距。当然，只要你特别作了声明，就会覆盖默认样式。 * 3、平时块状元素用得比较多，主要用于做容器，进行页面布局。可是对于行内元素才是真正包含文字数据的地方，也是重点需要修饰的地方 * 参考： 1、/blog/2010/05/370 * 4、行内元素没有高度和宽度，因此没有固定的形状，定义它们的width和height无效。 同时，设置margin * 采用相对定位的元素，其位置是相对于它在文档中的原始位置计算而来的。这意味着，相对定位是通过将元素从原来的位置向右、向左、向上或向下移动来定位的。采用相对定位的元素会获得相应的空间。 * 无法应用已有的属性创建文字环绕图片的样式，只有应用float属性才可以。 浮动出现的意义其实只是用来让文字环绕图片而已，仅此而已。而我们目前用浮动实现页面布局本不是浮动该干的事情。 * 浮动是CSS中最重要，也最让人迷惑的一个概念吧，Float经常被错误理解，且因为将上下文元素全部浮动导致的可读性、可用性问题备受责难。然而，这些问题的根源并不在于理论本身，而是开发人员以及浏览器对理论的解读造成的。大多数问题都是由于老版本的IE带来的 * 浮动元素之后的元素会自动围绕该浮动元素。如果你不希望这样，你可以为这些元素应用‘clear’属性。该属性有4种设值。 当然，要想实现阻止行框围绕浮动框，可以在被清理的元素的上外边距上添加足够的空间，使元素的顶边缘垂直下降到浮动框下面。 * 参考资料：/content/09/1008/13/19147_座机电话号码.shtml 4、可以同时为一个Html标签设置多个规则。 注意：当多个Class之间的属性发生重叠的时候，将根据各个Class在CSS定义文件中被定义的位置，后定义的Class属性自动覆盖之前定义的Class属性（而不是根据你在class text side这里排列的顺序来进行覆盖） * 因此，上例中的p也显示为黄色，因为在css文件中的声明顺序是yellow在后面。 * 相对定位与绝对定位的比较 1、定位方式：相对定位是相对于元素初始位置进行定位，而绝对定位则是相对于最近的已定位的父元素； 2、文档流：相对定位后，元素原本所占的空间仍保留；而绝对定位后，元素框从文档流完全删除，其它元素的布局就像绝对定位的元素不存在一样。