语义化标签
1. <header> 头部标签
2. <nav> 导航标签
3. <article> 内容标签
4. <section> 定义文档某个区域
5. <aside> 侧边栏标签
6. <footer> 尾部标签
7. <audio> 音频标签
8. <video> 视频标签
9. input 表单的 type 和一些新增的属性
css属性选择器
将代码复制到编辑器里进行测试
注:类选择器,属性选择器,伪类选择器 权重都是10
input[value] {
color: pink;
}
input[type='text'] {
color: blue;
}
div[class^='icon'] {
color: red;
}
div[class$='data'] {
color: yellow;
}
div[class*='Data'] {
color: #00c244;
}
<!--利用属性选择器-->
<input type="text" value="属性选择器">
<input type="text">
<!--利用属性的值进行选择-->
<input type="text" value="属性的值选择器">
<input type="password" value="属性的值选择器">
<!--利用属性的值中的前缀进行选择-->
<div class="icon1">属性的值中的前缀1</div>
<div class="icon2">属性的值中的前缀2</div>
<div class="icon3">属性的值中的前缀3</div>
<div>对比用</div>
<!--利用属性的值中的后缀进行选择-->
<div class="1-data">属性的值中的后缀1</div>
<div class="2-data">属性的值中的后缀2</div>
<div class="3-data">属性的值中的后缀3</div>
<div>对比用</div>
<!--利用包含属性的中值的进行选择-->
<div class="1Data2">属性的值中包含Data</div>
<div class="3Data4">属性的值中包含Data</div>
<div class="5Data6">属性的值中包含Data</div>
<div>对比用</div>
css结构伪类选择器
E:nth-child(n)和E: nth-of-type(n)的区别
前者先选出第几个n,在判断元素E
后者先判断元素E,在选出第几个n
ul li:first-child {
color: yellow;
}
ul li:nth-child(4){
color: red;
}
ul li:last-child {
color: #00c244;
}
section div:first-of-type {
color: #ff8500;
}
section div:nth-of-type(2){
color: #8a86f7;
}
section div:last-of-type {
color: #00b1e7;
}
<ul>
<li>这是第一</li>
<li>这是第二</li>
<li>这是第三</li>
<li>这是第四</li>
<li>这是第五</li>
<li>这是第六</li>
<li>这是第七</li>
<li>这是第八</li>
</ul>
<section>
<p>p1</p>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<div>div4</div>
</section>
css伪元素选择器
伪元素支持css创建新的标签,从而不需要HTML标签
类型:
::before : 在元素内部的前面插入内容
::after : 在元素内部的后面插入内容
特点:
1. 必须有content属性
2. 伪元素属于行内元素
3. before在父元素前创建元素,after在父元素后插入元素
4. 权重为1
css盒子模型
两种情况:
1. box-sizeing:content-box 盒子大小为width+padding+border(默认)
2. box-sizeing:border-box 盒子大小为width(此模式情况下,padding和border就不会撑大盒子了)
css新特性
filter(滤镜)具体效果查看文档
语法:filter:函数()
例:filter:blur(5px); blur模糊处理 数值越大越模糊
calc函数:计算
width:calc(100%-80px);
过渡:
口诀:谁做过渡给谁加
transition:需要过渡的属性 过渡时间 运动曲线 开始时间
如果多个属性需要进行过渡,使用 , 进行分割
如果所有属性都进行变化,使用 all 关键字
2D
translate: 移动。
语法:
transform:translate(x,y)//移动位置
特点:
不会影响其他盒子的位置
对行内标签没效果
百分比单位是相对于自身元素的translate:(50%,50%)//这里的50%指盒子的(宽度的50%,高度的50%)
rotate:旋转
语法:
transform:rotate(45deg); //旋转45度