CSS常见属性及说明

向右看齐 2022-03-16 13:40 394阅读 0赞

### 1, 背景 ###

<table> 
 <tbody> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;width:164pt;">名称</td> 
 <td style="text-align:center;vertical-align:middle;width:111pt;">说明</td> 
 <td style="text-align:center;vertical-align:middle;width:124pt;">可能值</td> 
 <td style="text-align:center;vertical-align:middle;width:218pt;">范例</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;width:164pt;">background</td> 
 <td style="text-align:left;vertical-align:middle;width:111pt;">背景</td> 
 <td style="text-align:left;vertical-align:middle;width:124pt;">下面的背景设定值皆适用</td> 
 <td style="text-align:center;vertical-align:middle;width:218pt;">background:fixed</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;width:164pt;">background-attachment</td> 
 <td style="text-align:left;vertical-align:middle;width:111pt;">背景图性是否固定</td> 
 <td style="text-align:left;vertical-align:middle;width:124pt;">fixed, scroll</td> 
 <td style="text-align:center;vertical-align:middle;width:218pt;">background-attachment:fixed</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;width:164pt;">background-position</td> 
 <td style="text-align:left;vertical-align:middle;width:111pt;">背景图位置</td> 
 <td style="text-align:left;vertical-align:middle;width:124pt;">水平 垂直</td> 
 <td style="text-align:center;vertical-align:middle;width:218pt;">background-position:135 159</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;width:164pt;">background-color</td> 
 <td style="text-align:left;vertical-align:middle;width:111pt;">背景颜色</td> 
 <td style="text-align:left;vertical-align:middle;width:124pt;">颜色 transparent(透明)</td> 
 <td style="text-align:center;vertical-align:middle;width:218pt;">backgroun-color:yellow</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;width:164pt;">background-image</td> 
 <td style="text-align:left;vertical-align:middle;width:111pt;">背景图片</td> 
 <td style="text-align:left;vertical-align:middle;width:124pt;">none(无背景图) url(****)(图片位置)</td> 
 <td style="text-align:center;vertical-align:middle;width:218pt;">background-image:url(test.jpg)</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;width:164pt;">background-repeat</td> 
 <td style="text-align:left;vertical-align:middle;width:111pt;">背景是否重复</td> 
 <td style="text-align:left;vertical-align:middle;width:124pt;">repeat(重复) repeat-x(水平重复) repeat-y(垂直重复) no-repeat(不重复)</td> 
 <td style="text-align:center;vertical-align:middle;width:218pt;">background-repeat:repeat</td> 
 </tr> 
 </tbody> 
</table>

### 2, 表格 ###

