第一篇：【网页设计-最新经典技术文档】网页排版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名称可任取。而要让相同的元素标签套用不同组的样式性质时，也可以应用类别特性来设定。
例如：
通常是将整个的 结构写在网页的
部份之中。这种用法的优点就是在於整篇文件的统一性，只要是有声明的的元件即会套用该样式规则。缺点就是在个别元件的灵活度不足。三、使用 LINK标签： 将样式规则写在.css的样式档案中，再以标签引入。
假设我们把样式规则存成一个example.css的档案，我们只要在网页中加入 即可套用该样式档案中所制定好的样式了。通常是将LINK标签写在网页的
部份之中。这种用法的优点就是在於可以把要套用相同样式规则的数篇文件都指定到同一个样式档案即可。缺点也是在个别文件或元件的灵活度不足。四、使用@import引入： 跟LINK用法很像，但必 放在 中。
例如：
要注意的是，行末的分号是绝对不可少的！切记切记！
很明显的，不管是LINK还是@import的用法都可能可以直接套用他人现有的样式表。不过，基於网路的礼仪，这种事别做的好，至少也应该知会 对方一声，要先取得人家的同意才行！
而四种应用方法各有其优缺点，您可以综合地使用，并不会相互抵触。但是如果相同的性质属性遇上重复的声明的话，就要考量套用优先权的问题了！一般来讲，优先权的顺序有以下的几点原则：
网页设计者的样式设定 ＞ 使用者的样式设定 ＞ 浏览器的样式设定 STYLE属性的样式设定 ＞ STYLE标签样式设定 ＞ 链结进来的样式设定 後面声明的样式设定 ＞ 前面的样式设定
所谓『链结进来的样式设定』指的就是用上面提到过的LINK标签与@import引入这两种应用方式所链结进来的的样式设定。
以上就是ＣＳＳ最基本的声明与应用的方法介绍，有了这些基本的认识与方法，您已经可以开始建立您的样式表！除了上面提到的Ｑ291911320基本的声明与应用的方法之外，还有其它的声明与应用的方法，将为您在下一章中再作介绍。
第四篇：【网页设计-最新经典技术文档】网页排版CSS教学(五)
网页排版CSS教学
（五）第五章 文字性质的ＣＳＳ
本 章 Ｃ Ｓ Ｓ 的 主 要 作 用
本章要介绍的是文字相关的ＣＳＳ指令。通 常一个网站的内容最多的就是文字了，透过这些文字相关的ＣＳＳ指令，您可以将您的 网页内容排版得美美的。本章将分两个部份为您介绍，第一部份是字型性质的ＣＳＳ指令，用以控制文字字型的各种样式；第二部份介绍的是文字性质的ＣＳＳ指令，用以控 制文字段落的外观及摆设方式。
字 型 性 质 的 Ｃ font-family 设定文字字型
支 持：ＩＥ３、ＩＥ４ 适 用：所有元素 可能值：
预设值：视浏览器而定 继承性：有
一般范例：SPAN { family-name : “标楷体” } 同轴范例： font-style 设定字体样式
支 持：ＩＥ３、ＩＥ４、ＮＣ４ 适 用：所有元素 可能值： normal 普通字
italic 斜体字
oblique 斜体字
预设值：normal 继承性：有
一般范例：SPAN { font-style : italic } 同轴范例： font-weight 设定字型份量
支 持：ＩＥ３、ＩＥ４、ＮＣ４ 适 用：所有元素 可能值： normal 普通字
bold 粗体字
bolder 相对于父元素稍粗
lighter 相对于父元素稍细
Ｓ 指 令
Ｓ100,200,300, 400,500,600, 700,800,900.数字由小到大代表笔画由细到粗 normal=400 bold=700 预设值：normal 继承性：有
一般范例：SPAN { font-weight : bolder } 同轴范例： font-size 设定文字大小
支 持：ＩＥ３、ＩＥ４、ＮＣ４ 适 用：所有元素 可能值：
绝对大小，可用的参数由小到大分别有七项 xx-small, x-small, small, medium, large, x-large, xx-large
百分比，以父元素字型大小为基准
预设值：medium 继承性：有
一般范例：SPAN { font-size : 12pt } 同轴范例： font-variant 设定文字转换
支 持：ＩＥ３、ＩＥ４、ＮＣ４ 适 用：所有元素 可能值： normal 普通字
small-caps 将小写文字转换为大写
预设值：normal 继承性：有
一般范例：SPAN { font-variant : small-caps } 同轴范例： font 综合设定字型性质
支 持：ＩＥ３、ＩＥ４、ＮＣ４ 适 用：所有元素 可能值：
预设值：无 继承性：有
一般范例： SPAN { font : bolder small-caps 12pt/120% Arial } 同轴范例：< SPAN style=“font : bolder small-caps 12pt/120% Arial”>
文 字 性 质 的 Ｃ Ｓ Ｓ 指 令
line-height 设定列高
支 持：ＩＥ３、ＩＥ４、ＮＣ４ 适 用：所有元素 可能值：
normal 普通列高，根据字体变化合理高度，视浏览器而定
百分比，相对于元素字型大小为比例
预设值：normal 继承性：有
一般范例：DIV { line-height : 120% } 同轴范例： text-align 设定文字对
支 持：ＩＥ３、ＩＥ４、ＮＣ４ 适 用：区块元素 可能值：
center 对 中央
right 对 右边
left 对 左边
justify 左右对
预设值：视浏览器而定 继承性：有
一般范例：DIV { text-align : center } 同轴范例： vertical-align 设定垂直对
支 持：ＩＥ４ 适 用：同轴元素 可能值：
top 对 同列最高元素顶端
bottom 对 同列最低元素底端
baseline 对 底线 middle 对 中央
sub 将元素置于下标
super 将元素置于上标
text-top 对 文字顶端
text-bottom 对 文字底端
参照元素本身列高，以父元素底线为基准作位移
预设值：baseline 继承性：有
一般范例：SPAN { vertical-align : sub } 同轴范例： text-decoration 设定文字装饰
支 持：ＩＥ３、ＩＥ４、ＮＣ４ 适 用：所有元素 可能值： none 普通字
underline 文字加底线
overline 文字加顶线
line-through 文字加删除线
blink 设定文字闪烁
预设值：none 继承性：有
一般范例：SPAN { text-decoration : blink } 同轴范例： text-transform 设定文字转换
支 持：ＩＥ３、ＩＥ４、ＮＣ４ 适 用：所有元素 可能值： none 普通字
capitalize 将英文单字地一个字母转换为大写
uppercase 将所有文字转换为大写
lowercase 将所有文字转换为小写
预设值：none 继承性：有
一般范例：SPAN { text-transform : uppercase } 同轴范例： letter-spacing 设定字母间隔
支 持：ＩＥ４ 适 用：所有元素 可能值： normal 不改变字母间隔，使用浏览器预设值
预设值：normal 继承性：有
一般范例：SPAN { letter-spacing : 0.5pt } 同轴范例： text-indent 设定文字缩排
支 持：ＩＥ３、ＩＥ４、ＮＣ４ 适 用：区块元素 可能值：
以父元素宽Ｑ291911320度为基准的百分比值
预设值：0 继承性：有
一般范例：DIV { text-indent : 3pt } 同轴范例：
第五篇：网页美工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}
鲁公网安备37028302000876号