>標簽的分類
####1.1 塊標簽
~~~
h1 ,p,ul,li,dl,dt,dd,
特點:獨占一行,能設置width,height
~~~
####1.2 內聯標簽
~~~
a ,span,i,em,strong
特點:并排顯示,不能設置width,height 不能設置margin-top,margin-bottom
~~~
####1.3 內聯塊
~~~
input,img,button
特點:1.并排顯示,設置width,height
~~~
- 內聯元素和內聯塊元素 塊標簽轉化
~~~
display:block;塊標簽默認值;
display:inline;內聯標簽默認值;
display:inline-block;內聯塊標簽默認;
想轉化成什么就加納個默認值;
~~~
不改變內聯和內聯塊的屬性,實現水平居中
~~~
父級{
text-align:content;
}
~~~
>css選擇器
定義:選定你所要改變的元素的一種方式。
####2.1分類
~~~
(1).css元素選擇器
文檔的元素就是最基本的選擇器
p{color:pink}
(2).class選擇器
.test{color:yellow}
(3).id選擇器
#first{color:blue}
(4).分組選擇器
p,h4{background:gray}
(5).后代選擇器
div>span{} //選取div所有子元素為span的標簽
(6).兄弟選擇器
div+p{}選取緊鄰div之后的第一個兄弟元素
div~p{}選取緊鄰div之后的所有兄弟元素
(7).偽類選擇器
div:hover{}
input:focus{}
(8).偽元素
":before" 偽元素可以在元素的內容前面插入新內容
p:before{
content:''
}
":after" 偽元素可以在元素的內容之后插入新內容。
p:after{
content:''
}
(9).屬性選擇
div[class='test']{}
~~~
####2.2選擇器的優先級別排序
~~~
<div class='test' id='first'>hello world</div>
元素選擇器<class選擇器<ID選擇器<!important
div{color:pink}<div.test{color:blue}<div#first{color:yellow}<div{color:red !important}
~~~
>問題
#####1下劃線
text-decoration:none underline overline