<table> 
 <tbody> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;width:210pt;">名称</td> 
 <td style="text-align:center;vertical-align:middle;width:176pt;">说明</td> 
 <td style="text-align:center;vertical-align:middle;width:217pt;">可能值</td> 
 <td style="text-align:center;vertical-align:middle;width:164pt;">范例</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;">border</td> 
 <td style="text-align:left;vertical-align:middle;">表格边框设定</td> 
 <td style="text-align:left;vertical-align:middle;width:217pt;">以下所有皆可使用</td> 
 <td style="text-align:center;vertical-align:middle;">border:green</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;">border-color</td> 
 <td style="text-align:left;vertical-align:middle;">边框颜色</td> 
 <td style="text-align:left;vertical-align:middle;width:217pt;">任何颜色表示方法</td> 
 <td style="text-align:center;vertical-align:middle;">border-color:blue</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;">border-style</td> 
 <td style="text-align:left;vertical-align:middle;">边框样式</td> 
 <td style="text-align:left;vertical-align:middle;width:217pt;">none(无边框) dotted(点线) dashed(虚线) solid(实线) double(双线) groove(立体凹线) ridge(立体凸线) inset(立体嵌入线) outset(立体隆起线)</td> 
 <td style="text-align:center;vertical-align:middle;">border-style:dotted</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;">border-width</td> 
 <td style="text-align:left;vertical-align:middle;">边框宽度</td> 
 <td style="text-align:left;vertical-align:middle;width:217pt;">数字</td> 
 <td style="text-align:center;vertical-align:middle;">border-width:5</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;">padding</td> 
 <td style="text-align:left;vertical-align:middle;">边框补白</td> 
 <td style="text-align:left;vertical-align:middle;width:217pt;">数字</td> 
 <td style="text-align:center;vertical-align:middle;">padding:5</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;">margin</td> 
 <td style="text-align:left;vertical-align:middle;">设置元素的边距 (可设置四个值)</td> 
 <td style="text-align:left;vertical-align:middle;width:217pt;">百分比（基于父对象总高度或宽度的百分比） 长度值（定义一个固定的边距） auto（浏览器设定的值）。</td> 
 <td style="text-align:center;vertical-align:middle;">margin:10px 5px 15px 20px;</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;">margin-bottom</td> 
 <td style="text-align:left;vertical-align:middle;">设置元素的底边距</td> 
 <td style="text-align:left;vertical-align:middle;width:217pt;">同margin</td> 
 <td style="text-align:center;vertical-align:middle;">margin-bottom:1%;</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;">margin-left&nbsp;</td> 
 <td style="text-align:left;vertical-align:middle;">设置元素的左边距</td> 
 <td style="text-align:left;vertical-align:middle;width:217pt;">同margin</td> 
 <td style="text-align:center;vertical-align:middle;">margin-left:1%</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;">margin-right</td> 
 <td style="text-align:left;vertical-align:middle;">设置元素的右边据</td> 
 <td style="text-align:left;vertical-align:middle;width:217pt;">同margin</td> 
 <td style="text-align:center;vertical-align:middle;">margin-right:1%</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;">margin-top</td> 
 <td style="text-align:left;vertical-align:middle;">设置元素的顶边距</td> 
 <td style="text-align:left;vertical-align:middle;width:217pt;">同margin</td> 
 <td style="text-align:center;vertical-align:middle;">margin-top:1%</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;">outline</td> 
 <td style="text-align:left;vertical-align:middle;">在一行设置所有的outline属性</td> 
 <td style="text-align:left;vertical-align:middle;width:217pt;">参见outlineWidth outlineStyle outlineColor</td> 
 <td style="text-align:center;vertical-align:middle;">　</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;">outline-color</td> 
 <td style="text-align:left;vertical-align:middle;">设置围绕元素的轮廓颜色</td> 
 <td style="text-align:left;vertical-align:middle;width:217pt;">color 指定轮廓颜色。 invert 默认。执行颜色反转（逆向的颜色）。可使轮廓在不同的背景颜色中都是可见。 inherit 规定应该从父元素继承轮廓颜色的设置。</td> 
 <td style="text-align:center;vertical-align:middle;">outline:#00FF00 dotted thick;</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;">outline-style</td> 
 <td style="text-align:left;vertical-align:middle;">设置围绕元素的轮廓样式</td> 
 <td style="text-align:left;vertical-align:middle;width:217pt;">none 默认。定义无轮廓。 dotted 定义点状的轮廓。 dashed 定义虚线轮廓。 solid 定义实线轮廓。 double 定义双线轮廓。双线的宽度等同于 outline-width 的值。 groove 定义 3D 凹槽轮廓。此效果取决于 outline-color 值。 ridge 定义 3D 凸槽轮廓。此效果取决于 outline-color 值。 inset 定义 3D 凹边轮廓。此效果取决于 outline-color 值。 outset 定义 3D 凸边轮廓。此效果取决于 outline-color 值。 inherit 规定应该从父元素继承轮廓样式的设置。</td> 
 <td style="text-align:center;vertical-align:middle;">outline-style：double</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;">outline-width</td> 
 <td style="text-align:left;vertical-align:middle;">设置围绕元素的轮廓宽度</td> 
 <td style="text-align:left;vertical-align:middle;width:217pt;">thin 规定细轮廓。 medium 默认。规定中等的轮廓。 thick 规定粗的轮廓。 length 允许您规定轮廓粗细的值。 inherit 规定应该从父元素继承轮廓宽度的设置。</td> 
 <td style="text-align:center;vertical-align:middle;">outline-width：2px</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;">padding</td> 
 <td style="text-align:left;vertical-align:middle;">设置元素的填充 (可设置四个值)</td> 
 <td style="text-align:left;vertical-align:middle;width:217pt;">length 规定以具体单位计的填充值，比如像素、厘米等。默认值是 0px % 规定基于父元素的宽度的百分比的填充 inherit 指定应该从父元素继承padding</td> 
 <td style="text-align:center;vertical-align:middle;">padding:10px 5px 15px 20px;</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;">padding-bottom</td> 
 <td style="text-align:left;vertical-align:middle;">设置元素的下填充</td> 
 <td style="text-align:left;vertical-align:middle;width:217pt;">同padding</td> 
 <td style="text-align:center;vertical-align:middle;">padding-bottom：1%</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;">padding-left</td> 
 <td style="text-align:left;vertical-align:middle;">设置元素的左填充</td> 
 <td style="text-align:left;vertical-align:middle;width:217pt;">同padding</td> 
 <td style="text-align:center;vertical-align:middle;">padding-left：1%</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;">padding-right</td> 
 <td style="text-align:left;vertical-align:middle;">设置元素的右填充</td> 
 <td style="text-align:left;vertical-align:middle;width:217pt;">同padding</td> 
 <td style="text-align:center;vertical-align:middle;">padding-right：1%</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;">padding-top</td> 
 <td style="text-align:left;vertical-align:middle;">设置元素的顶填充</td> 
 <td style="text-align:left;vertical-align:middle;width:217pt;">同padding</td> 
 <td style="text-align:center;vertical-align:middle;">padding-top：inherit</td> 
 </tr> 
 </tbody> 
