自:Office之家链接:http://www.icanzc.com/word/6841.html

上学时写毕业论文，逼得到处搜罗各种排版技能，那时word技能迅速达到了巅峰，后来毕业了就迅速遗忘了。没想到，上班之后和文档打交道频次就更多了，如，产品需求文档、解决方案输出、投标材料、项目申报等等，时不时还会遇上评选职称需要写个论文啥的，编辑还得要求排版规范。 若掌握了常用的word技能，就能够帮你节省许多时间，比如你可能遇到过以下问题： 1、每段空2字符，不是你敲击空格键 2、为什么复制粘贴的文字，行间距明明设置一样，但是看着就是不一样找不到原因 3、多个人协作合并的文档，格式调整累到爆 4、章节编号全是手动编写，新插入一个章节，又要重新搞起，至于图表编号更是想也不敢想 5、知道了设置页眉页脚，但是封面不需要页眉和页码，难不成新建一个文档单独搞一个封面，机智如我 无论什么文档，如果有固定的版面规范对后期的排版、多人协作都是有好处的，能够大大提升效率，事半功倍。本文拆分五步骤快速解决排版过程中遇到的常见问题。一起往下看。

1 . 定字体样式，批量调整 确定正文的字体、大小、间距，这操作非常常见。如果没有进行特殊设置，默认输入的文字按照正文样式进行排版，因此只需要对正文样式进行修改，就可以完成所有正文文字的修改，一劳永逸，而不是手动选择每段文字重复操作大小和首行缩进等，你累，鼠标比你还累！ 正文样式修改：【开始】-【样式】-【正文】右击【修改】-【格式】，关于字体和段落的修改都在里面。

其中，字体可以对中文、英文进行分别自定义，但有时英文、数字还是默认中文字体样式，可采用全选文字，选择英文字体样式如Times New Roman，英文和数字就自动调整，中文样式不变。 段落经常要首行缩进2字符，是在【段落】-【特殊格式】-【首行缩进2字符】，不要再敲击空格键4次了（自己脑补画面）。 顺便梳理一下段落中缩进、段间距、行间距的区别（点击查看大图）。缩进非常容易理解与调整，搞清楚间距这个概念，当间距过大时，就知道是调整段间距还是行间距了。

2 . 定各级标题样式，自动编号 让不同文字呈现层级结构，只需要选中文字，选择【开始】-【样式】中标题1、标题2、标题3。问题是，如何自动实现一级标题1、2、3，二级标题1.1、1.2、1.3的编号？ 在开始段落菜单栏找到【多级列表】-【定义新的列表样式】-【格式】-【编号】-【更多】点击要修改的级别1，将级别链接到样式【标题1】。同理，级别2-标题2，级别3-标题3，通常到5级标题就差不多完全够用了。

自动编号设置完成后，如何使用？选中文字，选择【样式】标题1、标题2，对应就是已经编好号的一级标题，二级标题了。

3 . 定框架，生成目录 一旦各级标题都确定了标题样式，那么生成目录是水到渠成的事情。如果没有将文字对应到标题1、2、3的样式，你的目录是不能自动生成的。【引用】-【目录】-选择手动目录or自动目录or自定义目录。 建议在浏览文章结构时，打开文档导航窗格，【视图】-【显示】-勾选【导航窗格】，好处多多： 更利于快速浏览与定位 多级标题修改，通过右击选择【升级】【降级】【删除】可快速完成修改，特别章节内容较多，手动删除麻烦，直接在导航窗格删除，轻松搞定。 鼠标拖动该级标题，实现整块内容迅速移动。

4 . 定页眉页脚，格式自定义 大家都知道页眉通常写项目名称or公司名称or公司logo，页脚肯定要编页码。那么你肯定遇到过这个问题：删除页眉后，如何去除困扰你许久的页眉上的横线？

方法一：选中横线设置【开始】-【字体】-【清除格式】

方法二：选中横线设置【开始】-【段落】-【无框线】

注意：一定要先选中横线部分，不然不起作用。

领导说，封面怎么会有页码，去掉！目录要用罗马格式，正文从1开始用阿拉伯数字，要专业一点，赶紧改。。。。。。

首先，我们要知道分节符这个功能，分节符可让不同章节格式不同。 封面不要页码，目录用罗马编号：

第一步：分别在封面与目录、目录与正文之间插入分节符。【页面布局】-【分隔符】-【分节符】-【下一页】 如何查看分节符有没有插入成功？双击页眉或页脚，可以看到封面是第1节、目录是第2节、正文是第3节，说明分节成功。

