3.4 学习CSS并丰富模板表格样式

登录后查看完整内容

您需要登录才可以下载或查看，没有账号？立即注册

x

CSS是什么

CSS 是“Cascading Style Sheet”的缩写，中文意思为“层叠样式表”，它是一种标准的样式表语言，用于描述网页的表现形式（例如网页元素的位置、大小、颜色等）。

CSS 样式代码需要写在HTML头部 head 标签内，通过使用 HTML 标签中的 style 标签将其包围。

CSS标签选择器

大括号前面的叫做选择器，它指向需要设置样式的HTML元素，比如上图是td，代表设置指向HTML中的<td>标签。也就是说，这个选择器是用于查找或选取要设置样式的HTML元素。又因为它是指向标签的选择器，我们也可以称之为标签选择器。

CSS边框样式（border）

border属性可以同时设置边框的宽度、样式和颜色。

border: border-width border-style border-color;

border-width（边框宽度）：可以通过数字设置，数字后不写单位，那么默认代表px（像素）。当然，也可以使用其他单位，请看以下介绍。

CSS长度单位
1.相对长度单位

所谓“相对”，就是要有一个参考基础，相对于该参考基础设置尺度单位。

相对类型的单位在网页制作中有以下几种：
1) px
px 又称像素，它属于相对类型单位。

例如，在 800px×600px 分辨率的显示器中设置一幅图片的高为 100px，当同样大小的显示器换成 1024px×768px 分辨率时，就会发现图片相对变小了，因为现在的 100px 和前面的 100px 所显示出的长度已经不同了。
2) em
em 以目前字符的高度为单位。
3) 其他

2.绝对长度单位

所谓“绝对”，就是无论显示设备的分辨率是多少，都代表相同的长度。

例如，同一台显示器在 800px×600px 分辨率时设置一幅图片的高为 10cm，当换成 1024px×768px 分辨率时，就会发现图片还是同样的大小。

绝对类型的长度单位如下表所示：
1) cm
2) mm
3) in
英寸（1in = 96px = 2.54cm）
4) pt
point，是一种专用的印刷单位“磅”，也可以称为“点”（1pt = 1/72in）
5) 其他

border-style（边框样式）：可以设置边框的样式，比如实线、虚线、双实线等，详细卡参看下表。

值	说明
none	无边框
hidden	隐藏边框，与 "none" 类似
dotted	定义点状虚线边框
dashed	定义虚线边框
solid	定义实线边框
double	定义双实线边框，双实线边框的宽度等于 border-width 的值

border-color（边框颜色）：可以设置边框的颜色。

boder:1pt solid #ff0000 即表示设置边框线为1磅，实线、红色。

边框的宽度、样式和颜色可以通过border属性同时设置。也可以使用border-width、border-style、border-color分别设置属性。

boder:1pt solid #ff0000

复制代码

也可以使用如下代码替换

border-width:1pt;
border-style:solid;
border-color:#ff0000;

复制代码

分别设置上下左右边框样式

border也可以拆分为上右下左四个属性分别设置边框样式，它们分别是border-top、border-right、border-bottom、border-left。

border-width也可以拆分为上右下左四个属性分别设置边框宽度，他们分别是border-top-width、border-right-width、border-bottom-width、border-left-width。

border-style也可以拆分为上右下左四个属性分别设置边框样式，他们分别是border-top-style、border-right-style、border-bottom-style、border-left-style。

border-color也可以拆分为上右下左四个属性分别设置边框颜色，他们分别是border-top-color、border-right-color、border-bottom-color、border-left-color。