</table>

### 3, 布局 ###

<table> 
 <tbody> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;width:80pt;">名称</td> 
 <td style="text-align:center;vertical-align:middle;width:283pt;">说明</td> 
 <td style="text-align:center;vertical-align:middle;width:511pt;">可能值</td> 
 <td style="text-align:center;vertical-align:middle;width:138pt;">范例</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;">visibility</td> 
 <td style="text-align:left;vertical-align:middle;">显示或是隐藏</td> 
 <td style="text-align:left;vertical-align:middle;width:511pt;">inherit(父组件决定) hidden(隐藏) visible(显示)</td> 
 <td style="text-align:center;vertical-align:middle;">visibility:hidden</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;">width</td> 
 <td style="text-align:left;vertical-align:middle;">宽度</td> 
 <td style="text-align:left;vertical-align:middle;width:511pt;">auto 数字</td> 
 <td style="text-align:center;vertical-align:middle;">width:135</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;">height</td> 
 <td style="text-align:left;vertical-align:middle;">高度</td> 
 <td style="text-align:left;vertical-align:middle;width:511pt;">auto 数字</td> 
 <td style="text-align:center;vertical-align:middle;">height:100</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;">z-index</td> 
 <td style="text-align:left;vertical-align:middle;">Z轴高度(立体，是否在另一个组件之上)</td> 
 <td style="text-align:left;vertical-align:middle;width:511pt;">auto 数字</td> 
 <td style="text-align:center;vertical-align:middle;">z-index:135</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;">position</td> 
 <td style="text-align:left;vertical-align:middle;">定位方式</td> 
 <td style="text-align:left;vertical-align:middle;width:511pt;">absolute (绝对寻址-依窗口坐标，原点为父窗口左上角) relative (相对定位-以一般网页排列[right.center.left]后再根据坐标定位，原点为定位后的位置) static (静态定位-以一般网页排列)</td> 
 <td style="text-align:center;vertical-align:middle;">position:absolute</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;">clear</td> 
 <td style="text-align:left;vertical-align:middle;width:283pt;">设置在元素的哪边不允许其他的浮动元素</td> 
 <td style="text-align:left;vertical-align:middle;width:511pt;">left 在左侧不允许浮动元素。 right 在右侧不允许浮动元素。 both 在左右两侧均不允许浮动元素。 none 默认值。允许浮动元素出现在两侧。 inherit 规定应该从父元素继承 clear 属性的值。</td> 
 <td style="text-align:center;vertical-align:middle;">clear:both;</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;">display</td> 
 <td style="text-align:left;vertical-align:middle;width:283pt;">设置元素如何被显示</td> 
 <td style="text-align:left;vertical-align:middle;width:511pt;">none 此元素不会被显示。 block 此元素将显示为块级元素，此元素前后会带有换行符。 inline 默认。此元素会被显示为内联元素，元素前后没有换行符。 inline-block 行内块元素。（CSS2.1 新增的值） list-item 此元素会作为列表显示。 run-in 此元素会根据上下文作为块级元素或内联元素显示。 compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 table 此元素会作为块级表格来显示（类似 &lt;table&gt;），表格前后带有换行符。 inline-table 此元素会作为内联表格来显示（类似 &lt;table&gt;），表格前后没有换行符。 table-row-group 此元素会作为一个或多个行的分组来显示（类似 &lt;tbody&gt;）。 table-header-group 此元素会作为一个或多个行的分组来显示（类似 &lt;thead&gt;）。 table-footer-group 此元素会作为一个或多个行的分组来显示（类似 &lt;tfoot&gt;）。 table-row 此元素会作为一个表格行显示（类似 &lt;tr&gt;）。 table-column-group 此元素会作为一个或多个列的分组来显示（类似 &lt;colgroup&gt;）。 table-column 此元素会作为一个单元格列显示（类似 &lt;col&gt;） table-cell 此元素会作为一个表格单元格显示（类似 &lt;td&gt; 和 &lt;th&gt;） table-caption 此元素会作为一个表格标题显示（类似 &lt;caption&gt;） inherit 规定应该从父元素继承 display 属性的值。</td> 
 <td style="text-align:center;vertical-align:middle;">display="inline"</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;">bottom</td> 
 <td style="text-align:left;vertical-align:middle;width:283pt;">设置元素的底边缘距离父元素底边缘的之上或之下的距离</td> 
 <td style="text-align:left;vertical-align:middle;width:511pt;">auto 默认值。通过浏览器计算底部的位置。 % 设置以包含元素的百分比计的底边位置。可使用负值。 length 使用 px、cm 等单位设置元素的底边位置。可使用负值。 inherit 规定应该从父元素继承 bottom 属性的值。</td> 
 <td style="text-align:center;vertical-align:middle;">bottom:5px;</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;">position</td> 
 <td style="text-align:left;vertical-align:middle;width:283pt;">把元素放置在static, relative, absolute 或 fixed 的位置</td> 
 <td style="text-align:left;vertical-align:middle;width:511pt;">absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 fixed 生成固定定位的元素，相对于浏览器窗口进行定位。 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 relative 生成相对定位的元素，相对于其正常位置进行定位。 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 sticky&nbsp; 粘性定位，该定位基于用户滚动的位置。 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。 inherit 规定应该从父元素继承 position 属性的值。 initial 设置该属性为默认值</td> 
 <td style="text-align:center;vertical-align:middle;">position:absolute;</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;">right</td> 
 <td style="text-align:left;vertical-align:middle;width:283pt;">定义了定位元素右外边距边界与其包含块右边界之间的偏移</td> 
 <td style="text-align:left;vertical-align:middle;width:511pt;">auto 默认值。通过浏览器计算底部的位置。 % 设置以包含元素的百分比计的底边位置。可使用负值。 length 使用 px、cm 等单位设置元素的底边位置。可使用负值。 inherit 规定应该从父元素继承 bottom 属性的值。</td> 
 <td style="text-align:center;vertical-align:middle;">right:5px;</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;">left</td> 
 <td style="text-align:left;vertical-align:middle;width:283pt;">定义了定位元素左外边距边界与其包含块左边界之间的偏移。</td> 
 <td style="text-align:left;vertical-align:middle;width:511pt;">auto 默认值。通过浏览器计算底部的位置。 % 设置以包含元素的百分比计的底边位置。可使用负值。 length 使用 px、cm 等单位设置元素的底边位置。可使用负值。 inherit 规定应该从父元素继承 bottom 属性的值。</td> 
 <td style="text-align:center;vertical-align:middle;">left:5px;</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;">top</td> 
 <td style="text-align:left;vertical-align:middle;width:283pt;">设置元素的顶边缘距离父元素顶边缘的之上或之下的距离</td> 
 <td style="text-align:left;vertical-align:middle;width:511pt;">auto 默认值。通过浏览器计算底部的位置。 % 设置以包含元素的百分比计的底边位置。可使用负值。 length 使用 px、cm 等单位设置元素的底边位置。可使用负值。 inherit 规定应该从父元素继承 bottom 属性的值。</td> 
 <td style="text-align:center;vertical-align:middle;">top:5px;</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;">overflow</td> 
 <td style="text-align:left;vertical-align:middle;width:283pt;">规定如何处理不适合元素盒的内容</td> 
 <td style="text-align:left;vertical-align:middle;width:511pt;">visible 默认值。内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 inherit 规定应该从父元素继承 overflow 属性的值。</td> 
 <td style="text-align:center;vertical-align:middle;">overflow="scroll"</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;">max-height</td> 
 <td style="text-align:left;vertical-align:middle;width:283pt;">设置元素的最大高度</td> 
 <td style="text-align:left;vertical-align:middle;width:511pt;">none 默认。定义对元素被允许的最大高度没有限制。 length 定义元素的最大高度值。 % 定义基于包含它的块级对象的百分比最大高度。 inherit 规定应该从父元素继承 max-height 属性的值。</td> 
 <td style="text-align:center;vertical-align:middle;">max-height:50px;</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;">max-width</td> 
 <td style="text-align:left;vertical-align:middle;width:283pt;">设置元素的最大宽度</td> 
 <td style="text-align:left;vertical-align:middle;width:511pt;">none 默认。定义对元素被允许的最大高度没有限制。 length 定义元素的最大高度值。 % 定义基于包含它的块级对象的百分比最大高度。 inherit 规定应该从父元素继承 max-height 属性的值。</td> 
 <td style="text-align:center;vertical-align:middle;">max-height:50px;</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;">min-height</td> 
 <td style="text-align:left;vertical-align:middle;width:283pt;">设置元素的最小高度</td> 
 <td style="text-align:left;vertical-align:middle;width:511pt;">none 默认。定义对元素被允许的最大高度没有限制。 length 定义元素的最大高度值。 % 定义基于包含它的块级对象的百分比最大高度。 inherit 规定应该从父元素继承 max-height 属性的值。</td> 
 <td style="text-align:center;vertical-align:middle;">min-height:50px;</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;">min-width</td> 
 <td style="text-align:left;vertical-align:middle;width:283pt;">设置元素的最小宽度</td> 
 <td style="text-align:left;vertical-align:middle;width:511pt;">none 默认。定义对元素被允许的最大高度没有限制。 length 定义元素的最大高度值。 % 定义基于包含它的块级对象的百分比最大高度。 inherit 规定应该从父元素继承 max-height 属性的值。</td> 
 <td style="text-align:center;vertical-align:middle;">min-width:50px;</td> 
 </tr> 
 </tbody> 
