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

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

四、CSS3的样式

1.引入字体文件

2.圆角属性

    
    
    



    文本

border-radius: 10px 20px 30px 40px;

border-radius: 20px 40px;

border-radius: 20px;

border-radius:10px 20px 30px;

3.阴影

前两个值是0是全边框阴影
第一个值是右框
第二个值是下框

    
    
    



    文本

box-shadow: 10px 20px 10px red;

box-shadow: 0 0 5px red,0 0 25px yellow,0 0 35px pink;

4.使用图像作为div元素的边框

    
    
    



    文本

5.背景图片

    
    
    



    文本

6.渐变

    
    
    



    文本

7.文本阴影

    
    
    



    文本

8.溢出省略

8.1单行溢出省略

• overflow: hidden;
• text-overflow: ellipsis;
• white-space: nowrap;

8.2多行溢出省略

• display: -webkit-box;
• overflow: hidden;
• text-overflow: ellipsis;
• -webkit-box-orient: vertical;
• -webkit-line-clamp:3;