文本相关属性
取值 | 描述 |
text-decoration : none | 删除链接下划线 |
text-decoration : underline | 加下划线 |
text-decoration : overline | 加顶线 |
text-decoration : line-through | 加删除线 |
text-decoration : blink | 文本闪烁 |
text-decoration : inherit | 从父元素继承 text-decoration 属性的值 |
取值 | 描述 |
text-indent : 30px | 段落首行缩进 |
取值 | 描述 |
text-transform : capitalize | 首字大写 |
text-transform : uppercase | 英文大写 |
text-transform : lowercase | 英文小写 |
取值 | 描述 |
text-align : right | 文字右对齐 |
text-align : right |
文字右对齐 |
text-align : left |
文字左对齐 |
text-align : center |
文字居中对齐 |
text-align : justify | 文字分散对齐 |
取值 | 描述 |
vertical-align : top |
垂直向上对齐 |
vertical-align : bottom |
垂直向下对齐 |
vertical-align : middle |
垂直居中对齐 |
vertical-align : text-top |
文字垂直向上对齐 |
vertical-align : text-bottom | 文字垂直向下对齐 |
字体相关属性
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; /*上标字*/
背景相关属性
background-color:#F5E2EC;/*背景颜色*/
background:transparent; /*透视背景*/
background-image : url(/image/bg.gif); /*背景图片*/
background-attachment : fixed; /*背景是否随页面内容一起滚动,scroll 滚动,fixed 固定*/
background-repeat : repeat; /*x/y 双向平铺-网页默认*/
background-repeat : no-repeat; /*不平铺*/
background-repeat : repeat-x; /*横向平铺*/
background-repeat : repeat-y; /*纵向平铺*/
background-position : 90% 90%; /*背景图片x与y轴的位置*/
background-position : top; /*向上对齐*/
background-position : buttom; /*向下对齐*/
background-position : left; /*向左对齐*/
background-position : right; /*向右对齐*/
background-position : center; /*居中对齐*/
表格相关属性
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 /*凸框*/margin-top:10px; /*上外边距*/
margin-right:10px; /*右外边距*/
margin-bottom:10px; /*下外边距*/
margin-left:10px; /*左外边距*/padding-top:10px; /*上内边距*/
padding-right:10px; /*右内边距*/
padding-bottom:10px; /*下内边距*/
padding-left:10px; /*左内边距*/
列表相关属性
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; /*列表符号位置,缩进*/
光标样式
取值 | 描述 |
cursor:url |
需使用的自定义光标的 URL。 注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。 |
cursor:auto | 默认光标,文本时显示 ,超链接时显示 |
cursor:crosshair | 光标呈现为十字线 |
cursor:pointer | 光标呈现为指示链接的指针(一只手) |
cursor:move | 此光标指示某对象可被移动 |
cursor:e-resize | 此光标指示矩形框的边缘可被向右(东)移动。 |
cursor:ne-resize | 此光标指示矩形框的边缘可被向上及向右移动(北/东) |
cursor:nw-resize | 此光标指示矩形框的边缘可被向上及向左移动(北/西) |
cursor:n-resize | 此光标指示矩形框的边缘可被向上(北)移动。 |
cursor:se-resize | 此光标指示矩形框的边缘可被向下及向右移动(南/东)。 |
cursor:sw-resize | 此光标指示矩形框的边缘可被向下及向左移动(南/西)。 |
cursor:s-resize | 此光标指示矩形框的边缘可被向下移动(南)。 |
cursor:w-resize | 此光标指示矩形框的边缘可被向左移动(西)。 |
cursor:text | 此光标指示文本 |
cursor:wait | 此光标指示程序正忙(通常是一只表或沙漏) |
cursor:help | 此光标指示可用的帮助(通常是一个问号或一个气球) |
display 属性
取值 | 描述 |
display:none | 此元素不会被显示。 |
display:block | 此元素将显示为块级元素,此元素前后会带有换行符。 |
display:inline | 默认。此元素会被显示为内联元素,元素前后没有换行符。 |
position 属性
取值 | 描述 |
position:absolute | 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
position:fixed | 生成绝对定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
position:relative | 生成相对定位的元素,相对于其正常位置进行定位。 因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
position:static | 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。 |
position:inherit | 规定应该从父元素继承 position 属性的值。 |
z-index:1 | 当使用相对定位或绝对定位时,元素经常会出现相互重叠,此时可以使用 z-index 属性设置元素之间的叠放顺序,数值越大,越往上层,离用户越近。 |
float 和 clear 属性
取值 | 属性 |
float:left | 元素向左浮动,假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。 |
float:right | 元素向右浮动。 |
float:none | 默认值。元素不浮动,并会显示在其在文本中出现的位置。 |
float:inherit | 规定应该从父元素继承 float 属性的值。 |
取值 | 属性 |
clear:left | 在左侧不允许浮动元素。 |
clear:right | 在右侧不允许浮动元素。 |
clear:both | 在左右两侧均不允许浮动元素。 |
clear:none | 默认值。允许浮动元素出现在两侧。 |
clear:inherit | 规定应该从父元素继承 clear 属性的值。 |