CSS3学习回顾（1）

一、选择器

1、属性选择器
2、伪类选择器
  以某元素相对于其父元素或兄弟元素的位置来获取无素的结构伪类
  E:first-child:、E:last-child:、E:nth-child(n): 、E:nth-last-child(n): 
3、伪元素选择器
(1) E::before、E::after
  是一个行内元素，需要转换成块:display:block   float:**  position:
  必须添加content,哪怕不设置内容，也需要content:””，否则设置宽高无效
(2) E::first-letter文本的第一个字母或字(不是词组)
(3) E::first-line 文本第一行
(4) E::selection 可改变选中文本的样式

4、颜色
   HTML5中添加了一些新的颜色的表示方式
(1)RGBA：
    RGBA比元素设置CSS的透明度更好，因为单独的颜色可以在不影响整个元素的透明度，他        不会影响到元素其他的属性，比如说边框，字体同时也不会影响到其他元素的相关透明度
    R：红色值。正整数 | 百分数
    G：绿色值。正整数 | 百分数
    B：蓝色值。正整数 | 百分数
    A：透明度。取值0~1之间
(2) HSLA(H,S,L,A)：
    H：Hue(色调,色相)。
    0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。
    取值为：0 – 360,过渡为：(红橙黄绿青蓝紫红)
    S：Saturation(饱和度)。取值为：0.0% - 100.0%
    L：Lightness(亮度)。取值为：0.0% - 100.0%，50%是平衡值
    A：Alpha透明度。取值0~1之间。
5、文字阴影效果
    text-shadow:[x轴(X Offset) y轴(Y Offset)  模糊半径(Blur)  颜色(Color)]
    可以给一个对象应用一组或多组阴影效果，方式如前面的语法显示一样，用逗号隔开。
    X-Offset 其值为正值时,阴影向右偏移；
    Y-Offset 如果其值是正值时，阴影向下偏移
6、盒模型
(1)在默认情况下，CSS设置的盒子宽度仅仅是内容区的宽度，而非盒子的宽度。同样，高度类似。
    a)    padding + border + width = 盒子的宽度
    b)    padding + border + height = 盒子的高度
    很明显，这不直观，很容易出错，造成网页中其它元素的错位。
(2)CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变
    a)    content-box:对象的实际宽度等于设置的width值和border、padding之和
    b)    border-box： 对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度