css属性编(二)

文本属性

letter-spacing 功能：控制文本元素字母间的间距，所设置的距离适用于整个元素。 数值： normal - 正常间距，将字符间的间距复位为所有字体和字号的正常间距。 长度 - 设置字间距长度，正值表示加进父元素中继承的正常长度，负值则減去正常长度。在数字后指定度量单位如下：mm, cm, in, pt(点数), px(象素), pc(pica), ex(小写字母x的高度), em(大写字母M的宽度)。 line-height 功能：设置元素中文本的行间距。 数值： normal - 正常高度，通常为字体尺寸的 1-1.2倍，这是缺省设置。 数字 - 设置元素中毎行文本的距离为字体尺寸乘以这个数字。例如字体尺寸为10点，设置line-height为2，则间距20点。 长度 - 用标准度量单位设置间距，有些是绝对的，有些是相对的，详见letter-spacing中的説明。 百分比 - 也字体尺寸的百分比设置间距。 text-align 功能：在元素框中水平对齐文本。 数值： left - 左对齐 right - 右对齐 center - 居中 justify - 均匀分布， 生成等长的行 text-decoration 功能：文本修饰，用于控制文本元素所用的效果，特别适用于引人注意的说明，警告等文本效果。 数值： none - 无文本修饰，缺省设置。 underline - 下划线。 overline - 上划线。 line-through - 删除线。 blink - 闪烁。 同一语句中可以组合多个关键字。 text-indent 功能：文本缩排，用于段落的第一行缩排上。 数值： 长度 - 设置首行缩排的尺寸为指定度量单位，有些单位是相对的，有些则是绝对的，祥见 letter-spacing 属性的说明部分。 百分比 - 以行长的百分比设置首行缩排量。 text-transform 功能：设置一个或几个元素的大写标准。 数值： none - 不改变文本的大写小写。 capitalize - 元素中毎个单词的第一个字母用大写。 uppercase - 将所有文本设置为大写。 lowercase - 将所有文本设置为小写。 vertical-align 功能：垂直对齐。 数值： baseline - 对准两个元素的小写字母基准线。 sub - 下标。 super - 上标。 top - 顶部对齐。 text-top - 文本顶对齐。 middle - 中线对齐。 bottom - 底线对齐。 text-bottom - 字母底线对齐。 百分比 - 将线上元素基准线在父元素基准线基础上升降一定的百分比，和元素的 line-height 属性组合使用。 word-spacing 功能：控制文本中元素单词间的间距。设置的间距适用于整个元素，不能在某个单词间插入更大或更小的间距。 数值： normal - 正常间距。 长度 - 如果长度为正，则加进从父元素继承的正常长度，如果是负值，则减去。

 

定位属性

定位属性将是网虫们打开幸福之门的钥匙： 绝对定位 H4 { position: absolute; left: 100px; top: 43px } 这项CSS规则让浏览器将<H4>的起始位置精确地定在距离浏览器左边100象素，距离其顶部43象素的位置，请观看代码的执行效果。 注意这里唯一设置了的是左边和顶部，也就说，文字将从左到右，从上到下载入浏览窗口。 左边和顶部属性很直观，左边（left)设定要素距浏览器窗口左边的距离，顶部(top)设定距离浏览器窗口顶部的距离。 设定这些距离时，你可以使用所学过的各种度单位或比例值。使用比例值时，比例值的是相对于母体要素的尺寸。 相对定位 绝对定位使你能精确地定位要素在页面的独立位置，而不考虑页面其它要素的定位设置。相对定位指你所定位的要素的位置相对于在文件中所分配的位置。例： I { position: relative; left: 40px; top: 10px } 请点击查看代码的执行效果 相对定位的关键在于定位了的要素的位置是相对于它通常应在的位置进行定位。如果你停止使用相对定位，则文字的显示位置将恢复正常。范例。 使用相对定位时要小心，否则容易将页面弄得非常乱。 除了相对定位和绝对定位，你还可以使用static（静止）参数值。它的使用方法同普通HTML中的定位方法，不能附加特殊的定位设置。

 

分类属性

