A我學(xué)習(xí)到了什么？
1溫習(xí)day02的知識(shí)點(diǎn)
塊標(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)簽
分組選擇器：
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可以跳過(guò)指定
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:''//可以不寫(xiě)，但是必寫(xiě)語(yǔ)句
}
":after" 偽元素可以在元素的內(nèi)容之后插入新內(nèi)容。
p:after{
content:''//可以不寫(xiě)，但是必寫(xiě)語(yǔ)句
}
//可以設(shè)置標(biāo)簽屬性的樣式
屬性選擇：
div[class='test']{}
//區(qū)分特定的標(biāo)簽以及文件
2css基本樣式的講解
1css背景
背景顏色:background-color
背景圖片:backgorund-image
背景重復(fù):background-repeat
背景吸附:background-attachment:fixed | scroll
//背景位置有兩個(gè)參數(shù),第一個(gè)參數(shù)表示離x軸的距離,y表示離y軸的距離
背景位置:background-position: x y
簡(jiǎn)寫(xiě)background: color image repeat position
background-size屬性指定背景圖片大小。
background-size: x y;
x表示寬度，y表示高度
background-size:cover;
此時(shí)會(huì)保持圖像的縱橫比并將圖像縮放成將完全覆蓋背景定位區(qū)域的最小大小。
相當(dāng)于background-size:100% 100%;
2css文本
color:設(shè)置字體的顏色
顏色是通過(guò)CSS最經(jīng)常的指定：
十六進(jìn)制值 - 如: ＃FF0000
一個(gè)RGB值 - 如: RGB(255,0,0)
顏色的名稱 - 如: red
body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
text-align文本對(duì)齊方式
text-align: right|left|center//左|右|中心
text-decoration文本修飾
text-decoration: underline|overline|line-through
//下劃線|上劃線|刪除線
text-indent文本縮進(jìn)
text-transform文本轉(zhuǎn)換(了解)
text-transform:uppercase|lowercase|capitalize
//大寫(xiě)|小寫(xiě)|首大寫(xiě)
3css字體
//font-family 屬性應(yīng)該設(shè)置幾個(gè)字體名稱作為一種"后備"機(jī)制，
如果瀏覽器不支持第一種字體，他將嘗試下一種字體
p{font-family:Helvetica,Microsoft YaHei}
font-size//大小
font-style:normal | italic//字體樣式：正常|斜體
font-weight:normal | bold | lighter
//字體粗細(xì)：正常|粗體|輕淡
行高:line-height
4css鏈接
這四個(gè)鏈接狀態(tài)是：
a:link - 正常，未訪問(wèn)過(guò)的鏈接
a:visited - 用戶已訪問(wèn)過(guò)的鏈接
a:hover - 當(dāng)用戶鼠標(biāo)放在鏈接上時(shí)
a:active - 鏈接被點(diǎn)擊的那一刻
*若單獨(dú)設(shè)置幾個(gè)鏈接，必須遵守如下規(guī)則：
a:hover 必須跟在 a:link 和 a:visited后面
a:active 必須跟在 a:hover后面
5css列表樣式(針對(duì)ul)
list-style:none;//無(wú)樣式
list-style-type:circle|square
//目錄樣式類型：圓|平方
list-style-image:url("xxx")//圖片
6邊框
border-width 邊框的寬度
border-style 邊框的樣式
border-color 邊框的顏色
可以簡(jiǎn)寫(xiě)成
border： width style color
p{border:1px solid #333}
*邊框-單獨(dú)設(shè)置各邊
p{ border-top:1px solid #ccc;}
7表格(了解)
border-collapse 屬性設(shè)置表格的邊框被折疊成一個(gè)單一的邊框
table{border-collapse:collapse}
//可以在td,th設(shè)置這個(gè)兩個(gè)屬性
colspan:value //跨越的列
rowspan:value //跨越的行
8輪廓屬性（不怎么用）
輪廓（outline）是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用
p{outline:1px solid pink}
9透明：opacity：0~1
visibility:hidden|visible//可見(jiàn)|能見(jiàn)度：隱藏
3css樣式的繼承:子元素對(duì)父元素的繼承
1.width和height
width如果子元素不設(shè)置寬度，默認(rèn)情況下繼承父元素的寬度
height如果父元素不設(shè)置高度，默認(rèn)情況下父元素繼承子元素的高度
2css可以繼承的屬性
文本相關(guān)屬性:
color,text-align,text-decoration,text-transform,text-indent
顏色，文本對(duì)齊，文本裝飾，文本轉(zhuǎn)換，文本縮進(jìn)(內(nèi)聯(lián)標(biāo)簽不能設(shè)置此屬性)
字體相關(guān)屬性:font-family,font-style,font-size,font-weight,line-height
//字體，字體樣式，字體大小，字體粗細(xì)，線高度
列表相關(guān)屬性:list-style//樣式
表格相關(guān)屬性:border-collapse//折疊
其他屬性:cursor,visibility//光標(biāo)樣式，能見(jiàn)度
B我掌握到了什么
1css基本樣式的講解
1css背景
背景顏色:background-color
背景圖片:backgorund-image
背景重復(fù):background-repeat
背景吸附:background-attachment:fixed | scroll
//背景位置有兩個(gè)參數(shù),第一個(gè)參數(shù)表示離x軸的距離,y表示離y軸的距離
背景位置:background-position: x y
簡(jiǎn)寫(xiě)background: color image repeat position
background-size屬性指定背景圖片大小。
background-size: x y;
x表示寬度，y表示高度
background-size:cover;
此時(shí)會(huì)保持圖像的縱橫比并將圖像縮放成將完全覆蓋背景定位區(qū)域的最小大小。
相當(dāng)于background-size:100% 100%;
2css文本
color:設(shè)置字體的顏色
顏色是通過(guò)CSS最經(jīng)常的指定：
十六進(jìn)制值 - 如: ＃FF0000
一個(gè)RGB值 - 如: RGB(255,0,0)
顏色的名稱 - 如: red
body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
text-align文本對(duì)齊方式
text-align: right|left|center//左|右|中心
text-decoration文本修飾
text-decoration: underline|overline|line-through
//下劃線|上劃線|刪除線
text-indent文本縮進(jìn)
text-transform文本轉(zhuǎn)換(了解)
text-transform:uppercase|lowercase|capitalize
//大寫(xiě)|小寫(xiě)|首大寫(xiě)
3css字體
//font-family 屬性應(yīng)該設(shè)置幾個(gè)字體名稱作為一種"后備"機(jī)制，
如果瀏覽器不支持第一種字體，他將嘗試下一種字體
p{font-family:Helvetica,Microsoft YaHei}
font-size//大小
font-style:normal | italic//字體樣式：正常|斜體
font-weight:normal | bold | lighter
//字體粗細(xì)：正常|粗體|輕淡
行高:line-height
4css鏈接
這四個(gè)鏈接狀態(tài)是：
a:link - 正常，未訪問(wèn)過(guò)的鏈接
a:visited - 用戶已訪問(wèn)過(guò)的鏈接
a:hover - 當(dāng)用戶鼠標(biāo)放在鏈接上時(shí)
a:active - 鏈接被點(diǎn)擊的那一刻
*若單獨(dú)設(shè)置幾個(gè)鏈接，必須遵守如下規(guī)則：
a:hover 必須跟在 a:link 和 a:visited后面
a:active 必須跟在 a:hover后面
5css列表樣式(針對(duì)ul)
list-style:none;//無(wú)樣式
list-style-type:circle|square
//目錄樣式類型：圓|平方
list-style-image:url("xxx")//圖片
6邊框
border-width 邊框的寬度
border-style 邊框的樣式
border-color 邊框的顏色
可以簡(jiǎn)寫(xiě)成
border： width style color
p{border:1px solid #333}
*邊框-單獨(dú)設(shè)置各邊
p{ border-top:1px solid #ccc;}
7表格(了解)
border-collapse 屬性設(shè)置表格的邊框被折疊成一個(gè)單一的邊框
table{border-collapse:collapse}
//可以在td,th設(shè)置這個(gè)兩個(gè)屬性
colspan:value //跨越的列
rowspan:value //跨越的行
8輪廓屬性（不怎么用）
輪廓（outline）是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用
p{outline:1px solid pink}
9透明：opacity：0~1
visibility:hidden|visible//可見(jiàn)|能見(jiàn)度：隱藏
C我沒(méi)有掌握
對(duì)于css可以繼承的屬性有點(diǎn)模糊
1.width和height
width如果子元素不設(shè)置寬度，默認(rèn)情況下繼承父元素的寬度
height如果父元素不設(shè)置高度，默認(rèn)情況下父元素繼承子元素的高度
2css可以繼承的屬性
文本相關(guān)屬性:
color,text-align,text-decoration,text-transform,text-indent(內(nèi)聯(lián)標(biāo)簽不能設(shè)置此屬性)
字體相關(guān)屬性:font-family,font-style,font-size,font-weight,line-height
列表相關(guān)屬性:list-style
表格相關(guān)屬性:border-collapse
其他屬性:cursor,visibility
測(cè)評(píng)詳細(xì)頁(yè).png
1.jpg
2.png
4.png
5.png
3.png
