WEB标准学习路程之"CSS"：6.内容,内补丁,列表

 

内容属性属性

Content Properties 属性		CSS Version 版本		Compatibility 兼容性		Inherit From Parent 继承性		Description 简介
include-source		CSS2		NONE		无		这个属性插入另一个文档到当前文档，取代当前对象的内容
	quotes		CSS2		NONE		无		设置或检索对象内使用的嵌套标记
	content		CSS2		NONE		无		用来和:after及:before 伪元素一起使用，在对象前或后显示内容
	counter-increment		CSS2		NONE		无		设定当一个selector发生时计数器增加的值
	counter-reset		CSS2		NONE		无		将指定selector的计数器复位

include-source

语法： include-source : url (url)

 

参数： url : 　使用绝对或相对地址指定插入文档。假如该文档不存在，当前对象的内容将被显示

 

说明： 

这个属性插入另一个文档到当前文档，取代当前对象的内容。插入文档的样式属性从当前对象继承。

目前IE5.5尚不支持此属性。

对应的脚本特性为includeSource。请参阅我编写的其他书目。

 

示例： 

div { position: absolute; top: 100px; left: 300px; 200px; height: 200px; border: thin solid black; include-source: url("http://www.example.com/testpage.htm"); }

quotes

语法： quotes : none | string

 

参数： 

none : 　content属性的open-quote和close-quote值将不会生成任何嵌套标记

string : 　用引号括起的嵌套标记定义。两个为一组。第一个string定义前标记（例："<"），第二个string定义后标记（例：">"）。组之间用空格格开。嵌套标记的应用深度按定义顺序内推

 

说明： 

设置或检索对象内使用的嵌套标记。

目前IE5.5尚不支持此属性。

对应的脚本特性为quotes。请参阅我编写的其他书目。

 

示例：

blockquote[lang-=fr] { quotes: ""201C" ""201D" }

blockquote[lang-=en] { quotes: ""00AB" ""00BB" }

blockquote:before { content: open-quote }

blockquote:after { content: close-quote }

 

q { quotes: """ """ "'" "'"; } 

<q>This is an <q>emedded</q> quote.</q>

 

显示结果如下： 

"This is an 'embedded' quote."

content

语法： 

content : attr(alt) | counter(name) | counter(name, list-style-type) | counters(name, string) | counters(name, string, list-style-type) | no-close-quote | no-open-quote | close-quote | open-quote | string | url (url)

 

参数： 

attr(alt) : 　使用alt特性的文字

counter(name) : 　使用已命名的计数器

counter(name, list-style-type) : 　使用已命名的计数器并遵从指定的list-style-type属性

counters(name, string) : 　使用所有已命名的计数器

counters(name, string, list-style-type) : 　使用所有已命名的计数器并遵从指定的list-style-type属性

no-close-quote : 　并不插入quotes属性的后标记。但增加其嵌套级别

no-open-quote : 　并不插入quotes属性的前标记。但减少其嵌套级别

close-quote : 　插入quotes属性的后标记

open-quote : 　插入quotes属性的前标记

string : 　使用用引号括起的字符串

url : 　使用指定的绝对或相对地址

 

说明： 

用来和:after及:before 伪元素一起使用，在对象前或后显示内容。

目前IE5.5尚不支持此属性。

对应的脚本特性为content。请参阅我编写的其他书目。

 

示例： 

p:after { content: url("http:www.devguru.com"); text-decoration: none; }

p:before { content: url("beep.wav") }

counter-increment

语法： counter-increment : none | identifier number

 

参数： 

none : 　阻止计数器增加

identifier number : 　identifier定义一个将被增加selector，id，或者class。number定义增加的数值。可以为负值。默认值是1

 

说明： 

设定当一个selector发生时计数器增加的值。

目前IE5.5尚不支持此属性。

对应的脚本特性为counterIncrement。请参阅我编写的其他书目。

 

示例： 

p:before { content: "paragraph" counter(paragraph); counter-increment: paragraph; }

 

