CSS3.0学习笔记

#css2中的选择器
1.元素选择器
    *通配符选择符、html类型选择符、id选择符、class选择符
2.关系选择器
    E F(包含选择器)、E>F(子选择器)、E+F(E元素后面相邻的F选择器)
3.伪类选择器
    E:link(链接伪类选择器-默认链接)
    E:visited(链接伪类选择器-点击过的链接)
    E:hover(用户操作伪类选择器-鼠标滑过)
    E:active(用户操作伪类选择器-鼠标点击)
    E:focus(用户操作伪类选择器-过去光标)
    E:lang()(:lang()伪类选择器-匹配使用特殊语言的E元素)
4.属性选择器
    E[att](选择具有att属性的E元素)
    E[att="val"](选择具有att属性且属性值等于val的E元素)
    E[att~="val"](选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素<通俗的说属性值不唯一的时候选择>)
    E[att|="val"](选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素)
5.伪对象选择器
    E:first-letter(设置对象内的第一个字符的样式)
    E:first-line(设置对象内的第一行样式)
    E:before(设置在对象前(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用)
    E:after(设置在对象后(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用)

/* 例子
     * a[href$="rar"]:after{
     *  content:url(../images/rar.jpg)
     * }
     * #content:"也可以这样输出字符串"
     * 作用：a标签的href属性为rar结尾的标签后面加上图片标签
     * */

#css3 新增选择器
    1.关系选择器
        E~F兄弟选择器(选择E标签"后面的"所有兄弟标签F)<没发现与E+F的却别>
    2.结构伪类选择器
        E:first-child (在所有兄弟中E标签为第一个child的时候选择) = 跟 E:nth-child(1)是一样的效果
        E:last-child (在所有兄弟中E标签为最后一个child的时候才选择)
        E:nth-child(int 第x个child) (在所有兄弟中第x个child为E标签的时候才选择)
            E:nth-child(even) 偶数(从1开始) = E:nth-child(2n)
            E:nth-child(odd) 奇数(从1开始) = E:nth-child(2n+1)
        E:nth-last-child(int 倒数第x个child) - 正好与E:nth-child相反
        E:only-child    (E标签为独生子的时候才选择)

        ---------------------------------------------
        of-type 系列 如: E:child-of-type 中，只对E标签类型的兄弟们加上1234..标记来选择
        E:first-of-type
        E:last-of-type
        E:only-of-type
        E:nth-of-type()
        E:nth-last-of-type()

        html:root{} 跟 html{} 效果是一样的

    3.UI元素状态伪类选择器
        input:disabled disabled类型表单的样式
        input:enabled  enabled类型表单的样式
        input:checked  被选中表单项的样式
    4.属性选择器
        E[attr^="val"] 属性值以val开头的
        E[attr$="val"] 属性值以val结尾的
        E[attr*="val"] 属性值中存在val字符的
    5.伪对象选择器
        #以下四种虽然是"::"号，但与css以前版本的":"单冒号的效果一样    
        E::first-line   E标签里面的第一行字符串（可以为<br />换行，也可以被容器的宽度自动换行）
        E::first-letter E标签里面的第一个字符
        E::before(设置在对象前(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用)
        E::after(设置在对象后(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用)

/* 例子
        * a[href$="rar"]::after{
        *  content:url(../images/rar.jpg)
        * }
        * #content:"也可以这样输出字符串"
        * 作用：a标签的href属性为rar结尾的标签后面加上图片标签
        * */

        E::selection E标签中的文字被选中的时候背景颜色（默认为深蓝色） #不支持FF、支持chrome
#css3 新增属性  
    1.css1&2中的文本属性
        text-indent     css1 文本缩进  
        letter-spacing  css1 文字之间的间隔
        word-spacing    css1 单词之间插入的空格格数
        vertical-align  css1/css2 垂直对齐方式
        white-space     css1 空格的处理方式(对应值:normal | pre | nowrap | pre-wrap | pre-line)
        #direction      css2 文本流方向
        #unicode-bidi   css2 用于同一个页面里存在从不同方向读进的文本显示。与direction属性一起使用

/*如: #b{  
                        direction:rtl; (将文档流变成从又向左书写)
                        unicode-bidi:bidi-override;
                    }
            */

        line-height     css1 行高
    2.css3中新增的文本属性
        text-overflow           css3 是否使用一个省略标记(对应值:clip|ellipsis)
        text-align              css1/css3 文本对齐方式
        text-transform          css1/css3 文本大小写(对应值:lowercase|uppercase|capitalize)
        text-decoration         css1/css3 [复合属性]文本装饰，如下划线、删除线
        text-decoration-line    css3 文本装饰线条的位置
        text-decoration-color   css3 文本装饰线条的颜色
        text-decoration-style   css3 文本装饰线条的形状
        text-shadow             css3 文本文字阴影及模糊效果(对应值:（left,top[,模糊程度px][,rgba(r,g,b,透明度)|rgb(r,g,b)|#000000]）) - 可以用","逗号来分隔继续写一样的格式来多阴影效果
        text-fill-color         css3 文字填充颜色 #需要加浏览器私有前缀 如：-webkit-text-fill-color:red;
        text-stroke             css3 [复合属性]文本文字的描边 #需要加浏览器私有前缀 如：-webkit-text-stroke:1px red;
        text-stroke-width       css3 文本文字描边的粗细 #需要加浏览器私有前缀 如：-webkit-text-stroke-width:1px;
        text-stroke-color       css3 文本文字描边的颜色 #需要加浏览器私有前缀 如：-webkit-text-stroke-width:red;

/* 浏览器私有前缀
         * IE:-ms-
         * 谷歌、苹果、猎豹、360急速(webkit内核)：-webkit-
         * opera:-o-
         * firefox:-Gecko-
         * */

        tab-size               css3 制表符(tab键)的长度 #<pre>标签里面的时候才可以看到效果 (tab-size:30) 谷歌浏览器暂不支持加px像素
        word-wrap               css3 当前行超过指定容器的边界时是否断开转行(对应值:normal | break-word) #一般英文单词之类的中间没有空格的字符一长串下来不会自动换行，而会超出限制宽度，所以用word-wrap:break-word;样式来强制换行
    3.css3新增颜色表示方式
        rgba(r,g,b,alpha<0-1>)
        HSL(H,S,L) - 色轮模式
            H: Hue(色调)
                0(或者360)表示红色,120表示绿色,240表示蓝色。颜色取值范围为:0-360
            S: Saturation(饱和度)
                取值范围: 0.0%-100.0%
            L:Lightness(亮度)
                取值范围: 0.0%-100.0%
            #如：hsl(360,50%,50%) 为不纯的红色
        HSLA(H,S,L,A)
            A: ALPHA(透明度)
                取值范围:0-1
        Opacity
            opacity:0.3;#取值为0-1之间
            filter:alpha(opacity) 仅限IE#取值为0-100之间 - 为了兼容IE浏览器