1、1.css引用方式：內(nèi)聯(lián)式<style> div color:red; </style>行內(nèi)式<div style="color:green">外聯(lián)式<link href="css/css1.css" rel="stylesheet">import方式<style> import url("css/css1.css");</style>2.相對路徑：<link href="css/css1.css" rel="

2、;stylesheet"> ./返回上一級目錄 絕對路徑：<link href="E:/web Test-43/css/css1.css" rel="stylesheet">3. 表格：colspan 列合并 rowspan 行合并 cellspacing 單元格間距<table cellspacing="0"></table><tr> <td colspan="2">a1</td><!-行-></tr>

3、<tr> <td rowspan="2">b1</td><!-列-></tr>固定表格布局table table-layout:fixed;如何讓表格邊框為1px方法1：用邊框的上下左右調(diào)整方法2：border-collapse:collapse 表格邊框合并為單一邊框 默認(rèn)：separate <style> table border-collapse:collapse; </style>列間隔 行間隔:border-spacing border-spacing:10px 5px;文字水平對

4、齊 text-align - left center righttable text-align:center; 空單元格 empty-cells:hide隱藏空單元格 show顯示空單元格table empty-cells:hide; 表格居中table margin: auto; 垂直對齊 vertical-align - top middle bottomtable tr td vertical-align:top; 4.圓角問題：border-bottom-left-radius: ;border-bottom-right-radius: ;border-top-left-radius

5、: ;border-top-right-radius: ;border-radius: 10px 0px 0px 10px;5. 偽類：hover-鼠標(biāo)懸停table tr:hover background-color: blue; -行懸停table tr td:hover background-color: blue; -每個表格懸停table tr th:hover background-color:red; -表頭懸停6.表頭<!-th-><tr> <th>t1</th> <th>t2</th> <th>

6、;t3</th></tr>7. 表格當(dāng)中添加表格<table class="t1"> <tr><td> <table class="t2"> <tr> <td></td> </tr> </table> </td></tr></table>8. 透明度：.uname:hover background-color: red; opacity: 0.2;9.焦點：.pwd:focus backg

7、round-color: green; width: 300px;10.表單及表單控件: action:提交地址 action=""提交當(dāng)前頁 method:提交方式 get-默認(rèn) post-更加平安<form action="" method="post"></form>1<!-文本輸入控件-><input type="text" name="uname" value="uname">2<!-密碼輸入控件-><

8、;input type="password" name="pwd" value="pwd>3<!-按鈕控件-> 1<button>登錄</button> 2<input type="button" value="登錄按鈕" name="but01">4<!-提交按鈕 整體刷新-> -ajax 局部刷新<input type="submit" value="登錄" name=&

9、quot;but02">5<!-重置按鈕-><input type="reset" value="重置" name="but03">6<!-單項選擇控件 默認(rèn)選中屬性：checked-> -value="不同" name="相同"<input type="radio" value="nan" name="r1">男<input type="radio&quo

10、t; value="nv" name="r1">女7<!-復(fù)選控件 默認(rèn)選中屬性：checked-> -value="不同" name="相同"愛好：<input type="checkbox" value="xx" name="c1" >學(xué)習(xí) <input type="checkbox" value="yx" name="c1" >游戲 <inpu

11、t type="checkbox" value="sj" name="c1" >睡覺8<!-下拉列表 multiple:多項選擇 selected:默認(rèn)->城市：<select multiple> <option class="p01" selected>北京</option> <option class="p01">上海</option> <option class="p01">哈爾濱

12、</option> </select>9<!-多行文本控件->簡介：<textarea rows="20" cols="30"></textarea>10<!-上傳文件控件->上傳文件：<input type="file">11<!-隱藏控件-><input type="hidden">12<!-html5表單控件-><form action=""> <!-e

13、mail控件-> <input type="email"> <!-網(wǎng)址-> <input type="url"> <!- -> <input type="tel"> <!-日期-> <input type="date" value="2021-01-01"> <input type="time"> <input type="datetime-local&quo

14、t;> <input type="month"> <input type="week"> <!-<input type="datetime">不好使-> <!-數(shù)值控件-> <input type="number"> <!-范圍控件-> <input type="range" value="25" min="0" max="100" step

15、="1"> <!-顏色控件-> <input type="color"> <!-搜索控件-> <input type="search"></form>11. 外邊距margin-left margin-right margin-top margin-bottom 1元素盒子垂直排列，margin上下合并，取最大值。 2元素盒子水平排列，margin左右累加 margin允許有負(fù)值margin:20px; 四邊margin:20px 40px; 上下 左右margin:2

16、0px 180px 200px; 上 左右 下margin:20px 700px 80px 100px; 上 右 下 左12. 內(nèi)邊距 padding-left padding-right padding-top padding-bottompadding 不允許負(fù)值padding:50px; 四邊padding:30px 40px; 上下 左右padding:20px 20px 40px; 上 左右 下padding:20px 40px 20px 40px; 上 右 下 左13. 加粗：font-weight: border 100900;簡寫：font:italic bolder 20px

