1.HTML标签的分类
1.1 块标签
标签名称 : div(盒子容器),p(段落),h1~h6(标题),ul,li（不排序目录),dl,dt,dd(定义目录)
标签特点 : 独占一行,可以设置width和height
默认显示 : display:block
1.2 内联标签
标签名称 : a(超链接),span(普通字),em(字体倾斜),strong(字体加粗)
标签特点 : 并列显示,不能设置width和height,不能设置margin-top,margin-bottom
默认显示 : display:inline
1.3内联块标签
标签名称 : input(输入框),img(图片),button(按钮)
标签特点 : 并列显示,可以设置width和height
默认显示 : display:inline-block
1.4 如何让内联元素和内联块元素水平居中
块标签可以使用以下方法水平居中:
margin-left:auto;
margin-right:auto;
内联标签(display:inline)以及内联块标签(display:inline-block)
可以通过改变默认显示方法 display:block 改变为块标签后再使用 margin-left:auto; margin-right:auto; 实现水平居中的效果;
以及给父级加 text-align:center;实现水平居中,如下:
div{
width: 300px;
height: 300px;
background-color: pink;
text-align: center;
/*父级中加入此语句能使 内联标签以及内联块标签 达到居中的效果*/
margin-left: auto;
margin-right: auto;
/*以上为块标签居中*/
}
2.CSS选择器
选择你所要改变元素的一种方式
2.1分类
(1) css元素选择器 (文档的元素就是最基本的选择器)
p{color: white}
(2 )class选择器
.test{color: white}
(3) id选择器
#one{color: white}
(4) 分组选择器
p,h4{color: white}
(5) 后代选择器
div>p{color: white} 选择div子目录下所有的p元素,不选择孙目录的p元素
div p{color: white} 选择div目录下面的所有p元素
(6) 兄弟选择器
div+p{color: white} 选取div下面相邻的第一个元素p,如果不是p则不选择
div~p{color: white} 选取div下面的所有p元素
(7) 伪类选择器
p:hover{color:red;} 鼠标移动到p段落时 p文字颜色变成红色
input:focus{background-color:red;} 焦点控制,当鼠标点击输入框时,输入框背景颜色变成红色
(8) 伪元素
":before" 伪元素可以在元素的内容前面插入新内容
p:before{
content:''
}
":after" 伪元素可以在元素的内容之后插入新内容。
p:after{
content:''
}
(9) 属性选择
div[class='test']{}
<div class='test' id='first'>hello world</div>
<h2 class='test' id='first'>hello world</h2>
2.2 选择器的优先级排序
元素选择器<class选择器<ID选择器<!important
div{color:pink}<div.test{color:blue}<div#first{color:yellow}<div{color:red !important}