第二步：双击目录的页脚，点击取消【链接到前一条页眉】，这一步很关键，如果不取消链接，封面与目录页码有无保持同步。那么无论在封面还是目录插入页码，将同时有页码。当删除封面页码时，目录页码也会同步随着消失。

第三步：在目录页脚位置插入页码，并设置页码格式。编号格式设置为罗马格式，起始页码为1，目录页码完成，此时看到封面没有页码。

正文从1开始用阿拉伯数字：这个就简单了，设置页码格式就行了。上图中【编号格式】选择为1,2,3... 这里补充说明一下分页符和分节符的区别。从字面就可以清晰的理解： 分页符 主要用于用户手动分页，比如标书中商务部分插入公司资质图片，希望每页一张图片，就采用插入分页符的方式，比手动回车到下一空白页更省时省力。通常word在到达页的结尾自动插入分页符。自动分页符不能够删除。自己插入的手动分页符可以删除，直接【Backspace】or【Delete】。 分节符 使用分节符是可以看成将文章划分为不同的部分，便于调整各个部分的格式如页眉页脚、纸张横版竖版。如果删除分节符，要注意页眉页脚的变化。删除分节符的方法直接在上一节末尾，按【Delete】。

5 . 定图表编号，自动更新 有时候写材料为了支撑选题的重要性，需要到处搜罗图表趋势材料，绘制功能架构图等，导致插入图表过多，但又怕编号后有变动，带来的工作量巨大，因此直接放弃对图表的编号。统统以见下表、如下图所示的表示，这是一种偷懒的做法，并不鼓励，掌握了如何图表编号后自动更新的功能，你体现出的专业性也更多了一些，而且并没有浪费你许多时间。 第一步：建立规则 【引用】-【插入题注】-【新建标签】-输入【图1-】

第二步：自动插入图表编号 【引用】-【插入题注】-【确定】，不用新建标签，已完成自动编号。 至此完成图片自动编号，表格操作类似。接下来如何在文章中引用图表编号。

第三步：段落中引用图表编号 【引用】-【交叉引用】-选择【引用类型】图1-类别，可以看到相关图表编号，选择即可

修改自动更新：当图表新增或者删除后，后面图表编号和引用位置不会同步更新。解决方法是：Ctrl+A选中全文，按F9（更新域）完成编号自动更新。当引用图表删除后，引用位置出现【错误！未找到引用源】，可通过查找批量删除。 最后插一句，在阅读行业白皮书、分析报告经常看到文章最后有图表的附录，如果图表建立编号后，可轻松实现：【引用】-【插入表目录】搞定！ 好了，以上便是为大家介绍的Word高效排版中的常用技能，最主要的还得自己动动手去练习一下，纸上得来终觉浅，绝知此事要躬行。

.1 CSS 语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

selector {declaration1; declaration2; ... declarationN }

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

selector {property: value}

下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。

在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。

h1 {color:red; font-size:14px;}

下面的示意图为您展示了上面这段代码的结构：

image.png

1.1.1 字体属性：

属性 含义 属性值

font-family 字体 各种字体
font-style 字体样式 italic、oblique
font-variant 小体大写 small-caps
font-weight 字体粗细 bold、bolder、lighter…
font-size 字体大小 absolute、relative、%
color 字体颜色 颜色值

1.1.2 颜色与背景属性：

属性 含义 属性值

Color 颜色 颜色值
Background-color 背景色 颜色值
Background-image 背景图案 图片路径
Background-repeat 背景图案重复方式 Repeat-x | repeat-y | no-repeat
Background-attachment 背景的滚动 Scroll | fix
Background-position 背景图案初始位置 % | n em | top | left | right | bottom

1.1.3 文本属性:

属性 含义 属性值

word-spacing 单词间距 n em
letter-spacing 字母间距 n em
text-decoration 装饰样式 underline| overline| line-through| blink
vertical-align 垂直方向位置 sub| super |top |text-top| middle| bottom| text-bottom
text-transform 转为其他形式 capitalize| uppercase| lowercase
text-align 对齐 left| right| center| justify
text-indent 缩进 n em| %
line-height 行高 pixels、n em、%

1.1.4 边距属性:

属性 含义 属性值

margin-top 上边距 n em | %
margin-right 右 n em | %
margin-bottom 下 n em | %
margin-left 左 n em | %

1.1.5 边框属性:

属性 含义 属性值

Border-top-width 上边框宽度 n em | thin | medium | thick
Border-right-width 右 同上
Border-bottom-width 下 同上
Border-left-width 左 同上
Border-width 四边 同上
Border-color 边框颜色 Color
Border-style 边框样式 Dotted | dash | solid | double | groove | ridge | inset | outset
Border-top|right|bottom|left 上(右|底|左)所有属性 Border-width | border-style | color

