1.HTML標(biāo)簽的分類(lèi)

1.1塊標(biāo)簽

//常用的塊標(biāo)簽
div,p,h1~h6,ul,li,dl,dt,dd
//默認(rèn)的display
display:block

特點(diǎn)：

1.獨(dú)占一行
2.能夠設(shè)置width,height

1.2內(nèi)聯(lián)標(biāo)簽

//常用的內(nèi)聯(lián)標(biāo)簽
a,span,i,em,strong
//默認(rèn)的display
display:inline

特點(diǎn)：

1.并排顯示
2.不能夠設(shè)置width,height
3.不能設(shè)置margin-top,margin-bottom

1.3內(nèi)聯(lián)塊標(biāo)簽

//常用的內(nèi)聯(lián)塊
img,input,button
//默認(rèn)的display
display:inline-block

特點(diǎn)：

1.并排顯示
2.能夠設(shè)置width,height

2.水平居中(內(nèi)聯(lián)元素和內(nèi)聯(lián)塊)

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 給父級(jí)加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偽類(lèi)選擇器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的標(biāo)簽

//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之后的第一個(gè)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、選擇器的優(yōu)先級(jí)

//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}