A.今天學(xué)了什么
1.css背景
背景顏色:background-color
背景圖片:background-image:url("")
背景重復(fù)：background-repeat
背景吸附:background-attachment:fixed| scroll |
背景位置:background-size 屬性指定背景圖片大小
background-size:x y;(x表示寬,y表示高)
background-size:cover;
background-size:100% 100%;
可以簡寫成:background:color image repeat attachment position
2.css文本
text-align 文本對(duì)齊方式
text-align:center; 居中對(duì)齊
text-align:left; 靠左對(duì)齊
text-align:right; 靠右對(duì)齊
text-decoration 文本修飾
text-transform 文本轉(zhuǎn)換
text-indent文本縮進(jìn)
3.css字體
font-size 字體大小
font-family 字體
font-weight 字體粗細(xì)
font-style 字體樣式
line-height 行高
4.css鏈接
a:link 正常沒訪問
a:visited 訪問過
a:hover 鼠標(biāo)接觸
a:active 鏈接被點(diǎn)擊
規(guī)則:a:link與a:visited兩者對(duì)立,a:hover必須跟在a:link或者a:visited后面
a:active必須跟在a:hover后面
5.css列表樣式
list-style:none;//清楚列表樣式
list-style-type:circle 列表標(biāo)簽形狀
list-style-image:url("") 自定義列表形狀
6.邊框
border-width: 邊框?qū)挾?border-height: 邊框高度
border-color 邊框顏色
可以簡寫成:border:1px solid red;
border-top-style:dotted; 上邊框形狀
border-right-style:solid; 右邊框形狀設(shè)置
7.表格
border-collpse 折疊邊框
colspan:value; //跨越的列
rowspan:value; //跨越的行
8.輪廓屬性
outline 輪廓
p{ outline:1px solid black}
透明:opacity:0.5; 半透明
可見性visibility:hidden|visible
9.css樣式繼承
width
如果子元素不設(shè)置寬度,默認(rèn)子元素繼承繼承父元素寬度
height
如果父元素不設(shè)置高度,默認(rèn)父元素繼承子元素的高度
10.css可以繼承的屬性
文本相關(guān)屬性
color
text-align
text-decoration
text-transform
text-indent
字體相關(guān)屬性
font-family
font-style
font-size
font-weight
line-height
列表相關(guān)屬性
list-style
表格相關(guān)屬性
border-collapse
其他屬性
cursor:visibility
11.box-sizing:border-box
box-sizing:border-box; 設(shè)置padding和border,它的寬度還是會(huì)保持不變
box-sizing:content-box; 默認(rèn), 設(shè)置padding和border,寬度會(huì)發(fā)生改變
12.float浮動(dòng)
目的：為了讓元素并排顯示
13.如何清除浮動(dòng)
1:給兄弟元素加 clear:both;
2:給父級(jí)加overflow:hidden;
3:用偽元素,給父級(jí)內(nèi)容生成
.row:after{
display:table;
content:"";
clear:both;
}
14.定位position
relative 相對(duì)的
absolute絕對(duì)的
B.今天掌握了什么
1.css樣式繼承
width
如果子元素不設(shè)置寬度,默認(rèn)子元素繼承繼承父元素寬度
height
如果父元素不設(shè)置高度,默認(rèn)父元素繼承子元素的高度
2.css可以繼承的屬性
文本相關(guān)屬性
color
text-align
text-decoration
text-transform
text-indent
字體相關(guān)屬性
font-family
font-style
font-size
font-weight
line-height
列表相關(guān)屬性
list-style
表格相關(guān)屬性
border-collapse
其他屬性
cursor:visibility
3.表格
border-collpse 折疊邊框
colspan:value; //跨越的列
rowspan:value; //跨越的行
4.輪廓屬性
outline 輪廓
p{ outline:1px solid black}
透明:opacity:0.5; 半透明
可見性visibility:hidden|visible
5.css列表樣式
list-style:none;//清楚列表樣式
list-style-type:circle 列表標(biāo)簽形狀
list-style-image:url("") 自定義列表形狀
6.邊框
border-width: 邊框?qū)挾?border-height: 邊框高度
border-color 邊框顏色
可以簡寫成:border:1px solid red;
border-top-style:dotted; 上邊框形狀
border-right-style:solid; 右邊框形狀設(shè)置
7.css字體
font-size 字體大小
font-family 字體
font-weight 字體粗細(xì)
font-style 字體樣式
line-height 行高
8.css鏈接
a:link 正常沒訪問
a:visited 訪問過
a:hover 鼠標(biāo)接觸
a:active 鏈接被點(diǎn)擊
規(guī)則:a:link與a:visited兩者對(duì)立,a:hover必須跟在a:link或者a:visited后面
a:active必須跟在a:hover后面
9.css背景
背景顏色:background-color
背景圖片:background-image:url("")
背景重復(fù)：background-repeat
背景吸附:background-attachment:fixed| scroll |
背景位置:background-size 屬性指定背景圖片大小
background-size:x y;(x表示寬,y表示高)
background-size:cover;
background-size:100% 100%;
可以簡寫成:background:color image repeat attachment position
10.css文本
text-align 文本對(duì)齊方式
text-align:center; 居中對(duì)齊
text-align:left; 靠左對(duì)齊
text-align:right; 靠右對(duì)齊
text-decoration 文本修飾
text-transform 文本轉(zhuǎn)換
text-indent文本縮進(jìn)
11.box-sizing:border-box
box-sizing:border-box; 設(shè)置padding和border,它的寬度還是會(huì)保持不變
box-sizing:content-box; 默認(rèn), 設(shè)置padding和border,寬度會(huì)發(fā)生改變
12.float浮動(dòng)
目的：為了讓元素并排顯示
13.如何清除浮動(dòng)
1:給兄弟元素加 clear:both;
2:給父級(jí)加overflow:hidden;
3:用偽元素,給父級(jí)內(nèi)容生成
.row:after{
display:table;
content:"";
clear:both;
}
14.定位position
relative 相對(duì)的
absolute絕對(duì)的
C.今天沒有掌握什么
今天全部掌握了
