CSS高级属性部分


  CSS 尺寸 (Dimension) 属性允许控制元素的高度和宽度,也允许行间距设置,主要有行高、元素宽、元素高,即line-height, height, width;height 又分为max-height 与 min-height,同样,width也分为 max-width 与 min-width。在大多数浏览器中 line-height 的默认值为1~1.2,可以当作1.1来对待,该属性具有继承性(比如继承span语句赋予的数值),且允许负值,但对行框内的图像元素无效。

  CSS 分类属性允许规定如何以及在何处显示元素。利用display 来设置是否及在哪里显示元素,利用position 来设置元素的相对、绝对、固定等位置属性,利用float 来设置元素的浮动,用visibility 来设置元素是否可见。clear 可以配合float 来设置浮动元素侧面是否允许其他浮动元素存在。display:none 与visibility:hidden 虽然都可以设置元素不可见,但前者指定的元素包括其占位都在布局中消失,后者则保留其占位,在非IE浏览器中对应后者的collapse属性有特殊的用途(见visibility)。cursor 属性规定当指向某元素之上时显示的指针类型,可以用cursor:url(*)设置为自定义的光标,但必须指定一种默认的光标以避免出现没有可用光标的状况发生。

  CSS 伪类 (Pseudo-classes)用来向某些选择器添加特殊的效果。所谓的伪类和伪元素是很让人费解的概念,IE对伪类支持很差甚至不支持(比如:focus),我的理解是他们归属于某些类元素的细部部分,或者是某些类的某些状态的描述,但它们不能独立存在和直接被解析……还是很费解,我这个理解也不见得恰当。虽然诸多浏览器,特别是IE对伪类支持不好,但仍有四个可以安全使用的伪类,它们是锚伪类:

  a:link {color: #FF0000} /* 未访问的链接 */
  a:visited {color: #00FF00} /* 已访问的链接 */
  a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
  a:active {color: #0000FF} /* 选定的链接 */

  在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。a:active 必须被置于 a:hover 之后,才是有效的。伪类名称对大小写不敏感。

  伪类也可以配合CSS使用,比如”a.red : visited {color: #FF0000}“这样的定义方式。”:first-child”用来定义元素的第一个子元素,是个特备容易误解和出错的伪类,特别是对 p:first-child 所定义的子元素来说。

最常见的错误是认为 p:first-child 之类的选择器会选择 p 元素的第一个子元素。
注意:必须声明 <!DOCTYPE>,这样 :first-child 才能在 IE 中生效。

伪类表

伪类 作用 IE F N W3C
:active 将样式添加到被激活的元素 4 1 8 1
:focus 将样式添加到被选中的元素 2
:hover 当鼠标悬浮在元素上方时,向元素添加样式 4 1 7 1
:link 将特殊的样式添加到未被访问过的链接 3 1 4 1
:visited 将特殊的样式添加到被访问过的链接 3 1 4 1
:first-child 将特殊的样式添加到元素的第一个子元素 1 7 2
:lang 允许创作者来定义指定的元素中使用的语言 1 8 2

  伪元素的概念与伪类有相似之处,CSS 伪元素用于将特殊的效果添加到某些选择器,可以为伪类元素指定多个属性,见前面链接。

伪元素的语法:

  1. 选择器 : 伪元素 { 属性: 值 }

CSS 类也可以与伪元素配合使用:

  1. 选择器 . 类: 伪元素 { 属性: 值 }
伪元素 作用 IE F N W3C
:first-letter 将特殊的样式添加到文本的首字母 5 1 8 1
:first-line 将特殊的样式添加到文本的首行 5 1 8 1
:before 在某元素之前插入某些内容 1.5 8 2
:after 在某元素之后插入某些内容 1.5 8 2

  媒介设置对应文档对不同媒介提交时的不同表现,该设置对大小写不敏感

  don’t部分中则特别声明了需要回避和避免使用的技术,特别说明了behaviors和Typewriter Simulation,因为它们只被IE所支持,对应这些效果的实现,可以使用html dom和javascript,其实这也是CSS操作中的一个核心思想,友好地对待其他浏览器,尽量实现更大程度的兼容。

我也说两句儿......