CSS常用属性及描述

1、 欢迎阅读本文档，希望本文档能对您有所帮助！ 欢迎阅读本文档，希望本文档能对您有所帮助！ 感谢阅读本文档，希望本文档能对您有所帮助！ 感谢阅读本文档，希望本文档能对您有所帮助！ 欢迎阅读本文档，希望本文档能对您有所帮助！ 感谢阅读本文档，希望本文档能对您有所帮助！CSS常用属性及描述CSS 背景属性（Background）属性值描述CSSbackgroundbody background:#00FF00 url(bgimage.gif) no-repeat fixed top; 在一个声明中设置所有的背景属性。背景属性都不能继承1 HYPERLINK /css/pr_background-at

2、tachment.asp background-attachmentscroll，fixed设置背景图像是否固定或者随着页面的其余部分滚动。1 HYPERLINK /css/pr_background-color.asp background-color颜色值设置元素的背景颜色。背景属性都不能继承1 HYPERLINK /css/pr_background-image.asp background-imageurl(URL)设置元素的背景图像。1 HYPERLINK /css/pr_background-position.asp background-positioncenter ，top ，

3、bottom ，right， left设置背景图像的开始位置。top、bottom、left、right 和 center。通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如 100px 或 5cm，最后也可以使用百分数值。1 HYPERLINK /css/pr_background-repeat.asp background-repeatrepeat，repeat-x，repeat-y，no-repeat设置是否及如何重复背景图像。repeat-x 和 repeat-y1CSS 边框属性（Border 和 Outline）属性值描述CSS HYPERLINK /css/pr_

4、border.asp border.d1 border:5px solid gray;在一个声明中设置所有的边框属性。1 HYPERLINK /css/pr_border-style.asp border-stylenone (没有边框，无论边框宽度设为多大) dotted (点线式边框) dashed (破折线式边框) solid (直线式边框) double (双线式边框) groove (槽线式边框) ridge(脊线式边框) inset (内嵌效果的边框) outset (突起效果的边框)设置四条边框的样式。1 HYPERLINK /css/pr_border-color.asp bo

5、rder-color颜色值设置四条边框的颜色。1 HYPERLINK /css/pr_border-width.asp border-width使用 px、cm 等单位定义设置四条边框的宽度。若设置两个数，则第一个数为上下，第二个数为左右。如：border-width:0 1px;1border-top, border-top-width, border-top-style, border-top-color。border-bottom, border-bottom-width, border-bottom-style, border-bottom-color。border-left, bor

6、der-left-width, border-left-style, border-left-color。border-right, border-right-width, border-right-style, border-right-color。使用 px、cm 等单位定义在一个声明中设置所有的单边框属性。单边边框属性上下左右四个边框不但可以统一设定，也可以分开设定。1 HYPERLINK /css/pr_outline.asp outline在一个声明中设置所有的轮廓属性。轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。2 HYPERLINK

7、/css/pr_outline-color.asp outline-color颜色值设置轮廓的颜色。2 HYPERLINK /css/pr_outline-style.asp outline-stylenone 默认。定义无轮廓。 dotted 定义点状的轮廓。 dashed 定义虚线轮廓。 solid 定义实线轮廓。 double 定义双线轮廓。双线的宽度等同于 outline-width 的值。 groove 定义 3D 凹槽轮廓。此效果取决于 outline-color 值。 ridge 定义 3D 凸槽轮廓。此效果取决于 outline-color 值。 inset 定义 3D 凹边轮

8、廓。此效果取决于 outline-color 值。 outset 定义 3D 凸边轮廓。此效果取决于 outline-color 值。 inherit 规定应该从父元素继承轮廓样式的设置。设置轮廓的样式。2 HYPERLINK /css/pr_outline-width.asp outline-width使用 px、cm 等单位定义设置轮廓的宽度。2CSS 文本属性（Text）属性值描述CSS HYPERLINK /css/pr_text_color.asp color颜色值设置文本的颜色。1 HYPERLINK /css/pr_text_direction.asp directionltr

