CSS属性值
1:CSS-dispaly可能的值:
值 | 描述 |
---|---|
none | 此元素不会被显示。 |
block | 此元素将显示为块级元素,此元素前后会带有换行符。 |
inline | 默认。此元素会被显示为内联元素,元素前后没有换行符。 |
inline-block | 行内块元素。(CSS2.1 新增的值) |
list-item | 此元素会作为列表显示。 |
run-in | 此元素会根据上下文作为块级元素或内联元素显示。 |
compact | CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 |
marker | CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 |
table | 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。 |
inline-table | 此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。 |
table-row-group | 此元素会作为一个或多个行的分组来显示(类似 <tbody>)。 |
table-header-group | 此元素会作为一个或多个行的分组来显示(类似 <thead>)。 |
table-footer-group | 此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。 |
table-row | 此元素会作为一个表格行显示(类似 <tr>)。 |
table-column-group | 此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。 |
table-column | 此元素会作为一个单元格列显示(类似 <col>) |
table-cell | 此元素会作为一个表格单元格显示(类似 <td> 和 <th>) |
table-caption | 此元素会作为一个表格标题显示(类似 <caption>) |
inherit | 规定应该从父元素继承 display 属性的值。 |
display:none与visible:false的区别:设置visible:false在客户端的DOM结构中就没有该控件
- border-collapse 属性设置表格的边框是否被合并为一个单一的边框,还是象在标准的 HTML 中那样分开显示,默认是这样显示的:
border-collapse:separate; | border-collapse:collapse |
2.关于文本对齐:text-align:justify;
text-justify版本:IE5+专有属性 继承性:无
语法:
text-justify : auto | distribute | distribute-all-lines | distribute-center-last | inter-cluster | inter-ideograph | inter-word | kashida | newspaper
取值:
auto | : | 默认值。允许浏览器代理用户确定使用的两端对齐法则 |
distribute | : | 处理空格很像 newspaper ,适用于东亚文档。尤其是泰文 |
distribute-all-lines | : | 两端对齐行的方式与 distribute 相同,也同样不包含两段对齐段落的最后一行。适用于表意字文档 |
distribute-center-last | : | 未实现 |
inter-cluster | : | 调整文本无词间空格的行。这种模式的调整是用于优化亚洲语言文档的 |
inter-ideograph | : | 为表意字文本提供完全两端对齐。他增加或减少表意字和词间的空格 |
inter-word | : | 通过增加字之间的空格对齐文本。该行为是对齐所有文本行最快的方法。它的两端对齐行为对段落的最后一行无效 |
kashida | : | 通过拉长选定点的字符调整文本。这种调整模式是特别为阿拉伯脚本语言提供的。需要IE5.5+支持 |
newspaper | : | 通过增加或减少字或字母之间的空格对齐文本。是用于拉丁文字母表两端对齐的最精确格式 |
说明:
设置或检索对象内调整文本使用的对齐方式。
因为这个属性影响文本布局,所以 text-align 属性必须被设置为 justify 。
此属性只作用于块对象。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 textJustify 。
因为这个属性影响文本布局,所以 text-align 属性必须被设置为 justify 。
此属性只作用于块对象。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 textJustify 。
3:
background 简写属性在一个声明中设置所有的背景属性。
可以按顺序设置如下属性:
- background-color:
color_name 规定颜色值为颜色名称的背景颜色(比如 red)。 hex_number 规定颜色值为十六进制值的背景颜色(比如 #ff0000)。 rgb_number 规定颜色值为 rgb 代码的背景颜色(比如 rgb(255,0,0))。 transparent 默认。背景颜色为透明。 - background-image
- background-repeat:
repeat 默认。背景图像将在垂直方向和水平方向重复。 repeat-x 背景图像将在水平方向重复。 repeat-y 背景图像将在垂直方向重复。 no-repeat 背景图像将仅显示一次 - background-attachment(规定背景图像是否固定或者随着页面的其余部分滚动,有两个值scroll和fixed):
scroll 默认值。背景图像会随着页面其余部分的滚动而移动。 fixed 当页面的其余部分滚动时,背景图像不会移动。 - background-position
常用的是在没有list-tyle的li内部的a标签里实现list-type的风格:
#hr2 ul li a{
color:#777575;
color:#777575;
padding-left:10px;
background: transparent url(/EQ_ART2/EQ_images/listtypeimage.jpg) no-repeat fixed left;
}
4:ie6下图片不透明问题,这是一个古老的问题了:
4:ie6下图片不透明问题,这是一个古老的问题了:
首先来看一段脚本,
function chekc() {
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (document.body.filters)) {
for (var j = 0; j < document.images.length; j++) {
var img = document.images[j]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length - 3, imgName.length) == "PNG") {
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
j = j - 1
}
}
}
}
在DOm加载完成以后,修改每个png图片的outerHTML属性;
5:outerHTML除了包含innerHTML的全部内容外, 还包含对象标签本身;
overflow 版本:CSS2 兼容性:IE4+ NS6+ 继承性:无
语法:
overflow : visible | auto | hidden | scroll
参数:
visible : 不剪切内容也不添加滚动条。假如显式声明此默认值,对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效
auto : 此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden : 不显示超过对象尺寸的内容
scroll : 总是显示滚动条
说明:
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
设置textarea对象为hidden值将隐藏其滚动条。
对于table来说,假如table-layout属性设置为fixed,则td对象支持带 有默认值为hidden的overflow属性。如果设为hidden,scroll或者auto,那么超出td尺寸的内容将被剪切。如果设为 visible,将导致额外的文本溢出到右边或左边(视direction属性设置而定)的单元格。
自IE5开始,此属性在MAC平台上可用