htmlCSS常用属性

属性太多，对于我这种不深入WEB的人员，还是有个速查表方便多了，注意利用开头的目录，会不断更新的

CSS 字体属性（Font）

属性 描述 CSS 
font 在一个声明中设置所有字体属性。 1 
font-family 规定文本的字体系列。 1 
font-size 规定文本的字体尺寸。 1 
font-size-adjust 为元素规定 aspect 值。 2 
font-stretch 收缩或拉伸当前的字体系列。 2 
font-style 规定文本的字体样式。 1 
font-variant 规定是否以小型大写字母的字体显示文本。 1 
font-weight 规定字体的粗细。 1

CSS 文本属性（Text）

属性 描述 CSS 
color 设置文本的颜色。 1 
direction 规定文本的方向 / 书写方向。 2 
letter-spacing 设置字符间距。 1 
line-height 设置行高。 1 
text-align 规定文本的水平对齐方式。 1 
text-decoration 规定添加到文本的装饰效果。 1 
text-indent 规定文本块首行的缩进。 1 
text-shadow 规定添加到文本的阴影效果。 2 
text-transform 控制文本的大小写。 1 
unicode-bidi 设置文本方向。 2 
white-space 规定如何处理元素中的空白。 1 
word-spacing 设置单词间距。 1 
hanging-punctuation 规定标点字符是否位于线框之外。 3 
punctuation-trim 规定是否对标点字符进行修剪。 3 
text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。 3 
text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。 3 
text-justify 规定当 text-align 设置为 “justify” 时所使用的对齐方法。 3 
text-outline 规定文本的轮廓。 3 
text-overflow 规定当文本溢出包含元素时发生的事情。 3 
text-shadow 向文本添加阴影。 3 
text-wrap 规定文本的换行规则。 3 
word-break 规定非中日韩文本的换行规则。 3 
word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。

---

CSS 背景属性（Background）

属性 描述 CSS 
background 在一个声明中设置所有的背景属性。 1 
background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。 1 
background-color 设置元素的背景颜色。 1 
background-image 设置元素的背景图像。 1 
background-position 设置背景图像的开始位置。 1 
background-repeat 设置是否及如何重复背景图像。 1 
background-clip 规定背景的绘制区域。 3 
background-origin 规定背景图片的定位区域。 3 
background-size 规定背景图片的尺寸。 3

---

区块属性： (Block)