17、 arial ;簡寫：20px arial 必寫 順序不能顛倒14.背景簡寫：background: red url("") no-repeat fixed top;簡寫 順序可變15.字體單位：px 像素cm 厘米pt 磅in 英寸百分比 對默認(rèn)字體縮放不同瀏覽器默認(rèn)字體不同，默認(rèn)最小字體也不同em 字號倍數(shù)，相對于默認(rèn)字體父元素或瀏覽器/font-size:2em;/pt cm in 200%原根底上放大 50%原根底上縮小 em成倍數(shù)放大/16.使紅框固定大小labelwidth: 100px; border:1px solid red; display: inlin

18、e-block;<label>email:</label><label>user name:</label>17.表示label標(biāo)簽要綁定的HTML元素,你點擊這個標(biāo)簽的時候,所綁定的元素將獲取焦點<label for="inp01">email:</label><input type="text" id="inp01">18. 顏色的表示方式 1顏色名 如red color:red; 2rgb() 范圍0-255 red green blue 黑：r

19、gb(0,0,0) 白：rgb(255,255,255) color:rgb(255,0,0) 3十六進(jìn)制表示，如#fea230color:#ff0000; 4十六進(jìn)制簡寫：#223344簡寫為 #234 color:#234;19. 背景圖片定位background-position:top right;簡寫：background:url("images/1.jpg") no-repeat top right;20.CSS3 陰影box-shadow:inset內(nèi)陰影，省略為外陰影水平偏移量，垂直偏移量，陰影模糊度，陰影大小，陰影顏色box-shadow: 10px 10

20、px 10px 10px black; 外陰影box-shadow:inset 10px 10px 10px 10px black; 內(nèi)陰影21. 偽類：被選中被激活.d01:active background: blue;22.先隱藏，鼠標(biāo)懸浮時顯示隱藏的模塊必須被包含在懸停的模塊里.d02 /*隱藏*/ display: none;.d01:hover .d02 /*顯示*/ display: block;<div class="d01"> <div class="d02"></div> </div>2

21、3. line-height:10px; /行高 /與height所設(shè)值相同時，文字垂直居中24.塊級元素：與同級元素豎直排列，且左右撐滿 如：div ul li p dd dt dl行級元素：與同級元素橫向排列，且內(nèi)容自適應(yīng)，不會左右撐滿 如：span a img input span a：寬高不能改變 img input：寬高能改變特例標(biāo)準(zhǔn)流static：css規(guī)定的默認(rèn)的塊級元素與行級元素的排列方式display: block; 將當(dāng)前元素轉(zhuǎn)換為塊級元素display: inline; 將當(dāng)前元素轉(zhuǎn)換為行級元素display: inline-block; 行級塊元素25.display

22、與 visibility區(qū)別？display 不占用空間后元素補位 visibility 占用空間保存原元素空間 display: none; /隱藏 display: block; /顯示 visibility: hidden; /隱藏 visibility: visible; /顯示26.浮動 float:left; float:right; 1)浮動的元素會脫離標(biāo)準(zhǔn)流 2)如前面有浮動元素，會依次排在后面 3)浮動是以標(biāo)準(zhǔn)流所在位置為起始點 4)同高度元素橫向排滿后，會被“擠到下面 5)不同高度元素橫向排滿后，擠下后會被其他元素“卡住 6)去除浮動：clear:both/left/rig

23、ht; 7)一個div的范圍是由它里面的標(biāo)準(zhǔn)流決定的，與里面浮動的內(nèi)容無關(guān)27.絕對定位 1)position: absolute; left right top bottom 2)對定位脫離標(biāo)準(zhǔn)流 3)絕對定位的元素是以它最近的一個已經(jīng)定位的祖先元素為基準(zhǔn)進(jìn)行偏移 如果沒有已經(jīng)定位的祖先元素，那么會以瀏覽器窗口為基準(zhǔn)進(jìn)行偏移 4)多個元素絕對定位，后面定位的元素的層級會高于前面覆蓋之前的元素 5)z-index 設(shè)定層級28.相對定位 1)position: relative; left right top bottom 2)相對定位不脫離標(biāo)準(zhǔn)流 3)相對定位元素會相對于它原來的位置進(jìn)行偏移

24、，不受父元素影響 /相對定位、絕對定位允許負(fù)值 /相對定位、絕對定位對浮動元素依然有效29. position:static; 恢復(fù)標(biāo)準(zhǔn)流30. <!-選項卡特效-><style>.tab1_content display: none;.tab1:hover .tab1_content display: block;<style><div class="tab1"> tab1 <div class="tab1_content">11111111111</div></div>