</table>

### 4, 文字 ###

<table> 
 <tbody> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;width:131pt;">名称</td> 
 <td style="text-align:center;vertical-align:middle;width:140pt;">说明</td> 
 <td style="text-align:center;vertical-align:middle;width:247pt;">可能值</td> 
 <td style="text-align:center;vertical-align:middle;width:184pt;">范例</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;width:131pt;">font</td> 
 <td style="text-align:left;vertical-align:middle;width:140pt;">文字设定</td> 
 <td style="text-align:left;vertical-align:middle;width:247pt;">以下所有皆可使用</td> 
 <td style="text-align:center;vertical-align:middle;width:184pt;">font:arial</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;width:131pt;">font-family</td> 
 <td style="text-align:left;vertical-align:middle;width:140pt;">字体</td> 
 <td style="text-align:left;vertical-align:middle;width:247pt;">字体名称</td> 
 <td style="text-align:center;vertical-align:middle;width:184pt;">font-family:arial</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;width:131pt;">font-size</td> 
 <td style="text-align:left;vertical-align:middle;width:140pt;">字体大小</td> 
 <td style="text-align:left;vertical-align:middle;width:247pt;">百分比或是数字(单位)</td> 
 <td style="text-align:center;vertical-align:middle;width:184pt;">font-size:12px</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;width:131pt;">font-style</td> 
 <td style="text-align:left;vertical-align:middle;width:140pt;">字型样式</td> 
 <td style="text-align:left;vertical-align:middle;width:247pt;">normal 默认值。浏览器显示一个标准的字体样式。 italic 浏览器会显示一个斜体的字体样式。 oblique 浏览器会显示一个倾斜的字体样式。 inherit 规定应该从父元素继承字体样式。</td> 
 <td style="text-align:center;vertical-align:middle;width:184pt;">font-style:italic</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;width:131pt;">font-variant</td> 
 <td style="text-align:left;vertical-align:middle;width:140pt;">字型特别样式</td> 
 <td style="text-align:left;vertical-align:middle;width:247pt;">normal 默认值。浏览器会显示一个标准的字体。 small-caps 浏览器会显示小型大写字母的字体。 inherit 规定应该从父元素继承 font-variant 属性的值。</td> 
 <td style="text-align:center;vertical-align:middle;width:184pt;">font-variant:small-caps</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;width:131pt;">font-weight</td> 
 <td style="text-align:left;vertical-align:middle;width:140pt;">字型粗细</td> 
 <td style="text-align:left;vertical-align:middle;width:247pt;">normal 默认值。定义标准的字符。 bold 定义粗体字符。 bolder 定义更粗的字符。 lighter 定义更细的字符。 100-900 定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。</td> 
 <td style="text-align:center;vertical-align:middle;width:184pt;">font-weight:bolder</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;width:131pt;">letter-spacing</td> 
 <td style="text-align:left;vertical-align:middle;width:140pt;">字符相距</td> 
 <td style="text-align:left;vertical-align:middle;width:247pt;">normal 默认。规定字符间没有额外的空间。 length 定义字符间的固定空间（允许使用负值）。 inherit 规定应该从父元素继承 letter-spacing 属性的值。</td> 
 <td style="text-align:center;vertical-align:middle;width:184pt;">letter-spacing:5</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;width:131pt;">text-align</td> 
 <td style="text-align:left;vertical-align:middle;width:140pt;">字符对齐</td> 
 <td style="text-align:left;vertical-align:middle;width:247pt;">left 把文本排列到左边。默认值：由浏览器决定。 right 把文本排列到右边。 center 把文本排列到中间。 justify 实现两端对齐文本效果。 inherit 规定应该从父元素继承 text-align 属性的值。</td> 
 <td style="text-align:center;vertical-align:middle;width:184pt;">text-align:justify</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;width:131pt;">text-decoration</td> 
 <td style="text-align:left;vertical-align:middle;width:140pt;">字符样式</td> 
 <td style="text-align:left;vertical-align:middle;width:247pt;">none 默认。定义标准的文本。 underline 定义文本下的一条线。 overline 定义文本上的一条线。 line-through 定义穿过文本下的一条线。 blink 定义闪烁的文本。 inherit 规定应该从父元素继承 text-decoration 属性的值。</td> 
 <td style="text-align:center;vertical-align:middle;width:184pt;">text-decoration:underline</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;width:131pt;">text-shadow*</td> 
 <td style="text-align:left;vertical-align:middle;width:140pt;">设置文本的阴影效果</td> 
 <td style="text-align:left;vertical-align:middle;width:247pt;">h-shadow 必需。水平阴影的位置。允许负值。 v-shadow 必需。垂直阴影的位置。允许负值。 blur 可选。模糊的距离。 color 可选。阴影的颜色。参阅 CSS 颜色值。</td> 
 <td style="text-align:center;vertical-align:middle;width:184pt;">text-shadow="2px 2px #ff0000"</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;width:131pt;">text-transform</td> 
 <td style="text-align:left;vertical-align:middle;width:140pt;">对文本设置大写效果</td> 
 <td style="text-align:left;vertical-align:middle;width:247pt;">none 默认。定义带有小写字母和大写字母的标准的文本。 capitalize 文本中的每个单词以大写字母开头。 uppercase 定义仅有大写字母。 lowercase 定义无大写字母，仅有小写字母。 inherit 规定应该从父元素继承 text-transform 属性的值。</td> 
 <td style="text-align:center;vertical-align:middle;width:184pt;">text-transform="uppercase"</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;width:131pt;">color</td> 
 <td style="text-align:left;vertical-align:middle;width:140pt;">设置文本的颜色</td> 
 <td style="text-align:left;vertical-align:middle;width:247pt;">color_name 规定颜色值为颜色名称的颜色（比如 red）。 hex_number 规定颜色值为十六进制值的颜色（比如 #ff0000）。 rgb_number 规定颜色值为 rgb 代码的颜色（比如 rgb(255,0,0)）。 inherit 规定应该从父元素继承颜色。</td> 
 <td style="text-align:center;vertical-align:middle;width:184pt;">color="#FF0000"</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;width:131pt;">white-space</td> 
 <td style="text-align:left;vertical-align:middle;width:140pt;">设置如何设置文本中的折行和空白符</td> 
 <td style="text-align:left;vertical-align:middle;width:247pt;">normal 默认。空白会被浏览器忽略。 pre 空白会被浏览器保留。其行为方式类似 HTML 中的 &lt;pre&gt; 标签。 nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 &lt;br&gt; 标签为止。 pre-wrap 保留空白符序列，但是正常地进行换行。 pre-line 合并空白符序列，但是保留换行符。 inherit 规定应该从父元素继承 white-space 属性的值。</td> 
 <td style="text-align:center;vertical-align:middle;width:184pt;">&nbsp;white-space:nowrap;</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;width:131pt;">word-spacing</td> 
 <td style="text-align:left;vertical-align:middle;width:140pt;">设置文本中的词间距</td> 
 <td style="text-align:left;vertical-align:middle;width:247pt;">normal 默认。定义单词间的标准空间。 length 定义单词间的固定空间。 inherit 规定应该从父元素继承 word-spacing 属性的值。</td> 
 <td style="text-align:center;vertical-align:middle;width:184pt;">word-spacing:30px;</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;width:131pt;">letter-spacing</td> 
 <td style="text-align:left;vertical-align:middle;width:140pt;">设置字符间距</td> 
 <td style="text-align:left;vertical-align:middle;width:247pt;">normal 默认。规定字符间没有额外的空间。 length 定义字符间的固定空间（允许使用负值）。 inherit 规定应该从父元素继承 letter-spacing 属性的值。</td> 
 <td style="text-align:center;vertical-align:middle;width:184pt;">letter-spacing:2px</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;width:131pt;">line-height</td> 
 <td style="text-align:left;vertical-align:middle;width:140pt;">设置行间距</td> 
 <td style="text-align:left;vertical-align:middle;width:247pt;">normal 默认。设置合理的行间距。 number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。 length 设置固定的行间距。 % 基于当前字体尺寸的百分比行间距。 inherit 规定应该从父元素继承 line-height 属性的值。</td> 
 <td style="text-align:center;vertical-align:middle;width:184pt;">line-height:90%</td> 
 </tr> 
 </tbody> 