1.1.6 图文混排:

属性 含义 属性值

Width 宽度 n em | %
Height 高度 n em
Float 文字环绕 Left | right
clear 去除文字环绕 Left | right | both

1.1.7 列表属性:

属性 含义 属性值

Display 是否显示 Block | inline | list-item | none
White-space 空白部分 Pre | nowrap | normal（是否合并)
List-style-type 项目编号 Disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none
List-style-image 项目前图片 Img-url
List-style-position 第二行位置 Inside | outside
List-style 全部属性 Keyword | position | url

1.1.8 鼠标属性:

属性值 含义 属性值 含义

Auto 自动 N-resize 上箭头
Crosshair "+" Se-resize 右下
Default 默认 Sw-resize 左下
Hand 手形 S-resize 下箭头
Move 移动 W-resize 左箭头
E-resize 右箭头 Text "I"
Ne-resize 右上 Wait 沙漏
Nw-resize 左上 help 帮助

1.2 CSS选择器

1.2.1 li标签选择器

html:

<li>列表项1</li>（改变标签里的样式类型）

css:

针对所有列表

li{
 color: rgb(255,0,0); /*#ff0000 red*/
 font-size: 30px;
}

1.2.2 类选择器 class（把一堆样式划为一类）

<pre style="margin-bottom:18.0pt;line-height:16.5pt;background:#F6F8FA;
word-break:break-all">div`.topBar +Tab = <`divclass`=`"topBar"`></`div`>`</pre>

当前页面内可以多个同样 html:

<pre style="margin-bottom:18.0pt;line-height:16.5pt;background:#F6F8FA;
word-break:break-all"><li class="blue">`列表项``2`</li></pre>

css:

<pre style="margin-bottom:18.0pt;
line-height:16.5pt;background:#F6F8FA;word-break:break-all"> color: #0000ff;</pre>
<pre style="margin-bottom:18.0pt;
line-height:16.5pt;background:#F6F8FA;word-break:break-all"> }</pre>

1.2.3 ID选择器 id（也可控制某个DIV样式）

当前页面内唯一id； 如果页面内出现多个相同id，虽然可以解析出，但不规范，不建议

<li id="item">列表项1</li>
 #item{
 color: #00FF00;
 font-size:40px;
 }

权重越大，优先级越高，优先级高的覆盖优先级低的

各种选择器可以用在列表li、容器div等中

html:

 <div>这是一个Div</div>

CSS:

 div{
 background-color: #ccc;
 }

1.3 CSS样式规则

1.3.1 三种定义样式的方法

①****在本文件下的表示方法

 <head>
 <style type="text/css"> //样式
 选择器（即修饰对象）{ //.g{ }
 对象属性1：属性值1； //font：
 对象属性2：属性值2； //height：50px；
 }
 </style>
 </head>

②在1.css文件中的表示方法

 <link rel="stylesheet" type="text/css" href="1.css">

③直接跟着定义样式

<div class=" size show show-1"></div>

每个样式间用空格隔开，有三个样式 size、show、show-1

1.3.2 颜色

red = #FF0000 = rgb(255,0,0) 红色
blue = #0000ff = 蓝色
green = #00FF00 = 绿色
 #ccc = #cccccc 灰色
 #fff = #ffffff 白色
black = #333 黑色
background: #fff; 背景为白色
background: #fff; 背景为白色
 cursor: pointer; 当移动到当前位置时（配合li:hover）变成小手
 transition: all 1s ease; 渐变效果（有些浏览器不支持）
 -webkit-transition:all 1s ease;
 -o-transition:all 1s ease;
 -moz-transition:all 1s ease;
 -ms-transition: all 1s ease; 对于不支持的浏览器，解决方案

1.3.3 字体font

 width: 200px;宽度
 font-weight: bold; 字体粗细（粗体）
 font-size: 12px; 字体大小
 color: #ff7300; 字体颜色
 background-color: #ccc; 背景色
 height 高度
width 宽度（可以认为是长度）
font-family：隶书；字体

长度单位：

px 像素

颜色

 十六进制：#ffffff
 颜色名称：red

尺寸属性：

 Height、max_height、min_height
 width、max_width、min_width

字体、字号：

 font 缩写形式
 font-weight 粗细
 font-size 大小
 font-family 字体系列
 font-style 字体样式

字体颜色

 color
 opacity 透明度 css3

