本章内容
1.表格（基本结构，属性，合并单元格，表格嵌套）
2.CSS入门（CSS作用，CSS语法，CSS方式，CSS选择器）（掌握）
第一节 表格
1.1 表格基本结构
表格在日常生活中主要进行数据统计（信息表，财务报表，工资表），在网页中除了用于信息统计以外，做页面布局。行同高，列同宽
基本结构标签
| 标签名 | 说明 |
|---|---|
| table | 表格跟标签 |
| tr | 表格的行标签，包含在table中，是table子标签 |
| td | 单元格，是tr的子标签 |
| caption | 表格标题，默认文本是居中显示 |
| th | 单元格，一般是用来做表头 |
| thead | 结构化标签，主要用来表示表格头部。不是必要的 |
| tbody | 结构化标签，主要用来标识表格的主体部分（内容），不是必要的 |
<table>
<tr>
<td></td>
</tr>
</table>
<body>
<table>
<caption>学生信息表</caption>
<thead>
<tr>
<th>班级</th>
<th>姓名</th>
<th>学号</th>
</tr>
</thead>
<tbody>
<tr>
<td>计网</td>
<td>张</td>
<td>2018030106031</td>
</tr>
<tr>
<td>计网</td>
<td>刘</td>
<td>201803010621</td>
</tr>
<tr>
<td>计网</td>
<td>东</td>
<td>20180306</td>
</tr>
</tbody>
</table>
</body>
1.2 表格属性
| 属性名 | 说明 |
|---|---|
| border | 表格边框，一般取值0/1,0代表没有边框，1代表有边框 |
| width | 宽度 |
| height | 高度 |
| align | 对齐方式：left center right 如果将来属性设置在table中整个表格位于页面中央，设置在tr中是文本内容居中，对齐方式其实是相对于他的父元素进行对齐 |
| cellspacing | 单元格与单元格之间的距离 |
| rules | clos列 rows 行 all clos 只有竖线 rows 只有行线 all全部都有 |
| bgcolor | 背景色，不推荐使用。推荐使用样式控制，可以设置在table tr td中 |
| backgound | 背景图，不推荐使用。推荐使用样式控制，可以设置在table tr td中 |
<body>
<table align="center" border="1" height="200px" width="800px" rules="all">
<caption>学生信息表</caption>
<thead bgcolor="red">
<tr>
<th>班级</th>
<th>姓名</th>
<th>学号</th>
</tr>
</thead>
<tbody>
<tr align="center">
<td>计网</td>
<td>申</td>
<td>2018030106031</td>
</tr>
<tr align="center">
<td>计网</td>
<td>沛</td>
<td>201803010621</td>
</tr>
<tr align="center">
<td>计网</td>
<td>东</td>
<td>20180306</td>
</tr>
</tbody>
</table>
1.3单元格合并
1.3.1跨行合并
跨行合并：指在同一列不同行的几个单元格进行合并，保留最上面的单元格标签，加rowspan属性，删除剩下的单元格标签
<table border="1" width="200" height="200" rules="all">
<tr>
<th>序号</th>
<th>名称</th>
<th>电话</th>
</tr>
<tr>
<td>1</td>
<td>教务处</td>
<td>1934</td>
</tr>
<tr>
<td>2</td>
<td rowspan="2">教研处</td>
<td>1843</td>
</tr>
<tr>
<td>1</td>
<td>9483</td>
</tr>
</table>
1.3.2 跨列合并
指的是同一行不同列的几个单元格合并，保留最前面的单元格，加上colspan属性，删除剩余的单元格标签
<table border="1" width="200" height="200" rules="all">
<tr>
<th>序号</th>
<th>名称</th>
<th>电话</th>
</tr>
<tr>
<td colspan="2">1</td>
<td>1934</td>
</tr>
<tr>
<td>2</td>
<td >教研处</td>
<td>1843</td>
</tr>
<tr>
<td>1</td>
<td >党政办</td>
<td>9483</td>
</tr>
</table>
1.4表格的嵌套
嵌套：table中包含table
小结：
可以使用表格实现页面的局部设计，但是不推荐使用表格进行整体布局
表格的基本结构：table tr td
th caption thead tbody
表格属性： border width height rules cellspacing cellpadding（单元格内内容与边框的距离），bgcolor backgroud
单元格合并：rowspan 行合并colspan 列合并
table的嵌套
第二节 CSS入门
2.1 为什么使用CSS
在前面的学习中我们讲了各种标签，这些标签只是构成网页的基本结构，但是我们的网页没有任何修饰，为了使网页绚丽多彩使用CSS进行网页的修饰。通过控制页面元素字体，字形，背景，间距等来完成对网页的修饰，通过CSS样式可以实现样式和内容的分离。
CSS：Cascading style sheet 级联样式表，又称层叠样式表 简称样式表
2.2 CSS的基本语法
选择器{
属性:属性值;
属性:属性值;
。。。
属性:属性值；
}
CSS基本机构:选择性和声明（属性和属性值）
2.3 CSS三种使用方式（掌握）
2.3.1 内部样式
内部样式又称内嵌样式，在当前网页中的head结构中使用style标签来实现内部样式，不推荐使用除非需要给某一个页面设置特殊样式时使用内部样式
2.3.2 行内样式
在某一个标签中添加一个style属性，不推荐使用除非需要对某一个标签特殊处理时
<p style="属性：值；属性：值"></p>
2.3.3 外部样式（推荐使用）
1.链入式
<link href="路径" rel="stylesheet" type="text/css"></link>
2.导入时
<style>
@import url("css/out.css")
</style>
注意/方向不能改变
第一步：需要在外部编写一个独立的css文件（.css）
第二步：将外部样式导入/链入到网页中
2.4 CSS选择器（掌握）
基本选择器：通过选择器选中要修饰的元素（标签）
1.标签选择器
标签选择器：使用标签名作为选择器的名称
p{
font-size:50px
}
2.类选择器
类选择器：在需要被修饰的元素上添加class属性，使用class得知作为选择器的名称，加上.组件作为类选择的标识。可以将不同元素使用相同的class变成一个类别，也可以将相同的元素使用class变成不同的类别
相同元素的相同属性时 优先级：类选择器>标签选择器
.demo{
font-size:50px;
font-weight:bold
}
3.id选择器
id选择器：在需要被修饰的元素上添加id属性，使用id的值作为选择器的名称，加上#作为标识。id选择器必须是唯一的。
相同元素的相同属性时，优先级：ID选择器>类选择器>标签选择器
#wu{
font-size:50px
}
总结：
CSS：修饰网页
基本结构：选择器{声明：声明（属性：值）}
三种样式：行内，内部，外部
基本选择器：标签，类，id
322
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
