DreamWeaver CS5 CSS规则定义面板记录

Dreamweaver 中CSS定义的面板可以实现对CSS的编辑，这里对其中几项不是很熟悉的作下笔记：

因为时间珍贵，所以很大一部分都是转自网络的内容。而且对于这些内容，别人已经整理的很好了，没有必要再自己去每个字想着去打。

定义面板总共分为8个选项卡，下面一一总结：

一、【类型】

1.font-variant 属性设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。

值	描述
normal	默认值。浏览器会显示一个标准的字体。
small-caps	浏览器会显示小型大写字母的字体。
inherit	规定应该从父元素继承 font-variant 属性的值。

2.text-transform 设置文本的大小写，只对英文字母有效。

参数

none : 　无转换发生

capitalize : 　将每个单词的第一个字母转换成大写，其余无转换发生

uppercase : 　转换成大写

lowercase : 　转换成小写

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 中的 <pre> 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
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 属性，那么就很难控制了。这就是我一直头疼的布局问题了。

如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

这里对替换元素和非替换元素等各种元素做个笔记：

替换元素：

替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容。

比如：<input /> type="text" 的是，这是一个文本输入框，换一个其他的时候，浏览器显示就不一样

(X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替换元素，这些元素都没有实际的内容。

非替换元素：

(X)HTML 的大多数元素是不可替换元素，他们将内容直接告诉浏览器，将其显示出来。

比如<p>wanmei.com</p>

浏览器将把这段内容直接显示出来。

另外还有两种元素显示方法，block 和 inline。在上文已经说过，不在多说。

值	描述
left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit	规定应该从父元素继承 float 属性的值。

2.clear 属性规定元素的哪一侧不允许其他浮动元素。

clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。

W3chool上面的这句话说明了clear 属性的原理。

但是我对当clear 和 float 同时使用时，很难理解。

就像W3c上面的例子：清除元素的侧面

网络是无穷大的，从网上找到了一个讲解【浮动元素】的好文章：http://ce.sysu.edu.cn/hope/demo/float/float_01.html

里面主要指出了浮动元素的几个性质：

浮动元素会脱离正常的文档流，按照其外边距指定的位置相对于它的上一个块级元素（或父元素）显示
浮动元素后面的块级元素的内容会向此浮动元素的外边距靠齐，但是边框和背景却忽略浮动元素而向上一个（实例中为父元素）任意非浮动元素靠齐
浮动元素后面的内联元素会向此浮动元素的外边距靠齐

元素设置为浮动之后，就生成一个块级框（css行高提出的概念），没必要再声明display:block，可以设置宽高。

里面还给出了例子，可以进去查看。

五、【边框】

这一部分也很好理解，而且其他笔记已经记录过了。这里主要记录几个参数。

1.border-style 属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式。

值	描述
none	定义无边框。
hidden	与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。
inherit	规定应该从父元素继承边框样式。

2.border-width 简写属性为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。

只有当边框样式不是 none 时才起作用。如果边框样式是 none，边框宽度实际上会重置为 0。不允许指定负长度值。

值	描述
thin	定义细的边框。
medium	默认。定义中等的边框。
thick	定义粗的边框。
length	允许您自定义边框的宽度。
inherit	规定应该从父元素继承边框宽度。

六、【列表】list-style

list-style 简写属性在一个声明中设置所有的列表属性。

1.list-style-type 属性设置列表项标记的类型。

可能的值有很多，这里记录其中几个常见的。

值	描述
none	无标记。
disc	默认。标记是实心圆。
circle	标记是空心圆。
square	标记是实心方块。
decimal	标记是数字。

2.list-style-position 属性设置在何处放置列表项标记。

该属性用于声明列表标志相对于列表项内容的位置。外部 (outside) 标志会放在离列表项边框边界一定距离处，不过这距离在 CSS 中未定义。内部 (inside) 标志处理为好像它们是插入在列表项内容最前面的行内元素一样。

值	描述
inside	列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside	默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
inherit	规定应该从父元素继承 list-style-position 属性的值。

这样说不是很容易明白，看例子就知道了：放置列表标记

当列表项的内容比较多，造成换行时，看效果：

七、【定位】

我感觉这只CSS规则定义中最难的一部分了，尽管在其他笔记中已经记录过了，但是还是得进行补充。

1.position 属性规定元素的定位类型。

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

对于此处，我一直有一个问题没有弄明白，就是父层和子层的position属性在不同的组合中会出现什么样的结果。

我得对每个进行试验，可能需要很长的篇幅，所以就领记一篇吧。

2.width 和 height 两个属性和【方框】中的这两个属性是同样的，可能为了方便起见就在这里也放置了两个吧。

3.Visibility 属性规定元素是否可见。

提示：即使不可见的元素也会占据页面上的空间。

display属性的参数 none 可以是元素不可见并不占位置。

值	描述
visible	默认值。元素是可见的。
hidden	元素是不可见的。
collapse	当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。
inherit	规定应该从父元素继承 visibility 属性的值。

对于 collapse 可以看例子：把表格元素设置为 collapse

4.z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注释：元素可拥有负的 z-index 属性值。

注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！

值	描述
auto	默认。堆叠顺序与父元素相等。
number	设置元素的堆叠顺序。
inherit	规定应该从父元素继承 z-index 属性的值。

5.overflow 属性规定当内容溢出元素框时发生的事情。

如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

这里给出一个例子，可以自己对overflow属性进行修改，查看效果。

当修改为scroll时，可以改变元素的宽高，使其能容里面的内容。

例子：如何使用滚动条来显示元素内溢出的内容

6. placement 部分，这里主要控制元素的位置。

对于有top、right、bottom、left四个参数的优先级，我进行了几次尝试，得出的结果是 left 和top 高于right 和bottom。

7.clip 属性剪裁绝对定位元素。

这个属性用于定义一个剪裁矩形。对于一个绝对定义元素，在这个矩形内的内容才可见。出了这个剪裁区域的内容会根据 overflow 的值来处理。剪裁区域可能比元素的内容区大，也可能比内容区小。

值	描述
shape	设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left)
auto	默认值。不应用任何剪裁。
inherit	规定应该从父元素继承 clip 属性的值。

clip属性必须和定位属性postion一起使用才能生效。

例子：设置元素的形状

八、【扩展】

1.前两个属page-break-before和page-break-after 好像是属于DOM的知识，还没有弄明白，先不说了。

2.cursor 属性规定要显示的鼠标光标的类型（形状）。

该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。

参数很多，看W3cschool：http://www.w3school.com.cn/css/pr_class_cursor.asp

3.Filter 是滤镜效果，内容很多，部分浏览器对其中的一部分不支持，而且网上讲解此的很多。

主要是网页美工应用，但是我感觉还是不用为好，因为浏览器对其的规则不统一。

至此，面板笔记做完。