DreamWeaver CS5 CSS规则定义面板 记录
Dreamweaver 中CSS定义的面板可以实现对CSS的编辑，这里对其中几项不是很熟悉的作下笔记：
因为时间珍贵，所以很大一部分都是转自网络的内容。而且对于这些内容，别人已经整理的很好了，没有必要再自己去每个字想着去打。
定义面板总共分为8个选项卡，下面一一总结：
一、【类型】
1.font-variant 属性设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
| 值 | 描述 |
|---|---|
| normal | 默认值。浏览器会显示一个标准的字体。 |
| small-caps | 浏览器会显示小型大写字母的字体。 |
| inherit | 规定应该从父元素继承 font-variant 属性的值。 |
2.text-transform 设置文本的大小写，只对英文字母有效。
参数
3.text-decoration 属性对文本进行修饰。
| 值 | 描述 |
|---|---|
| none | 默认。定义标准的文本。 |
| underline | 定义文本下的一条线。 |
| overline | 定义文本上的一条线。 |
| line-through | 定义穿过文本下的一条线。 |
| blink | 定义闪烁的文本。 |
| inherit | 规定应该从父元素继承 text-decoration 属性的值。 |
任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。
IE、Chrome 或 Safari 不支持 "blink" 属性值。
二、【背景】
这个感觉没什么可记的，都不是很难。
就记个background-attachment 属性
设置背景图像是否固定或者随着页面的其余部分滚动。
| 值 | 描述 |
|---|---|
| scroll | 默认值。背景图像会随着页面其余部分的滚动而移动。 |
| fixed | 当页面的其余部分滚动时，背景图像不会移动。 |
| inherit | 规定应该从父元素继承 background-attachment 属性的设置。 |
三、【区块】
这个挺多的。还是先上图片，这次就不需要方框表明了，全部都记一下。
1.word-spacing属性 ，控制单词间的间隔。所谓单词，就是用空格分开的字符串。
允许指定负长度值，这会让字之间挤得更紧。
| 值 | 描述 |
|---|---|
| normal | 默认。定义单词间的标准空间。 |
| length | 定义单词间的固定空间。 |
| inherit | 规定应该从父元素继承 word-spacing 属性的值。 |
2.letter-spacing 属性，与Word-spacing相似，不过它控制的是单个字符之间的间隔，而不是单词间。
| 值 | 描述 |
|---|---|
| normal | 默认。规定字符间没有额外的空间。 |
| length | 定义字符间的固定空间（允许使用负值）。 |
| inherit | 规定应该从父元素继承 letter-spacing 属性的值。 |
3.vertical-align 属性设置元素的垂直对齐方式。
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。
我自己理解是：对于处于父元素中的一个元素，如果不指定vertical-align属性的话，它会与父元素处于一个默认的垂直相对位置，而vertical-align属性是用来对给元素进行相对于默认位置的调节。（说的我自己都不懂了。具体还是看例子更容易理解，见下文。）
| 值 | 描述 |
|---|---|
| baseline | 默认。元素放置在父元素的基线上。 |
| sub | 垂直对齐文本的下标。 |
| super | 垂直对齐文本的上标 |
| top | 把元素的顶端与行中最高元素的顶端对齐 |
| text-top | 把元素的顶端与父元素字体的顶端对齐 |
| middle | 把此元素放置在父元素的中部。 |
| bottom | 把元素的顶端与行中最低的元素的顶端对齐。 |
| text-bottom | 把元素的底端与父元素字体的底端对齐。 |
| length | |
| % | 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。 |
| inherit | 规定应该从父元素继承 vertical-align 属性的值。 |
W3cschool的例子：http://www.w3school.com.cn/tiy/t.asp?f=csse_vertical-align
4.text-align属性，与上面的相对。
text-align 属性规定元素中的文本的水平对齐方式。
| 值 | 描述 |
|---|---|
| left | 把文本排列到左边。默认值：由浏览器决定。 |
| right | 把文本排列到右边。 |
| center | 把文本排列到中间。 |
| justify | 实现两端对齐文本效果。 |
| inherit | 规定应该从父元素继承 text-align 属性的值。 |
justify 这个参数实在是弄不明白，因为在W3cschool上面的例子里面试不出来，在Dreamweaver里面也不行，不过貌似不常用，就先放这儿吧。
感觉应该和 Word 里面的对齐方式差不多吧。
5.text-indent 属性规定文本块中首行文本的缩进。
这个简单，不多说。
| 值 | 描述 |
|---|---|
| length | 定义固定的缩进。默认值：0。 |
| % | 定义基于父元素宽度的百分比的缩进。 |
| inherit | 规定应该从父元素继承 text-indent 属性的值。 |
6.white-space 属性设置如何处理元素内的空白。
这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。
| 值 | 描述 |
|---|---|
| normal | 默认。空白会被浏览器忽略。 |
| pre | 空白会被浏览器保留。其行为方式类似 HTML 中的 标签。 |
| nowrap | 文本不会换行，文本会在在同一行上继续，直到遇到 标签为止。 |
| pre-wrap | 保留空白符序列，但是正常地进行换行。 |
| pre-line | 合并空白符序列，但是保留换行符。 |
| inherit | 规定应该从父元素继承 white-space 属性的值。 |
看个例子：在元素中禁止文本折行
7.最后这个挺复杂：display 属性规定元素应该生成的框的类型。
参数有很多，这里记几个常见的。
none：不显示该元素，也不占位。
block：此元素将显示为块级元素，此元素前后会带有换行符。
效果如图（红色部分为测试文本）：
inline：默认值，此元素会被显示为内联元素，元素前后没有换行符。如图：
inline-block行内块元素。（CSS2.1 新增的值）
与 inline 相比 该元素稍微变高。效果不明显，图片看不出来，不是很明白啊。
从网络上找到解释：
很多时候我们必须使一些块元素并排显示，一般想到的是必须使用浮动，但是块元素浮动给边距(margin)的时候在IE下会出现加倍的BUG，所以很多时候不得不把这个块元素套在一个内联元素里面，然后给内联元素浮动和边距。
将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。详解链接：http://www.blueidea.com/tech/web/2007/4532.asp
还有很多参数，这里不再赘述，详细见W3cschool：http://www.w3school.com.cn/css/pr_class_display.asp
四、【方框】
这里是对CSS“框模型”的控制，要说的不多。
以前的笔记已经详细记录过其中的两项：padding和 margin。
而，相对来说 width 和 height 都很好理解，不在赘述。只记录 float 和 clear。
1.float属性，这是一个很重要也很难懂的属性。
float 属性定义元素在哪个方向浮动。
我的理解就是 控制元素在这一行的右边还是左边，然后其他元素占据这一行剩余的地方。当然也可以让单独一行。
如果只要少量元素的话还好说，但是如果元素多再加上position 属性，那么就很难控制了。这就是我一直头疼的布局问题了。
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
这里对 替换元素和非替换元素等各种元素 做个笔记：
替换元素：
替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容。
比如： type="text" 的是，这是一个文本输入框，换一个其他的时候，浏览器显示就不一样
(X)HTML中的、、