第二章表格及样式入门 ① 笔记

1.内容回顾

1.1.课前测试

<h1>第一章 HTML基础</h1>
<hr/>
<h2>1.课程目标</h2>
<ul>
	<li>掌握HTML标签的使用</li>
	<li>掌握CSS的用法</li>
	<li>能进行网页布局</li>
</ul>
<h2>2.本章内容</h2>
<h3>2.1.HTML概述</h3>
<h4>2.2.1.什么是HTML</h4>
<p>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;HTML的全称为超文本标记语
言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散
的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令
可以说明文字，图形、动画、声音、表格、链接等。 [1]
</p>
<p>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;超文本是一种组织信息的方
式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒
体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种
组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方
便。 [1]
</p>

运行结果如下：

1.2.上节内容

2.本章重点

2.1表格

2.2CSS样式入门

2.3基础选择器

3.具体内容

3.1.表格

3.1.1.表格概述

概念：以行列对齐的方式显示数据。
作用：用于呈现数据

3.1.2.表格结构

基本结构：

<!-- 表格的基本结构：
1.<table></table> 表格的根标签 设置表格 基本标签，属性
2.<caption></caption> 设置表格的标题
3.<thead></thead> 设置表头行
4.<tbody></tbody> 设置表内容
5.<tfoot></tfoot> 表格脚部
6.<tr></tr> 行标签
7.<th></th> 设置表头单元格
8.<td></td> 标准的数据单元格
-->

3.1.3.表格属性

<!-- 表格的属性
1.表格外边框 border
2.单元格间距 cellspacing
3.单元格内填充 cellpadding 内容与边框之间的距离
4.表格的宽高 width height table标签中的宽高相当于 极限大小 宽度不能超
5.背景颜色 bgcolor
颜色三种表示法：
1. 英文单词 red green 不能表示所有的颜色
2. 十六进制表示 #F9EE91
3. RGB red green blue 1600W种
rgb(0-255,0-255,0-255) 256*256*256
6.背景图片（相对引用/绝对应用） background
7.水平对齐方式（写到tr,td上调整的是内容）
align left(默认) center(居中) right(右边)
如果写在table标签中 调整的是 整个表格相对于其父元素(浏览器容器)的位置
8.垂直对齐方式 valign top(上) center(居中) bottom(下)
-->
<!-- px 表示像素 -->
<!-- 表格特性：同行高度一致，同列宽度一致 -->

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<title> New Document </title>
	</head>
	<body>
		<table border="1" width="400" align="center">
			<caption>学生信息表</caption>
			<thead>
				<tr>
					<th>学号</th>
					<th>姓名</th>
					<th>性别</th>
					<th>年龄</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>1001</td>
					<td>张三</td>
					<td>男</td>
					<td>20</td>
				</tr>
				<tr>
					<td>1001</td>
					<td>张三</td>
					<td>男</td>
					<td>20</td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<td colspan="4" align="right">班级人数:2人</td>
				</tr>
			</tfoot>
		</table>
	</body>
</html>

3.1.4.表格合并

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<title> New Document </title>
	</head>
	<body>
		<!-- 表格合并
		合并列 横向合并 从左-》右 colspan 合并几个单元格就等于几
		合并行 纵向合并 从上-》下 rowspan 合并几个单元格就等于几
		-->
		<!--
		rowspan:跨行，单元格垂直扩展，下面行的单元会被挤出去。要删除多余单元格
		colspan:跨列，单元格水平扩展，同一行的单元格会被挤出去。要删除多余单元格
		-->
		<table width="400" border="1">
			<tr>
				<td rowspan="2">姓名</td>
				<td rowspan="2">性别</td>
				<td colspan="3" align="center">出生日期</td>
			</tr>
			<tr>
				<td>年</td>
				<td>月</td>
				<td>日</td>
			</tr>
			<tr>
				<td>张三</td>
				<td>男</td>
				<td>1999</td>
				<td>01</td>
				<td>01</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>女</td>
				<td>1998</td>
				<td>01</td>
				<td>01</td>
			</tr>
		</table>
	</body>
</html>

运行结果如下：

