一. Css簡(jiǎn)介
1. Css2 ( Cascanding? Style? Sheets ) 層疊樣式表
作用 : 設(shè)置HTML頁(yè)面中的文本內(nèi)容(字體 大小 對(duì)齊方式等) 圖片的外形(寬高 邊框樣式 邊距等) 及頁(yè)面的外觀(guān)顯示樣式
2. Css語(yǔ)法
css規(guī)則主要又兩部分構(gòu)成:? 選擇器? 和? 一條或多條聲明
如? ? h1 { color : red;? font - size : 14px; }
二. Css基礎(chǔ)選擇器
1. 通配符選擇器
用 * 表示? 通配符選擇器可以選擇文檔中所有的標(biāo)簽
如 * { margin : 0;? padding : 0; }
2. 標(biāo)簽選擇器
選擇HTML中的標(biāo)簽作為選擇器
如 div { color : red; }
3. 類(lèi)選擇
用 . 表示? 選取帶有class的標(biāo)簽
如? .box { color : red; }
< div class = "box" > 內(nèi)容 < /div >
4. id選擇器
用 # 表示 選取帶有指定id的標(biāo)簽
如? #box { color : red; }
< div id = "box" > 內(nèi)容 < /div >
注意: id選擇器具有唯一性? 同一個(gè)頁(yè)面中同樣的id中只能出現(xiàn)一次
三. Css引入方式
Css引入方式有三種:
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?. 行內(nèi)式 (內(nèi)聯(lián)樣式)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?. 內(nèi)嵌式? (內(nèi)部樣式)? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?. 外鏈?zhǔn)?(外部樣式i)
1. 行內(nèi)式 (內(nèi)聯(lián)樣式)
< div style = "color: red;? font - size: 18px; " > 內(nèi)容 < /div >
特點(diǎn):? 結(jié)構(gòu)樣式不分離? 代碼冗余? 只作用當(dāng)前標(biāo)簽
2. 內(nèi)嵌式 (內(nèi)部樣式)
將css代碼集中寫(xiě)在head頭部標(biāo)簽中 用style標(biāo)簽包含
< head >
? ? ? ? < style >
? ? ? ? ? ? ? ? ? ? ? ? div { color: red; }
? ? ? ? < /style >
< /head >
特點(diǎn):? 結(jié)構(gòu)樣式不完全分離? 作用于當(dāng)前頁(yè)面
3. 外鏈?zhǔn)?(外部樣式)
使用 link 標(biāo)簽鏈接? 一般寫(xiě)在head頭部標(biāo)簽中
< head >
? ? ? ? < link href = "css文件路徑"? rel = "stylesheet" >
< /head >
link標(biāo)簽屬性:
? ? ? ? ? ? ? ? ? ? ?. herf? css文件路徑
? ? ? ? ? ? ? ? ? ? ?.? rel? ? 文檔與鏈接文檔之間的關(guān)系
特點(diǎn):? 結(jié)構(gòu)樣式完全分離? 作用于多個(gè)頁(yè)面
四. 文本字體屬性
1. Css字體屬性
?. font - size? 字體大小
?. font - family? 字體系列 (微軟雅黑 宋體 楷體等)
?. font - weight? 字體粗細(xì)
屬性:
Ⅰ. bold 粗體
Ⅱ. normal 正常
Ⅲ. 可以使用 100~900 范圍內(nèi)數(shù)值? (700 為加粗? 400 為正常)
?. font - style? 字體樣式
屬性值:
Ⅰ. noemal? 正常
Ⅱ. italic? 傾斜
?. line - height 行高
Ⅰ. 值可以為像素單位 px?
line - height: 30px;
Ⅱ. 也可以設(shè)置數(shù)字 (此值會(huì)與當(dāng)前字體大小相乘來(lái)設(shè)置行高)
line - height: 3;
?.單行文本水平居中和垂直居中
Ⅰ. 水平居中? text - align: center;
Ⅱ. 垂直居中? line - height: 當(dāng)前盒子高度;
2. Css文本屬性
?. color? 文本顏色
?. text - align? 文本對(duì)齊方式
屬性值:
Ⅰ. left? 左對(duì)齊 (默認(rèn)值)
Ⅱ. right? 右對(duì)齊
Ⅲ. center? 居中對(duì)齊
Ⅳ. justify? 兩端對(duì)齊
?. text-decoration? 文本裝飾
屬性值:
Ⅰ. none? 沒(méi)有裝飾 (默認(rèn)值)
Ⅱ. underline? 下劃線(xiàn)
Ⅲ. overline? 上劃線(xiàn)
Ⅳ. line-trough? 刪除線(xiàn)
?. text-indent? 文本首行縮進(jìn) (可以使用px? em)
五. C ss長(zhǎng)度單位
1. px? 像素值? 絕對(duì)長(zhǎng)度單位
2. em? 相對(duì)長(zhǎng)度單位
3. %? 百分比 (相當(dāng)于父標(biāo)簽)
4. rem? 相對(duì)字體長(zhǎng)度單位? (移動(dòng)端)
六. Css顏色表示
1. css顏色有三種寫(xiě)法:
?. 英文單詞? color:? red;
?. 六位十六進(jìn)制? color:? #ffffff;
?. rgb? ? colro:? rgb( 255, 255, 255 )
2. 透明度寫(xiě)法
rgba ( 255, 255, 255, 0.2 );
最后一個(gè)參數(shù)是介于0.0(完全透明) 和 1.0(完全不透明)之間? 即0~1之間取值
七. HTML列表
1. 無(wú)序列表
< ul >
? ? ? ? < li > 內(nèi)容 < /li >
< /ul >
注意: 可以使用 list - style - type : none; 清除無(wú)序列表自帶的小圓點(diǎn)
2. 有序列表
< ol >
? ? ? ? < li > 內(nèi)容 < /li >
< /ol >
3. 自定義列表
< dl >
? ? ? ? < dt > 內(nèi)容 < /dl >
? ? ? ? < dd > 內(nèi)容 < /dd >
< /dl >
八. HTML表格
1. 表格的基本結(jié)構(gòu)
?. table 表格標(biāo)簽
?. tr 行
?. td 單元格? ( th 表格標(biāo)題單元格)
2. 表格完整結(jié)構(gòu)
?. thead? 表格頭部
?. tbody? 表格主體
?. tfoot? 表格底部
?. caption? 表格標(biāo)題
3. 表格屬性
?. boder? 邊框
?. cellspacing? 單元格與單元格之間距離
?. cellpadding? 文字與單元格邊框的距離
4. 合并單元格
?. rowspan? 跨行合并 (上下合并)
?. colspan? 跨列合并 (左右合并)
