标签：
第 17 章 CSS 边框与背景[上]
学习要点：1.声明边框2.边框样式3.圆角边框
本章主要探讨 HTML5 中 CSS 边框和背景，通过边框和背景的样式设置，给元素增加更丰富的外观。
一．声明边框
边框的声明有三个属性设置，样式表如下：
|
属性 |
值 |
说明 |
CSS 版本 |
|
|
|
|
|
|
border-width |
长度值 |
设置边框的宽度，可选 |
1 |
|
|
|
|
|
|
border-style |
样式名称 |
设置边框的样式，必选 |
1 |
|
|
|
|
|
|
border-color |
颜色值 |
设置边框的颜色，可选 |
1 |
|
|
|
|
|
这三个属性值，只有 border-style 是必须声明，才可以出现边框。而其他两个属性会出现默认值。
//最简单的边框，边框长度默认 3px，边框颜色为黑色 div {
border-style: solid;
}
//配置完整的边框 div {
border-style: solid; border-width: 2px; border-color: red;
}
如果元素长和高均为 200px 时，四个边框均为 2 时，元素的长高总尺寸均为 202px。
二．边框样式
边框的样式主要有三种，分别是边框长度取值、边框的颜色和边框的线条类型。颜色是通用的颜色代码，和所有其他颜色取值一下。而长度和线条类型，边框有自己独到的部分。
边框宽度取值表如下：
|
值 |
说明 |
|
|
|
|
长度值 |
CSS 长度值：比如 px、em 等 |
|
|
|
|
百分数 |
直接设置百分数：1、2、3 等 |
|
|
|
|
thin |
|
|
|
使用长度名称的预设宽度。这三个值的具体意义由浏 |
|
medium |
|
|
览器来定义，从小到大依次增大。 |
|
|
|
|
|
thick |
|
|
|
|
一般来说，边框为了更加精准，还要计算元素盒子的总尺寸，使用长度值的比较多。而定义边框线条的样式如下样式表：
|
值 |
说明 |
|
|
|
|
none |
没有边框 |
|
|
|
|
dashed |
破折线边框 |
|
|
|
|
dotted |
圆点线边框 |
|
|
|
|
double |
双线边框 |
|
|
|
|
groove |
槽线边框 |
|
|
|
|
inset |
使元素内容具有内嵌效果的边框 |
|
|
|
|
outset |
使元素内容具有外凸效果的边框 |
|
|
|
|
ridge |
脊线边框 |
|
|
|
|
solid |
实线边框 |
|
|
|
//solid 实线使用频率最高
div {
border-style: solid;
border-width: 10px;
border-color: red;
}
如果想对四条边中某一条边单独进行设置，可以使用如下样式表：
|
属性 |
|
说明 |
CSS 版本 |
|
|
|
|
|
|
border-top-width |
|
|
|
|
border-top-style |
定义顶端 |
|
1 |
|
border-top-color |
|
|
|
|
|
|
|
|
|
|
|
|
|
border-bottom-style |
定义底部 |
1 |
|
border-bottom-color |
|
|
|
|
|
|
|
border-left-width |
|
|
|
border-left-style |
定义左侧 |
1 |
|
border-left-color |
|
|
|
|
|
|
|
border-right-width |
|
|
|
border-right-style |
定义右边 |
1 |
|
border-right-color |
|
|
|
|
|
|
//只设置顶端 div {
border-top-style: solid; border-top-width: 10px; border-top-color: red;
}
如果四条变都一致，那么没必要分写成三句样式，直接通过简写即可：
|
属性 |
值 |
说明 |
CSS 版本 |
|
|
|
|
|
|
border |
|
设置四条边的边框 |
|
|
|
|
|
|
|
border-top |
|
只设置上边框 |
|
|
|
|
|
|
|
border-bottom |
<宽度> <样式> <颜色> |
只设置下边框 |
1 |
|
|
|
|
|
|
border-left |
|
只设置左边框 |
|
|
|
|
|
|
|
border-right |
|
只设置右边框 |
|
|
|
|
|
|
//简写形式四条边设置
div {
border: 10px solid red;
}
三．圆角边框
CSS3 提供了一个非常实用的圆角边框的设置。使用 border-radius 属性，就可以达到这种效果，样式表如下：
|
属性 |
值 |
说明 |
CSS 版本 |
|
|
|
|
|
|
border-radius |
长度值或百分数 |
四条边角 |
3 |
|
|
|
|
|
|
border-top-left-radius |
长度值或百分数 |
左上边角 |
3 |
|
|
|
|
|
|
border-top-right-radius |
长度值或百分数 |
右上边角 |
3 |
|
|
|
|
|
|
长度值或百分数 |
左下边角 |
3 |
|
|
|
|
|
|
|
border-bottom-right-radius |
长度值或百分数 |
右下边角 |
3 |
|
|
|
|
|
//设置圆角矩形 div {
border: 10px solid red; border-radius: 10px;
}
//四条边分别设置 div {
border: 10px solid red; border-radius: 10px 20px 30px 40px;
}
第 17 章 CSS 边框与背景[下]
学习要点：1.设置背景
本章主要探讨 HTML5 中 CSS 边框和背景，通过边框和背景的样式设置，给元素增加更丰富的外观。
一．设置背景
盒模型的尺寸可以通过两种方式实现可见性，一种就是之前的边框，还有一种就是背景。 CSS 背景设置的样式表如下：
|
|
属性 |
值 |
说明 |
CSS 版本 |
|
|
|
|
|
|
|
|
background-color |
颜色 |
背景的颜色 |
1 |
|
|
|
|
|
|
|
|
background-image |
none 或 url |
背景的图片 |
1/3 |
|
|
|
|
|
|
|
|
background-repeat |
样式名称 |
背景图片的样式 |
1/3 |
|
|
|
|
|
|
|
|
background-size |
长度值或其他 |
背景图像的尺寸 |
3 |
|
|
|
|
|
|
|
|
background-position |
位置坐标 |
背景图像的位置 |
1 |
|
|
|
|
|
|
|
|
background-attachment |
滚动方式 |
背景图片的滚动 |
1/3 |
|
|
|
|
|
|
|
|
background-clip |
裁剪方式 |
背景图片的裁剪 |
3 |
|
|
|
|
|
|
|
|
background-origin |
位置坐标 |
背景图片起始点 |
3 |
|
|
|
|
|
|
|
|
background |
复合值 |
背景图片简写方式 |
1 |
|
|
|
|
|
|
|
1.background-color |
|
|
|
|
|
|
|
|
|
|
|
|
值 |
|
说明 |
CSS 版本 |
|
|
|
|
|
|
|
|
颜色 |
设置背景颜色为指定色 |
1 |
|
|
|
|
|
|
|
|
|
transparent |
设置背景颜色为透明色 |
1 |
|
|
|
|
|
|
|
div {
background-color: silver;
}
解释：设置元素的背景颜色。属性值是颜色值。
div b {
background-color: transparent;
}
解释：默认值为 transparent，为透明的意思。这样<div>内部的元素就会继承<div>的背景色。一般来说这个属性使用频率很低，原因是不需要改变色彩时就默认，需要改变色彩时又是颜色值。
body {
background-color: silver;
}
解释：在<body>元素下可以设置整个页面的背景色。
2.background-image
|
值 |
说明 |
CSS 版本 |
|
|
|
|
|
none |
取消背景图片的设置 |
1 |
|
|
|
|
|
url |
通过 URL 设置背景图片 |
1 |
|
|
|
|
body {
background-image: url(loading.gif);
}
解释：url 里面是图片的路径，设置整个页面以这个图片为背景，如果图片不足以覆盖，则复制扩展。
div {
background-image: none;
}
解释：如果多个 div 批量设置了背景，而其中某一个不需要背景，可以单独设置 none 值取消背景。
在 CSS3 中，背景图片还设置了比如线性、放射性等渐变方式。但由于支持度的问题，比如 IE9 尚未支持。我们把这些的新特性放到独立的课程中讲解。
3.background-repeat
|
值 |
说明 |
CSS 版本 |
|
|
|
|
|
repeat-x |
水平方向平铺图像 |
1 |
|
|
|
|
|
repeat-y |
垂直方向平铺图像 |
1 |
|
|
|
|
|
repeat |
水平和垂直方向同时平铺图像 |
1 |
|
|
|
|
|
no-repeat |
禁止平铺图像 |
1 |
|
|
|
|
body {
background-image: url(loading.gif);
background-repeat: no-repeat;
}
解释：让背景图片只显示一个，不平铺。CSS3 还提供了两个值，由于支持度不佳，这里忽略。
4.background-position
|
值 |
说明 |
CSS 版本 |
|
|
|
|
|
top |
将背景图片定位到元素顶部 |
1 |
|
|
|
|
|
left |
将背景图片定位到元素左部 |
1 |
|
|
|
|
|
right |
将背景图片定位到元素右部 |
1 |
|
|
|
|
|
bottom |
将背景图片定位到元素底部 |
1 |
|
|
|
|
|
center |
将背景图片定位到元素中部 |
1 |
|
|
|
|
|
长度值 |
使用长度值偏移图片的位置 |
1 |
|
|
|
|
|
百分数 |
使用百分数偏移图片的位置 |
1 |
|
|
|
|
body {
background-image: url(loading.gif);
background-repeat: no-repeat;
background-position: top;
}
解释：将背景图片置于页面上方，如果想置于左上方则值为：top left。
body {
background-image: url(loading.gif);
background-repeat: no-repeat;
background-position: 20px 20px;
}
解释：使用长度值或百分数，第一值表示左边，第二个值表示上边。
5.background-size
|
值 |
说明 |
CSS 版本 |
|
|
|
|
|
auto |
默认值，图像以本尺寸显示 |
3 |
|
|
|
|
|
cover |
等比例缩放图像，使图像至少覆盖容器，但有 |
3 |
|
可能超出容器 |
||
|
|
|
|
|
|
|
|
|
contain |
等比例缩放图像，使其宽度、高度中较大者与 |
3 |
|
容器横向或纵向重合 |
||
|
|
|
|
|
|
|
|
|
长度值 |
CSS 长度值，比如 px、em |
3 |
|
|
|
|
|
百分数 |
比如：100% |
3 |
|
|
|
|
body {
background-image: url(loading.gif); background-size: cover;
}
解释：使用 cover 相当于 100%，全屏铺面一张大图，这个值非常实用。在等比例放大缩小的过程中，可能会有背景超出，当然，这点无伤大雅。
div {
background-image: url(loading.gif); background-size: contain;
}
解释：使用 contain 表示，尽可能让图片完整的显示在元素内。
body {
background-image: url(loading.gif); background-size: 240px 240px;
}
解释：长度值的用法，分别表示长和高。
6.background-attachment
|
值 |
说明 |
CSS 版本 |
|
|
|
|
|
scroll |
默认值，背景固定在元素上，不会随着内 |
1 |
|
容一起滚动 |
||
|
|
|
|
|
|
|
|
|
fixed |
背景固定在视窗上，内容滚动时背景不动 |
1 |
|
|
|
|
body {
background-image: url(loading.gif);
background-attachment: fixed;
}
解释：fixed 属性会导致背景产生水印效果，拖动滚动条而背景不动。
7.background-origin
|
值 |
说明 |
CSS 版本 |
|
|
|
|
|
border-box |
在元素盒子内部绘制背景 |
3 |
|
|
|
|
|
padding-box |
在内边距盒子内部绘制背景 |
3 |
|
|
|
|
|
content-box |
在内容盒子内部绘制背景 |
3 |
|
|
|
|
div {
width: 400px; height: 300px;
border: 10px dashed red; padding: 50px; background-image: url(img.png); background-repeat: no-repeat; background-origin: content-box;
}
解释：设置背景起始位置。
8.background-clip
|
值 |
说明 |
CSS 版本 |
|
|
|
|
|
border-box |
在元素盒子内部裁剪背景 |
3 |
|
|
|
|
|
padding-box |
在内边距盒子内部裁剪背景 |
3 |
|
|
|
|
|
content-box |
在内容黑子内部裁剪背景 |
3 |
|
|
|
|
div {
width: 400px; height: 300px;
border: 10px dashed red; padding: 50px; background-image: url(img.png); background-repeat: no-repeat; background-origin: border-box; background-clip: padding-box;
}
解释：在内边距盒子内部裁剪背景。
9.background div {
width: 400px; height: 300px;
border: 10px dashed red; padding: 50px;
background: silver url(img.png) no-repeat scroll left top/100% border-box content-box;
}
解释：完整的简写顺序如下：
[background-color]
[background-image]
第 18 章 CSS 表格与列表
学习要点：1.表格样式2.列表样式3.其他功能
本章主要探讨 HTML5 中 CSS 表格和列表，通过表格和列表的样式设置，让表格和列表显示更加多元化。
一．表格样式
表格有五种独有样式，样式表如下：
|
|
属性 |
|
值 |
说明 |
|
CSS 版本 |
|
|
|
|
|
|
|
|
|
|
border-collapse |
边框样式 |
相邻单元格的边框样式 |
2 |
||
|
|
|
|
|
|
|
|
|
|
border-spacing |
长度值 |
相邻单元格边框的间距 |
2 |
||
|
|
|
|
|
|
|
|
|
|
caption-side |
位置名称 |
表格标题的位置 |
2 |
||
|
|
|
|
|
|
|
|
|
|
empty-cells |
显示值 |
空单元格是否显示边框 |
2 |
||
|
|
|
|
|
|
|
|
|
|
table-layout |
布局样式 |
指定表格的布局样式 |
2 |
||
|
|
|
|
|
|
|
|
|
1.border-collapse |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
值 |
|
|
说明 |
|
CSS 版本 |
|
|
|
|
|
|
|
|
|
|
separate |
|
默认值，单元格边框独立 |
|
2 |
|
|
|
|
|
|
|
|
|
|
|
collapse |
|
单元格相邻边框被合并 |
|
2 |
|
|
|
|
|
|
|
|
|
table {
border-collapse: collapse;
}
解释：单元格相邻的边框被合并。
2.border-spacing
|
值 |
说明 |
CSS 版本 |
|
|
|
|
|
长度值 |
0 表示间距，其他使用 CSS 长度值 |
2 |
|
|
|
|
table {
border-spacing:10px;
}
解释：border-collapse: separate;的状态下才有效。因为要设置间距，不能合并。
3.caption-side
|
|
值 |
|
说明 |
CSS 版本 |
|
|
|
|
|
|
|
|
top |
|
默认值，标题在上方 |
2 |
|
|
|
|
|
|
|
|
bottom |
|
标题在下方 |
2 |
|
|
|
|
|
|
|
table { |
|
|
|
|
|
|
caption-side: bottom; |
|
||
|
} |
|
|
|
|
|
解释：设置表格标题。 |
|
|
|
|
|
4.empty-cells |
|
|
|
|
|
|
|
|
|
|
|
|
值 |
|
说明 |
CSS 版本 |
|
|
|
|
|
|
|
|
show |
|
默认值，显示边框 |
2 |
|
|
|
|
|
|
|
|
hide |
|
不显示边框 |
2 |
|
|
|
|
|
|
|
table { |
|
|
|
|
|
|
empty-cells: hide; |
|
||
|
} |
|
|
|
|
|
解释：单元格内容为空是隐藏边框。 |
|
|||
|
5.table-layout |
|
|
|
|
|
|
|
|
|
|
|
|
值 |
|
说明 |
CSS 版本 |
|
|
|
|
|
|
|
|
auto |
默认值，内容过长时，拉伸整个单元格 |
2 |
|
|
|
|
|
|
|
|
|
fixed |
内容过长时，不拉伸整个单元格 |
2 |
|
|
|
|
|
|
|
table {
table-layout: fixed;
}
解释：内容过长后，不会拉伸整个单元格。
二．列表样式
列表有四种独有样式，样式表如下：
|
|
属性 |
|
值 |
|
说明 |
|
CSS 版本 |
|
|
|
|
|
|
|
|
|
|
|
list-style-type |
|
类型值 |
|
列表中的标记类型 |
1/2 |
|
|
|
|
|
|
|
|
|
|
|
|
list-style-image |
none 或url |
|
图像作为列表标记 |
1 |
||
|
|
|
|
|
|
|
|
|
|
|
list-style-position |
|
位置值 |
|
排列的相对位置 |
1 |
|
|
|
|
|
|
|
|
|
|
|
|
list-style |
|
简写属性 |
|
列表的简写形式 |
1 |
|
|
|
|
|
|
|
|
|
|
|
1.list-style-type |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
值 |
|
|
|
说明 |
|
CSS 版本 |
|
|
|
|
|
|
|
|
|
|
|
none |
|
没有标记 |
|
|
1 |
|
|
|
|
|
|
|
|
|
|
|
|
disc |
|
实心圆 |
|
|
1 |
|
|
|
|
|
|
|
|
|
|
|
|
circle |
|
空心圆 |
|
|
1 |
|
|
|
|
|
|
|
|
|
|
|
|
square |
|
实心方块 |
|
|
1 |
|
|
|
|
|
|
|
|
|
|
|
|
decimal |
|
阿拉伯数字 |
|
|
1 |
|
|
|
|
|
|
|
|
||
|
|
lower-roman |
|
小写罗马数字 |
|
1 |
||
|
|
|
|
|
|
|
||
|
|
upper-roman |
|
大写罗马数字 |
|
1 |
||
|
|
|
|
|
|
|
||
|
|
lower-alpha |
|
小写英文字母 |
|
1 |
||
|
|
|
|
|
|
|
||
|
|
upper-roman |
|
大写英文字母 |
|
1 |
||
|
|
|
|
|
|
|
|
|
ul {
list-style-type: square;
}
解释：列表前缀的标记类型，这里是 CSS1 版本的。CSS2 版本还包含比如日文、亚美尼亚数字、希腊文等前缀。有兴趣的可以参考 CSS 手册。
2.list-type-position
|
值 |
说明 |
CSS 版本 |
|
|
|
|
|
outside |
默认值，标记位于内容框外部 |
1 |
|
|
|
|
|
inside |
标记位于内容框内部 |
1 |
|
|
|
|
ul {
width: 120px;
list-style-position: inside;
}
解释：标记位于内容框的内部。
3.list-type-image
|
值 |
说明 |
CSS 版本 |
|
|
|
|
|
none |
不使用图像 |
1 |
|
|
|
|
|
url |
通过 url 使用图像 |
1 |
|
|
|
|
ul {
list-style-image: url(bullet.png);
}
解释：使用图片作为前缀的标记。
4.list-style
ul {
list-style: lower-alpha inside url(bullet.png);
}
解释：简写形式。
三．其他功能
在<table>中<td>单元格，我们可以使用 text-align 属性水平对齐，但是垂直对齐就无法操作了。CSS 提供了 vertical-align 属性用于垂直对齐。
|
|
值 |
说明 |
CSS 版本 |
|
|
|
|
|
|
|
baseline |
内容对象与基线对齐 |
1 |
|
|
|
|
|
|
|
top |
内容对象与顶端对齐 |
1 |
|
|
|
|
|
|
|
middle |
内容对象与中部对齐 |
1 |
|
|
|
|
|
|
|
bottom |
内容对象与底部对齐 |
1 |
|
|
|
|
|
|
table tr td { |
|
|
|
|
|
vertical-align: bottom; |
|
|
|
} |
|
|
|
|
解释：将单元格内的内容对象实现垂直对齐。 |
|
||
|
|
|
|
|
|
|
值 |
说明 |
CSS 版本 |
|
|
|
|
|
|
|
sub |
垂直对齐文本的下标 |
1 |
|
|
|
|
|
|
|
super |
垂直对齐文本的上标 |
1 |
|
|
|
|
|
b {
vertical-align: super;
}
解释：文本上下标设置。
|
值 |
说明 |
CSS 版本 |
|
|
|
|
|
长度值 |
设置上下的偏移量，可以是负值 |
1 |
|
|
|
|
|
百分比 |
同上 |
1 |
|
|
|
|
div span {
vertical-align: -200px;
}
解释：负值往下，正值往上。如果默认基线在上面，用负数。如果默认基线在下面，用正值。
标签：
原文地址：http://blog.csdn.net/sinat_29384657/article/details/51248453
