第二章 表格及样式入门 ③ 详细代码演练、解析
一、table表格 tr td 商标符号 版权符号
代码如下：
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
</head>
<body>
<!--学生信息表-->
<table border="1" align="center" width="800" height="300">
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>手机</th>
</tr>
<tr>
<td>101</td>
<td>张三</td>
<td>男</td>
<td>20</td>
<td>1111</td>
</tr>
<tr>
<td>102</td>
<td>李四</td>
<td>女</td>
<td>18</td>
<td>1111</td>
</tr>
<tr>
<td>102</td>
<td>李四</td>
<td>女</td>
<td>
<h1>标题</h1>
</td>
<td>
<table>
<tr>
<td>第一类</td>
<td>第二类</td>
</tr>
</table>
</td>
</tr>
</table>
a < b > c<br/>
© 版权符号<br/>
® 注册商标<br/>
你 好<br/>
你abcd好<br/>
</body>
</html>
运行结果如下：
二、学生信息表 表格标签属性
图片、代码的路径如下如所示：
代码如下：
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
</head>
<body>
<!--
html注释:
table内容:
table:表格根节点
caption:表格标题
thead:表格头部
tbody:表格主体
tfoot:表格脚部
tr: 表格行
th: 表格列标题
td: 表格的数据单元格
表格标签属性:
border: 表格边框
align:设置table标签上时用于控制table的位置
设置到tr,td,th上时，用于控制内容的对齐方式(左，中，右)
cellspacing:单元格之间的间距
cellpadding:单元格边框和内容之间的间距
width:表格的宽
height:表格的高
bgcolor:背景颜色(table,tr,td)
background:背景图片
valign:垂直对齐(top,center,bottom)
-->
<table border="1"
align="center"
cellspacing="10"
cellpadding="10"
width="500"
height="400"
bgcolor="red"
background="sp3.jpg"
>
<caption>学生信息表</caption>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>手机</th>
</tr>
</thead>
<tbody>
<tr bgcolor="blue">
<td>1001</td>
<td>张三</td>
<td>男</td>
<td>20</td>
<td bgcolor="yellow">123123123</td>
</tr>
<tr >
<td>1002</td>
<td >李四</td>
<td>女</td>
<td>20</td>
<td>123123123</td>
</tr>
<tr>
<td>1003</td>
<td>王五</td>
<td>男</td>
<td>20</td>
<td>123123123</td>
</tr>
</tbody>
<tfoot>
<tr align="right">
<td colspan="5">总人数: 3 人</td>
</tr>
</tfoot>
</table>
<hr/>
<table border="1" align="center" width="400">
<tr>
<td>
<img src="sp3.jpg" width="100" height="100"/>
</td>
<td valign="top" align="left">
这是一些文字
</td>
</tr>
<tr>
<td >
<img src="sp3.jpg" width="100" height="100"/>
</td>
<td valign="center" align="right">
这是一些文字
</td>
</tr>
<tr>
<td>
<img src="sp3.jpg" width="100" height="100"/>
</td>
<td valign="bottom" align="center">
这是一些文字
</td>
</tr>
</table>
</body>
</html>
运行结果如下：
三、css样式优先级 开发者模式修改
代码如下：
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<style type="text/css">
/*
样式优先级:
1.同类样式符合就近原则
2.选择器有不同权重
标签选择器: 1
类选择器: 10
id选择器: 100
行内样式: 1000
!important: 权重最大
*/
#myid{
color:orange;
}
.xx{
color:green;
}
body div{
color:red!important;
}
div{
color:blue;
}
</style>
</head>
<body>
<div class="xx" id="myid" style="color:purple;">这是一个测试内容</div>
</body>
</html>
运行结果如下：
四、外部样式 内部样式 标签选择器
代码如下：
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<!--引入外部样式表
1.先创建单独的样式表文件(.css)
2.在样式表文件中，定义样式
3.在html页面中使用link标签引用样式表文件
-->
<link rel="stylesheet" type="text/css" href="my.css"/>
<!--内部样式表-->
<style type="text/css">
/*css注释
标签选择器:使用html标签名选择元素
*/
p{
color:rgb(255,0,0); /*设置元素的文本颜色*/
font-size:30px; /*字体大小*/
font-weight:bold; /*字体粗细*/
font-family:隶书; /*字体类型*/
font-style:italic; /*字体风格*/
}
</style>
</head>
<body>
<!--
html注释
-->
<h1 style="color:blue;font-size:50px">静夜思<sub> 李白</sub></h1>
<p>床前明月光, </p>
<p>疑是地上霜。</p>
<p>举头望明月，</p>
<p>低头思故乡。</p>
</body>
</html>
运行结果如下：
五、背景设置 属性
图片、代码的路径如下如所示：
代码如下：
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<style type="text/css">
#con{
width:600px;
height:400px;
border:2px solid red;
/*背景样式:
背景颜色: background-color
背景图片: background-image
背景平铺方式: background-repeat
repeat:铺满 no-repeat:不平铺 repeat-x:水平 repeat-y:垂直
背景位置: background-position:水平 垂直
取值:
数值
百分比
关键字(left center right,top center bottom)
背景大小: background-size
*/
/*background-color:blue;
background-image:url(map1.jpg);
background-repeat:no-repeat;
background-position:center center;
background-size:50px 50px;*/
/*背景复合写法
background:颜色 图片 平铺方式 位置 / 大小
*/
/*background:red url(map1.jpg) no-repeat 50px top / 200px 200px;*/
/*多组背景*/
background:url(map1.jpg) no-repeat 50px top / 200px 200px,
url(tuijian1.jpg) no-repeat right bottom /100px 100px;
}
</style>
</head>
<body>
<div id="con"></div>
</body>
</html>
运行结果如下：
六、id 类 标签 选择器
代码如下：
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<style type="text/css">
/*id选择器*/
#title{
color:red; /*字体颜色*/
text-align:center; /*水平对齐方式*/
}
/*类选择器*/
.heise{
color:black;
font-size:20px;
text-decoration:underline; /*文本修饰:下划线*/
}
/*标签选择器*/
p{
color:blue;
}
</style>
</head>
<body>
<h1 id="title">人物简介</h1>
<hr/>
<p>
<span class="heise">孙悟空</span>（又称齐天大圣、孙行者、斗战胜佛），是中国古典神魔小说《西游记》中的主要角色之一。由开天辟地产生的仙石孕育而生，出生地位于东胜神洲的花果山上，因带领猴群进入水帘洞而被尊为 “美猴王”。 [61] 为了学艺而漂洋过海拜师于须菩提祖师，得名孙悟空， [63] 学会大品天仙诀、地煞数七十二变、筋斗云等高超的法术。 [64-66]
</p>
<p>
<span class="heise">猪八戒</span>前世为执掌天河八万水兵的“天蓬元帅”，精通三十六般变化，所持的兵器为太上老君所造、玉皇大帝亲赐的上宝沁金耙（俗称九齿钉耙）。因调戏霓裳仙子被贬下凡尘，投了猪胎，生的猪头人身，在福陵山云栈洞落草。后受观音菩萨点化，入赘高老庄务农，等待取经人。孙悟空收服他成为唐僧的二徒弟，取名“八戒”，与孙悟空、沙悟净一同保护唐僧去西天取经，几经劫难，因挑担和保护唐僧有功，成了正果，被佛祖封为“净坛使者”。
</p>
</body>
</html>
运行结果如下：
七、选择器优先级
代码如下：
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<!--
选择器:3种基本选择器
标签选择器: 使用Html标签名选择/匹配html元素,进而设置元素样式
类选择器: html元素通过class属性引用类名,使用定义好的类样式
id选择器: html元素通过id属性引用id样式,使用对应的样式属性
-->
<style type="text/css">
/*div{
color:red;
}*/
/*请让div的第二个，p的第二个，span的第二个元素变红*/
/*使用类样式实现(用的最多):
1.定义类选择器(用 .加类名 定义)，设置样式属性
2.在元素上通过class引用类选择器
*/
.hongse{
color:red; /*字体红色*/
}
/*id选择器,针对页面具有唯一性的元素来设置样式：
1.定义id选择器(用 #加id名字 定义),设置样式属性
2.在元素上通过id来应用id选择器
*/
#my1{
font-size:30px;
}
#my2{
font-size:50px;
}
</style>
</head>
<body>
<div id="my1">这是一个DIV1</div>
<div class="hongse">这是一个DIV2</div>
<div>这是一个DIV3</div>
<p>这是一个P1</p>
<p class="hongse">这是一个P2</p>
<p>这是一个P3</p>
<span id="my2">这是一个SPAN1</span>
<span class="hongse">这是一个SPAN2</span>
</body>
</html>
运行结果如下：
1054
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