字间距letter-spacing: normal; 数值
text-align: justify;(两端对齐) left;(左对齐) right;(右对齐) center;(居中)
缩进text-indent: 数值px;
垂直对齐vertical-align: baseline;(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom;
词间距word-spacing: normal; 数值
空格white-space: pre;(保留) nowrap;(不换行)
显示display:block;(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; 
inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题)

---

Box 属性

属性 描述 CSS 
overflow-x 如果内容溢出了元素内容区域，是否对内容的左/右边缘进行裁剪。 3 
overflow-y 如果内容溢出了元素内容区域，是否对内容的上/下边缘进行裁剪。 3 
overflow-style 规定溢出元素的首选滚动方法。 3 
rotation 围绕由 rotation-point 属性定义的点对元素进行旋转。 3 
rotation-point 定义距离上左边框边缘的偏移点。

---

超链接属性

属性 描述 CSS 
target 简写属性，设置target-name、target-new以及target-position属性。 3 
target-name 规定在何处打开链接（链接的目标）。 3 
target-new 规定目标链接在新窗口还是在已有窗口的新标签页中打开。 3 
target-position 规定在何处放置新的目标链接。

CSS 外边距属性（Margin）

属性 描述 CSS 
margin 在一个声明中设置所有外边距属性。 1 
margin-bottom 设置元素的下外边距。 1 
margin-left 设置元素的左外边距。 1 
margin-right 设置元素的右外边距。 1 
margin-top 设置元素的上外边距。

CSS 尺寸属性（Dimension）

属性 描述 CSS 
height 设置元素高度。 1 
max-height 设置元素的最大高度。 2 
max-width 设置元素的最大宽度。 2 
min-height 设置元素的最小高度。 2 
min-width 设置元素的最小宽度。 2 
width 设置元素的宽度。

Marquee 属性

属性 描述 CSS 
marquee-direction 设置移动内容的方向。 3 
marquee-play-count 设置内容移动多少次。 3 
marquee-speed 设置内容滚动得多快。 3 
marquee-style 设置移动内容的样式。

CSS 内边距属性（Padding）

属性 描述 CSS 
padding 在一个声明中设置所有内边距属性。 1 
padding-bottom 设置元素的下内边距。 1 
padding-left 设置元素的左内边距。 1 
padding-right 设置元素的右内边距。 1 
padding-top 设置元素的上内边距。

CSS 定位属性（Positioning）

属性 描述 CSS 
bottom 设置定位元素下外边距边界与其包含块下边界之间的偏移。 2 
clear 规定元素的哪一侧不允许其他浮动元素。 1 
clip 剪裁绝对定位元素。 2 
cursor 规定要显示的光标的类型（形状）。 2 
display 规定元素应该生成的框的类型。 1 
float 规定框是否应该浮动。 1 
left 设置定位元素左外边距边界与其包含块左边界之间的偏移。 2 
overflow 规定当内容溢出元素框时发生的事情。 2 
position 规定元素的定位类型。 2 
right 设置定位元素右外边距边界与其包含块右边界之间的偏移。 2 
top 设置定位元素的上外边距边界与其包含块上边界之间的偏移。 2 
vertical-align 设置元素的垂直对齐方式。 1 
visibility 规定元素是否可见。 2 
z-index 设置元素的堆叠顺序。

CSS 边框属性（Border 和 Outline）

属性 描述 CSS 
border 在一个声明中设置所有的边框属性。 1 
border-bottom 在一个声明中设置所有的下边框属性。 1 
border-bottom-color 设置下边框的颜色。 2 
border-bottom-style 设置下边框的样式。 2 
border-bottom-width 设置下边框的宽度。 1 
border-color 设置四条边框的颜色。 1 
border-left 在一个声明中设置所有的左边框属性。 1 
border-left-color 设置左边框的颜色。 2 
border-left-style 设置左边框的样式。 2 
border-left-width 设置左边框的宽度。 1 
border-right 在一个声明中设置所有的右边框属性。 1 
border-right-color 设置右边框的颜色。 2 
border-right-style 设置右边框的样式。 2 
border-right-width 设置右边框的宽度。 1 
border-style 设置四条边框的样式。 1 
border-top 在一个声明中设置所有的上边框属性。 1 
border-top-color 设置上边框的颜色。 2 
border-top-style 设置上边框的样式。 2 
border-top-width 设置上边框的宽度。 1 
border-width 设置四条边框的宽度。 1 
outline 在一个声明中设置所有的轮廓属性。 2 
outline-color 设置轮廓的颜色。 2 
outline-style 设置轮廓的样式。 2 
outline-width 设置轮廓的宽度。 2 
border-bottom-left-radius 定义边框左下角的形状。 3 
border-bottom-right-radius 定义边框右下角的形状。 3 
border-image 简写属性，设置所有 border-image-* 属性。 3 
border-image-outset 规定边框图像区域超出边框的量。 3 
border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。 3 
border-image-slice 规定图像边框的向内偏移。 3 
border-image-source 规定用作边框的图片。 3 
border-image-width 规定图片边框的宽度。 3 
border-radius 简写属性，设置所有四个 border-*-radius 属性。 3 
border-top-left-radius 定义边框左上角的形状。 3 
border-top-right-radius 定义边框右下角的形状。 3 
box-decoration-break 3 
box-shadow 向方框添加一个或多个阴影。

---

列表属性： (List-style)

类型list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha; 
位置list-style-position: outside;(外) inside; 
图像list-style-image: url(..); 
定位属性： (Position) 
Position: absolute; relative; static; 
visibility: inherit; visible; hidden; 
overflow: visible; hidden; scroll; auto; 
clip: rect(12px,auto,12px,auto) (裁切)

---

CSS滤镜属性

 

Filter：在样式中加上滤镜特效。由于此属性内容比较多，我们将到下一章单独对滤镜介绍。 

1.Alpha：设置透明度 

Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)  