9、默认。文本方向从左到右。 rtl 文本方向从右到左。规定文本的方向 / 书写方向。2 HYPERLINK /css/pr_text_letter-spacing.asp letter-spacing使用 px、cm 等单位定义设置字符间距。1 HYPERLINK /css/pr_dim_line-height.asp line-height使用 px、cm 等单位定义设置行高。1 HYPERLINK /css/pr_text_text-align.asp text-alignleft (居左，缺省值) right (居右) center (居中) justify (两端对齐)规定文本的水平对齐

10、方式。1 HYPERLINK /css/pr_text_text-decoration.asp text-decorationnone (无，缺省值) underline (下划线) overline (上划线) line-through (当中划线)规定添加到文本的装饰效果。1 HYPERLINK /css/pr_text_text-indent.asp text-indent使用 px、cm 等单位定义规定文本块首行的缩进。1 HYPERLINK /css/pr_text_text-transform.asp text-transformnone 默认。定义带有小写字母和大写字母的标准的文

11、本。 capitalize 文本中的每个单词以大写字母开头。 uppercase 定义仅有大写字母。 lowercase 定义无大写字母，仅有小写字母。控制文本的大小写。1CSS 字体属性（Font）属性值描述CSS HYPERLINK /css/pr_font_font.asp font是各种字体属性的一种快捷的综合写法。这个属性可以综合字体风格属性(font-style)，字体变量属性(font-variant)，字体浓淡属性(font-weight)，字体大小属性(font-size)等属性。例句如下：.s1 font:italic normal bold 11pt arial在一个声明

12、中设置所有字体属性。1 HYPERLINK /css/pr_font_font-family.asp font-family字体名称规定文本的字体系列。1 HYPERLINK /css/pr_font_font-size.asp font-size最常用的是pt和px规定文本的字体尺寸。.s2 font-size:12pt1 HYPERLINK /css/pr_font_font-style.asp font-stylenormal, italic规定文本的字体样式。1 HYPERLINK /css/pr_font_font-variant.asp font-variantnormal是缺省值

13、。small-caps表示小的大写字体规定文本的字体样式。1 HYPERLINK /css/pr_font_weight.asp font-weightbold规定字体的粗细。1CSS 外边距属性（Margin）属性值描述CSS HYPERLINK /css/pr_margin.asp margin可以为上下左右边距设置相同的宽度。示例入下：.d1 margin:1cm也可以分别设置边距，顺序是上，右，下，左。示例如下：.d1 margin:1cm 2cm 3cm 4cm在一个声明中设置所有外边距属性。顺序是上，右，下，左。margin:10px 5px;上外边距和下外边距是 10px 右外边

14、距和左外边距是 5pxmargin:0px auto 是居中对齐1 HYPERLINK /css/pr_margin-bottom.asp margin-bottom使用 px、cm 等单位定义设置元素的下外边距。1 HYPERLINK /css/pr_margin-left.asp margin-left使用 px、cm 等单位定义设置元素的左外边距。1 HYPERLINK /css/pr_margin-right.asp margin-right使用 px、cm 等单位定义设置元素的右外边距。1 HYPERLINK /css/pr_margin-top.asp margin-top使用 p

15、x、cm 等单位定义设置元素的上外边距。1CSS 内边距属性（Padding）属性值描述CSS HYPERLINK /css/pr_padding.asp padding可以为上下左右间隙设置相同的宽度。示例入下：.d1 padding:1cm也可以分别设置间隙，顺序是上，右，下，左。示例如下：.d1 padding:1cm 2cm 3cm 4cm在一个声明中设置所有内边距属性。顺序是上，右，下，左。padding:10px 5px;则表示上内边距和下内边距是 10px 右内边距和左内边距是 5px1 HYPERLINK /css/pr_padding-bottom.asp padding-b

16、ottom使用 px、cm 等单位定义设置元素的下内边距。1 HYPERLINK /css/pr_padding-left.asp padding-left使用 px、cm 等单位定义设置元素的左内边距。1 HYPERLINK /css/pr_padding-right.asp padding-right使用 px、cm 等单位定义设置元素的右内边距。1 HYPERLINK /css/pr_padding-top.asp padding-top使用 px、cm 等单位定义设置元素的上内边距。1CSS 列表属性（List）属性值描述CSS HYPERLINK /css/pr_list-style

