CSS3概述、选择器、兼容性、样式

一、css3简介

1.什么是css3

• CSS 用于控制网页的样式和布局
• CSS3 是最新的 CSS 标准
• CSS3是CSS2的升级版

2.css3的功能

• 选择器
• 盒模型
• 背景和边框
• 文字特效
• 2D/3D转换
• 动画
• 多列布局
• 用户界面

二、css3选择器

1.属性选择器

• element[att]
  选择具有att属性的element元素
• element[att=“val”]
  选择就具有att属性且值=val的元素
• element[att^=“val”]
  选择具有att属性且以val开头的元素
• element[att$=“val”]
  选择具有att属性且值以val结尾的元素
• element[att*=“val”]
  选择具有att属性且值中含有val的元素
  在input中 disabled 禁用

2.类选择器

.element

3.结构伪类选择器

• element:first-child
  匹配父元素中的第一个子元素element
• element:last-child
  匹配父元素在最后一个element元素
• element:nth-child(n)
  匹配父元素中的第n个子元素element
• element:first-of-type
  指定类型element的第一个
• element:last-of-type
  指定类型element的最后一个
• element:nth-of-type(n)
  指定类型element的第几个
  n可以是数字、关键字、公式
• even 偶数
• odd 奇数

4.伪元素

:before 内容之前
:after 内容之后
before、after传教的元素属于行内元素

三、css3兼容性

兼容性处理

• css3 样式在ie9以下不兼容 用css3pipe 来处理兼容性

• behavior:url(“js/pie.htc”);处理css3 在ie8或ie7上的兼容性
  -webkit 谷歌
  -moz 火狐
  -ms IE

• 浏览器之间的样式差异处理 重置浏览器的默认样式

    <link rel="stylesheet" href="./JD/css/normalize.css"/>
    <style>
        .btn{
            width: 100px;
            height: 30px;
            line-height: 30px;
            outline-style: none;
            backg