講義地址：https://wizardforcel.gitbooks.io/liyanhui-tutorials/content/2.html
第 17 章 CSS 邊框與背景
邊框：
@charset "utf-8";div{ width: 200px; height: 200px; /*border-width: thin;*//**最細(xì)的邊框*/ /*border-width: thick;*//**最粗的邊框*/ /*border-width: medium;*/ /*border-style: none;*/ /*border-style:dashed;*//*破折線邊框*/ /*border-style:dotted;*//**圓點(diǎn)線邊框*/ /*border-style: double;*//*雙線邊框*/ /*border-style: groove;*//*槽線邊框*/ /*border-style: inset;*//*使元素內(nèi)容具有內(nèi)嵌效果的邊框*/ /*border-style: outset;*//**使元素內(nèi)容具有外凸效果的邊框*/ /*border-style: ridge;*//*脊線邊框*/ /*border-style: solid;*//*實(shí)線邊框*/ /*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;*//*順序?yàn)椋鹤蠼?右角 右下 左下*/ border-top-right-radius: 30px;/*只設(shè)置右上角*/}<!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;}*//**如果不設(shè)置div b{...}，b元素css樣式背景則隨父元素的設(shè)置為silver*//*div b{ background-color: blue;}*//*div b:first-child{ background-color: transparent;}*//**透明色*/body{ /*background-color: silver;*//**設(shè)置整個(gè)頁面背景顏色*/ /*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設(shè)置*/ /*background-image: url(../timg.jpg);*/ /*background-size: cover;*//**圖片等比例縮放，適用于background-repeat: no-repeat或不設(shè)置，背景圖一個(gè)自適應(yīng)大小*/ /*background-size: contain;*//**不設(shè)置background-repeat時(shí)，至少顯示一個(gè)完整的圖，可能存在多個(gè)圖*/ /*background-size: 200px 200px;*//**設(shè)置圖片大小*/ /*background-size: 100%;*//*100%的顯示圖片背景，并隨窗口縮小等比例縮放，cover雖然也100%顯示，但無法等比例縮放*/ /**attachment設(shè)置，css1提供*/ /*background-image: url(../timg.jpg);*/ /*background-attachment: scroll;*//**頁面內(nèi)容隨背景滾動(dòng)*/ /*background-attachment: fixed;*//*fixed 屬性會(huì)導(dǎo)致背景產(chǎn)生水印效果，拖動(dòng)滾動(dòng)條而背景不動(dòng)*/}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;*//**設(shè)置背景起始位置,圖片從邊框最邊上開始，在元素盒子內(nèi)部繪制背景*/ /*background-origin: content-box;*//**設(shè)置背景起始位置,在內(nèi)容盒子內(nèi)部繪制背景*/ /*background-origin: padding-box;*//**設(shè)置背景起始位置,在內(nèi)邊距盒子內(nèi)部繪制背景*//* 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;*//*默認(rèn)值，單元格邊框獨(dú)立*/ /*border-collapse: collapse;*//**單元格相鄰邊框被合并，立體邊框線變成實(shí)線？*/ /*間距，默認(rèn)為2px，如果寫為0px還是會(huì)有點(diǎn)立體感*/ /*border-spacing: 10px;*//*必須在border-collapse未合并即默認(rèn)值情況下設(shè)置才有效果*/ /*caption-side: bottom;*//**<caption>表格標(biāo)題從默認(rèn)的顯示在表格上方變成了顯示在表格下方*/ /*empty-cells: hide;*//**單元格內(nèi)容為空的時(shí)候，沒有邊框，但是border-collapse: collapse;時(shí)無效果*/ /*單元格內(nèi)容過長時(shí)，默認(rèn)情況下會(huì)拉伸這個(gè)單元格的長度*/ /*table-layout: auto;*//*默認(rèn)值*/ table-layout: fixed;/*不會(huì)拉伸，自動(dòng)換行，頁面更美觀*/ border:1px solid yellow;/*設(shè)置外邊框*/}/**設(shè)置內(nèi)邊框*/table tr th, table tr td { border : 1px solid red;}ul { width:120px; /*list-style-type: none;*/ /*list-style-type: square;*//*li前的標(biāo)志變?yōu)閷?shí)心方塊*/ /*list-style-type: circle;*/ /*list-style-position: inside;*//**標(biāo)記位于內(nèi)容框內(nèi)部,默認(rèn)值為outside*/ /*list-style-image: url(../li_pid.jpg);*//*圖片樣式*/ list-style: square inside url(../li_pid.jpg);/*縮寫*/}.sex{ /**基本上只對表格起作用,baseline內(nèi)容對象與基線對齊*/ /*vertical-align: top; vertical-align: baseline; vertical-align: middle; vertical-align: bottom;*/}b{ vertical-align: sub;/**垂直對齊文本的下標(biāo)*/ vertical-align: super;/*垂直對齊文本的上標(biāo)*/}div{ width: 300px; height: 300px; background: silver; text-align: center; /*vertical-align: bottom;*//*無效果無法使用*/}div span{ background: green; /*vertical-align: bottom;*//*無效果無法使用*/ /*vertical-align: -10px;*//*只能用負(fù)值，正值無效果*/ 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>張三，是一個(gè)非常好的青年</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>張三,是一個(gè)非常好的青年</li> <li>李四</li> <li>王五</li> <li>馬六</li> </ul><div><span>我是html5<span></div><br><em>內(nèi)容簡介：</em></embed><textarea rows="10">默認(rèn)標(biāo)題在textarea框的左邊靠最下的位置，通過css的vertical-align可以調(diào)整標(biāo)題位置，且要使用像素值為正值</textarea></body></html>
-----------------------------------------------------------------------------------------------------------------------------------第 19 章 CSS 其他樣式1.顏色和透明度
@charset "utf-8";div { width:200px; height: 200px; background-color: green; color : blue; opacity: 0.5;/*透明度，從0-1,背景和文字都會(huì)變化,css3支持*/}2.盒子陰影和輪廓
@charset "utf-8";div { width:200px; height: 200px; border: 10px solid green; box-shadow: 10px 10px 5px 1px gray;/*水平偏移量(必填)，垂直偏移量(必填)，模糊值，陰影延伸半徑，顏色，inset設(shè)置為內(nèi)部陰影**/}
輪廓：
| 屬性 | 值 | 說明 | 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設(shè)置為內(nèi)部陰影**/ outline: dashed 2px;/**輪廓樣式，它和邊框一樣，只不過它可以在邊框的外圍再加一層*/}
3.光標(biāo)樣式（css1支持）
cursor光標(biāo)樣式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;}/*光標(biāo)移到div區(qū)域時(shí)，變成拖動(dòng)圖標(biāo)*/-------------------------------------------------
新聞熱點(diǎn)
疑難解答
圖片精選
