<!-- /* 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 Section1 {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.Section1 {page:Section1;} /* 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> 项目1 </li>
<li> 项目2 </li>
<li> 项目3 </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 里一样!