文章目录
html5新增语义标签
vedio视频标签
audio音频标签
html5新增的input表单
CSS3属性选择器
类选择器和属性选择器 伪类选择器 权重都是10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input[value]{
color: pink;
}
input[type="text"]{
color: pink;
}
div[class^="icon"]{
color: pink;
}
div[class$="data"]{
color: pink;
}
div[class*="icon"]{
color: pink;
}
</style>
</head>
<body>
<input type="text" value="zyj">
<input type="text">
<input type="password" name="" id="">
<div class="icon1">1</div>
<div class="icon2">2</div>
<div class="icon3">3</div>
<div class="icon4">4</div>
<div class="icon5">5</div>
<div class="icon-data"></div>
<div class="icon-value"></div>
<div class="ic-icon-data"></div>
</body>
</html>
css3结构伪类选择器
css3伪元素选择器
标签和伪元素选择器权重为1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width:200px;
height: 200px;
background-color: pink;
}
/*before生成的盒子是行内元素*/
div::before{
content: "我";
}
div::after{
content: "zyj";
}
</style>
</head>
<body>
<div>
是
</div>
</body>
</html>
盒子模型
滤镜filter
计算盒子宽度calc函数
.son{
width:calc(100%-30px);/*比父亲小30px*/
height:30px;
background-color:skyblue;
}
过渡