A我學(xué)習(xí)到了什么捌浩?
1溫習(xí)day01的知識(shí)點(diǎn)
盒子模型:
margin外邊距起宽,border邊框豫尽,padding內(nèi)框的直接畫面調(diào)節(jié)
樣式重置:開發(fā)環(huán)境中的默認(rèn)值
如:*{margin:0箩溃;padding:0紧帕;}
水平居中:
margin-left:auto;
margin-right:auto;
僅限是塊標(biāo)簽的水平居中
常用HTML語義化:
div://塊元素区赵,
p://段落,
h1~h6:標(biāo)題,
img//圖片項(xiàng),
input//對(duì)話框,
a//鏈接,
button//按鍵
套標(biāo)簽:
ul:無序列表挖滤,
li:列表描述;
dl:定義段,
dt:定義描述父款,
dd定義稱述
<ul>
<li></li>
</ul>
<dl>
<dt></dt>
<dd></dd>
</dl>
常用CSS的樣式:
background-color:背景顏色溢谤;
background-image:背景圖片;
color:顏色憨攒;
width:寬度世杀;
herght:高度;
line-herght:行高肝集;
text-aline:文本對(duì)齊方向瞻坝;
border-width:邊框?qū)挾龋?border-style:邊框樣式;
border-color:邊框顏色杏瞻;
p:hover{color:red;}光標(biāo)移動(dòng)到元素變色所刀;
CSS常用選擇器:
p{},元素選擇器衙荐;
class選擇器:.text{};
id:選擇器;
偽選擇器:p:hover浮创;
重要選擇器:忧吟!importinent;
//他們比較級(jí)的大小
//元素<class<id<!importinent
2拓展HTML標(biāo)簽的分類
塊標(biāo)簽:特點(diǎn)是獨(dú)占一行斩披,設(shè)置寬高
div,h1~h6,p,ul,li,dl,dt,dd
默認(rèn)樣式【display:block;】
內(nèi)聯(lián)標(biāo)簽:特點(diǎn)是并排顯示溜族,不能設(shè)置寬高
不能設(shè)置margin-top,margin-bottom
如:a,span,em,strong
默認(rèn)樣式【display:inline;】
內(nèi)聯(lián)塊:特點(diǎn)是并排顯示,可以設(shè)置寬高
button,img,input
默認(rèn)樣式【display:inline-block;】
讓內(nèi)聯(lián)元素和內(nèi)聯(lián)塊元素水平居中
display:block;//以改變默認(rèn)樣式進(jìn)行
margin-left:auto;
margin-right:auto;//僅限塊標(biāo)簽
給父級(jí)加text-align:center//僅限內(nèi)聯(lián)塊標(biāo)簽
3CSS選擇器
分組選擇器:
p,h4雏掠,~{background:gray}//可以設(shè)置標(biāo)簽屬性的樣式
后代選擇器:
div>span{} //選取div所有子元素為span的標(biāo)簽
div span{} //選取div之后的所有span元素
//可以設(shè)置標(biāo)簽屬性的樣式
兄弟選擇器:
div+p{}選取緊鄰div之后的第一個(gè)兄弟元素//僅限下個(gè)元素指定的元素
//div+h3+p可以跳過指定
div~p{}選取緊鄰div之后的所有兄弟元素
//可以設(shè)置標(biāo)簽屬性的樣式
偽類選擇器:
div:hover{}//光標(biāo)移動(dòng)到改變
input:focus{}//光標(biāo)聚焦到改變
//可以設(shè)置標(biāo)簽屬性的樣式
偽元素:
":before" 偽元素可以在元素的內(nèi)容前面插入新內(nèi)容
p:before{
content:''//可以不寫斩祭,但是必寫語句
}
":after" 偽元素可以在元素的內(nèi)容之后插入新內(nèi)容。
p:after{
content:''//可以不寫乡话,但是必寫語句
}
//可以設(shè)置標(biāo)簽屬性的樣式
屬性選擇:
div[class='test']{}
//區(qū)分特定的標(biāo)簽以及文件
B我掌握到了什么
1溫習(xí)day01的知識(shí)點(diǎn)
盒子模型:
margin外邊距摧玫,border邊框,padding內(nèi)框的直接畫面調(diào)節(jié)
樣式重置:開發(fā)環(huán)境中的默認(rèn)值
如:*{margin:0绑青;padding:0诬像;}
水平居中:
margin-left:auto;
margin-right:auto;
僅限是塊標(biāo)簽的水平居中
常用HTML語義化:
div://塊元素,
p://段落,
h1~h6:標(biāo)題,
img//圖片項(xiàng),
input//對(duì)話框,
a//鏈接,
button//按鍵
套標(biāo)簽:
ul:無序列表闸婴,
li:列表描述;
dl:定義段坏挠,
dt:定義描述,
dd定義稱述
<ul>
<li></li>
</ul>
<dl>
<dt></dt>
<dd></dd>
</dl>
常用CSS的樣式:
background-color:背景顏色邪乍;
background-image:背景圖片降狠;
color:顏色;
width:寬度庇楞;
herght:高度榜配;
line-herght:行高;
text-aline:文本對(duì)齊方向吕晌;
border-width:邊框?qū)挾龋?border-style:邊框樣式蛋褥;
border-color:邊框顏色;
p:hover{color:red;}光標(biāo)移動(dòng)到元素變色睛驳;
CSS常用選擇器:
p{},元素選擇器烙心;
class選擇器:.text{};
id:選擇器;
偽選擇器:p:hover乏沸;
重要選擇器:淫茵!importinent;
2拓展HTML標(biāo)簽的分類
塊標(biāo)簽:特點(diǎn)是獨(dú)占一行屎蜓,設(shè)置寬高
div,h1~h6,p,ul,li,dl,dt,dd
默認(rèn)樣式【display:block;】
內(nèi)聯(lián)標(biāo)簽:特點(diǎn)是并排顯示痘昌,不能設(shè)置寬高
不能設(shè)置margin-top,margin-bottom
如:a,span,em,strong
默認(rèn)樣式【display:inline;】
內(nèi)聯(lián)塊:特點(diǎn)是并排顯示,可以設(shè)置寬高
button,img,input
默認(rèn)樣式【display:inline-block;】
讓內(nèi)聯(lián)元素和內(nèi)聯(lián)塊元素水平居中
display:block;//以改變默認(rèn)樣式進(jìn)行
margin-left:auto;
margin-right:auto;//僅限塊標(biāo)簽
給父級(jí)加text-align:center//僅限內(nèi)聯(lián)塊標(biāo)簽
3CSS選擇器
分組選擇器:
p,h4炬转,~{background:gray}//可以設(shè)置標(biāo)簽屬性的樣式
后代選擇器:
div>span{} //選取div所有子元素為span的標(biāo)簽
div span{} //選取div之后的所有span元素
偽類選擇器:
div:hover{}//光標(biāo)移動(dòng)到改變
input:focus{}//光標(biāo)聚焦到改變
//可以設(shè)置標(biāo)簽屬性的樣式
偽元素:
":before" 偽元素可以在元素的內(nèi)容前面插入新內(nèi)容
p:before{
content:''//可以不寫辆苔,但是必寫語句
}
":after" 偽元素可以在元素的內(nèi)容之后插入新內(nèi)容。
p:after{
content:''//可以不寫扼劈,但是必寫語句
}
//可以設(shè)置標(biāo)簽屬性的樣式
屬性選擇:
div[class='test']{}
//區(qū)分特定的標(biāo)簽以及文件
C我沒有掌握的
兄弟選擇器:
div+p{}選取緊鄰div之后的第一個(gè)兄弟元素//僅限下個(gè)元素指定的元素
//div+h3+p可以跳過指定
div~p{}選取緊鄰div之后的所有兄弟元素
//可以設(shè)置標(biāo)簽屬性的樣式
兄弟選擇器驻啤,后代選擇器還是不怎么熟練,可能要多接觸
QQ圖片20170913194942.jpg
QQ圖片20170913193305.png