counter-reset

语法： counter-reset : none | identifier number

 

参数： 

none : 　阻止计数器复位

identifier number : 　指定一个或多个复位的计数器

 

说明： 

将指定selector的计数器复位。默认值是0。

目前IE5.5尚不支持此属性。

对应的脚本特性为counterReset。请参阅我编写的其他书目。

 

示例： 

h1:before { counter-increment: main-heading; counter-reset: sub-heading; content: "Section " counter(main-heading) ":" }

 

内补丁属性

Paddings Properties 属性		CSS Version 版本		Compatibility 兼容性		Inherit From Parent 继承性		Description 简介
padding		CSS1		IE4+ , NS4+		无		检索或设置对象四边的补丁边距
	padding-top		CSS1		IE4+ , NS4+		无		检索或设置对象顶边的补丁边距
	padding-right		CSS1		IE4+ , NS4+		无		检索或设置对象右边的补丁边距
	padding-bottom		CSS1		IE4+ , NS4+		无		检索或设置对象底边的补丁边距
	padding-left		CSS1		IE4+ , NS4+		无		检索或设置对象左边的补丁边距

 

padding

 语法： padding : length

 

参数： 

length : 　由浮点数字和单位标识符组成的长度值 | 或者百分数。百分数是基于父对象的宽度。请参阅长度单位

 

说明： 

检索或设置对象四边的补丁边距。

如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。

如果只提供一个，将用于全部的四条边。

如果提供两个，第一个用于上－下，第二个用于左－右。

如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。

内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。

不允许负值。

对应的脚本特性为padding。请参阅我编写的其他书目。

关于对象的尺寸与边框，内外补丁等样式表属性的关系，请参看图例以及height和width属性。

 

示例： 

body { padding: 36pt 24pt 36pt; }

body { padding: 11.5%; }

body { padding: 10% 10% 10% 10%; }

 

padding-top

语法： padding-top : length

 

参数： 

length : 　由浮点数字和单位标识符组成的长度值 | 或者百分数。百分数是基于父对象的宽度。请参阅长度单位

 

说明： 

检索或设置对象顶边的补丁边距。

内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。

不允许负值。

对应的脚本特性为paddingTop。请参阅我编写的其他书目。

 

示例： body { padding-top: 36pt; }

 

padding-right

语法： padding-right : length

 

参数： 

length : 　由浮点数字和单位标识符组成的长度值 | 或者百分数。百分数是基于父对象的宽度。请参阅长度单位

 

说明： 

检索或设置对象右边的补丁边距。

内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。

不允许负值。

对应的脚本特性为paddingRight。请参阅我编写的其他书目。

 

示例： body { padding-right: 36pt; }

padding-bottom

语法： padding-bottom : length

 

参数： 

length : 　由浮点数字和单位标识符组成的长度值 | 或者百分数。百分数是基于父对象的宽度。请参阅长度单位

 

说明： 

检索或设置对象底边的补丁边距。

内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。

不允许负值。

对应的脚本特性为paddingBottom。请参阅我编写的其他书目。

 

示例： body { padding-bottom: 36pt; }

padding-left

语法： padding-left : length

 

参数： 

length : 　由浮点数字和单位标识符组成的长度值 | 或者百分数。百分数是基于父对象的宽度。请参阅长度单位

 

说明： 

检索或设置对象左边的补丁边距。

内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。

不允许负值。

对应的脚本特性为paddingLeft。请参阅我编写的其他书目。

 

示例： body { padding-left: 36pt; }

列表项目属性

Lists Properties 属性		CSS Version 版本		Compatibility 兼容性		Inherit From Parent 继承性		Description 简介
list-style		CSS1		IE4+ , NS4+		有		复合属性。设置列表项目相关内容
	list-style-image		CSS1		IE4+ , NS6+		有		设置或检索作为对象的列表项标记的图像
	list-style-position		CSS1		IE4+ , NS6+		有		设置或检索作为对象的列表项标记如何根据文本排列
	list-style-type		CSS1/CSS2		IE4+ , NS4+		有		设置或检索对象的列表项所使用的预设标记
	marker-offset		CSS2		NONE		无		设置或检索标记容器和主容器之间水平补白。即两个容器靠近的一边的间距