25、;31.<!-列表->列表類型list-style-type: circle;空心list-style-type: disc;實心list-style-type: square;實心正方形list-style-type: decimal;數(shù)字list-style-type: decimal-leading-zero；零開頭的數(shù)字標(biāo)記list-style-type: lower-roman;小寫羅馬list-style-type: upper-roman;大寫羅馬列表縮進(jìn)list-style-position: inside;列表圖片list-style-image: url(&qu

26、ot;images/1.jpg");簡寫 順序不能改變list-style:circle inside url("images/1.jpg");取消樣式list-style: none;<!-無序列表-><ul> <li>a111111111</li> <li>a222222222</li> <li>a333333333</li></ul><!-有序列表-><ol> <li>b111111111</li> &l

27、t;li>b222222222</li> <li>b333333333</li></ol><!-定義列表-><dl> <dt>計算機圖書</dt> <dd>css計算</dd> <dd>java應(yīng)用</dd> <dt>幼兒圖書</dt> <dd>365故事</dd> <dd>唐詩300</dd></dl>32.固定定位 1)position: fixed; lef

28、t right top bottom 2)固定定位脫離標(biāo)準(zhǔn)流只有相對定位不脫離標(biāo)準(zhǔn)流 3)固定定位元素是以瀏覽器窗口或其他顯示設(shè)備窗口為基準(zhǔn)進(jìn)行偏移 4)固定定位對浮動元素依然有效33.盒子模型34. 盒子模型一.標(biāo)準(zhǔn)模式嚴(yán)格模式strictmode:瀏覽器按w3c標(biāo)準(zhǔn)解析執(zhí)行代碼怪異模式兼容模式quirkmode:使用瀏覽器自己的方式解析執(zhí)行代碼 由于不同瀏覽器解析執(zhí)行的方式不同 所以稱之為怪異模式二.如何檢測當(dāng)前執(zhí)行模式alert(window.top.document patMode);輸出：css1compat 標(biāo)準(zhǔn)模式 backcompat 怪異模式 (ie盒子模型：實際寬度=wid

29、th+margin)？三.標(biāo)準(zhǔn)模式與怪異模式的區(qū)別標(biāo)準(zhǔn)模式：實際寬度=width+border+padding+margin怪異模式：實際寬度=width+border+margin 注意：ie6ie7ie8在怪異模式下會以此方式顯示 其他高級瀏覽器在怪異模式下依然以標(biāo)準(zhǔn)模式顯示 實際寬度=width+border+margin4. 如何區(qū)別？ 1.html5：有<!DOCTYPE html>表示為 標(biāo)準(zhǔn)模式 2.html4： (1)<!DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.01/EN :/ /TR/html4/lo

30、ose.dtd"> (2)<!DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN :/ /TR/html4/strict.dtd"> (3)<!DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.01 Frameset/EN :/ /TR/html4/frameset.dtd">五.border：占用空間outline:不占用空間CSS框模型Box Model規(guī)定了元素框處理元素 內(nèi)容、內(nèi)邊框、邊框、外邊框

31、 的方式六.html結(jié)構(gòu)css表現(xiàn)35.html框架 <!-過時-><frameset cols="20%,80%"> <!-列-><frame></frameset><frameset rows="20%,80%"> <!-行-><frame></frameset><frame>定義name 使超鏈接在定義mane的另一個模塊中翻開36.內(nèi)聯(lián)框架<a href="images/2.jpg" target=&q

32、uot;if1name">圖片1</a><a href="test15.html" target="if1name">網(wǎng)頁2</a><!-內(nèi)聯(lián)框架-><iframe src="images/1.jpg" class="if1" name="if1name"></iframe>兩個超鏈接點擊后在名為if1name的內(nèi)聯(lián)框架中顯示37.<!-固定寬度布局-> <style> 1)浮動法 .

33、header,.footer,.container margin:0 auto; .header,.footer width: 400px; height: 50px; border: 1px solid #ff0000; float: left; .container width: 400px; height: 250px; .content width: 298px; height: 248px; border: 1px solid #ff0000; float: left; .side width: 98px; height: 248px; border: 1px solid #ff00

34、00; float: right; 2)定位法 .header,.footer,.container margin:0 auto; .header,.footer,.container width: 400px; height: 50px; border: 1px solid #ff0000; position: relative; top:50px; .container width: 400px; height: 250px; position: relative; top:50px; .content width: 298px; height: 248px; border: 1px so

35、lid #ff0000; position: absolute; top:0px; left:0px; .side width: 100px; height: 248px; border: 1px solid #ff0000; position: absolute; top:0px; left:300px; 3)display法table法 .header,.footer,.container margin:0 auto; .header,.footer width: 400px; height: 50px; border: 1px solid #ff0000; .container widt

36、h: 400px; height: 250px; border: 1px solid #ff0000; display: table; .content border: 1px solid #ff0000; display: table-cell; .side border: 1px solid #ff0000; display: table-cell; </style></head><body><div class="header"></div><div class="container"> <