講義地址：https://wizardforcel.gitbooks.io/liyanhui-tutorials/content/2.html
第 17 章 CSS 邊框與背景
邊框：
@charset "utf-8";div{ width: 200px; height: 200px; /*border-width: thin;*//**最細的邊框*/ /*border-width: thick;*//**最粗的邊框*/ /*border-width: medium;*/ /*border-style: none;*/ /*border-style:dashed;*//*破折線邊框*/ /*border-style:dotted;*//**圓點線邊框*/ /*border-style: double;*//*雙線邊框*/ /*border-style: groove;*//*槽線邊框*/ /*border-style: inset;*//*使元素內容具有內嵌效果的邊框*/ /*border-style: outset;*//**使元素內容具有外凸效果的邊框*/ /*border-style: ridge;*//*脊線邊框*/ /*border-style: solid;*//*實線邊框*/ /*border-style: solid; border-color: red; border-width: 3px;*/ border:1px solid red; /*推薦使用*//* border-top-style: solid; border-top-color: blue; border-top-width: 2px;*/ /*border-top:10px blue solid;*/ /*推薦使用*/ /**圓角邊框，css3提供*/ /*border-radius: 10px;*/ /*border-radius: 10px 20px 30px 40px;*//*順序為：左角 右角 右下 左下*/ border-top-right-radius: 30px;/*只設置右上角*/}<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css邊框和背景</title> <link rel="stylesheet" type="text/css" href="css/style8.css"></head><body> <div>我是html5</div></body></html>背景：@charset "utf-8";/*div{ width: 500px; height: 300px; background-color: silver;}*//**如果不設置div b{...}，b元素css樣式背景則隨父元素的設置為silver*//*div b{ background-color: blue;}*//*div b:first-child{ background-color: transparent;}*//**透明色*/body{ /*background-color: silver;*//**設置整個頁面背景顏色*/ /*background-image :url(../timg.jpg);*/ /*background: none;*/ /*background-repeat: repeat-x;*//**背景圖片水平平鋪*/ /*background-repeat: repeat-y;*//**背景圖片垂直平鋪*/ /*background-repeat: no-repeat;*//**禁止平鋪*/ /*background-position: top; /*background-position:right;*//*背景靠右*/ /*background-position:left;*/ /*background-position:center;*/ /*background-position:left bottom;*/ /**size設置*/ /*background-image: url(../timg.jpg);*/ /*background-size: cover;*//**圖片等比例縮放，適用于background-repeat: no-repeat或不設置，背景圖一個自適應大小*/ /*background-size: contain;*//**不設置background-repeat時，至少顯示一個完整的圖，可能存在多個圖*/ /*background-size: 200px 200px;*//**設置圖片大小*/ /*background-size: 100%;*//*100%的顯示圖片背景，并隨窗口縮小等比例縮放，cover雖然也100%顯示，但無法等比例縮放*/ /**attachment設置，css1提供*/ /*background-image: url(../timg.jpg);*/ /*background-attachment: scroll;*//**頁面內容隨背景滾動*/ /*background-attachment: fixed;*//*fixed 屬性會導致背景產生水印效果，拖動滾動條而背景不動*/}div{ width: 500px; height: 300px; border:10px dashed red; padding-right: 50px; background-image: url(../timg.jpg); background-repeat: no-repeat; /*background-origin: border-box;*//**設置背景起始位置,圖片從邊框最邊上開始，在元素盒子內部繪制背景*/ /*background-origin: content-box;*//**設置背景起始位置,在內容盒子內部繪制背景*/ /*background-origin: padding-box;*//**設置背景起始位置,在內邊距盒子內部繪制背景*//* background-clip: border-box; background-clip: content-box; background-clip: padding-box;*/ background: silver url(../timg.jpg) no-repeat top left/100% border-box content-box;}-----------------------------------------------------第 18 章 CSS 表格與列表
@charset "utf-8";table { width: 400px; height: 300px; text-align: center; /*border-collapse: separate;*//*默認值，單元格邊框獨立*/ /*border-collapse: collapse;*//**單元格相鄰邊框被合并，立體邊框線變成實線？*/ /*間距，默認為2px，如果寫為0px還是會有點立體感*/ /*border-spacing: 10px;*//*必須在border-collapse未合并即默認值情況下設置才有效果*/ /*caption-side: bottom;*//**<caption>表格標題從默認的顯示在表格上方變成了顯示在表格下方*/ /*empty-cells: hide;*//**單元格內容為空的時候，沒有邊框，但是border-collapse: collapse;時無效果*/ /*單元格內容過長時，默認情況下會拉伸這個單元格的長度*/ /*table-layout: auto;*//*默認值*/ table-layout: fixed;/*不會拉伸，自動換行，頁面更美觀*/ border:1px solid yellow;/*設置外邊框*/}/**設置內邊框*/table tr th, table tr td { border : 1px solid red;}ul { width:120px; /*list-style-type: none;*/ /*list-style-type: square;*//*li前的標志變為實心方塊*/ /*list-style-type: circle;*/ /*list-style-position: inside;*//**標記位于內容框內部,默認值為outside*/ /*list-style-image: url(../li_pid.jpg);*//*圖片樣式*/ list-style: square inside url(../li_pid.jpg);/*縮寫*/}.sex{ /**基本上只對表格起作用,baseline內容對象與基線對齊*/ /*vertical-align: top; vertical-align: baseline; vertical-align: middle; vertical-align: bottom;*/}b{ vertical-align: sub;/**垂直對齊文本的下標*/ vertical-align: super;/*垂直對齊文本的上標*/}div{ width: 300px; height: 300px; background: silver; text-align: center; /*vertical-align: bottom;*//*無效果無法使用*/}div span{ background: green; /*vertical-align: bottom;*//*無效果無法使用*/ /*vertical-align: -10px;*//*只能用負值，正值無效果*/ vertical-align: -100%;}em{ vertical-align: 100px;}<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css表格與列表</title> <link rel="stylesheet" type="text/css" href="css/style10.css"></head><body> <table border="1"> <caption>人員檔案</caption> <tr> <th>姓名</th> <th>性別</th> <th>年齡</th> </tr> <tr> <td>張三，是一個非常好的青年</td>> <td>男</td>> <td></td>> </tr> <tr> <td>李四</td>> <td>女</td>> <td>28</td>> </tr> <tr> <td>王五<b>2</b></td>> <td class="sex">男</td>> <td>32</td>> </tr> </table> <ul> <li>張三,是一個非常好的青年</li> <li>李四</li> <li>王五</li> <li>馬六</li> </ul><div><span>我是html5<span></div><br><em>內容簡介：</em></embed><textarea rows="10">默認標題在textarea框的左邊靠最下的位置，通過css的vertical-align可以調整標題位置，且要使用像素值為正值</textarea></body></html>
-----------------------------------------------------------------------------------------------------------------------------------第 19 章 CSS 其他樣式1.顏色和透明度
@charset "utf-8";div { width:200px; height: 200px; background-color: green; color : blue; opacity: 0.5;/*透明度，從0-1,背景和文字都會變化,css3支持*/}2.盒子陰影和輪廓
@charset "utf-8";div { width:200px; height: 200px; border: 10px solid green; box-shadow: 10px 10px 5px 1px gray;/*水平偏移量(必填)，垂直偏移量(必填)，模糊值，陰影延伸半徑，顏色，inset設置為內部陰影**/}
輪廓：
| 屬性 | 值 | 說明 | CSS 版本 |
|---|---|---|---|
| outline-color | 顏色 | 外圍輪廓的顏色 | 3 |
| outline-offset | 長度 | 輪廓距離元素邊框邊緣的偏移量 | 3 |
| outline-style | 樣式 | 輪廓樣式，和 border-style 一致 | 3 |
| ontline-witdh | 長度 | 輪廓寬度 | 3 |
| outline | 簡寫 | <顏色> <樣式> <寬度> | 3 |
@charset "utf-8";div { width:200px; height: 200px; border: 10px solid green; box-shadow: 10px 10px 5px 1px gray;/*水平偏移量(必填)，垂直偏移量(必填)，模糊值，陰影延伸半徑，顏色，inset設置為內部陰影**/ outline: dashed 2px;/**輪廓樣式，它和邊框一樣，只不過它可以在邊框的外圍再加一層*/}
3.光標樣式（css1支持）
cursor光標樣式auto,default,none,context-menu,help,pointer,PRogress,wait,cell,crosshair,text,vertical-text,alias,copy,move,no-drop,not-allowed,e-resize,n-resize,ne-resize,nw-resize,s-resize,se-resize,sw-resize,w-resize,ew-resize,ns-resize,nesw-resize,nwse-resize,col-resize,row-resize,all-scroll1
div{cursor: move;}/*光標移到div區域時，變成拖動圖標*/-------------------------------------------------
新聞熱點
疑難解答