17、.asp list-stylelist-style:square inside url(/i/arrow.gif);在一个声明中设置所有的列表属性。1 HYPERLINK /css/pr_list-style-image.asp list-style-imageurl(arrow.gif)将图象设置为列表项标记。1 HYPERLINK /css/pr_list-style-position.asp list-style-positionoutside (以列表项内容为准对齐) inside (以列表项标记为准对齐)设置列表项标记的放置位置。1 HYPERLINK /css/pr_list-st

18、yle-type.asp list-style-typedisc (缺省值，黑圆点) circle (空心圆点) square (小黑方块) decimal (数字排序) lower-roman (小写罗马字排序) upper-roman (大写罗马字排序) lower-alpha (小写字母排序) upper-alpha (大写字母排序) none (无列表项标记) 设置列表项标记的类型。1CSS 尺寸属性（Dimension）属性值描述CSS HYPERLINK /css/pr_dim_height.asp height使用 px、cm 等单位定义设置元素高度。1 HYPERLINK /c

19、ss/pr_dim_max-height.asp max-height使用 px、cm 等单位定义设置元素的最大高度。2 HYPERLINK /css/pr_dim_max-width.asp max-width使用 px、cm 等单位定义设置元素的最大宽度。2 HYPERLINK /css/pr_dim_min-height.asp min-height使用 px、cm 等单位定义设置元素的最小高度。2 HYPERLINK /css/pr_dim_min-width.asp min-width使用 px、cm 等单位定义设置元素的最小宽度。2 HYPERLINK /css/pr_dim_wi

20、dth.asp width使用 px、cm 等单位定义设置元素的宽度。1CSS 定位属性（Positioning）属性值描述CSS HYPERLINK /css/pr_class_clear.asp clearleft 在左侧不允许浮动元素。 right 在右侧不允许浮动元素。 both 在左右两侧均不允许浮动元素。 none 默认值。允许浮动元素出现在两侧。规定元素的哪一侧不允许其他浮动元素。img float:left; clear:both; 1 HYPERLINK /css/pr_class_display.asp displaynone 此元素不会被显示。 block 此元素将显示为

21、块级元素，此元素前后会带有换行符。 inline 默认。此元素会被显示为内联元素，元素前后没有换行符。规定元素应该生成的框的类型。p display: inlineli display:inlinespandisplay: block1 HYPERLINK /css/pr_class_float.asp floatleft 元素向左浮动。 right 元素向右浮动。 none 默认值。元素不浮动，并会显示在其在文本中出现的位置。规定框是否应该浮动。1 HYPERLINK /css/pr_class_position.asp positionabsolute 生成绝对定位的元素，相对于 stat

22、ic 定位以外的第一个父元素进行定位。元素的位置通过 left, top, right 以及 bottom 属性进行规定。 fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 left, top, right 以及 bottom 属性进行规定。 relative 生成相对定位的元素，相对于其正常位置进行定位。因此，left:20 会向元素的 LEFT 位置添加 20 像素。 static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。规定元素的定位类型。#box_relative positi

23、on: absolute; left: 30px; top: 20px;#box_relative position: relative; left: 30px; top: 20px;2overflowOverflow:none清除浮动的影响CSS 表格属性（Table）属性值描述CSS HYPERLINK /css/pr_tab_border-collapse.asp o border-collapsecollapse 如果可能，边框会合并为一个单一的边框。规定是否合并表格边框。2 HYPERLINK /css/pr_tab_border-spacing.asp o border-spaci

24、nglength length 规定相邻单元的边框之间的距离。使用 px、cm 等单位。不允许使用负值。如果定义一个 length 参数，那么定义的是水平和垂直间距。如果定义两个 length 参数，那么第一个设置水平间距，而第二个设置垂直间距。规定相邻单元格边框之间的距离。2 HYPERLINK /css/pr_tab_caption-side.asp o caption-sidetop 默认值。把表格标题定位在表格之上。 bottom 把表格标题定位在表格之下。规定表格标题的位置。2 HYPERLINK /css/pr_tab_empty-cells.asp o empty-cellshide 默认。不在空单元格周围绘制边框。 show 在空单元格周围绘制边框。规定是否显示表格中的空单元格上的边框和背景。2 HYPERLINK /css/pr_tab_table-layout.