1.HTML标签的分类
1.1块标签
//常用的块标签
div,p,h1~h6,ul,li,dl,dt,dd
//默认的display
display:block
特点：
1.独占一行
2.能够设置width,height
1.2内联标签
//常用的内联标签
a,span,i,em,strong
//默认的display
display:inline
特点：
1.并排显示
2.不能够设置width,height
3.不能设置margin-top,margin-bottom
1.3内联块标签
//常用的内联块
img,input,button
//默认的display
display:inline-block
特点：
1.并排显示
2.能够设置width,height
2.水平居中(内联元素和内联块)
2.1 display:block
//HTML
<span>span</span> <br/>
<button>btn</button>
//css
<style>
span,button{
display:block;
width:100px;
margin-left:auto;
margin-right:auto;
}
</style>
2.2 给父级加text-align:center
//HTML
<div>
<span>span</span> <br/>
<button>btn</button>
</div>
//css
<style>
div{
text-align:center
}
</style>
3.选择器
3.1 css元素选择器
3.2 class元素
3.3 id选择器
//HTML
<p class=”test” id=”two”>hello world</p>
//css
<style>
//元素选择器
p{}
//class选择器
.test{}
//id选择器
#two{}
</style>
3.4伪类选择器hover,focus
//HTML
<input type="text"/>
<p>hello world</p>
//css
input:focus{
background-color:red;
}
p:hover{
color:pink;
}
3.5分组选择器
//HTML
<div>div</div>
<span>span</span>
<p>hello world</p>
//css
div,span,p{
color:pink;
}
3.6后代选择器
//HTML
<div>
<p>hello world</p>
<p>hello world</p>
<ul>
<li><p>hello world</p></li>
<li><p>hello world</p></li>
</ul>
</div>
div>p //选取div所有子元素为p的标签
//css
div>p{
color:pink;
}
div p //选取div之后的所有元素
//css
div p{
color:red;
}
3.7兄弟选择器
//HTML
<div>div</div>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
div+p //选中div之后的第一个p元素
//css
div+p{
color:red;
}
div~p //选中div之后的所有p元素
//css
div~p{
color:red;
}
3.8伪元素
//HTML
<p>hello world</p>
//css
p:before{
content:"我是前面";
*display:block;*
}
p:after{
content:"我是后面";
* display:block;*
}
3.9属性选择器(了解)
//HTML
<p class="one">hello world</p>
//css
<style>
p[class="one"]{
color:red;
}
</style>
4、选择器的优先级
//HTML
<div class='test' id='first'>hello world</div>
~~
元素选择器<class选择器<ID选择器<!important
div{color:pink}<.test{color:blue}<#first{color:yellow}<div{color:red !important}