3.1.5.表格嵌套

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<title> New Document </title>
	</head>
	<body>
		<table width="780" height="500" border="1" align="center">
			<tr>
				<td height="200">
					<img src="banner.jpg"/>
				</td>
			</tr>
			<tr>
				<td height="33">
					<table width="100%" bgcolor="#66ccff">
						<tr >
							<td><a href="#">菜单1</a></td>
							<td><a href="#">菜单2</a></td>
							<td><a href="#">菜单3</a></td>
							<td><a href="#">菜单4</a></td>
							<td><a href="#">菜单5</a></td>
							<td><a href="#">菜单6</a></td>
							<td><a href="#">菜单7</a></td>
							<td><a href="#">菜单8</a></td>
							<td><a href="#">菜单9</a></td>
							<td><a href="#">菜单10</a></td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td >
					<table width="100%" border="1" height="500">
						<tr>
							<td width="195" valign="top">左边</td>
							<td width="390" valign="top">中间</td>
							<td width="195" valign="top">右边</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</body>
</html>

运行结果如下：

小结：
概述：
结构：
属性：
合并：
嵌套：

3.2.CSS样式入门

3.2.1 为什么需要CSS

通过定义CSS样式表，能让网页具有美观一致的界面，可以将网页制作得更加绚丽多彩。一个样式文件可以作用于多个页面，具有更好的易用性和扩展性，通过修改样式文件，能制作出内容相同，而外观不同的多姿多彩的页面。
通过CSS可以实现内容和样式分离。方便后期维护。

3.2.2 CSS概念

Cascading Style sheet 层叠样式表：层叠性

3.2.3 CSS应用

3.2.3.1 内部样式表

语法格式：

<head>
....
<style type="text/css">
选择器
{
	样式属性1 : 值1 ;
	样式属性2 : 值2 ;
	...
}
</style>
</head>

注意：所有符号用英文

2.3.2 外部样式表

外部样式表的使用步骤：
1.定义好html页面内容
2.新建一个单独的css文件
3.在css文件中直接定义样式内容
4.在html文件中引用css文件
<!-- 引入外部的样式表文件 -->
<link rel="stylesheet" href="样式文件路径" type="text/css" />

css1.css

h1{
	color:red;
}
.ys1{
	color:green;
}
.ys2{
	color:blue;
}

css2.css

h1{
	color:gray;
}
.ys1{
	color:orange;
}
.ys2{
	color:pink;
}

<!DOCTYPE html >
<html>
	<head>
		<title> New Document </title>
		<meta charset="utf-8">
		<!--
		外部样式表的使用步骤：
		1.定义好html页面内容
		2.新建一个单独的css文件
		3.在css文件中直接定义样式内容
		4.在html文件中引用css文件
		-->
		<!--在当前html中引用外部样式表-->
		<link rel="stylesheet"
		type="text/css"
		href="css1.css" />
	</head>
	<body>
		<h1>这是表题内容</h1>
		<p class="ys1">这是P标签内容</p>
		<p class="ys2">这是P标签内容</p>
	</body>
</html>

好处：一个样式文件可以作用于多个页面，具有更好的易用性和扩展性，通过修改样式文件，能制作出内容相同，而外观不同的多姿多彩的页面。

2.3.3 行内样式表

<!-- 行内样式表 ：不推荐使用 -->
<h2 style="color:red; font-family:宋体;">内容</h2>

3.3.基础选择器

3.3.1 标签选择器

使用html标签名定义样式，匹配到的html元素，自动应用定义的样式

<!--定义css内部样式表:在head标签内部定义
		样式的作用:目的是修饰html内容
		-->
		<style type="text/css">
			/* 注释代码
			选择器
			{
			样式属性1 : 值1 ;
			样式属性2 : 值2 ;
			...
			}
			选择器:用于选择匹配页面中的特定元素
			标签选择器: 用html标签名做选择器，自动匹配对应的标签元素
			问题: 如何只让第二句和第四句变绿
			类选择器,id选择器
			*/
			h1
			{
				font-size:40px; /*字体大小*/
				color: red; /*字体颜色*/
				text-align:center; /*居中*/
			}
			p
			{
				color:green;
				font-size:20px;
				text-align:center;
			}
		</style>