显示 语法: display: <值> 允许值: block | inline | list-item | none 初始值: block 适用于: 所有对象 向下兼容: 否 显示属性允许使用四个值中的一个来定义一个元素: block (在元素的前和后都会有换行) inline (在元素的前和后都不会有换行) list-item (与block相同, 但增加了目录项标记) none (没有显示) 每个元素都典型地由浏览器基于HTML规格建议的展示形式给出一个缺省的显示值。 显示属性可能并不安全，因为它使用另外的不合适的格式显示元素。使用值none将关闭指定元素及其子元素的显示！ 空白 语法: white-space: <值> 允许值: normal | pre | nowrap 初始值: normal 适用于: 块级元素 向下兼容: 是 空白属性将决定如何处理元素内的空格. 该属性的值取以下三个中的一个: normal (将多个空格折叠成一个) pre (不折叠空格) nowrap (不允许换行，除非遇到<BR>标记) 目录样式类型 语法: list-style-type: <值> 允许值: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none 初始值: disc 适用于: 带有显示值的目录项元素 向下兼容: 是 目录样式项属性指定目录项标记的类型，当目录样式图象值为none或当图象载入选项被关闭时使用。 例如: LI.square { list-style-type: square } UL.plain { list-style-type: none } OL { list-style-type: upper-alpha } /* A B C D E etc. */ OL OL { list-style-type: decimal } /* 1 2 3 4 5 etc. */ OL OL OL { list-style-type: lower-roman } /* i ii iii iv v etc. */ 目录样式图象 语法: list-style-image: <值> 允许值: <url> | none 初始值: none 适用于: 带有显示值的目录项元素 向下兼容: 是 当图象载入选项打开时，目录样式图象属性在指定目录项标记使用哪个图象代替由目录样式类型属性指定的标记。 例如: UL.check { list-style-image: url(/LI-markers/checkmark.gif) } UL LI.x { list-style-image: url(x.png) } 目录样式位置 语法: list-style-position: <值> 允许值: inside | outside 初始值: outside 适用于: 带有显示值的目录项元素 向下兼容: 是 目录样式位置属性可以取值inside(内部) or outside(外部)，其中outside是缺省值。整个属性决定关于目录项的标记应放在那里。如果使用inside值，换行会移到标记下，而不是缩进。应用的例子如下: Outside rendering: * List item 1 second line of list item Inside rendering: * List item 1 second line of list item 目录样式 语法: list-style: <值> 允许值: <目录样式类型> || <目录样式位置> || <url> 初始值: 未定义 适用于: 带有显示值的目录项元素 向下兼容: 是 目录样式属性是目录样式类型、目录样式位置，和目录样式图象属性的略写。 例如: LI.square { list-style: square inside } UL.plain { list-style: none } UL.check { list-style: url(/LI-markers/checkmark.gif) circle } OL { list-style: upper-alpha } OL OL { list-style: lower-roman inside }

布局属性