</table>

### 5, 滚动条 ###

<table> 
 <tbody> 
 <tr> 
 <td style="border-color:#C0C0C0;text-align:center;vertical-align:middle;width:180pt;">名称</td> 
 <td style="border-color:#C0C0C0;text-align:center;vertical-align:middle;width:229pt;">说明</td> 
 <td style="border-color:#C0C0C0;text-align:center;vertical-align:middle;width:47pt;">可能值</td> 
 <td style="border-color:#C0C0C0;text-align:center;vertical-align:middle;width:253pt;">范例</td> 
 </tr> 
 <tr> 
 <td style="border-color:#C0C0C0;text-align:center;vertical-align:middle;width:180pt;">scrollbar-base-color</td> 
 <td style="border-color:#C0C0C0;text-align:center;vertical-align:middle;width:229pt;">滚动条列主色调</td> 
 <td style="border-color:#C0C0C0;text-align:center;vertical-align:middle;width:47pt;">颜色</td> 
 <td style="border-color:#C0C0C0;text-align:center;vertical-align:middle;width:253pt;">scrollbar-base-color:#aaaaaa</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;width:180pt;">scrollbar-arrow-color</td> 
 <td style="text-align:center;vertical-align:middle;width:229pt;">按钮箭头的颜色</td> 
 <td style="text-align:center;vertical-align:middle;width:47pt;">颜色</td> 
 <td style="text-align:center;vertical-align:middle;width:253pt;">scrollbar-arrow-color:#000000</td> 
 </tr> 
 <tr> 
 <td style="border-color:#C0C0C0;text-align:center;vertical-align:middle;width:180pt;">scrollbar-face-color</td> 
 <td style="border-color:#C0C0C0;text-align:center;vertical-align:middle;width:229pt;">移动棒的颜色</td> 
 <td style="border-color:#C0C0C0;text-align:center;vertical-align:middle;width:47pt;">颜色</td> 
 <td style="border-color:#C0C0C0;text-align:center;vertical-align:middle;width:253pt;">scrollbar-face-color:#ffee99</td> 
 </tr> 
 <tr> 
 <td style="border-color:#C0C0C0;text-align:center;vertical-align:middle;width:180pt;">scrollbar-highlight-color</td> 
 <td style="border-color:#C0C0C0;text-align:center;vertical-align:middle;width:229pt;">按钮边框内层左边与上面的颜色及滚动条底部轨道网状颜色(与track同时使用网状会消失)</td> 
 <td style="border-color:#C0C0C0;text-align:center;vertical-align:middle;width:47pt;">颜色</td> 
 <td style="border-color:#C0C0C0;text-align:center;vertical-align:middle;width:253pt;">scrollbar-highlight-color: #000000</td> 
 </tr> 
 <tr> 
 <td style="border-color:#C0C0C0;text-align:center;vertical-align:middle;width:180pt;">scrollbar-3dlight-color</td> 
 <td style="border-color:#C0C0C0;text-align:center;vertical-align:middle;width:229pt;">按钮边框外层左边与上面的颜色</td> 
 <td style="border-color:#C0C0C0;text-align:center;vertical-align:middle;width:47pt;">颜色</td> 
 <td style="border-color:#C0C0C0;text-align:center;vertical-align:middle;width:253pt;">scrollbar-3dlight-color:#000000</td> 
 </tr> 
 <tr> 
 <td style="border-color:#C0C0C0;text-align:center;vertical-align:middle;width:180pt;">scrollbar-darkshadow-color</td> 
 <td style="border-color:#C0C0C0;text-align:center;vertical-align:middle;width:229pt;">按钮边框外层右边与下面的颜色</td> 
 <td style="border-color:#C0C0C0;text-align:center;vertical-align:middle;width:47pt;">颜色</td> 
 <td style="border-color:#C0C0C0;text-align:center;vertical-align:middle;width:253pt;">scrollbar-darkshadow-color:#000000</td> 
 </tr> 
 <tr> 
 <td style="border-color:#C0C0C0;text-align:center;vertical-align:middle;width:180pt;">scrollbar-shadow-color</td> 
 <td style="border-color:#C0C0C0;text-align:center;vertical-align:middle;width:229pt;">按钮边框内层右边与下面的颜色</td> 
 <td style="border-color:#C0C0C0;text-align:center;vertical-align:middle;width:47pt;">颜色</td> 
 <td style="border-color:#C0C0C0;text-align:center;vertical-align:middle;width:253pt;">scrollbar-track-color: #cccccc</td> 
 </tr> 
 <tr> 
 <td style="border-color:#C0C0C0;text-align:center;vertical-align:middle;width:180pt;">scrollbar-track-color</td> 
 <td style="border-color:#C0C0C0;text-align:center;vertical-align:middle;width:229pt;">底部轨道颜色</td> 
 <td style="border-color:#C0C0C0;text-align:center;vertical-align:middle;width:47pt;">颜色</td> 
 <td style="border-color:#C0C0C0;text-align:center;vertical-align:middle;width:253pt;">scrollbar-track-color: #cccccc</td> 
 </tr> 
 </tbody> 