<h1>静夜思</h1>
<p>床前明月光,</p>
<p>疑是地上霜。</p>
<p>举头弯明月,</p>
<p>我是郭德纲。</p>

3.3.2 类选择器

进行更细致化或更灵活的样式控制要使用类样式
使用类样式(类选择器)的步骤：
1. 定义类样式: 在style标签中用”.样式名”的方式定义类样式
2. 使用类样式: 在需要使用类样式的元素中通过class属性引用样式名

<!DOCTYPE html >
<html>
	<head>
		<title> New Document </title>
		<meta charset="utf-8">
		<style type="text/css">
		/*请让第2个p和第2个li变红*/
		/*进行更细致化或更灵活的样式控制要使用类样式*/
		/*
		使用类样式(类选择器)的步骤：
		1. 定义类样式: 在style标签中用".样式名"的方式定义类样式
		2. 使用类样式: 在需要使用类样式的元素中通过class属性引用样式名
		*/
		.hs{
		color:red;
		}
		</style>
	</head>
	<body>
		<h1 class="hs">这是标题内容</h1>
		<p>这是第1个P标签</p>
		<p class="hs">这是第2个P标签</p>
		<p>这是第3个P标签</p>
		<p>这是第4个P标签</p>
		<ul>
			<li>这是第1个li</li>
			<li class="hs">这是第2个li</li>
			<li>这是第3个li</li>
			<li>这是第4个li</li>
		</ul>
	</body>
</html>

运行代码如下：

3.3.3 id选择器

id选择器: identifier 唯一的
id属性定义的元素在整个页面必须唯一，也就是id名是不能重复
id一般用于定义页面的布局元素 div,span
id在js中用于js获取对象的时候使用
id定义样式的步骤：
1. 在style标签中用 “#id名”的方式定义样式
2. 在需要使用id样式的元素中通过id属性引用id名来使用样式

<!DOCTYPE html >
<html>
	<head>
		<title> New Document </title>
		<meta charset="utf-8">
		<style type="text/css">
			/*id选择器: identifier 唯一的
			id属性定义的元素在整个页面必须唯一，也就是id名是不能重复
			id一般用于定义页面的布局元素 div,span
			id在js中用于js获取对象的时候使用
			id定义样式的步骤：
			1. 在style标签中用 "#id名"的方式定义样式
			2. 在需要使用id样式的元素中通过id属性引用id名来使用样式
			*/
			#bt{
				color:blue;
			}
			#p2{
				color:green;
			}
			#li3{
				color:red;
			}
		</style>
	</head>
	<body>
		<h1 id="bt">这是标题内容</h1>
		<p >这是第1个P标签</p>
		<p id="p2">这是第2个P标签</p>
		<p>这是第3个P标签</p>
		<p>这是第4个P标签</p>
		<ul>
			<li>这是第1个li</li>
			<li>这是第2个li</li>
			<li id="li3">这是第3个li</li>
			<li>这是第4个li</li>
		</ul>
	</body>
</html>

运行结果如下：

3.3.4 优先级

!important>行内>id选择器>类选择器>标签选择器
样式权重: 对于同一个元素，只使用权重高的样式
!important: 10000
行内: 1000
id: 100
类: 10
标签: 1

<!DOCTYPE html >
<html>
	<head>
		<title> New Document </title>
		<meta charset="utf-8">
		<!--定义样式表-->
		<style type="text/css">
		/*
		样式权重: 对于同一个元素，只使用权重高的样式
		!important: 10000
		行内: 1000
		id: 100
		类: 10
		标签: 1
		*/
		#zs{
			color:purple;
		}
		.huangs{
			color:orange;
		}
		/*交叉选择器*/
		h1.huangs{
			color:red !important ;
		}
		/*后面覆盖前面的,就近原则*/
		h1{
			color:blue;
		}
		</style>
	</head>
	<body>
		<h1 class="huangs" id="zs" style="color:green;">这是为难的标题</h1>
		<h1>asdfasdf</h1>
	</body>
</html>

运行结果如下：