CSS3学习内容与心得

　　 今天2005年7月9号，博客这个东西还真不懂，以前吧我不认识它，它也不认识我。没辙，汤老要我们写，就写吧。

写什么好呢？那就写今天学习的css3的一些要点吧。

　　css这门课程几乎都学完了。而我觉得我还不错吗，还认识几个单词了，呵呵。基本格式也都会了。甚至能写几个小小的网页，当然，这些对于大神朋友们而言，小菜一碟。不过我是新手，给点鼓励吧。言归正传，正式上菜：

　　一、新增选择符：

• E:first-child {属性：值 }    匹配父元素的第一个子元素E。

　　　　要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素

　　　　E:first-child选择符，E必须是它的兄弟元素中的第一个元素，换言之，E必须是父元素的第一个子元素。与之类似的伪类还有E:last-child，只不过情况正好相反，需要它是最后一个子元素。

• E:only-child { 属性：值 }   匹配父元素仅有的一个子元素E。

　　　　要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素

• 　　E:nth-child(n) { 属性：值 }   匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效。

　　　　

　　　　要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素

　　　　该选择符允许使用一个乘法因子(n)来作为换算方式，比如我们想选中所有的偶数子元素E，那么选择符可以写成：E:nth-child(2n)

• 　　E:first-of-type {属性：值}     匹配同类型中的第一个同级兄弟元素E。

　　　　　

　　　　　　要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是html，即E可以是html的子元素，也就是说E可以是body

　　　　　　该选择符总是能命中父元素的第1个为E的子元素，不论第1个子元素是否为E

• E:focus { 属性：值}   设置对象在成为输入焦点（该对象的onfocus事件发生）时的样式。

二、背景

　　　　background-origin：<box> [ , <box> ]*

　　　　<box> = border-box | padding-box | content-box

　　设置或检索对象的背景图像计算background-position时的参考原点(位置)。

　　对应的脚本特性为backgroundOrigin。

　

padding-box：

从padding区域（含padding）开始显示背景图像。

border-box：

从border区域（含border）开始显示背景图像。

content-box：

从content区域开始显示背景图像。

• background-clip：<box> [ , <box> ]*指定对象的背景图像向外裁剪的区域。

<box> = border-box | padding-box | content-box | text

padding-box：

从padding区域（不含padding）开始向外裁剪背景。

border-box：

从border区域（不含border）开始向外裁剪背景。

content-box：

从content区域开始向外裁剪背景。

text：

从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果。遮罩效果 See with Webkit

• background-size：<bg-size> [ , <bg-size> ]*检索或设置对象的背景图像的尺寸大小。

  <bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain

<bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain

• • 该属性提供2个参数值(特性值cover和contain除外)。
  • 如果提供两个，第一个用于定义背景图像的宽度，第二个用于定义背景图像的高度。
  • 如果只提供一个，该值将用于定义背景图像的宽度，第2个值默认为auto，即高度为auto，此时背景图以提供的宽度作为参照来进行等比缩放。
  • 对应的脚本特性为backgroundSize。