CSS 属性大全(总结)

 
本节是 CSS 属性大全(总结) 第二部分，欢迎大家继续阅读。
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,MozillaFirefox等，对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;
 *background:red;
 }
 </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,CSShack书写顺序一般为FF IE7 IE6
 以: " #demo {width:100px;} "为例;
 #demo {width:100px;}
 *html #demo {width:120px;}
 *+html #demo {width:130px;}
 ---------------
 所以最后,#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里一样！

常用的css属性大全

一、html标签
<pre>...</pre>文字格式化
<div>......</div>列块容器
字体大小变化 <fontsize=?>想输入的字</font>
字体颜色 <fontcolor="...">想输入的字</font>
字体变粗<b>想输入的字</b>
字体变斜<i>想输入的字</i>
字体加下划线<u>想输入的字</u>
对正中央ㄉ语法 <palign="center">内容</p>
对正左边ㄉ语法 <palign="left">内容</p>
对正右边ㄉ语法 <p align="right">内容</p>
字体删除线<s>想输入的字</s>
字体设置<font">字体名称">想输入的字</font>
打字机字体<tt>想输入的字</tt>
上标字^{想输入的字}
下标字_{想输入的字}
水平线 <hr color="...">
换行输入 想输入的字<br>想输入的字
超链接 <ahref="想链接网址">链接地的名称</a>
<ahref="mailto:填入email">要显示的字打这里</a>网络邮寄标签
贴图 <img src="图形的网址">
跑马灯(循环) <marqueebehavior=scroll>想输入的字</marquee>

外部文件导入格式标签

CSS外部导入格式：
<link rel="stylesheet" type="text/css"href="/css.css" />

直接引用：
 

javascript - 加载外部.js独立文件：