<!– /* Font Definitions */ @font-face {font-family:宋体; panose-1:2 1 6 0 3 1 1 1 1 1; mso-font-alt:SimSun; mso-font-charset:134; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:3 680460288 22 0 262145 0;} @font-face {font-family:”Cambria Math”; panose-1:2 4 5 3 5 4 6 3 2 4; mso-font-charset:1; mso-generic-font-family:roman; mso-font-format:other; mso-font-pitch:variable; mso-font-signature:0 0 0 0 0 0;} @font-face {font-family:”/@宋体”; panose-1:2 1 6 0 3 1 1 1 1 1; mso-font-charset:134; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:3 680460288 22 0 262145 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-unhide:no; mso-style-qformat:yes; mso-style-parent:””; margin:0cm; margin-bottom:.0001pt; text-align:justify; text-justify:inter-ideograph; mso-pagination:none; font-size:10.5pt; mso-bidi-font-size:12.0pt; font-family:”Times New Roman”,”serif”; mso-fareast-font-family:宋体; mso-font-kerning:1.0pt;} h2 {mso-style-unhide:no; mso-style-qformat:yes; mso-style-link:”标题 2 Char”; mso-margin-top-alt:auto; margin-right:0cm; mso-margin-bottom-alt:auto; margin-left:0cm; mso-pagination:widow-orphan; mso-outline-level:2; font-size:18.0pt; font-family:宋体; mso-bidi-font-family:宋体; font-weight:bold;} p {mso-style-unhide:no; mso-margin-top-alt:auto; margin-right:0cm; mso-margin-bottom-alt:auto; margin-left:0cm; mso-pagination:widow-orphan; font-size:12.0pt; font-family:宋体; mso-bidi-font-family:宋体;} span.2Char {mso-style-name:”标题 2 Char”; mso-style-unhide:no; mso-style-locked:yes; mso-style-link:”标题 2″; mso-ansi-font-size:18.0pt; mso-bidi-font-size:18.0pt; font-family:宋体; mso-ascii-font-family:宋体; mso-hansi-font-family:宋体; mso-bidi-font-family:宋体; font-weight:bold;} .MsoChpDefault {mso-style-type:export-only; mso-default-props:yes; font-size:10.0pt; mso-ansi-font-size:10.0pt; mso-bidi-font-size:10.0pt; mso-ascii-font-family:”Times New Roman”; mso-fareast-font-family:宋体; mso-hansi-font-family:”Times New Roman”; mso-font-kerning:0pt;} /* Page Definitions */ @page {mso-page-border-surround-header:no; mso-page-border-surround-footer:no;} @page div1 {size:595.3pt 841.9pt; margin:72.0pt 90.0pt 72.0pt 90.0pt; mso-header-margin:42.55pt; mso-footer-margin:49.6pt; mso-paper-source:0; layout-grid:15.6pt;} div.div1 {page:div1;} /* List Definitions */ @list l0 {mso-list-id:89129785; mso-list-type:hybrid; mso-list-template-ids:1479438276 -807381700 67698713 67698715 67698703 67698713 67698715 67698703 67698713 67698715;} @list l0:level1 {mso-level-tab-stop:18.0pt; mso-level-number-position:left; margin-left:18.0pt; text-indent:-18.0pt;} @list l1 {mso-list-id:1567646801; mso-list-type:hybrid; mso-list-template-ids:-450604218 480439880 67698713 67698715 67698703 67698713 67698715 67698703 67698713 67698715;} @list l1:level1 {mso-level-start-at:5; mso-level-text:%1．; mso-level-tab-stop:36.0pt; mso-level-number-position:left; text-indent:-36.0pt;} ol {margin-bottom:0cm;} ul {margin-bottom:0cm;} –>
CSS 属性大全
1. 文字属性
「字体族科」（ font-family ）， 设定时，需考虑浏览器中有无该字体。
「字体大小」（ font-size ）， 注意度量单位。《绝对大小》 | 《相对大小》 | 《长度》 | 《百分比》 ( 一般设置双数 )
「字体加粗」（ font-weight ）， 除了 normal （正常）、 bold （粗体）、 bolder （特粗）、 lighter （细体）外，还有 9 种以像素为度量为单位的设置方式（ 100 ， 200 ， 300 ， 400 ， 500 ， 600 ， 700 ， 800 ， 900 ）。
「字体风格」（ font-style ）， 也就是字型。
（
normal : 正常的字体
italic : 斜体。对于没有斜体变量的特殊字体，将应用 oblique
oblique : 倾斜的字体
）
「字体变形」（ font-variant ）， 字体变形属性决定了字体显示是 normal ( 普通 ) ，还是
Small-caps （小型大写字母）当文字中所有字母都是大写的时候，小型大写字母（值）会显示比小写字母稍大的大写字符。
「字体」（ font ）， 《字体风格》 | 《字体变形》 | 《字体加粗》 | 《字体大小》 | 《行高》 | 《字体族科》
2. 文本属性
「文字间距」（ word-spacing ）， 主要用于控制文字间相隔的距离。有正常（ normal ）和值（自定义间隔值）两种选择方式。
「字母间距」（ letter-spacing ）， 其作用与字符间距类似，也有正常 （ normal ）和值（自定义间隔值）两种选择方式。
「垂直对齐」（ vertical-align ）， 控制 文字或图像相对于其母体元素的垂直位置。如将一个 2×3 像素的 GIF 图像同其母体元素文字的顶部垂直对齐，则该 GIF 图像将在该行文字的顶部显示。共有基 线（ baseline ，将元素的基准线同母体元素的基准线对齐）、下标（ sub ，将元素以下标的形式显示） , 上标（ super ，将元素以上标的形式显 示）、顶部（ top ，将元素顶部同最高的母体元素对齐）、文本顶对齐（ text-top ，将元素的顶部同母体元素文字的顶部对齐）、中线对齐（ middle ，将元素的中点同 母体元素的中点对齐）、底部（ bottom ，将元素的底部同最低的母体元素对齐）及值（自定义）等 9 种选择。
「文本排列」（ text-align ）， 设置块的水平对齐方式。共有左对齐（ left ）、右对齐（ right ）、居中（ center ）和均分 （ justify ）等 4 种选择。
「行 高」（ line-height ）， 就是 行距。 Normal | < 数字 > | < 长度 > | < 百分比 >
当值为数字时，行高由元素字体大小的量与该数字相乘所得。
百分比的值相对于元素的字体大小而定。
不允许使用负值。
「文本转换」（ text-transform ）， 这项属性能轻而易举地控制字母大小写，有首字大写（ capitalize 、大写（ uppercase ）、小写（ lowercase ）和无（ none ，使所有继承文字和变形参数被 忽略，文字将以正常形式显示）等 4 种。
「文字缩进」（ text-indent ）， 控制块的缩进程度。 < 长度 > | < 百分比 >
「空白间距」（ white-space ）， 在 HTML 中，空格是被省略的；在 CSS 中则使用属性（ white-space ）控制空格的输 入。共有正常（ normal ）、保留（ pre ）和不换行（ nowrap ）等 3 种选择。
「修 饰」（ text-decoration ）， 用于控制链接文本的显 示形态，有下划线（ underline ）、无下划线（ overline ）、删除线（ line-through ）、闪烁（ blink ）和无（ none ，使上述效果均不会发生）等 5 种修饰方式。但 IE4 不支持文字闪烁。
3 颜色及背景属性
[ 颜 色」（ color ）， 设置颜色。 Color:blure color:#00080 color:#0c0
「背景颜色」（ background-color ）， 设置背景颜色。 background-color :blure background-color :#00080 background-color :#0c0
「背景图像」（ background-image ）， 设置网页背景图像。 background-image:url(/images/xx.gif)
「背景重复」（ background- repeat ）， 控制背景图像的平铺方式，有不重复（ no-repeat ）、重复（ repeat ，沿水平、垂直方向平铺）、横向重复 （ repeat-X ，图像沿水平方向平铺）和纵向重复（ repeat-Y ，沿图像垂直方向平铺）等 4 种选择。
「背景附件」（ background-attachment ）， 用于控制背景图像是否会随页面的滚动而一起滚动。有固定（ fixd ，文字滚动 时，背景图像保质固定）和滚动（ scroll ，背景图像随文字内容一起滚动）两种选择。
「水平位置」 / 「垂直位置」（ background-position ）， 确定背景图像的水平、垂直位置
。共有左对齐（ left ）、右对齐 （ right ）、顶部（ top ）、底部（ bottom ）、居中（ center ）和值（自定义背景图像的起点位置，可使用户对背景图像的位置做出更精确的控 制）等 6 种选择。
[ 背景 ] （ background ）， 《背景颜色》 || 《背景图像》 || 《背景重复》 || 《背景附件》 || 《背景位置》
4. 文字连接属性
a /* 所有超链接 */
a:link /* 超链接文字格式 */
a:visited /* 浏览过的链接文字格式 */
a:active /* 按下链接的格式 */
a:hover /* 鼠标转到链接 */
鼠标光标 样式：
链接手指 cursor:pointer
十字体 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
5． 边框
「边框宽度」（ border-width ）， 控制边框的宽度，其中分为 4 个属性： border-top-width 顶边框的 宽度、 border-right-width 右边框的宽度、 border-bottom-width 底边框的宽度、 border-left-width 左 边框的宽度。
「边框颜色」（ border-color ）， 设置各边框的颜色。若要使边框的四边显示不同的颜色， 可在设置中分别列出。如，
p{: #ff0000 #009900 #0000ff #55cc00}
浏览器将四种颜色依次理解为： 上边框、右边框、底边框和左边框（自上开始顺时针）。
「边框样式」（ border-style ）， 设定边框的样 式，共有无（ none ）、虚线（ dotted ）、点划线线（ dotted ）、点划线（ dashed ）、实线（ solid ）、双线（ double ）、槽状（ grove ）、脊状（ ridge ）、凹陷（ inset ）和凸起（ outset ）等 9 种。
「边框样式」（ border ） , < 边框宽度 > | < 边框样式 > | < 边框颜色 >
6 ．「盒子」属性
「宽」（width ）， 确定盒子本身的宽度，可以使盒子的宽度不依靠它所包含的内容多少。 < 长度> | < 百分比> | <auto>
「高」（height ）， 确定盒子本身的高度。< 长度> | <auto>
「浮 动」（float ）， 设置块元素的浮动效果。（left ）|(right)|(none)
「清 除」（clear ）， 用于清除设置的浮动效果。（left ）|(right)|(none)|(both)
「边 距」 （margin ）， 控制围绕边框的边距大小。其中包含4 个属 性：margin-top 控制上边距的宽度、margin-right 控制右边距的宽度、margin-bottom 控制下边距的宽度、margin- left 控制左边距的宽度。
「补 白」（padding ）， 确定围绕块元素的空格填充数量，其中包含4 个属性 「padding-top 控制上留白的宽度、padding-right 控制右留白的宽度、padding-bottom 控制下留白宽度、 padding-left 控制左留白的宽度。
7 ．列表
1. 列表元素：
ol 有序列表。
<ol>
<li> 项目１ </li>
<li> 项目２ </li>
<li> 项目３ </li>
</ol>
表现为：
1. 项目 1
2. 项目 2
3. 项目 3
ul 无序列表，表现为 li 前面是大圆点而不是 123
<ul>
<li> 项目 1</li>
<li> 项目 2</li>
<li> 项目 3</li>
</ul>
表现为：
· 项目 1
· 项目 2
· 项目 3
很多人容易忽略 dl dt dd 的用法
dl 内容块
dt 内容块的标题
dd 内容
可以这么写：
<dl>
<dt> 标题 title</dt>
<dd> 内容 content1</dd>
<dd> 内容 content2</dd>
</dl>
表现为：
标题
内容
内容
（内容是缩进的！）
8 ． 定位
「类 型」（ position ）， 用于确定定位的类型，共有绝对（ absolute ）、相对（ relative ）和静态 （ static ）等 3 种选择。
「 Z 轴」（ z-index ）， 用于控制网页中块元素的叠放顺序，可为元素设置 重叠效果。该属性的参数值使用纯整数，值为 0 时，元素在最下层，适用于绝对定位或相对定位的元素。
「显 示」（ visibility ） 使用该属性可将网页中的元素隐藏，共有继承（ inherit ，继承母体要素的可视性设置）、可见 （ visible ）和隐藏（ hidden ）等 3 种选择。
「溢 出」（ overflow ）， 在确定了元素的高度 和宽度后，如果元素的面积不能全部显示元素中的内容时，该属性做一日和尚撞一天钟起作用了。其中共有可见（ visible ，扩大面积以显示所有内容）、隐 藏（ hidden ，隐藏超出范围的内容）、滚动（ scroll ，在元素的右边显示一个滚动条）和自动（ auto ，当内容超出元素面积时，显示滚动条）等 4 种选择。
「定 位」， 当为元素确定了绝对定位类型后，该组属性决定元素在网页中的具体位置。该组属性包含 4 个 子属性，分别是「左」（属性名为「 left 」，控制元素左边的起始位置）、「上」（属性名为「 top 」，控制元素上面的起始位置）、 「宽」或「高」（与「盒子」类属性面板中「宽」或「高」的属性作用相同）。
「剪 辑」（ clip ）， 当元素被 指定为绝对定位类型后，该属性可以把元素区域切成各种形状，但目前提供的只有方形一种。属性值为 rect(top right bottom left) ，即：
rect(top right bottom left) ，属性值的单位为任何一种长度单位。
9 ． [display]
值 描述
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。（ CSS2.1 新增的值）
*display:inline; *zoom:1;
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
table 此元素会作为块级表格来显示（类似 <table> ），表格前后带有换行符。
inline-table 此元素会作为内联表格来显示（类似 <table> ），表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示（类似 <tbody> ）。
table-header-group 此元素会作为一个或多个行的分组来显示（类似 <thead> ）。
table-footer-group 此元素会作为一个或多个行的分组来显示（类似 <tfoot> ）。
table-row 此元素会作为一个表格行显示（类似 <tr> ）。
table-column-group 此元素会作为一个或多个列的分组来显示（类似 <colgroup> ）。
table-column 此元素会作为一个单元格列显示（类似 <col> ）
table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th> ）
table-caption 此元素会作为一个表格标题显示（类似 <caption> ）
inherit 规定应该从父元素继承 display 属性的值。
10 ． [ 分类属性 ]
「空白」（ white-space ）， 用于决定元素内的空格
Normal( 将多个空格折叠成一个 )
Pre( 不折叠成空格 )
Nowrap( 不允许换行，除非遇到 <br/> 标记 )
「目录样式类型」（ list-style-type ）， 带有显示值目录项元素
「目录样式图像」（ list-style-image ）， 带有显示值目录项元素
list-style-image:url( 图片地址 )
「目录样式位置」（ list-style-position ）， 带有显示值目录项元素
Inside ( 内部 ) | outside （外部 — 初始值）
「目录样式」（ list-style ）， 带有显示值目录项元素
《目录样式类型》 | 《目录样式类型》 | 《目录样式图像》
11 ． css 单位
[ 长度单位]
有效的相对单位
em( 元素字体的高度)
ex(x-height, 字母“x ”的高度)
px( 像素，相对于屏幕的分辨率)
有效的绝对单位
in( 英寸，1 英寸=2.54 厘米)
cm( 厘米，1 厘米=10 毫米)
mm( 米)
pt( 点，1 点=1/72 英寸)
pc( 帕，1 帕=12 点)
[ 百分比单位]
百分比值是相对于其他数值，同样地用于定义每个属性，最经常使用
的百分比值是相对于元素的字体大小。
[ 颜色单位]
颜色值是一个关键字或一个RGB 格式的数字
#rrggbb | #rgb | rgb(x,x,x)x 是一个介乎0 到255 之间的整数（如，rgb(0,204,0) ）
Rgb(y%,y%,y%)y 是一个介乎0.0 到100.0 之间的整数（如，rgb(0%,80%,0%) ）
这例子指定的是同一个颜色
12 ． css hack
由于不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox 等，对CSS 的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。
这个时候我们就需要针对不同的浏览器去写不同的CSS ，让它能够同时兼容不同的浏览器，能在不 同的浏览器中也能得到我们想要的页面效果。
这个针对不同的浏览器写不同的CSS code 的过程，就叫CSS hack, 也叫写CSS hack 。
CSS Hack 的原理是什么?
由于不同的浏览器对CSS 的支持及解析结果不一样，还由于CSS 中的优先级的关 系。我们就可以根据这个来针对不同的浏览器来写不同的CSS 。
比如 IE6 能识别下划线“_” 和星号” * “ ，IE7 能识别星号” * “ ，但不能识别下划线“_” ，而firefox 两个都不能认识。等等
书写顺序，一般是将识别能力强的浏览器的CSS 写在后面。
CSS Hack 的写法！
比如要分辨IE6 和firefox 两种浏览器，可以这样写：
<style>
div{
background:green; /* for firefox */
*background:red; /* for IE6 */
}
</style>
我在IE6 中看到是红色的，在firefox 中看到是绿色的。
解释一下：
上面的css 在firefox 中，它是认识不了后面的那个带星号的东东是什么的，于是将它过滤 掉，不予理睬，解析得到的结果是:div{background:green}, 于是理所当然这个div 的背景是绿色的。
在IE6 中呢，它两个background 都能识别出来，它解析得到的结果 是:div{background:green;background:red;}, 于是根据优先级别，处在后面的red 的优先级高，于是当然这个div 的背景颜色就是红色的了。
CSS hack: 区分IE6 ，IE7 ，firefox
区别不同浏览器，CSS hack 写法：
区别IE6 与FF ：
background:orange;*background:blue;
区别IE6 与IE7 ：
background:green !important;background:blue;
区别IE7 与FF ：
background:orange; *background:green;
区别FF ，IE7 ，IE6 ：
background:orange;*background:green;_background:blue;
background:orange;*background:green !important;*background:blue;
注：IE 都能识别*; 标准浏览器( 如FF) 不能识别* ；
IE6 能识别* ，某些情况下不能识别 !important,
———————————————————————————————–
IE6 支持重定义中的!important ，例如：
.yuanxin {color:#e00!important;}
.yuanxin {color:#000;}
你将会发现定义了样式class=”yuanxin” 时，在IE 下，字体显示为红色 （#e00 ）。
但不支持同一定义中的!important 。例如：
.yuanxin {color:#e00!important;color:#000}
此时在IE6 下不支持，你将会发现定义了样式class=”yuanxin” 时，字体显示为黑 色（#000 ）。
———————————————————————————————–
IE7 能识别* ，也能识别!important;
FF 不能识别* ，但能识别!important;
IE6 IE7 FF
* √ √ ×
!important × √ √
浏览器优先级别:FF<IE7<IE6,CSS hack 书写顺序一般为FF IE7 IE6
以: ” #demo {width:100px;} “ 为例;
#demo {width:100px;} /* 被FIREFOX,IE6,IE7 执行.*/
*html #demo {width:120px;} /* 会被IE6 执行, 之前的定义会被后来的覆盖, 所以#demo 的宽度在IE6 就为120px; */
*+html #demo {width:130px;} /* 会被IE7 执行*/
—————
所以最后,#demo 的宽度在三个浏览器的解释为:
FIREFOX:100px;
ie6:120px;
ie7:130px;
IE8 最新css hack ：
“/9” 例:”border:1px /9;”. 这里的“/9” 可以区别所有IE 和FireFox.
“*” IE6 、IE7 可以识别.IE8 、FireFox 不能.
“_” IE6 可以识别“_”,IE7 、IE8 、FireFox 不能.
<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ />
在程序里加上这句话的意思就是： IE8 里显示的布局和 IE7 里一样！