</table>

### 6, 长度单位 ###

<table> 
 <tbody> 
 <tr> 
 <td style="border-color:#C0C0C0;text-align:center;vertical-align:middle;width:48pt;">单位</td> 
 <td style="border-color:#C0C0C0;text-align:center;vertical-align:middle;width:378pt;">单位说明</td> 
 <td style="border-color:#C0C0C0;text-align:center;vertical-align:middle;width:126pt;">范例</td> 
 </tr> 
 <tr> 
 <td style="border-color:#C0C0C0;text-align:center;vertical-align:middle;width:48pt;">pt</td> 
 <td style="border-color:#C0C0C0;text-align:left;vertical-align:middle;width:378pt;">Point，就像是Word里面的Point一样大小</td> 
 <td style="border-color:#C0C0C0;text-align:center;vertical-align:middle;width:126pt;">font-size:10pt</td> 
 </tr> 
 <tr> 
 <td style="border-color:#C0C0C0;text-align:center;vertical-align:middle;width:48pt;">px</td> 
 <td style="border-color:#C0C0C0;text-align:left;vertical-align:middle;width:378pt;">Pixels，依您屏幕分辨率而决定大小</td> 
 <td style="border-color:#C0C0C0;text-align:center;vertical-align:middle;width:126pt;">font-size:10px</td> 
 </tr> 
 <tr> 
 <td style="border-color:#C0C0C0;text-align:center;vertical-align:middle;width:48pt;">pc</td> 
 <td style="border-color:#C0C0C0;text-align:left;vertical-align:middle;width:378pt;">Pica，6个Pica是一英吋</td> 
 <td style="border-color:#C0C0C0;text-align:center;vertical-align:middle;width:126pt;">font-size:10pc</td> 
 </tr> 
 <tr> 
 <td style="border-color:#C0C0C0;text-align:center;vertical-align:middle;width:48pt;">mm</td> 
 <td style="border-color:#C0C0C0;text-align:left;vertical-align:middle;width:378pt;">公厘，用过尺...这个设定值完全不会因为其它设定而改变</td> 
 <td style="border-color:#C0C0C0;text-align:center;vertical-align:middle;width:126pt;">font-size:10mm</td> 
 </tr> 
 <tr> 
 <td style="border-color:#C0C0C0;text-align:center;vertical-align:middle;width:48pt;">cm</td> 
 <td style="border-color:#C0C0C0;text-align:left;vertical-align:middle;width:378pt;">公分，不会因为使用者设定而改变</td> 
 <td style="border-color:#C0C0C0;text-align:center;vertical-align:middle;width:126pt;">font-size:10cm</td> 
 </tr> 
 <tr> 
 <td style="border-color:#C0C0C0;text-align:center;vertical-align:middle;width:48pt;">%</td> 
 <td style="border-color:#C0C0C0;text-align:left;vertical-align:middle;width:378pt;">百分比，大部分是指所在位置宽度或者长度百分比</td> 
 <td style="border-color:#C0C0C0;text-align:center;vertical-align:middle;width:126pt;">font-size:10%</td> 
 </tr> 
 </tbody> 
