一、css是什么?作用是什么 層疊樣式表(級(jí)聯(lián)樣式表) 實(shí)現(xiàn)網(wǎng)頁(yè)外觀樣式二、css引入方式三種? 內(nèi)聯(lián)樣式

內(nèi)部樣式表外部樣式表? mystytle.css? ? ? ? ? ? h1{? color:red;}index.html? ? ? 三、css語(yǔ)法? ? 選擇器{? ? 屬性名:屬性值;? ? 屬性名:屬性值;? }h1{? ? color:red;font-size:16px;}四、選擇器? ? 選中html元素的方式方法1.基本選擇器? 標(biāo)簽選擇? ID選擇器? Class選擇器2.高級(jí)選擇器? ? ? 層級(jí)選擇器? ? ? ? ? 后代選擇器? E F? ? .root p? 子代選擇器? E>F? ? .root>p? 相鄰兄弟選擇器 E+F? ? .p1+p? ? 通用兄弟選擇器 E~F? ? .p1~p? ? ? 結(jié)構(gòu)偽類選擇器? ? ? ? ? ? E F:nth-of-type(n)? F:first-of-type? F:last-of-typeE F:nth-child(n)? ? ? ? ? ? 屬性選擇器? ? E[attr]? ? ? ? //屬性attrE[attr=val]? ? //屬性attr的值以等于valE[attr=^val]? //屬性attr的值以val開(kāi)頭E[attr=$val]? //屬性attr的值以val結(jié)束? ?

?? 2.文本樣式? color? ? ? 字體顏色? 值: red blue? ? #FFEFD5? ? ? ? text-align? 文本的對(duì)齊方式? ? ? ? text-decoration? 文本修飾? text-indent 文本縮進(jìn)? ?

?3.背景樣式? background-color 背景顏色? background-image? 背景圖片? url("image/1.jpg")? ? ? background-repeat? ? ? background-position

4.列表樣式?

? ?
• 列表項(xiàng)1
• 列表項(xiàng)2
?

?5.鏈接樣式鏈接的樣式，可以用任何CSS屬性（如顏色，字體，背景等）。鏈接狀態(tài)：a:link - 正常，未訪問(wèn)過(guò)的鏈接a:visited - 用戶已訪問(wèn)過(guò)的鏈接a:hover - 當(dāng)用戶鼠標(biāo)放在鏈接上時(shí)a:active - 鏈接被點(diǎn)擊的那一刻6.表格樣式? ? 邊框? ? 折疊邊框? ? 例如:? ? table ,tr,th, td{? ? ? ? ? ? border: 1px solid black;? ? ? ? ? ? border-collapse: collapse;? ? ? ? } 鼠標(biāo)移入表格選中? ? table tr:hover{? ? ? ? ? ? background: blue;? ? ? ? ? ? color: white;? ? ? ? }

六、盒子模式? ?

?1.所有的html元素都可以看作盒子

2.盒子有那些屬性Border(邊框) - 圍繞在內(nèi)邊距和內(nèi)容外的邊框。Margin(外邊距) - 清除邊框外的區(qū)域，外邊距是透明的。Padding(內(nèi)邊距) - 清除內(nèi)容周?chē)膮^(qū)域，內(nèi)邊距是透明的。Content(內(nèi)容) - 盒子的內(nèi)容，顯示文本和圖像。

3.盒子模子寬高計(jì)算方式? 默認(rèn)情況? 元素寬度=width+左內(nèi)邊距+右內(nèi)邊距+邊框? ? box-sizing: border-box; 元素寬度=width=內(nèi)容寬度+左內(nèi)邊距+右內(nèi)邊距+邊框七、頁(yè)頁(yè)布局? ??

1.標(biāo)準(zhǔn)文檔流2.浮動(dòng)布局? ?

?1. 一個(gè)浮動(dòng)元素會(huì)盡量向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂? ? ? ? 2. 浮動(dòng)元素之后的元素將圍繞它。浮動(dòng)元素之前的元素將不會(huì)受到影響。? ? ??

? 3. 清除浮動(dòng)? ? 3.display屬性? 將塊元素->行內(nèi)元素->行塊元素? 行內(nèi)元素->塊元素->行塊元素?

?

2? //行內(nèi)元素特點(diǎn): 內(nèi)容有多寬多高，元素就有多寬多高，width,height不起作用

4.定位布局??

?1.精確定位元素到指定位置,而不會(huì)影響其它元素?

?2. position: relative|abosolut|fixed? ? ? ? ? ? ? ? 相對(duì)定位|絕對(duì)定位|固定定位? ? ??

? 1>相對(duì)定位? ? position:relative;? //相對(duì)自身位置移動(dòng)p{? position:relative;? top:10px? left:10px? }

2>絕對(duì)定位