目录：
一、格式化网页
-----------1、添加滚动条“CSS布局- Overflow”
-------------------①两种滚动条的添加方式
-------------------②CSS布局- Overflow的注意要点
二、格式化文字
三、格式化表格
-----------1、将边框合并为单一边框
-------------------①CSS 的border-collapse 属性
-----------2、更改边框样式
-------------------①CSS border-style 属性
（有知识性错误或者其他问题请联系本人：QQ邮箱：1297663461@qq.com"备注CSDN+问题"----------临沂大学软工5班王同学）
一、格式化网页
1、添加滚动条：CSS布局- Overflow
CSS overflow 属性用于控制内容溢出元素框时显示的方式
我们通过样例来讲解：
添加滚动条有两种写法：①新建属性类；②直接在<div style="">里写
先着重讲一下第①种在简要讲第②种：
<html>
<head>
<meta charset="utf-8">
<title>CSS应用</title>
<style>
#overflowTest {
background: #4CAF50;
color: white;
padding: 15px;
width: 80%;
height: 100px;
overflow: scroll;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="overflowTest">
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
</div>
</body>
</html>
①先在<style>在此添加各类属性</style>里新建一个滚动条属性类：
#overflowTest {
background: #4CAF50;
color: white;
padding: 15px;
width: 80%;
height: 100px;
overflow: scroll;
border: 1px solid #ccc;
}
#overflowTest： 自己定义的属性名
background: 背景颜色
color:：字体颜色
padding: 背景填充大小
width: 滚动条框的宽
height: 滚动条框的高
overflow: 控制内容溢出元素框时显示的方式，更改其后面的值即可更改滚动条的显示方式；
border: 1px solid #ccc 边框属性：粗细1px、实心、白色
②<div id="overflowTest">调用上一步建好的属性类
<div id="overflowTest">
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
<p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
</div>
<div style="height:300px;width:70px;overflow:auto;background:#EEEEEE;">
菜鸟教程 -- 学的不仅是技术，更是梦想！！！
菜鸟教程 -- 学的不仅是技术，更是梦想！！！
菜鸟教程 -- 学的不仅是技术，更是梦想！！！
菜鸟教程 -- 学的不仅是技术，更是梦想！！！
</div>
2、注意要点：
CSS Overflow
CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。
overflow属性有以下值：
注意:overflow 属性只工作于指定高度的块元素上。
以上5种值的运行结果：
visible：
hidden：
scroll：
auto它和scroll相比少了下边框的滚动栏
inherit
二、格式化文字：
如何在DWcc2018中添加自己想要字体：https://blog.csdn.net/cwyp18809/article/details/82959229
①先在<style>在此添加各类属性</style>里新建一个文字属性类
.type{
font-family: "楷体"；
front-size: 12pt;
color: #0011aa;
text-align: left;
text-indent: 2em;
line-height: 1.6;
}
②通过class="type"调用之前新建好的文字类属性
<p class="type">
格式化本段文字、字体：宋体、大小：12pt、颜色：#0011aa、左对齐、首行缩进2em、行高1.6倍。设置其中一部分为斜体、粗体、下划线</p>
注意：关于其中其他不太清楚的文本格式化标记可参考下面网址的文本格式化标记https://blog.csdn.net/cwyp18809/article/details/82826431
三、格式化表格：
完整样例：最终效果
普通的DWcc插入表格最小的1像素表格根本做不出粗虚线、细虚线、双线等效果，所以，我们需要新建一个表格类
这是普通DWcc常见的表格
先在<style>在此添加各类属性</style>里新建一个表格属性类
.tab{
border-collapse:collapse;
}
.tab, td1, th1 {
border: 1px solid black;
}
建议不要将**.tab和.tab, td1, th1写成table和.table, td, th**因为后者是默认表格类属性的名称（HTML自带的表格类属性），使用该名称后就相当于把默认的表格类属性改为你定义的，然后所有的表格都会调用该类；
由于我们只需要做一个特定表格，其他表格不需要改变，所以不能用默认表格类的名称（出默认名称之外都可）
CSS 的border-collapse 属性
border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。
可能的值
border: 1px solid black;为边框的各类属性
实例展示：
<html>
<head>
<meta charset="utf-8">
<title>CSS应用</title>
<style>
.tab {
border-collapse: collapse;
}
.tab, td1, th1 {
border: 1px solid black;
}
</style>
</head>
<body>
<table class="tab">
<tr>
<th class="tab">Firstname</th>
<th class="tab">Lastname</th>
</tr>
<tr>
<td class="tab">Peter</td>
<td class="tab">Griffin</td>
</tr>
<tr>
<td class="tab">Lois</td>
<td class="tab">Griffin</td>
</tr>
</table>
</body>
</html>
CSS border-style 属性
属性定义及使用说明： border-style属性设置一个元素的四个边框的样式。此属性可以有一到四个值。
实例:
border-style:dotted solid double dashed;
- 上边框是点状
- 右边框是实线
- 下边框是双线
- 左边框是虚线
border-style:dotted solid double;
- 上边框是点状
- 右边框和左边框是实线
- 下边框是双线
border-style:dotted solid;
- 上边框和下边框是点状
- 右边框和左边框是实线
border-style:dotted;
- 所有4个边框都是点状
属性值
实例样式：
每边设置不同的边框
<html>
<head>
<meta charset="utf-8">
<title>CSS应用</title>
<style>
p.one {border-style:dotted solid dashed double;}
p.two {border-style:dotted solid dashed;}
p.three {border-style:dotted solid;}
p.four {border-style:dotted;}
</style>
</head>
<body>
<p class="one">这是边框效果</p>
<p class="two">这是边框效果</p>
<p class="three">这是边框效果</p>
<p class="four">这是边框效果</p>
</body>
</html>