CSS3第一节

了解CSS

• CSS3是CSS2的升级版，3只是版本号，它在CSS2的基础上增加了很多强大的新功能，目前主流的浏览器谷歌，火狐等到都支持，ie10以后也全面支持CSS3.
• 在编写CSS3样式时，不用的浏览器可能需要不同的前缀，它表示该CSS属性或者规则尚未成为W3C标准的一部分，但是浏览器的私有属性，虽然目前较新版本的浏览器都是不需要前缀，但为了更好的向前兼容，前缀是少不了的.

CSS3浏览器兼容

每一个浏览器都有独有的前缀字符串，如 -webkit是针对 webkit核心浏览器 -ms是微软的私有 前缀

CSS3新特性

1.使用@Font-Face 实现定制字体
2.快阴影和文字阴影
3.多背景图
4.渐变效果
5.多栏布局
6.圆角效果 -缩放 旋转
7.动画

CSS3为我们提供的便利

CSS3把很多以前需要使用图片和脚本来实现的效果，短短几行 代码就能搞定，如：圆角，图片边框，文字阴影和盒阴影，过度，动画等。

CSS3简化了前端开发工作人员的设计过程，加快页面的载入 速度。

圆角效果：

之前做法：背景图片，或者元素拼凑。
CSS3：border-radius搞定

边框阴影 box-shadow搞定：

CSS选择器

1.* 通配符

    eg：*{margin：0；padding:0;}
    #container * { border: red 1px solid ; }

ID为container 的所有子标签元素都被选中了，并且设置了border。

2. # id选择符
通过id进行引用

     #div { width: 960px; margin: auto; }
        id=”div”

    ID选择器是CSS中效率最高的选择器，使用的时候要保证ID的唯一性。

3. . class类选择器
通过class进行引用

        .div{width:960px;}
                  class=”div”

4.a 标签选择器

 eg：a{color:red}

1. div a 标签组合选择器

     eg:div a{color:red}

1. div,a 标签并联选择器

    eg:div,a{color:red}

7.a:hover 伪类选择器，最常用的为A标签

    eg：a:hover{colore:red}
          eg：input[type=radio]:checked{color:red}

1. X+y 毗邻元素选择器

    eg：ul + p { color: red; }

       毗邻元素选择器，匹配的是所有紧随X元素之后的同级元素Y

9.X > Y：子元素选择器

      #div > ul { border: 1px solid black; }
<div id="div"> <ul> <li> List Item <ul> <li> Child </li> </ul> </li> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul> </div>

10.X ~ Y： 兄弟选择符 测试与 +区别
eg：ul ~ p { color: red; }
匹配任何在X元素之后的同级P元素。也就是选择了UL之后的同级所有的元素。

11.X[title]：属性选择器

       eg：a[title] { color: green; }
              匹配a包含title的标签
        a[href="http://www.baidu.com"]{ color: red; }
                     匹配属性中为http://www.baidu.com的标签
                        a[href*="baidu"] { color: #1f6053; }
                     匹配href中所有含有baidu的标签。   
                         a[href^="http"]
                    匹配以http开头的A标签
                          a[href$=".jpg"]
                     匹配以.jpg结尾的A标签

12.X:not(selector) 选择除了（）中选择器之外的标签元素。
eg: *:not(p){color:red;}
13. :root 根元素
:root 等价于 *{} html{} 优先级对比
*>root>html
14: :empty 当元素内容为空时被选中
15: :nth-child(n)规定元素
n可以是数字和倍数(2n)
n+ 表示大于第一个元素
16：:last-child选取最后一个标签
17: :first-child 选取第一个标签
18. :only-child
匹配属于父元素中唯一子元素的p元素:
css3之前接触到
伪类：
:focus 向拥有键盘输入焦点的元素添加样式。
:hover 当鼠标悬浮在元素上方时，向元素添加样式。
:link 向未被访问的链接添加样式。
:visited 向已被访问的链接添加样式。

:after 插入元素后端 （必须指定 content：属性 转换为块状元素）
:before 插入元素前段 （必须指定 content：属性 转换为块状元素）

选择器效率排名：　　

1. id选择器（#myid）
2. 类选择器（.myclassname）
3. 标签选择器（div,h1,p）
4. 相邻选择器（h1+p）
5. 子选择器（ul < li）
6. 后代选择器（li a）
7. 通配符选择器（*）
8. 属性选择器（a[rel=’external’]）
9. 伪类选择器
   例： div #mydiv的效率 高于 #mydiv div