list-style

语法： list-style : list-style-image || list-style-position || list-style-type

 

参数：该属性是复合属性。请参阅各参数对应的属性。

 

说明： 

设置列表项目相关内容。

对应的脚本特性为listStyle。请参阅我编写的其他书目。

 

示例： 

li { list-style: url("http://www.dhtmlet.com/devgurupix.gif"), inside, circle; }

ul { list-style: outside, upper-roman; }

ol { list-style: square; }

 

 list-style-image

语法： list-style-image : none | url (url)

 

参数： 

none : 　不指定图像

url : 　使用绝对或相对地址指定背景图像

 

说明： 

设置或检索作为对象的列表项标记的图像。

若list-style-image属性为none或指定图像不可用时，list-style-type属性将发生作用。

对应的脚本特性为listStyleImage。请参阅我编写的其他书目。

 

示例： ul.out { list-style-position: outside; list-style-image: url("images/ie.gif"); }

 

list-style-position

语法： list-style-position : outside | inside

 

参数： 

outside : 　列表项目标记放置在文本以外，且环绕文本不根据标记对齐

inside : 　列表项目标记放置在文本以内，且环绕文本根据标记对齐

 

说明： 

设置或检索作为对象的列表项标记如何根据文本排列。

仅作用于具有display值等于list-item的对象（如li对象）。

注意：ol对象和ul对象的type特性为其后的所有列表项目（如li对象）指明列表属性。请参阅我的其他著作。

对应的脚本特性为listStylePosition。请参阅我编写的其他书目。

 

示例： ul.in { display: list-item; list-style-position: inside; }

list-style-type

语法： 

list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin

 

参数： 

disc : 　CSS1　实心圆

circle : 　CSS1　空心圆

square : 　CSS1　实心方块

decimal : 　CSS1　阿拉伯数字

lower-roman : 　CSS1　小写罗马数字

upper-roman : 　CSS1　大写罗马数字

lower-alpha : 　CSS1　小写英文字母

upper-alpha : 　CSS1　大写英文字母

none : 　CSS1　不使用项目符号

armenian : 　CSS2　传统的亚美尼亚数字

cjk-ideographic : 　CSS2　浅白的表意数字

georgian : 　CSS2　传统的乔治数字

lower-greek : 　CSS2　基本的希腊小写字母

hebrew : 　CSS2　传统的希伯莱数字

hiragana : 　CSS2　日文平假名字符

hiragana-iroha : 　CSS2　日文平假名序号

katakana : 　CSS2　日文片假名字符

katakana-iroha : 　CSS2　日文片假名序号

lower-latin : 　CSS2　小写拉丁字母

upper-latin : 　CSS2　大写拉丁字母

 

说明： 

设置或检索对象的列表项所使用的预设标记。

若list-style-image属性为none或指定图像不可用时，list-style-type属性将发生作用。

仅作用于具有display值等于list-item的对象（如li对象）。

注意：ol对象和ul对象的type特性为其后的所有列表项目（如li对象）指明列表属性。请参阅我的其他著作。

IE5.5尚不支持所有CSS2的值。

对应的脚本特性为listStyleType。请参阅我编写的其他书目。

 

示例： li { list-style-type: square }

 

marker-offset

语法： marker-offset : auto | length

 

参数： 

auto : 　浏览器自动设置间距

length : 　由浮点数字和单位标识符组成的长度值。可为负值。请参阅长度单位

 

说明： 

设置或检索标记容器和主容器之间水平补白。即两个容器靠近的一边的间距。

目前IE5.5尚不支持此属性。

对应的脚本特性为markerOffset。请参阅我编写的其他书目。

 

示例： li:before { display: marker; marker-offset: 5px; }