您的位置：首页 > Web前端 > HTML5

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

2017-02-08 11:31 447 查看
视频地址：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区域时，变成拖动图标*/-------------------------------------------------
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航