</table>

### 7, 颜色表示 ###

<table> 
 <tbody> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;width:89pt;">表示方式</td> 
 <td style="text-align:center;vertical-align:middle;width:314pt;">表示方式说明</td> 
 <td style="text-align:center;vertical-align:middle;width:198pt;">范例</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;width:89pt;">#rrggbb</td> 
 <td style="text-align:left;vertical-align:middle;width:314pt;">可以用Windows色彩选择工具找到</td> 
 <td style="text-align:center;vertical-align:middle;width:198pt;">color:#feefc7</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;width:89pt;">rgb(#,#,#)</td> 
 <td style="text-align:left;vertical-align:middle;width:314pt;">用数字来表示红色蓝色以及绿色的混合...也可以用Windows色彩选择工具找</td> 
 <td style="text-align:center;vertical-align:middle;width:198pt;">color:rgb(135,255,124)</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;width:89pt;">rgb(%,%,%)</td> 
 <td style="text-align:left;vertical-align:middle;width:314pt;">用百分比来代表红色蓝色以及绿色的强度来混合颜色</td> 
 <td style="text-align:center;vertical-align:middle;width:198pt;">color:rgb(70%,35%,41%)</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;width:89pt;">颜色名称</td> 
 <td style="text-align:left;vertical-align:middle;width:314pt;">用颜色的名称来指定颜色</td> 
 <td style="text-align:center;vertical-align:middle;width:198pt;">color:brown</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;width:89pt;">RGBA（红，绿，蓝，alpha）</td> 
 <td style="text-align:left;vertical-align:middle;width:314pt;">RGBA颜色值被IE9, Firefox3+, Chrome, Safari,和Opera10+支持。 Alpha参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的参数。</td> 
 <td style="text-align:center;vertical-align:middle;width:198pt;">color:rgba(255,0,0,0.5);</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;width:89pt;">HSL（色调，饱和度，明度）</td> 
 <td style="text-align:left;vertical-align:middle;width:314pt;">IE9, Firefox, Chrome, Safari,和Opera 10+.支持HSL颜色值。色相是在色轮上的程度（从0到360）-0（或360）是红色的，120是绿色的，240是蓝色的。饱和度是一个百分比值;0％意味着灰色和100％的阴影，是全彩。亮度也是一个百分点;0％是黑色的，100％是白色的</td> 
 <td style="text-align:center;vertical-align:middle;width:198pt;">color:hsl(120,65%,75%);</td> 
 </tr> 
 <tr> 
 <td style="text-align:center;vertical-align:middle;width:89pt;">HSLA（色调，饱和度，亮度，α）</td> 
 <td style="text-align:left;vertical-align:middle;width:314pt;">HSLA颜色值被IE9, Firefox3+, Chrome, Safari,和Opera10+.支持.颜色值是一个带有alpha通道的HSL颜色值的延伸,Alpha参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的参数。</td> 
 <td style="text-align:center;vertical-align:middle;width:198pt;">color:hsla(120,65%,75%,0.3)</td> 
 </tr> 
 </tbody> 
</table>