A.今天学了什么
1.html的分类
块标签
特点:1.独占一行, 2.可以改变宽高
属性:display:block(块属性)
常见的块标签有: div,p,h1~h6,ul,li,dl,dt,dd.
内联标签
特点:并排显示,不能改变宽高,不能设置margin-top和margin-bottom
属性:display:inline
常见的内联标签有:a,span,em,strong
内联块标签
特点:并排显示,能改变宽高
属性:display:inline-block
常用的块联标签:img,input,button
2.选择器
分组选择器
p,h4{ color:blue;}
后代选择器
1.子类选择器:div>p{color:blue;}
2.后代选择器 div p{ color:blue;}
兄弟选择器
1.选择邻近的第一个兄弟 div+p{color:blue;}
2.选择所有的兄弟(可跳过部分非兄弟) div~p{color:blue;}
伪类选择器
1.div:hover{color:blue} 鼠标触碰div变蓝色
2.div:focus{color:blue} 鼠标点击div变蓝色
3.如何让内联元素和内联块元素水平居中
方法一:
display:block;
margin-left:auto;
margin-right:right;
方法二:
在其父类加入代码
text-align:center;
4.伪元素
p:before{
content:""; 可以在p元素之前插入新内容
}
p:after{
content:""; 可以在p元素之后插入新内容
}
5.属性选择
div[class="box1"]{color:blue;} div的class选择器为"box1"的 变蓝色
B.今天掌握了什么
1.如何让内联元素和内联块元素水平居中
方法一:
display:block;
margin-left:auto;
margin-right:right;
方法二:
在其父类加入代码
text-align:center;
2.伪元素
p:before{
content:""; 可以在p元素之前插入新内容
}
p:after{
content:""; 可以在p元素之后插入新内容
}
3.属性选择
div[class="box1"]{color:blue;} div的class选择器为"box1"的 变蓝色
4.html的分类
块标签
特点:1.独占一行, 2.可以改变宽高
属性:display:block(块属性)
常见的块标签有: div,p,h1~h6,ul,li,dl,dt,dd.
内联标签
特点:并排显示,不能改变宽高,不能设置margin-top和margin-bottom
属性:display:inline
常见的内联标签有:a,span,em,strong
内联块标签
特点:并排显示,能改变宽高
属性:display:inline-block
常用的块联标签:img,input,button
5.选择器
分组选择器
p,h4{ color:blue;}
后代选择器
1.子类选择器:div>p{color:blue;}
2.后代选择器 div p{ color:blue;}
兄弟选择器
1.选择邻近的第一个兄弟 div+p{color:blue;}
2.选择所有的兄弟(可跳过部分非兄弟) div~p{color:blue;}
伪类选择器
1.div:hover{color:blue} 鼠标触碰div变蓝色
2.div:focus{color:blue} 鼠标点击div变蓝色
C.今天没有掌握什么
全部掌握了,明天加油
网友评论