前端第二天

第二讲 表格和css入门

本章内容

1.表格(结构，属性，合并，嵌套)

2.css入门(作用，样式，基本标签)重点

第一节 表格

1.1基本结构

表格:在日常生活中用来进行数据统计，点名册，成绩表，工资表，数据展示，设计布局

标签	作用
table	根标签
tr	行标签 嵌套在table
td	单元格 嵌套在tr
th	表头标签 特殊td 加粗居中
thead	表格头部分组标签
tbody	表格主体分组标签
tfoot	表格尾部分组标签(不常用)
caption	表格标题

1.2表格属性

属性	说明
border	表格边框 默认是0 用0表示没有 1表示有
width	宽度 设置tr的宽度无效
heigth	高度 可(tr)
align	对齐方式 在table中整个表格网页居中 在tr里内容居中
bgcolor	设置单元格背景色
cellsapcing	设置单元格边框之间的距离
cellpadding	设置单元格边框与内容之间的距离
valign	设置的是我们表格内容的垂直对齐(top/bottom/center),不能设置在table中

1.3单元格合并

1.3.1 跨行合并

rowsapn属性 保留同一列的最上边的单元格

1.3.2 跨列合并

colsapn属性

第二节 CSS入门

2.1 CSS概述

CSS: Cascade style sheet 级联样式表，层叠样式表，简称样式表，提供操作网页外观的方式，装饰网页，通过控制字体(大小、颜色、字间距)背景、图片等实现整个网页的装饰

2.2 CSS基本语法

选择器{
    属性:属性值;
    属性:属性值;
    ...
}

2.3 基础选择器

2.3.1 标签选择器

用标签名作为选择器名，可以操作当前所有这个标签的内容样式

2.3.2 类选择器

在要操作的元素中 加上class属性，使用时需要在class属性值前加上" . "可以将不同元素作为同一类型处理，也可以将同一元素做不同处理。

2.3.3 id选择器

在要操作的元素中加上id属性 ，使用时在id属性值前加上" # ",唯一性

2.4使用方式

2.4.1 内部样式

在当前网页中的head中添加一个style标签，CSS只作用在当前页面中

2.4.2 外部样式(常用推荐)

将CSS文件单独作为一个独立文件，注意在CSS不需要写style标签，我们如果需要就应该将外部CSS文件引入到网页中

1.链入式

<link rel="stylesheet" type="text/css" href="相对路径" />

2.导入式

<style>
    @import url("相对路径");
</style>

2.4.3 行内样式

将style直接卸载标签内部，作为标签的一个属性

<标签名 style="属性名:属性值;"></标签名>

总结

1.表格: 基本标签、属性、合并、嵌套

2.CSS