1.今天學了什么
1.HTML標簽的分類
塊標簽:div,p,h1~h6,ul,li,dl,dt,dd,
特點:獨占一行,能設置寬高
屬性:display:block
內聯標簽:a,span,em,strong
特點:并排顯示,不能設置寬高 不能設置margin-top,margin-bottom
屬性:display:inline
內聯塊:button,img,input
特點:并排顯示,可以設置寬高
屬性:display:inline-block
2.如何讓內聯元素和內聯塊元素水平居中
方法1:
display:block
margin-left:auto;
margin-right:auto;
方法2:
給父級加text-align:center
3.css選擇器的分類:
<p class="test"id="first">hello world</p>
<h4>標題</h4>
css元素選擇器1
文檔的元素就是最基本的選擇器
p{color:pink}
class選擇器2
.p{color:pink}
id選擇器3
#p{color:pink}
分組選擇器4
p,h4{color:pink}
后代選擇器5
div>p{}選取div所有子元素為p的標簽
div p{}選取div后的所有p標簽
兄弟選擇器6
div+p{}選取緊鄰div之后的第一個p標簽
div~p{}選取緊鄰div之后的所有p標簽
屬性選擇器7
div[class='test']{}
偽類選擇器8
div:hover{}
input:focus{}
4.選擇器的優先級排序
元素選擇器<class選擇器<id選擇器<!important
div{color:pink}<div.p{color:pink}<div#p{color:pink}<div{color:pink!important}
5.偽元素
":before''偽元素可以在元素的內容前面插入新內容
列: p:before{
content:''
}
''after''偽元素可以在元素的內容之后插入新內容
列: p:after{
content:''
}
2.我掌握了的
1.HTML標簽的分類
塊標簽:div,p,h1~h6,ul,li,dl,dt,dd,
特點:獨占一行,能設置寬高
屬性:display:block
內聯標簽:a,span,em,strong
特點:并排顯示,不能設置寬高 不能設置margin-top,margin-bottom
屬性:display:inline
內聯塊:button,img,input
特點:并排顯示,可以設置寬高
屬性:display:inline-block
2.如何讓內聯元素和內聯塊元素水平居中
方法1:
display:block
margin-left:auto;
margin-right:auto;
方法2:
給父級加text-align:center
3.css選擇器的分類:
<p class="test"id="first">hello world</p>
<h4>標題</h4>
css元素選擇器1
文檔的元素就是最基本的選擇器
p{color:pink}
class選擇器2
.p{color:pink}
id選擇器3
#p{color:pink}
分組選擇器4
p;h4{color:pink}
后代選擇器5
div>p{}選取div所有子元素為p的標簽
div p{}選取div后的所有p標簽
兄弟選擇器6
div+p{}選取緊鄰div之后的第一個p標簽
div~p{}選取緊鄰div之后的所有p標簽
偽類選擇器8
div:hover{}
input:focus{}
5.偽元素
":before''偽元素可以在元素的內容前面插入新內容
列: p:before{
content:''
}
''after''偽元素可以在元素的內容之后插入新內容
列: p:after{
content:''
}
4.選擇器的優先級排序
元素選擇器<class選擇器<id選擇器<!important
div{color:pink}<div.p{color:pink}<div#p{color:pink}<div{color:pink!important}
3.我沒掌握的
3.css選擇器的分類:
屬性選擇器7
div[class='test']{}
