一、css是什么?作用是什么 層疊樣式表(級聯樣式表) 實現網頁外觀樣式二、css引入方式三種? 內聯樣式
內部樣式表外部樣式表? mystytle.css? ? ? ? ? ? h1{? color:red;}index.html? ? ? 三、css語法? ? 選擇器{? ? 屬性名:屬性值;? ? 屬性名:屬性值;? }h1{? ? color:red;font-size:16px;}四、選擇器? ? 選中html元素的方式方法1.基本選擇器? 標簽選擇? ID選擇器? Class選擇器2.高級選擇器? ? ? 層級選擇器? ? ? ? ? 后代選擇器? E F? ? .root p? 子代選擇器? E>F? ? .root>p? 相鄰兄弟選擇器 E+F? ? .p1+p? ? 通用兄弟選擇器 E~F? ? .p1~p? ? ? 結構偽類選擇器? ? ? ? ? ? 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開頭E[attr=$val]? //屬性attr的值以val結束? ?
元素1
元素2
元素3
元素4
?? 2.文本樣式? color? ? ? 字體顏色? 值: red blue? ? #FFEFD5? ? ? ? text-align? 文本的對齊方式? ? ? ? text-decoration? 文本修飾? text-indent 文本縮進? ?
?3.背景樣式? background-color 背景顏色? background-image? 背景圖片? url("image/1.jpg")? ? ? background-repeat? ? ? background-position
4.列表樣式?
- ? ?
- 列表項1
- 列表項2 ?
?5.鏈接樣式鏈接的樣式，可以用任何CSS屬性（如顏色，字體，背景等）。鏈接狀態：a:link - 正常，未訪問過的鏈接a:visited - 用戶已訪問過的鏈接a:hover - 當用戶鼠標放在鏈接上時a:active - 鏈接被點擊的那一刻6.表格樣式? ? 邊框? ? 折疊邊框? ? 例如:? ? table ,tr,th, td{? ? ? ? ? ? border: 1px solid black;? ? ? ? ? ? border-collapse: collapse;? ? ? ? } 鼠標移入表格選中? ? table tr:hover{? ? ? ? ? ? background: blue;? ? ? ? ? ? color: white;? ? ? ? }
六、盒子模式? ?
?1.所有的html元素都可以看作盒子
2.盒子有那些屬性Border(邊框) - 圍繞在內邊距和內容外的邊框。Margin(外邊距) - 清除邊框外的區域，外邊距是透明的。Padding(內邊距) - 清除內容周圍的區域，內邊距是透明的。Content(內容) - 盒子的內容，顯示文本和圖像。
3.盒子模子寬高計算方式? 默認情況? 元素寬度=width+左內邊距+右內邊距+邊框? ? box-sizing: border-box; 元素寬度=width=內容寬度+左內邊距+右內邊距+邊框七、頁頁布局? ??
1.標準文檔流2.浮動布局? ?
?1. 一個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。? ? ? ? 2. 浮動元素之后的元素將圍繞它。浮動元素之前的元素將不會受到影響。? ? ??
? 3. 清除浮動? ? 3.display屬性? 將塊元素->行內元素->行塊元素? 行內元素->塊元素->行塊元素?
?
2? //行內元素特點: 內容有多寬多高，元素就有多寬多高，width,height不起作用
4.定位布局??
?1.精確定位元素到指定位置,而不會影響其它元素?
?2. position: relative|abosolut|fixed? ? ? ? ? ? ? ? 相對定位|絕對定位|固定定位? ? ??
? 1>相對定位? ? position:relative;? //相對自身位置移動p{? position:relative;? top:10px? left:10px? }
2>絕對定位