行距、对齐等

 line-height 行高
 text-align 对齐
 letter-spacing 字符间距
 text-decoration 文本修饰
 overflow 浮动
 text-overflow
 text-indent

1.3.4 列表宽度决定了列表项宽度

 height: 100px;
 line-height: 100px; 使其上下居中对齐
 text-align: right; 水平对齐方式：水平靠右
 text-align: center; 水平对齐方式：水平居中
 letter-spacing: 10px; 字间距
 text-decoration: none; 下划线设置（去除）
 white-space: nowrap; 设为一行显示
 overflow: hidden;
 display: block; 隐藏多余内容

1.3.5 图片

 background-image: url(images/1.jpg); 插入图片
 background-image: url(../images/1.jpg); 插入上一级文件夹中images文件夹中的图片1.jpg
 background-repeat: no-repeat; 图片默认多大就是多大（不加自动复制显示）
 background-position: 50px 50px; 移动图片（正数为右下角，负数为左上角）

1.3.6 块级元素 默认占一行

★float: left; 浮动 将块级元素变为行级元素 让多行在一行 如果一行放不下，自动转第二行
 height: 50px; /*使其上下居中对齐*/
 line-height: 50px; /*使其上下居中对齐*/
 text-align: center; 水平对齐方式：水平居中
 margin-right: 5px; 每个元素间间隔5px
 font-size: 20px; 字体大小

1.3.7 焦点

鼠标移到当前位置时的状态

 a:hover{
 color: red;
 }
 /*鼠标激活选定状态*/
 a:active{
 color: green;
 }

1.3.8 超链接样式的四种状态

 未访问状态 a:link
 已访问状态 a:visited
 鼠标移上状态 a：hover
 激活选定状态 a：active

1.3.9 盒子（矩形方框）

margin（外边距/边界）
border（边框）
padding（内边距/填充）
width 宽度
height 高度
margin 外边距/边界
margin：1px 2px 3px 4px 外边距/边界（上右下左）
margin：1px 2px 外边距/边界（上下、左右）
margin：1px 外边距/边界（上下左右、通常表现出来上左）

margin

一个值：4边

两个值：上下、左右

四个值：上右下左

margin-left: auto; 左边距自动
margin-left: auto; /水平居中/
margin-right: auto; /水平居中/
margin: 0px auto; /水平居中，有的浏览器不支持/

默认下，div没有边框border（有颜色）

默认不显示border

border-color: blue;
border-width: 10px;
border-style: solid; 以上三句话使其最终显示 solid实心的
border width style color
border：20px solid green 一句话也可以显示
border-top:30px solid #ccc; 设置上边框属性
padding-top: 20px; 内边距（上）
padding: 20px; 内边距（上下左右）
padding: 20px 50px; 内边距（上下、左右）

对同一属性做设置，后面的优先级高

对外边距/边界设置，一般统一格式，不要上边设下边距，下边设上边距；如果设置，按大的显示

margin-bottom: 30px;
.topbar .search .topabar .link{float:right;} 共用一种样式{浮动 将块级元素变为行级元素}

1.3.10 解决浮动问题，使用尾类

 .fix{*zoom:1;*clear:both;} 
 .fix:before,.fix:after{
 display: table;clear:both;
 content: '';
 }
 <div class="wrap fix"> +fix谁的子元素浮动，就可以清除影响
 .fix{*zoom:1;*clear:both;}
 .fix:before,.fix:after{
 display: table;clear:both;
 content: '';
 }

1.3.11 定位

 position: absolute; 绝对定位
 position: relative; 相对定位

参照物是距离最近 定位的父元素

1.3.12 对定位元素显示排序

 z-index: 1; 数字越大，优先级越高

设置 鼠标指到哪里，哪里在上边

 .c4:hover{
 z-index: 3;
 }

1.3.13 响应式

viewport
 设备方向：Orientation
 设备方向：Orientation

1.3.14 其他样式

header、footer、center、left、right

头 尾 中间 左 右

链接 默认带下划线

<div class=" size show show-1"></div>

每个样式间用空格隔开，有三个样式 size、show、show-1

list-style:none; 去除前面的列表序列号
border 边框
border: 1px solid red; 添加边框
<div style="clear: both"></div> 用于消除浮动效果导致的顺序错乱
height 高度
width 宽度（可以认为是长度）
font-family：隶书；字体
 top: 25px; 距离上方25px
 left: 15px; 距离左边15px
display: none;不显示
@media screen and (max-width: 900px){ } 当分辨率小于900px时
line-height: 1.8; 行高

1.4 为CSS单独建立文件（建立链接link）