2.CSS

CSS学习网站：http://www.w3school.com.cn/css/index.asp

CSS有三种书写形式：

• 行内样式(内联样式)，直接在标签style属性中书写

    我是段落标签p

• 页内样式

    
    


    




    我是段落标签p

• 外部样式
  在单独的CSS文件（style sheet）中书写，然后再网页中用link标签引用:

p {
    color: chartreuse;
}

    
    我是段落标签p

---

CSS选择器：

选择器的作用：选择对应的标签

1.标签选择器

根据标签名找到标签

    我是段落标签p

2.类选择器

    我是段落标签p

3.id选择器

id选择器 标签中只能使用一次

    我是段落标签p

4.并列选择器 （或）

我是段落标签p
我是容器标签div

5.复合选择器 （且）

我是段落标签p 1
我是段落标签p 2
               ··················· //未被选中

6.后代选择器

    

        我是div的后代标签 段落p标签
    

7.相邻兄弟选择器

只会选择后面的兄弟

    我是与div相邻的 位于前面的p标签


    

        我是div的后代标签 段落p标签
    


    我是与div相邻的 位于后面的p标签

8.属性选择器

    我是有name为小明的属性p标签

支持多属性同时选择:

9.通配符

• 优先级最低
• 性能差
• 可以跟别的标签选择器叠加样式

---

选择器优先级：

• 相同类型的选择器遵守：就近原则 、 叠加原则

• 不同类型的选择器遵守：imporant > 内联 > id选择器 > 类选择器 > 标签选择器

  
  
  

---

伪类

---

伪元素

---

属性的可继承性：

---

CCS3新增特性：

1.rgba

2.块阴影与圆角阴影

        .test2 {
            background-color: red;
                /*盒子阴影*/
            box-shadow: 10px 10px ;
            /*文字阴影*/
        }

3.圆角

        .test3 {
            /*设置圆角*/
            border-radius: 10px;
            background-color: green;
        }

        .test4 {
            /*设置部分圆角*/
            border-top-left-radius: 30px;
            background-color: green;
        }

4.边框图片

border-image

5.形变

transform