Opacity：透明度级别，范围是0-100，0代表完全透明，100代表完全不透明。FinishOpacity：设置渐变的透明效果时，用来指定结束时的透明度，范围也是0 到 100。Style：设置渐变透明的样式，值为0代表统一形状、1代表线形、2代表放射状、3代表长方形。StartX和StartY：代表渐变透明效果的开始X和Y坐标。 FinishX和FinishY：代表渐变透明效果结束X和Y 的坐标。  

2.BlendTrans：图像之间的淡入和淡出的效果  

BlendTrans(Duration=?) Duration：淡入或淡出的时间。注意：这个滤镜必须配合JS建立图片序列，才能做出图片间效果。 

3.Blru：建立模糊效果  

Blur(Add=?, Direction=?, Strength=?) Add：是否单方向模糊，此参数是一个布尔值，true（非0）或false（0）。 Direction：设置模糊的方向，其中0度代表垂直向上，然后每45度为一个单位。 Strength：代表模糊的象素值。  

4.Chroma：把指定的颜色设置为透明 

Chroma(Color=?) Color：是指要设置为透明的颜色。 

5.DropShadow：建立阴影效果  

DropShadow(Color=?, OffX=?, OffY=?, Positive=?) Color：指定阴影的颜色。OffX：指定阴影相对于元素在水平方向偏移量，整数。 OffY：指定阴影相对于元素在垂直方向偏移量，整数。 Positive：是一个布尔值，值为true（非0）时，表示为建立外阴影；为false(0)，表示为建立内阴影。  

6.FlipH：将元素水平反转  

7.FlipV：将元素垂直反转  

8.Glow：建立外发光效效果  

Glow(Color=?, Strength=?)  

Color：是指定发光的颜色。  

Strength：光的强度，可以是1到255之间的任何整数，数字越大，发光的范围就越大。 

9.Gray：去掉图像的色彩，显示为黑白图象  

10.　　Invert：反转图象的颜色，产生类似底片的效果  

11.　　Light：放置光源的效果，可以用来模拟光源在物体上的投影效果 注意：此效果需要用JS设置光的位置和强度。 

12.　　Mask：建立透明遮罩  

Mask(Color=?) Color：设置底色，让对象遮住底色的部分透明。 

13.　　RevealTrans：建立切换效果 

RevealTrans(Duration=?, Transition=?)  

Duration：是切换时间，以秒为单位。  

Transtition：是切换方式，可设置为从0到23。 

注意：如果做页面间的切换效果，可以在区加上一行代码：。如果用在页面里的元素必须配合JS使用。 

14.　　Shadow：建立另一种阴影效果 Shadow(Color=?, Direction=?) Color：是指阴影的颜色。  

Direction：是设置投影的方向，0度代表垂直向上，然后每45度为一个单位。  

15.　　Wave：波纹效果  

Wave(Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?) Add：表示是否显示原对象，0表示不显示，非0表示要显示原对象。 Freq：设置波动的个数。LightStrength：设置波浪效果的光照强度，从0到100。0表示最弱，100表示最强。 Phase：波浪的起始相角。从0到100的百分数值。（例如：25相当于90度，而50相当于180度。） Strength：设置波浪摇摆的幅度。  

16.　　Xray：显现图片的轮廓，X光片效果  

注意：在使用CSS滤镜时，必须使用在有区域的元素，比如表格，图片等。而文本，段落这样没有区域的元素不能使用CSS滤镜，对这样的元素我们可以设置元素的Height和Width样式或坐标来实现。"

---

css属性代码大全

一 CSS文字属性：

