第一篇：网页设计中针对中文排版CSS心得
网页设计中针对中文排版CSS心得
数月来学习web标准，并遵循标准设计和制作web页面。一直想写点什么，整理一下自己的心得体会。写这篇文章，主要是针对中文排版设计，英文排版因为很少做，所以不涉及。
先介绍如何设定字体、颜色、大小、段落空白等比较简单的应用，后面再介绍下比如首字下沉、首行缩进。最后讲一些常用的web页面中文排版，比如中文字的截断、固定宽度词内折行（word-wrap和word-break）等等。因为只是写一些应用方面的心得，如果需要完整的CSS属性介绍，请参考CSS手册。
1、如何设定文字字体、颜色、大小 —— 使用font
font-style设定斜体，比如font-style: italic;
font-weight设定文字粗细，比如font-weight: bold;
font-size设定文字大小，比如font-size: 12px;（或者9pt，不同单位显示问题参考CSS手册）
line-height设定行距，比如line-height: 150%;
color设定文字颜色（注意不是font-color），比如color: red;
font-family设定字体，比如font-family : “Lucida Grande”, Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif;（这是通用的写法）
以上都可以写在一行font属性里（除了color属性需要单独写）：
font: italic bold 12px/150% “Lucida Grande”, Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif;
2、如何控制段落排版 —— 使用margin，text-align
中文段落使用
标签，左右（相当于缩进）、段前段后的空白，都可以用margin。比如：
p{
margin: 18px 6px 6px 18px;/*分别是上、右、下、左，十二点开始的顺时针方向*/}
文字的对齐方式用text-align，比如：
p{
text-align: center;/*居中对齐*/
}
对齐方式还有left、right和justify（两端对齐）
PS.谈起margin，我习惯于在写CSS的时候为所有的标签定义margin: 0;因为时而出现由于默认的margin值导致页面排版问题，而自己找不到原因（特别注意的是ul/ol/p/dt/dd等标签）
3、竖排文字 —— 使用writing-mode
writing-mode属性有两个值lr-tb和tb-rl，前者是默认的左-右、上-下，后者是上-下、右-左。
比如：
p{
writing-mode: tb-rl;
}
可以结合direction排版。
4、项目符号的问题 —— 使用list-style
在CSS里项目符号有disc（实心圆点）、circle（空心圆圈）、square（实心方块）、decimal（阿拉伯数字）、lower-roman（小写罗马数字）、upper-roman（大写罗马数字）、lower-alpha（小写英文字母）、upper-alpha（大写英文字母）、none（无）。比如设定一个列表（ul或
ol）的项目符号为方块，如：
li{
list-style: square;
}
另外list-style还有一些值，比如可以采用一些小图片作为项目符号，在list-style下直接写url(“图片地址”)就可以了。注意如果一个项目列表的左外补丁（margin-left）设为零的时候，list-style-position: outside（默认是outside）的项目符号不会显示。可惜的是上述的项目符号似乎并不能设定大小，圆点和方块始终是那么点。并且不能设定垂直方向上的对齐。
5、首字下沉 —— 使用:first-letter
伪对象:first-letter配合font-size、float可以制作首字下沉效果。
比如：
p:first-letter{
padding: 6px;
font-size: 32pt;
float: left;
}
6、首行缩进 —— 使用text-indent
text-indent可以使得容器内首行缩进一定单位。比如中文段落一般每段前空两个汉字。可以这么写：
p{
text-indent: 2em;/*em是相对单位，2em即现在一个字大小的两倍*/
}
如果font-size是12px的话，那么text-indent: 2em则缩进24px。
7、关于汉字注音 —— 使用ruby标签和ruby-align属性
比如说注音zhu yin，可以利用ruby-align设置对齐方式。这是在CSS手册里面看到的，具体可以自行查阅ruby-align项。
8、固定宽度汉字截断 —— 使用text-overflow
用后台语言可以对从数据库里的字段内容做截断处理，比如说截12个汉字（之后用省略号）。但是有时还需要html标签的过滤等，而用CSS来控制则没有这个问题。比如对列表应用以下样式
第二篇：网页美工CSS样式
字体属性：(font)大小 {font-size: x-large;}(特大)xx-small;(极小)一般中文用不到，只要用数值就可以，单位：PX、PD 样式 {font-style: oblique;}(偏斜体)italic;(斜体)normal;(正常)行高 {line-height: normal;}(正常)单位：PX、PD、EM 粗细 {font-weight: bold;}(粗体)lighter;(细体)normal;(正常)变体 {font-variant: small-caps;}(小型大写字母)normal;(正常)大小写 {text-transform: capitalize;}(首字母大写)uppercase;(大写)lowercase;(小写)none;(无)修饰 {text-decoration: underline;}(下划线)overline;(上划线)line-through;(删除线)blink;(闪烁)
常用字体：(font-family)“Courier New”, Courier, monospace, “Times New Roman”, Times, serif, Arial, Helvetica, sans-serif, Verdana
背景属性：(background)色彩 {background-color: #FFFFFF;} 图片 {background-image: url();} 重复 {background-repeat: no-repeat;} 滚动 {background-attachment: fixed;}(固定)scroll;(滚动)位置 {background-position: left;}(水平)top(垂直);简写方法 {background:#000 url(..)repeat fixed left top;}
区块属性：(Block)字间距 {letter-spacing: normal;} 数值
对齐 {text-align: justify;}(两端对齐)left;(左对齐)right;(右对齐)center;(居中)缩进 {text-indent: 数值px;} 垂直对齐 {vertical-align: baseline;}(基线)sub;(下标)super;(下标)top;text-top;middle;bottom;text-bottom;词间距word-spacing: normal;数值
空格white-space: pre;(保留)nowrap;(不换行)
显示 {display:block;}(块)inline;(内嵌)list-item;(列表项)run-in;(追加部分)compact;(紧凑)marker;(标记)table;inline-table;table-raw-group;table-header-group;table-footer-group;table-raw;table-column-group;table-column;table-cell;table-caption;(表格标题)
方框属性：(Box)width:;height:;float:;clear:both;margin:;padding:;
顺序：上右下左 边框属性：(Border)border-style: dotted;(点线)dashed;(虚线)solid;double;(双线)groove;(槽线)ridge;(脊状)inset;(凹陷)outset;border-width:;边框宽度 border-color:#;
简写方法border：width style color;
列表属性：(List-style)类型list-style-type:
disc;(圆点)circle;(圆圈)square;(方块)decimal;(数字)lower-roman;(小罗码数字)upper-roman;lower-alpha;upper-alpha;位置list-style-position: outside;(外)inside;图像list-style-image: url(..);定位属性：(Position)Position: absolute;relative;static;visibility: inherit;visible;hidden;overflow: visible;hidden;scroll;auto;clip: rect(12px,auto,12px,auto)(裁切)
css属性代码大全 一 CSS文字属性： color : #999999;font-family : 宋体,sans-serif;font-size : 9pt;font-style:itelic;font-variant:small-caps;letter-spacing : 1pt;line-height : 200%;font-weight:bold;vertical-align:sub;vertical-align:super;text-decoration:line-through;text-decoration: overline;text-decoration:underline;text-decoration:none;text-transform : capitalize;text-transform : uppercase;text-transform : lowercase;text-align:right;text-align:left;text-align:center;text-align:justify;vertical-align属性 vertical-align:top;vertical-align:bottom;vertical-align:middle;vertical-align:text-top;vertical-align:text-bottom;
二、CSS边框空白 padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;list-style-type:decimal;list-style-type:lower-roman;list-style-type:upper-roman;list-style-type:lower-alpha;list-style-type:upper-alpha;list-style-type:disc;list-style-type:circle;list-style-type:square;list-style-image:url(/dot.gif);list-style-position: outside;list-style-position:inside;
四、CSS背景样式：
background-color:#F5E2EC;background:transparent;background-image : url(/image/bg.gif);background-attachment : fixed;background-repeat : repeat;background-repeat : no-repeat;background-repeat : repeat-x;background-repeat : repeat-y;指定背景位置
background-position : 90% 90%;background-position : top;background-position : buttom;background-position : left;background-position : right;background-position : center;
五、CSS连接属性： a a:link a:visited a:active a:hover 鼠标光标样式：
链接手指 CURSOR: hand 十字体 cursor:crosshair 箭头朝下 cursor:s-resize 十字箭头 cursor:move 箭头朝右 cursor:move 加一问号 cursor:help 箭头朝左 cursor:w-resize 箭头朝上 cursor:n-resize 箭头朝右上 cursor:ne-resize 箭头朝左上 cursor:nw-resize 文字I型 cursor:text 箭头斜右下 cursor:se-resize 箭头斜左下 cursor:sw-resize 漏斗 cursor:wait 光标图案(IE6)
p {cursor:url(“光标文件名.cur”),text;}
六、CSS框线一览表：
border-top : 1px solid #6699cc;border-bottom : 1px solid #6699cc;border-left : 1px solid #6699cc;border-right : 1px solid #6699cc;以上是建议书写方式,但也可以使用常规的方式 如下: border-top-color : #369 border-top-width :1px border-top-style : solid 其他框线样式 solid dotted double groove ridge inset outset
七、CSS表单运用： 文字方块 按钮 复选框 选择钮
多行文字方块
下拉式菜单 选项1选项2
八、CSS边界样式： margin-top:10px;margin-right:10px;margin-bottom:10px;margin-left:10px;
CSS 属性： 字体样式(Font Style)序号 中文说明 标记语法 字体样式 {font:font-style font-variant font-weight font-size font-family} 2 字体类型 {font-family:“字体1”,“字体2”,“字体3”,...} 3 字体大小 {font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small} 4 字体风格 {font-style:inherit|italic|normal|oblique} 5 字体粗细
{font-weight:100-900|bold|bolder|lighter|normal;} 6 字体颜色
{color:数值;} 7 阴影颜色 {text-shadow:16位色值} 8 字体行高
{line-height:数值|inherit|normal;} 9 字 间 距
{letter-spacing:数值|inherit|normal} 10 单词间距 {word-spacing:数值|inherit|normal} 11 字体变形 {font-variant:inherit|normal|small-cps } 12 英文转换 {text-transform:inherit|none|capitalize|uppercase|lowercase} 13 字体变形 {font-size-adjust:inherit|none} 14 字体 {font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider} 文本样式(Text Style)序号 中文说明 标记语法 行 间 距 {line-height:数值|inherit|normal;} 2 文本修饰 {text-decoration:inherit|none|underline|overline|line-through|blink} 3 段首空格
{text-indent:数值|inherit} 4 水平对齐 {text-align:left|right|center|justify} 5 垂直对{vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}
齐 书写方式 {writing-mode:lr-tb|tb-rl} 背景样式
序号 中文说明 标记语法 背景颜色 {background-color:数值} 2 背景图片 {background-image: url(URL)|none} 3 背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y} 4 背景固定 {background-attachment:fixed|scroll} 5 背景定位 {background-position:数值|top|bottom|left|right|center} 6 背影样式 {background:背景颜色|背景图象|背景重复|背景附件|背景位置} 框架样式(Box Style)序号 中文说明 标记语法 边界留白 {margin:margin-top margin-right margin-bottom margin-left} 2 补
白 {padding:padding-top padding-right padding-bottom padding-left} 3 边框宽度 {border-width:border-top-width border-right-width border-bottom-width border-left-width}
宽度值： thin|medium|thick|数值 边框颜色 {border-color:数值 数值 数值数值}
数值：分别代表top、right、bottom、left颜色值 5 边框风格 {border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove} 6 边
框 {border:border-width border-style color}
上 边 框 {border-top:border-top-width border-style color}
右 边 框 {border-right:border-right-width border-style color}
下 边 框 {border-bottom:border-bottom-width border-style color}
左 边 框 {border-left:border-left-width border-style color} 7 宽
度 {width:长度|百分比| auto} 8 高
度 {height:数值|auto} 9 漂
浮 {float:left|right|none} 10 清
除 {clear:none|left|right|both} 分类列表
序号 中文说明 标记语法 控制显示 {display:none|block|inline|list-item} 2 控制空白 {white-space:normal|pre|nowarp} 3 符号列表 {list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none} 4 图形列表 {list-style-image:URL} 5 位置列表 {list-style-position:inside|outside} 6 目录列表 {list-style:目录样式类型|目录样式位置|url} 7 鼠标形状 {cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}
第三篇：DIV CSS在计算机网页设计中的运用
DIV+CSS在计算机网页设计中的运用
【摘 要】互联网发展至今，网络已经成为人们生活的重要部分，各色网站层出不穷，众多网页各有千秋。本文从计算机网页设计中的布局入手，分析了传统网页布局的局限性，介绍了计算机网页中典型的 “DIV+CSS”布局方式。通过对DIV 和CSS 技术的研究，介绍了DIV+CSS布局方法及其优势，为计算机网页设计提供思路。
【关键词】DIV；CSS；计算机网页；布局
一、前言
传统的计算机网页布局的方法主要有框架布局和表格布局。框架布局比较灵活，若有效运用，则能使网页更整洁、清晰。但是，对于内容多、布局复杂的网站，不宜采用框架布局，因为，过多的框架会影响网页下载所需的时间，影响网页的读取速度，而且浏览器对框架结构的兼容性也不是很好。
表格是计算机网页设计制作中的一个重要网页元素，用来对网页进行排版，使页面的信息布局合理、简洁。但是表格排版也存在以下的问题：
1.用表格排版的页面很难再修改或升级。当页面制作完成后，如果要将其中的某些位置对调，那么表格排版的工作量相当于重新制作一个页面。而CSS排版利用position和float属性可以轻松地移动和重新定位各个块，实现让用户动态选择界面的功能。
2.用表格排版的页面在下载时必须等整个表格的内容都下载完毕后才会一次性显示出来，而利用DIV+CSS排版的页面在下载时，各个子块可以分别下载显示，从而提高了页面的下载速度。
3.复杂的表格设计使得设计极为不易，修改更为复杂，最后生成的网页代码除了表格本身的代码，还有许多没有任何意义的图像占位符及其他元素，文件量庞大，最终导致浏览器下载及解析速度变慢，网站的维护和更新困难。
二、DIV和CSS的具体内容
DIV元素是用来为HTML文档内大块的内容提供布局的结构和背景。它是HTML中的一个标签，此标签的作用就是定位网页内容中的图片、文字、视频等相关信息。一般我们也叫为DIV层定位。
CSS（cascading style sheet），层叠样式表，是用于控制网页样式并允许将样式信息与网页分离的一种标识性语言。CSS 是 1996由W3C 审核通过，并且推荐使用的。CSS 的引入就是为了使 HTML语言更好的适应页面的美工设计。它以 HTML语言为基础，提供了丰富的格式化功能，如字体、颜色、背景和整体排版等，并且网页设计者可以针对各种可视化浏览器（包括显示器、打印机、打字机、投影仪和 PDA 等）来设置不同的样式风格。CSS的引入引发了网页设计一个又一个的新高潮。使用CSS设计的优秀页面层出不穷。
DIV+CSS布局方式使网页结构和外观相分离，极大地简化了代码，而且使站点加载的速度变得快捷、维护也更加方便，无疑对传统布局的网页方式造成了极大的冲击。除此之外，DIV+ CSS布局方式的使用，使传统的网页布局的不足得到很好的弥补，当前国内多数比较著名的网站都利用此类方式方法进布局，给用户带来了全新的体验模式。
三、DIV+CSS设计计算机网页布局
采取DIV和CSS的网页布局结构，首先需要用DIV来分块，定义语义结构；然后用CSS来定位和添加样式，如浮动、位置、对齐属性、加入背景等；最后在这个CSS定义的各个块中添加相应的样式，如文字、图片等。下面通过一个布局实例介绍使用DIV+CSS布局网页的基本方法。
首先，把网页区分成不同的三个区块，包括header、content（其中有main主体区域，并将main主体部分分为两个区域lside和rside）、footer三个区域，分别作为网页的头部、内容和版权区域。编写HTML部分文档代码如下：
第四篇：【网页设计-最新经典技术文档】网页排版CSS教学(六)
网页排版CSS教学
（六）第六章 区块性质的ＣＳＳ
本 章 Ｃ Ｓ Ｓ 的 主 要 作 用
本章介绍的是区块性质的ＣＳＳ指令以及它 们的应用与特性，可以设定与控制区块的位置，大小及边缘宽度等性质。本章也将分成 两个部份为您介绍，第一部份要讲的是区块各部份名称与概念的介绍，对于区块有一点概念后，第二部份才再进入区块性质的ＣＳＳ指令的介绍。
区 块 各 部 份 名 称 与 概 念
其实我们还可以把所谓的「区块」细分成如 下面图形所表示的几个部份。
由外而内为您作介绍：
MARGIN： 边缘，虽然是通透的部份，但是可以藉由边缘宽度的调整来达到内容元素位置调整的目的。
BORDER： 边框，就是外框的部份，经由ＣＳＳ指令您可以控制边框的宽度、颜色和样式，不再死板！
PADDING： 补白，也就是内容元素与框架之间的这段距离与空间，也可以利用ＣＳＳ指令去控制大小。
元素： 内容元素，也就是您放置于该区块内的内容，或为文字，或为图形，或为所有其它元素。
附带一提的是，所谓的区块宽度是指整个包含边缘在内的宽度，而元素宽度指的只 是内容元素的宽度。有了这些对区块各部份的基本概念与认识之后，接下来就要来介绍控制区块各部份分别的的ＣＳＳ指令了！
区 块 性 质 的 Ｃ Ｓ Ｓ 指 令
margin-top
设定上边缘宽度 margin-right 设定右边缘宽度
margin-bottom 设定下边缘宽度 margin-left
设定左边缘宽度
支 持：ＩＥ３、ＩＥ４、ＮＣ４ 适 用：区块元素 可能值：
百分比，相对于元素宽度大小
auto 使用浏览器预设值
预设值：0 继承性：无
一般范例：DIV { margin-top : 20pt } 同轴范例： margin 综合设定边缘宽度
支 持：ＩＥ３、ＩＥ４、ＮＣ４ 适 用：区块元素 可能值：
依序设定top,right,bottom,left的边缘宽度
{1,4} 百分比，相对于元素宽度大小
auto {1,4} 使用浏览器预设值
预设值：无 继承性：无
一般范例：DIV { margin : 20pt 15pt 10pt 5pt } 同轴范例：
要附带说明的是，如果指定了四个合法设定值，则会依序套用于四个边缘；如果只 有指定一个合法设订值，则会统一套用于四个边持；若只有指定二或三个合法设定值，则未指定的边缘会套用对边的宽度设定值。
DIV { margin: 20pt } →top=20pt;right=20pt;bottom=20pt;left=20pt DIV { margin: 20pt 15pt } →top=20pt;right=15pt;bottom=20pt;left=15pt DIV { margin: 20pt 15pt 10pt } →top=20pt;right=15pt;bottom=10pt;left=15pt border-top-width
设定上边框宽度 border-right-width 设定右边框宽度
border-bottom-width设定下边框宽度 border-left-width
设定左边框宽度
支 持：ＩＥ４、ＮＣ４ 适 用：区块元素 可能值：
thin < medium < thick thin 统一的绝对单位，因浏览器而异
medium 统一的绝对单位，因浏览器而异
thick 统一的绝对单位，因浏览器而异
预设值：medium 继承性：无
一般范例：DIV { border-top-width : 2pt } 同轴范例： border-width 综合设定边框宽度
支 持：ＩＥ４、ＮＣ４ 适 用：区块元素 可能值：
依序设定top,right,bottom,left的边框宽度 thin {1,4} 统一的绝对单位，因浏览器而异
medium {1,4} 统一的绝对单位，因浏览器而异
thick {1,4} 统一的绝对单位，因浏览器而异
一般范例：DIV { border-width : 4pt 3pt 2pt 1pt } 同轴范例：
要附带说明的是，如果指定了四个合法设定值，则会依序套用于四个边框；如果只 有指定一个合法设订值，则会统一套用于四个边框；若只有指定二或三个合法设定值，则未指定的边框会套用对边的宽度设定值。
DIV { border-width: 2pt } →top=2pt;right=2pt;bottom=2pt;left=2pt DIV { border-width: 2pt 3pt } →top=2pt;right=3pt;bottom=2pt;left=3pt DIV { border-width: 2pt 3pt 4pt } →top=2pt;right=3pt;bottom=4pt;left=3pt border-top-color
设定上边框颜色 border-right-color 设定右边框颜色
border-bottom-color 设定下边框颜色 border-left-color 设定左边框颜色
支 持：ＩＥ４、ＮＣ４ 适 用：区块元素 可能值：
预设值：color性质之值 继承性：无
一般范例：DIV { border-top-color : BLUE } 同轴范例： border-color 综合设定边框颜色
支 持：ＩＥ４、ＮＣ４ 适 用：区块元素 可能值：
依序设定top,right,bottom,left的边框颜色
预设值：无 继承性：无
一般范例：DIV { border-color : RED GREEN BLUE YELLOW } 同轴范例：
要附带说明的是，如果指定了四个合法设定值，则会依序套用于四个边框；如果只 有指定一个合法设订值，则会统一套用于四个边框；若只有指定二或三个合法设定值，则未指定的边框会套用对边的颜色设定值；若无指定此一性质，则套用color性质之设定值。
DIV{border-color:RED } →top=RED;right=RED;bottom=RED;left=RED
DIV{border-color:RED GREEN } →top=RED;right=GREEN;bottom=RED;left=GREEN DIV{border-color: RED GREEN BLUE} →top=RED;right=GREEN;bottom=BLUE;left=GREEN border-top-style
设定上边框样式 border-right-style 设定右边框样式
border-bottom-style 设定下边框样式 border-left-style
设定左边框样式
支 持：ＩＥ４、ＮＣ４ 适 用：区块元素 可能值：
none 不显示边框
dotted 虚线（ＩＥ４、ＮＣ４浏览器当作实线）
dashed 短直线（ＩＥ４、ＮＣ４浏览器当作实线）
solid 实线
double 双直线
ridge ３Ｄ凸线
groove ３Ｄ凹线
outset ３Ｄ隆起（ＩＥ４不显示）
inset ３Ｄ嵌入（ＩＥ４不显示）
预设值：none 继承性：无
一般范例：DIV { border-top-style : inset } 同轴范例： border-style 综合设定边框样式
支 持：ＩＥ４、ＮＣ４ 适 用：区块元素 可能值：
依序设定top,right,bottom,left的边框样式 none {1,4} 不显示边框
dotted {1,4} 虚线（ＩＥ４、ＮＣ４浏览器当作实线）
dashed {1,4} 短直线（ＩＥ４、ＮＣ４浏览器当作实线）
solid {1,4} 实线
double {1,4} 双直线
ridge {1,4} ３Ｄ凸线
groove {1,4} ３Ｄ凹线
outset {1,4} ３Ｄ隆起（ＩＥ４不显示）
inset {1,4} ３Ｄ嵌入（ＩＥ４不显示）
预设值：无 继承性：无
一般范例：DIV { border-style : ridge groove outset inset } 同轴范例：
要附带说明的是，如果指定了四个合法设定值，则会依序套用于四个边框；如果只 有指定一个合法设订值，则会统一套用于四个边框；若只有指定二或三个合法设定值，则未指定的边框会套用对边的样式设定值。
DIV{border-width:outset} →top=outset;right=outset;bottom=outset;left=outset DIV{border-width:outset inset} →top=outset;right=inset;bottom=outset;left=inset DIV{border-width:outset inset ridge} →top=outset;right=inset;bottom=ridge;left=inset border-top
综合设定上边框性质 border-right 综合设定右边框性质
border-bottom 综合设定下边框性质 border-left
综合设定左边框性质
支 持：ＩＥ４、ＮＣ４ 适 用：区块元素
可能值：
预设值：无 继承性：无
一般范例：DIV { border-top : 2pt solid BLUE } 同轴范例： border 综合设定边框性质
支 持：ＩＥ４、ＮＣ４ 适 用：区块元素
可能值：
预设值：无 继承性：无
一般范例：DIV { border : 2pt solid BLUE } 同轴范例：
要附带说明的是，这个指令只能指定一组设定值，也就是说，上右下左四个边框都将套用同一组的设定值，而不能作个别边框的设定值变化。
padding-top
设定上方补白宽度 padding-right 设定右方补白宽度
padding-bottom 设定下方补白宽度 padding-left
设定左方补白宽度
支 持：ＩＥ４、ＮＣ４ 适 用：区块元素
可能值：
百分比，相对于元素宽度大小
预设值：0 继承性：无
一般范例：DIV { padding-top : 5pt } 同轴范例： padding 综合设定补白宽度
支 持：ＩＥ４、ＮＣ４ 适 用：区块元素
可能值：依序设定top,right,bottom,left的补白宽度
{1,4} 百分比，相对于元素宽度大小
预设值：无 继承性：无
一般范例：DIV { padding : 2pt 5pt 2pt 5pt } 同轴范例：
要附带说明的是，如果指定了四个合法设定值，则会依序套用于四个补白；如果只有指定一个合法设订值，则会统一套用于四个补白；若只有指Ｑ291911320定二或三个合法设定值，则未指定的补白会套用对边的宽度设定值。
DIV { padding: 1pt } →top=1pt;right=1pt;bottom=1pt;left=1pt DIV { padding: 1pt 2pt } →top=1pt;right=2pt;bottom=1pt;left=2pt DIV { padding: 1pt 2pt 3pt } →top=1pt;right=2pt;bottom=3pt;left=2pt
第五篇：【网页设计-最新经典技术文档】网页排版CSS教学(三)
网页排版CSS教学
（三）第三章 ＣＳＳ的应用补充 挑 选 者 特 性 的 应 用
在讲挑选者的特性之前，要提一下的是ＣＳＳ继承的特性。所谓的继承的特性是指被包在内部的标签将拥有外部标签的样式性质。继承的特性最典型的应用通常发挥在预设整份网页的样式，而要指定为其它样式的部份再依要设定在个别元素里即可。这项特性可以提供网页设计者更理想的发挥空间。
接下来就要讲挑选者特性的应用！其实这部份应该算是声明的一种方式，但是在您看过第二章的基本的声明与应用後，到这边再讲挑选者您会比较有概念点。在ＣＳＳ应用或设计的时候，有几种依据元素的关系或性质来设定显示特定性质的方法，就是挑选者特性的应用，能让您在控制与应用上更加灵活。
一、前後文挑选者：依声明标签前後文关系显示特定性质的方法。
前後文挑选者便是当浏览器在显示HTML原始码所指定的内容时，会考虑元素标签的前後关系，而去显示指定的样式声明。也就是说只要HTML原始码内的标签排列前後顺序符合时，该项声明便会发生作用了！
元素A(标签A)元素B(标签B)元素C(标签C)...{样式规则} 要注意的是，前後文挑选者的声明跟集体声明很像，但是集体声明的元素标签间要用逗号隔开，而用前後文挑选者声明时元素标签间要用空格隔开；而这两种声明方式您可以混合使用。
元素A 元素B, 元素C 元素D 元素E,...{样式规则} 这样您就可以用集体声明的方式，声明数组前後文挑选者的样式规则。
二、类别挑选者：让单一或数个标签使用同组样式规则的方法。
类别(class)可以让不同的元素标签共同套用同一组样式性质或相同的元素标签套用不同组的样式性质。首先介绍的是如何让不同的元素套用同一组样式性质，如下面范例所写即可。
.blue { color : BLUE }-->
...
...
...
...
... 要注意在声明时前面的小点，CLASS名称可任取。而要让相同的元素标签套用不同组的样式性质时，也可以应用类别特性来设定。