html5学习笔记（五）（摘抄讲义加部分理解）

2024-04-27 15:13:37

字体：大中小

来源：转载

供稿：网友

视频地址：http://study.163.com/course/courseMain.htm?courseId=1003005

讲义地址：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区域时，变成拖动图标*/-------------------------------------------------

属性	值	说明	CSS 版本
outline-color	颜色	外围轮廓的颜色	3
outline-offset	长度	轮廓距离元素边框边缘的偏移量	3
outline-style	样式	轮廓样式，和 border-style 一致	3
ontline-witdh	长度	轮廓宽度	3
outline	简写	<颜色> <样式> <宽度>	3