color : #999999; /文字颜色/ 
font-family : 宋体,sans-serif; /文字字体/ 
font-size : 9pt; /文字大小/ 
font-style:itelic; /文字斜体/ 
font-variant:small-caps; /小字体/ 
letter-spacing : 1pt; /字间距离/ 
line-height : 200%; /设置行高/ 
font-weight:bold; /文字粗体/ 
vertical-align:sub; /下标字/ 
vertical-align:super; /上标字/ 
text-decoration:line-through; /加删除线/ 
text-decoration: overline; /加顶线/ 
text-decoration:underline; /加下划线/ 
text-decoration:none; /删除链接下划线/ 
text-transform : capitalize; /首字大写/ 
text-transform : uppercase; /英文大写/ 
text-transform : lowercase; /英文小写/ 
text-align:right; /文字右对齐/ 
text-align:left; /文字左对齐/ 
text-align:center; /文字居中对齐/ 
text-align:justify; /文字分散对齐/ 
vertical-align属性 
vertical-align:top; /垂直向上对齐/ 
vertical-align:bottom; /垂直向下对齐/ 
vertical-align:middle; /垂直居中对齐/ 
vertical-align:text-top; /文字垂直向上对齐/ 
vertical-align:text-bottom; /文字垂直向下对齐/

---

二、CSS边框空白

padding-top:10px; /上边框留空白/ 
padding-right:10px; /右边框留空白/ 
padding-bottom:10px; /下边框留空白/ 
padding-left:10px; /*左边框留空白

---

三、CSS符号属性：

list-style-type:none; /不编号/ 
list-style-type:decimal; /阿拉伯数字/ 
list-style-type:lower-roman; /小写罗马数字/ 
list-style-type:upper-roman; /大写罗马数字/ 
list-style-type:lower-alpha; /小写英文字母/ 
list-style-type:upper-alpha; /大写英文字母/ 
list-style-type:disc; /实心圆形符号/ 
list-style-type:circle; /空心圆形符号/ 
list-style-type:square; /实心方形符号/ 
list-style-image:url(/dot.gif); /图片式符号/ 
list-style-position: outside; /凸排/ 
list-style-position:inside; /缩进/

---

四、CSS背景样式：

background-color:#F5E2EC; /背景颜色/ 
background:transparent; /透视背景/ 
background-image : url(/image/bg.gif); /背景图片/ 
background-attachment : fixed; /浮水印固定背景/ 
background-repeat : repeat; /重复排列-网页默认/ 
background-repeat : no-repeat; /不重复排列/ 
background-repeat : repeat-x; /在x轴重复排列/ 
background-repeat : repeat-y; /在y轴重复排列/ 
指定背景位置 
background-position : 90% 90%; /背景图片x与y轴的位置/ 
background-position : top; /向上对齐/ 
background-position : buttom; /向下对齐/ 
background-position : left; /向左对齐/ 
background-position : right; /向右对齐/ 
background-position : center; /居中对齐/

---

五、CSS连接属性：

a /所有超链接/ 
a:link /超链接文字格式/ 
a:visited /浏览过的链接文字格式/ 
a:active /按下链接的格式/ 
a:hover /鼠标转到链接/ 
鼠标光标样式： 
链接手指 CURSOR: hand 
十字体 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 
光标图案(IE6) p {cursor:url(“光标文件名.cur”),text;}

---

六、CSS框线一览表：

border-top : 1px solid #6699cc; /上框线/ 
border-bottom : 1px solid #6699cc; /下框线/ 
border-left : 1px solid #6699cc; /左框线/ 
border-right : 1px solid #6699cc; /右框线/ 
以上是建议书写方式,但也可以使用常规的方式 如下: 
border-top-color : #369 /设置上框线top颜色/ 
border-top-width :1px /设置上框线top宽度/ 
border-top-style : solid/设置上框线top样式/ 
其他框线样式 
solid /实线框/ 
dotted /虚线框/ 
double /双线框/ 
groove /立体内凸框/ 
ridge /立体浮雕框/ 
inset /凹框/ 
outset /凸框/

---

七、CSS表单运用：

文字方块 
按钮 
复选框 
选择钮 
多行文字方块 
下拉式菜单 选项1选项2 
八、CSS边界样式： 
margin-top:10px; /上边界/ 
margin-right:10px; /右边界值/ 
margin-bottom:10px; /下边界值/ 
margin-left:10px; /左边界值/