learn CSS3----ONE

                            ＣＳＳ３：

 
ＤＯＭ：　元素　＋　属性　＋　文本
                                                                       NUM1------others
CSS：层叠样式表，样式语言，对web网页进行渲染
ＣＳＳ３：

    A。 强大的选择器
    B。 特殊的视觉效果
    C。 强大的背景效果
    D。 盒模型的变化
    E。 阴影效果，文本阴影和盒阴影
    F。 多列布局和弹性盒模型布局
    G。 web字体和web font
    H。 颜色和透明度
    I。 圆角和边框
    J。 盒容器
    K。 过渡和 动画交互效果
    L。 媒体特性和responsive布局

 
渐进增强：  
    核心功能的实现，低端浏览器可视化站点内容 -》 使用高端但非必要的CSS和javascript增强功能
优雅降级：
    低端用户是否能够看到所有内容，在此基础上为高端用户进行设计。
    高端用户提供一个完美的应用，也为不同性能级别设备的用户设计不同级别的不那么完美的应用。
 
--------------------------------------------------------------------------------------------------------------------------------------------------
                                NUM2------css3选择器
    
A--
    使某个样式应用于特定的html元素，需要找到该元素。 执行这一任务的表现规则
 
B--    
    基本选择器（css_test1.html）
        *            选择文档中的所有html元素
        E            选择指定的类型的HTML元素
        #id            选择指定ID属性值为“id”的任意类型元素
        .class            选择指定class属性值为class的任意类型的任意多个元素
        selector1,selectorN    将一个选择器匹配的元素集合并
 
    层次选择器(层次选择器.html)
        Ｅ　Ｆ：    　　　　　　
            　　后代选择器。选择匹配的Ｆ，Ｆ包含在匹配的Ｅ中　
        Ｅ>Ｆ　    　　　　子选择器。　选择匹配的Ｆ,F是Ｅ的子元素
        Ｅ＋Ｆ    　　　　相邻兄弟选择器。　选择Ｆ，Ｆ在Ｅ后面
        Ｅ～Ｆ        选择Ｆ，位于Ｅ后面的所有匹配Ｆ元素    
 
    
    伪类选择器（伪类可以将一段并不存在的html元素当做独立元素定位。）
        动态伪类选择器(css_test2_buttonBeauty.html)
            (注意！！！是　　：　不是.)
            Ｅ：link    伪接伪类选择器　　　选择匹配的Ｅ元素，并且Ｅ元素被定义了超链接并且没有被访问过
            Ｅ：visited     链接伪类选择器    　  选择匹配的Ｅ元素，并且Ｅ元素被定义了超链接并且被访问过
            Ｅ：active    用户行为伪类选择器　选择匹配的Ｅ元素，且元素被激活
            Ｅ：hover    用户行为伪类选择器　选择匹配的Ｅ元素，鼠标停留在Ｅ元素上面　ｉｅ６下仅支持：　a:hover
            Ｅ：focus    用户行为伪类选择器　选择匹配的Ｅ元素，匹配的元素获得焦点　
        目标伪类选择器(目标伪类选择器.html)
            Ｅ：target    选择匹配的Ｅ的所有元素，且匹配元素被相关ＵＲＬ指向（只有存在ＵＲＬ指向该元素的时候才有效）
                ！！应用场景：高亮显示区块，从相互层叠的盒容器或者图片中突出显示其中一项，tabs效果，幻灯片效果，灯箱效果，相册效果
        语言伪类选择器(语言伪类选择器实例.html)
            匹配使用语言的元素，根据元素的语言编码匹配元素。
            Ｅ：language    选择匹配Ｅ的所有元素，匹配元素指定了lang属性，而且其值为language
        UI元素状态伪类选择器（UI元素状态伪类选择器.html）
            UI状态：启用，禁用，选中，未选中，获得焦点，失去焦点，锁定和待机等
            Ｅ：checked    选中状态伪类选择器    匹配选中的复选按钮或单选按钮表单元素
            Ｅ：enabled    启用状态伪类选择器    匹配所有启用的的表单元素
            Ｅ：disabled    不可用状态伪类选择器    匹配所有禁用的表单元素
        结构伪类选择器(结构伪类选择器实例.html)
            根据元素在文档树中的某些特性（如相对位置找到），相互关系匹配
            Ｅ：first-child(作为父元素的第一个子元素Ｅ　与　E:nth-child(1) 等同)
            Ｅ：last-child(作为父元素的最后一个子元素Ｅ　与 E:nth-last-child(1) 等同)
            Ｅ：root     (选择匹配元素Ｅ所在文档的根元素)　　　html中根元素始终为html
            Ｅ：F:nth-child(n) (选择父元素Ｅ的第n个子元素Ｆ.n可以为整数，关键字，公式，由１开始)
            Ｅ：F:nth-last-child(n) (选择父元素Ｅ的倒数第ｎ个子元素Ｆ)
            Ｅ：nth-of-type(n)      (选择父元素内具有指定类型的第n个Ｅ元素)
            Ｅ：nth-last-of-type(n) (选择父元素内具有指定类型的倒数第ｎ个元素)
            Ｅ：first-of-type    （选择父元素内具有指定类型的第一个Ｅ元素）
            Ｅ：last-of-type    (选择父元素内具有指定类型的最后一个Ｅ元素)
            Ｅ：only-child        （选择父元素只包含一个子元素，且该子元素匹配Ｅ）
            Ｅ：only-of-type    （选择父元素只包含一个同类型的子元素，且该元素匹配Ｅ元素）
            Ｅ：empty        （选择没有子元素的元素，且该元素也不含有任何文本节点）
        否定伪类选择器
            定位不匹配该匹配器的元素
            Ｅ：not（Ｆ）            (匹配所有除了Ｆ外的Ｅ元素)
    伪元素(属性选择器.html)
        （定位文档中包含的文本，无法在文档树中定位，ＤＯＭ外部的某种文档结构－－双冒号，区别伪类和伪元素）
        ::first-letter:选择文本块的第一个字母，通常用于给文本元素添加排版细节，下沉字母或者首字母）
        ::first-line:　常用语文本排版，匹配第一行文字
        ::before , ::after: 可以插入额外内容的位置，生成的内容不会成为ＤＯＭ的一部分
                    伪元素生成内容，还需要content属性。
        ::selection: 匹配突出显示的文本.

    属性选择器
        Ｅ[attr]：　匹配具有属性attr的Ｅ元素。Ｅ可以省略，表示任意类型元素
        Ｅ[attr=val] : 匹配具有attr的Ｅ元素，并且attr的属性值为val(不区分大小写),
                Ｅ可以省略，表示任意类型元素
        Ｅ[attr|=val]:匹配具有attr的Ｅ元素，attr的属性值具有val或者以val-开始。常用于lang. p[lang|=en]
        Ｅ[attr~=val]：选择匹配Ｅ元素，且E元素定义attr,attr的属性值具有多个空格分隔的值，其中一个等于val.
                .info[title~=more]    eg:<a class="info" title="click here for more...">click</a>
        Ｅ[attr*=val]：匹配元素E,且Ｅ元素定义了属性attr,其属性值任意位置包含了val。
        Ｅ[attr^=val]:　匹配元素Ｅ，Ｅ定义attr属性，其值以val开头的任意字符串
        Ｅ[attr$=val]: 匹配元素Ｅ，Ｅ定义attr属性，其值以val结尾的任意字符串
 
        

        常用通配符：        
        ^: 匹配起始符
        $: 匹配终止符
        *: 匹配任意字符
--------------------------------------------------------------------------------------------------------------------------------------------------