在以前的HTML里，元素的位置只能靠元素的依次排列觉得，而在CSS里你可以更精确的定位元素。Netscape曾提出过Layer标记，它对于精确布局很有好处，但是并没有被W3C承认，W3C在CSS提出了类似于Layer标记的功能。   position属性： position属性用来决定元素的位置类型，详见属性： 属性名称: 'position' 属性值: absolute | relative | static 初始值: static 适合对象: 所有元素 是否继承: no 百分比备注: 被禁止 其属性值分别代表： absolute：屏幕上的绝对位置。 relative：屏幕上的相对位置。 static：固有位置。 direction属性： direction属性决定BOX的排列方向，详见属性： 属性名称: 'direction' 属性值: ltr| rtl 初始值: ltr 适合对象: 所有元素 是否继承: yes 百分比备注: 被禁止 float和clear属性： 在HTML中图片可以选择飘浮的位置，现在BOX对象通过CSS对于也可以选择飘浮的位置。改变BOX的float属性，BOX将飘浮在其他元素的左或右方： 属性名称: 'float' 属性值: left| right|none 初始值: none 适合对象: 所有元素 是否继承: no 百分比备注: 被禁止 例如： <STYLE type="text/css"> IMG { float: left } BODY, P, IMG { margin: 2em } </STYLE> <BODY> <P> <IMG src=img.gif> Some sample text that has no other... </BODY> 相反的，使用clear属性将禁止元素在BOX的左方或右方飘浮： 属性名称: 'clear' 属性值: left| right|both|none 初始值: none 适合对象: 所有元素 是否继承: no 百分比备注: 被禁止 绝对位置属性： 绝对位置属性有四个属性：top、right、bottom和left，属性值为长度单位或百分数： 属性名称: 'top'、'right'、'bottom'、'left' 属性值: <length>|<percentage>|auto 初始值: none 适合对象: 所有元素 是否继承: no 百分比备注: 被禁止 利用以上属性，用户就可以精确定义元素的位置，如： <P style="position: relative; margin-right: 10px; left: 10px;"> I used two red hyphens to serve as a change bar. They will "float" to the left of the line containing THIS <SPAN style="position: absolute; top: auto; left: 0px; color: red;">--</SPAN> word.</P> z-index属性： 在CSS中允许元素的重叠显示，这样就有一个显示顺序的问题，z-index属性描述了元素的前后位置，如果把电脑屏幕看作X-Y平面的话，那么Z轴就是垂直于屏幕的，z-index使用整数表示元素的前后位置，数值越大，就会显示在相对靠前的位置，并且CSS同意在z-index中使用负数。 属性名称: 'z-index' 属性值: auto|<integer> 初始值: auto 适合对象: 使用position属性的元素 是否继承: no 百分比备注: 被禁止 width属性： 规定BOX的width属性，可以使BOX的宽度不依靠它所包含的内容的多少： 属性名称: 'width' 属性值: <length> | <percentage> | auto 初始值: auto 适合对象: 块元素 是否继承: no 百分比备注:根据父元素的width而定 在CSS中还提供了min-width和max-width属性，使得BOX的宽度在最小宽度和最大宽度之间。 属性名称: 'min-width' 属性值: <length> | <percentage> 初始值: 0 适合对象: all 是否继承: no 百分比备注:根据父元素的width而定 属性名称: 'max-width' 属性值: <length> | <percentage> 初始值: 100% 适合对象: all 是否继承: no 百分比备注:根据父元素的width而定 height属性： 相同的BOX还有height属性来控制本身的高度： 属性名称: 'height' 属性值: <length> | <percentage> | auto 初始值: auto 适合对象: 块元素 是否继承: no 百分比备注:根据父元素的height而定 在CSS中还提供了min-height和max-height属性，使得BOX的高度在最小高度和最大高度之间。 属性名称: 'min-height' 属性值: <length> | <percentage> 初始值: 0 适合对象: all 是否继承: no 百分比备注:根据父元素的height而定 属性名称: 'max-height' 属性值: <length> | <percentage> 初始值: 100% 适合对象: all 是否继承: no 百分比备注:根据父元素的height而定 overflow属性： 在规定元素的宽度和高度时，如果元素的面积不足以显示全部内容的话就要用到overflow属性： 属性名称: 'overflow' 属性值: visible | hidden | scroll | auto 初始值: visible 适合对象: 元素的position属性 是否继承: no 百分比备注: 被禁止 属性值含义如下： visible：扩大面积以显示所有内容。 hidden：隐藏超出范围的内容。 scroll：在元素的右边显示一个滚动条。 auto：当内容超出元素面积时，显示滚动条。 clip属性： CSS还提供了一种clip属性，可以把元素区域剪切成各种形状，但目前提供的只有方形一种： 属性名称: 'clip' 属性值: <shape> | auto 初始值: auto 适合元素: 元素的position属性被设为absolute 是否继承: no 百分比备注: 被禁止 <shape>值为rect(top right bottom left)。 line-height和vertical-align属性： line-height属性可以规定元素内部的行间距，使用长度单位或百分数： 属性名称: 'line-height' 属性值: normal | <number> | <length> | <percentage> 初始值: normal 适合对象: 所有元素 是否继承: yes 百分比备注:根据元素的字体大小而定 例如下面的例子，虽然表达方式不同，但结果一样： DIV { line-height: 1.2; font-size: 10pt } DIV { line-height: 1.2em; font-size: 10pt } DIV { line-height: 120%; font-size: 10pt } vertical-align属性决定元素在垂直位置的显示： 属性名称: 'vertical-align' 属性值: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> 初始值: baseline 适合对象: inline elements 适合继承: no 百分比备注: 根据元素的line-height属性而定 属性值含义如下： baseline：与元素的基线对齐。 middle：与元素中部对齐。 sub：字下沉。 super：字上升。 text-top：文本顶部对齐。 text-bottom：文本底部对齐。 Top：和本行位置最高元素对齐。 Bottom：和本行位置最低元素对齐。 Visibility属性: 该属性用于控制元素的显示或隐藏： 属性名称: 'visibility' 属性值: inherit | visible | hidden 初始值: inherit 适合对象: 所有元素 是否继承: 如果该值为inherit，则继承父元素属性 百分比备注: 被禁止

鼠标属性

习惯于使用 Windows 的用户对各种各样的鼠标样式一定不会陌生，当鼠标移动到不同的地方时，当鼠标需要执行不同的功能时，当系统处于不同的状态时，都会使鼠标形状发生改变。 　　虽然在网络上有各种各样的鼠标可供下载，图形五花八门，但是就 Windows 的默认系统来说，这些图形是固定不变的。改变鼠标的属性，简单说就是当鼠标移动到不同的元 素对象上面时，让鼠标以不同的形状、图案显示。这种样式是通过改变“cursor”属性来完成的。下面的表格把鼠标的完部属性都列出来，可供参考： 关键字的解释和图例 关键字　　解释 auto　　　鼠标按照默认的状态根据页面上的元素自行改变样式.　 crosshair 精确定位“十”字。 default 　默认指针 hand　　　手形 move　　　移动 e-resize　箭头朝右方 ne-resize 箭头朝右上方 nw-resize 箭头朝左上方 n-resize　箭头朝上方 se-resize 箭头朝右下方 sw-resize 箭头朝左下方 s-resize　箭头朝下方 w-resize　箭头朝左方 text　　　文本“I”形 wait　　　等待 help　　　帮助 　　在动态的页面里恰当地种用这些鼠标有时可以起到意想不到的效果。例如，有一个链接的目标为帮助文件，于是可以使用帮助形式的鼠标。还有在一些需要使用鼠标事件的页面中，如果想告诉用户哪里可以点击鼠标，那么只要在页面上特定的位置让鼠标变成手形，用户就会辨认出页面上的活动区域。