一、css3简介
CSS3 是最新的 CSS 标准。
CSS3 模块:选择器、框模型、背景和边框、文本效果、2D/3D 转换、动画、多列布局、用户界面
CSS3的优点:CSS3将完全向后兼容,所以没有必要修改现在的设计来让它们继续运作。网络浏览器也还将继续支持CSS2。
渐进增强和优雅降级:
-
渐进增强:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
-
优雅降级:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。
-
区别:优雅降级是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要。
二、浏览器是否添加兼容前缀
vs code中的插件: autoprefixer
这个插件可以帮我们自己来判断是否需要添加兼容前缀,如果我们写的是标准属性,那么不会添加,如果写的属性需要添加,则会帮我们进行添加
在外部创建css文件,在css文件中书写代码,书写完成后f1----运行autoprefixer:run
三、css3新增选择器
1、属性选择器
- css2中的属性选择器
- E[attr] 指定了属性名称,但没有指定属性值
- E[attr = value] 指定了属性名称,并且指定属性值
- E[attr ~= value] 指定了属性名称,并且属性值是词列表中的一个
- css3中新增的属性选择器
- E[attr ^= “val”] 选择拥有attr属性且属性值为val开头的E元素
- E[attr $= “val”] 选择拥有attr属性且属性值以val结束的E元素
- E[attr *= “val”] 选择拥有attr属性且属性值中包含val的E元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 交集选择器: 满足选择器1的要求,还需要同时满足选择器2的要求才可以被选择出来 */
/* div[class] {
color: blueviolet;
} */
/* div[class="box"] {
color: brown;
} */
/* <标签名 属性名="属性值"> */
/* div[class~="box"] {
color: cadetblue;
} */
/* 必须是div标签,指定了属性名称为class,并且属性值中得以box开头 */
/* div[class^="box"] {
color: yellow;
} */
/* 必须是div标签,指定了属性名称为class,并且属性值中得以box结尾 */
/* div[class $= "box"] {
color: pink;
} */
/* 必须是div标签,指定了属性名称为class,并且属性值中包含box就可以被选中 */
div[class *= "box"] {
color: green;
}
</style>
</head>
<body>
<div class="box">box1</div>
<div class="box2 box">box2</div>
<div class="boxa">boxa</div>
<div class="abox">abox</div>
<div id="box">box3</div>
<div class="boax">box4</div>
<p class="box">p1</p>
</body>
</html>
属性选择器的特殊性 (权重) 0,0,1,0
2、css3新增结构伪类选择器
复习链接伪类选择器
a:link {} /*访问前*/
a:visited{} /*访问后*/
a:hover{} /*鼠标悬停时*/
a:active{} /*鼠标按住不松手时*/
(1):first-child
选择父元素中的第一个子元素E
E:first-child{}
(2):last-child
选择父元素中的最后一个子元素E
E:last-child{}
(3):nth-child(n)
选择父元素中的第n个子元素E
E:nth-child(n){}
-
n可以是数字
-
n可以是表达式
-
n可以是关键词 even | odd
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* ul :first-child {
color: red;
} */
/* css选择器的渲染顺序是从右向左进行查找 */
/* .list1 li:first-child {
color: chocolate;
} */
/* 先找li的父元素中的最后一个孩子,然后匹配是不是li标签 */
/* li:last-child {
color: cornflowerblue;
} */
/* 先找li的父元素中的第5个孩子,在匹配一个看看是不是li标签,如果是那么就选中了 */
/* li:nth-child(5) {
color: crimson;
} */
/* li:nth-child(2n+1) {
color: cyan;
} */
li:nth-child(odd) {
color: darkgoldenrod;
}
li:nth-child(even) {
color: yellow;
}
</style>
</head>
<body>
<ul class="list1">
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
<li>li5</li>
<li>li6</li>
<li>li7</li>
<li>li8</li>
<li>li9</li>
<li>li10</li>
<!-- <div>box</div> -->
</ul>
<!-- <ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
<li>li5</li>
<li>li6</li>
<li>li7</li>
<li>li8</li>
<li>li9</li>
<li>li10</li>
</ul> -->
</body>
</html>
(4):nth-last-child(n)
选择父元素中倒数第n个子元素E
E:nth-last-child(n){}
n可以是数字,表达式,关键词
/* 先找li的父元素,找父元素中的倒数第三个子元素,再匹配是不是li标签,是可以选中 */
/* li:nth-last-child(3) {
color: darkgreen;
} */
/* li:nth-last-child(2n+1) {
color: blue;
} */
li:nth-last-child(odd) {
color:tomato;
}
(5):nth-of-type(n)
匹配属于父元素的特定类型的第 n 个子元素
:nth-of-type(n){}
(6):nth-last-of-type(n)
匹配属于父元素的特定类型的第 N 个子元素的每个元素,从最后一个子元素开始计数
:nth-last-of-type(n) {}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li:nth-of-type(5) {
color: red;
}
/* 标签选择器也叫做类型选择器,元素名称选择器 */
/* class名称为box的父元素,将找到的父元素下方的所有标签按照类型(标签名)分组,再去找每个组里的第2个元素,再匹配是不是class名叫box */
/* .box:nth-of-type(2) {
color: yellow;
} */
/* class名称为box的父元素,将找到的父元素下方的所有标签按照类型(标签名)分组,找每个类型中的倒数第一个元素,再匹配是不是class名叫box */
.box:nth-last-of-type(1) {
color: tomato;
}
</style>
</head>
<body>
<ul class="list1">
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
<li>li5</li>
<li>li6</li>
<li>li7</li>
<li>li8</li>
<li>li9</li>
<li>li10</li>
</ul>
<div class="wrap">
<p class="box">p1</p>
<div class="box">div1</div>
<p class="box">p2</p>
<p class="box">p3</p>
<div class="box">div2</div>
<div class="box">div3</div>
<span class="box">span1</span>
<span class="box">span2</span>
</div>
</body>
</html>
3、css3中新增的状态伪类选择器
(1):enabled
匹配用户界面上处于可用状态的元素
E:enabled {}
(2):disabled
匹配用户界面上处于禁用状态的元素
E:disabled {}
(3):checked
匹配用户界面上处于选中状态的元素
E:checked {}
input[type="text"]:enabled {
background-color: tomato;
}
input:disabled {
background-color: yellow;
}
input[type="radio"]:checked + span{
background-color: tomato;
}
伪类选择器的特殊性(权重):0,0,1,0
伪元素选择器的特殊性(权重): 0,0,0,1
四、css3新增属性
1、border-radius属性
设置圆角
兼容性: ie9+及标准浏览器最新版下是支持的
2、box-shadow属性
设置盒子阴影
box-shadow: h-shadow v-shadow blur spread color inset;
- h-shadow 设置水平方向的阴影位置
- v-shadow 设置垂直方向的阴影位置
- blur 设置模糊距离(羽化值)
- spread 设置阴影大小
- color 设置阴影颜色
- inset 设置内外阴影,如果默认不写是外阴影,如果设置内阴影写inset
注意:
-
水平阴影位置和垂直阴影位置可以是正值,负值或者0
-
模糊距离值越大越模糊,不可以是负值
-
阴影大小也可以是正值或者负值,0
-
阴影颜色可以是十六进制、颜色关键词、rgba(),rgb()
-
兼容性: ie9+
3、text-shadow
设置文字阴影
text-shadow:水平阴影位置 垂直阴影位置 模糊距离 阴影颜色;
兼容性: ie10+
文字阴影和盒子阴影都可以设置多个,注意多组之间逗号隔开就可以了
五、css3背景属性
1、多背景的设置
background-image:url(),url();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 800px;
height: 500px;
border: 1px solid red;
/* 书写位置靠前的背景图显示在前面 */
background-image: url("./images/1.jpg"),url("./images/2.jpg");
background-repeat: no-repeat;
background-position: left top,right bottom;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2、background-size
规定背景图片的尺寸
兼容性: ie9+
background-size:px | % | contain | cover;
-
px
一般设置两个值,第一个值是背景图片的宽度,第二个值是背景图片的高度
如果只设置一个值,这个值代表是背景图片的宽度,高度将变成auto(等比例缩放)
-
%
一般设置两个值,第一个值是背景图片的宽度(是相对于父元素的宽度进行计算的),第二个值是背景图片的高度(是相对于父元素的高度进行计算的)
如果只设置一个值,这个值代表是背景图片的宽度,高度将变成auto(等比例缩放)
-
contain
包含的意思,将背景图片扩展到最大尺寸,将最长的边完全放入盒子中,较短的边等比例缩放中会出现留白
-
cover
遮盖的意思,将背景图片扩展到足够大的尺寸,将最短的边完全放入盒子中去,较长的边等比例缩放时可能出现显示不完整
3、background-origin
规定背景图片的定位区域,规定背景图片左上角的起始位置
background-origin:border-box | padding-box | content-box;
- border-box 背景图片左上角的起始位置从边框开始
- padding-box 背景图片左上角的起始位置从padding开始
- content-box 背景图片左上角的起始位置从内容区域开始
4、background-clip
规定背景的绘制区域
background-clip:border-box | padding-box | content-box;
- border-box 背景超出边框之外的部分就直接裁剪
- padding-box 背景超出padding之外的部分就直接裁剪
- content-box 背景超出内容之外的部分就直接裁剪