CSS2样式表(属性·文本)

原创 2007年09月26日 09:11:00
1、text-indent
 

语法:
text-indent : length
取值:
length : 百分比数字 | 由浮点数字和单位标识符组成的长度值,允许为负值。请参阅 长度单位

说明:
检索或设置对象中的文本的缩进。默认值为 0 。
在被另一个对象(如 br )断开的对象内不能应用本属性。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 textIndent 。

示例:

DIV { text-indent:2cm }
.click1 { text-indent:50% }
.click2 { text-indent: }

2、text-overflow
 

语法:
text-overflow : clip | ellipsis
取值:
clip : 默认值。不显示省略标记(...),而是简单的裁切
ellipsis : 当对象内文本溢出时显示省略标记(...)

说明:
设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。
这个属性仅仅作用于水平内联方向的,普通的西方文本的溢出。内联溢出发生在行内的文本超出可用宽度却没有换行机会的时候。
要强制溢出发生并且应用 ellipsis 值,作者必须设置对象的 white-space 属性值为 nowrap 。
假如没有换行机会(例如,对象容器的宽度是狭窄的,而内有很长的没有合理断行的文本),没有应用 nowrap 也有可能溢出。
为了使 ellipsis 值被应用,此属性必须被设置到具有不可视区域的对象。最好的选择是设置 overflow 属性为 hidden 。设置 overflow 属性为 scroll 或者 auto 时,此属性也会应用。但是会有滚动条出现。
通过选择省略标记,隐藏的文本可以被选择。当选择发生时,省略标记会隐藏而被文本替换。
此属性为在DHTML中制作省略标记提供了高效的方法。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而

示例:

div { overflow: hidden; text-overflow:ellipsis; }

 

3、vertical-align
 

语法:
vertical-align : auto | baseline | sub | super | top | text-top | middle | bottom | text-bottom | length
取值:
auto : CSS1 根据 layout-flow 属性的值对齐对象内容
baseline : CSS1 默认值。将支持 valign 特性的对象的内容与基线对齐
sub : CSS1 垂直对齐文本的下标
super : CSS1 垂直对齐文本的上标
top : CSS1 将支持 valign 特性的对象的内容对象顶端对齐
text-top : CSS1 将支持 valign 特性的对象的文本与对象顶端对齐
middle : CSS1 将支持 valign 特性的对象的内容与对象中部对齐
bottom : CSS1 将支持 valign 特性的对象的内容与对象底端对齐
text-bottom : CSS1 将支持 valign 特性的对象的文本与对象顶端对齐
length : CSS2 由浮点数字和单位标识符组成的长度值 | 百分数。可为负数。定义由基线算起的偏移量。基线对于数值来说为0,对于百分数来说就是0%。请参阅 长度单位 。目前IE尚未实现此参数

说明:
设置或检索对象内容的垂直对其方式。
对于 currentStyle 对象而言此属性的默认值为 auto 。对于其他对象而言是 baseline 。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 verticalAlign 。


示例:

td { vertical-align : middle; }

4、text-align
 

语法:
text-align : left | right | center | justify
取值:
left : 默认值。左对齐
right : 右对齐
center : 居中对齐
justify : 两端对齐

说明:
设置或检索对象中文本的对齐方式。
此属性作用于所有块对象(block elements)。在一个 div 对象里的所有块对象的会继承此属性值。 假如属性没有设置,这个参数将获取 null 值。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 textAlign 。


示例:

div { text-align : center; }

5、layout-flow
 

语法:
layout-flow : horizontal | vertical-ideographic
取值:
horizontal : 默认值。对象中的内容自左边流入。下一行在前一行下面。这个值适用于拉丁语系
vertical-ideographic : 对象中的内容自上而下流入,下一行在前一行左面。这个值适用于亚洲语系

说明:
设置或检索对象内文本的流动和方向。
当此属性值发生变化时, text-align 属性与 vertical-align 属性的作用也将发生变化。
这是一个不建议使用的属性。建议使用 writing-mode 属性替代它。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 layoutFlow 。

示例:

div { layout-flow : horizontal; }

6、writing-mode
 

语法:
writing-mode : lr-tb | tb-rl
取值:
lr-tb : 默认值。对象中的内容在水平方向上从左向右流入,后一行在前一行的下面。 所有的字形都是竖直向上的。这种布局是罗马语系使用的
tb-rl : 上-下,右-左。对象中的内容在垂直方向上从上向下流入,自右向左。后一竖行在前一竖行的左面。全角字符是竖直向上的,半角字符如拉丁字母或片假名顺时针旋转90度。这种布局是东亚语系通常使用的

说明:
设置或检索对象的内容块固有的书写方向。西方语言确省的是左-右,上-下的书写方式。但是亚洲语言常有上-下,右-左的书写方式。
当此属性值发生变化时, text-align 属性与 vertical-align 属性的作用也将发生变化。
对于下列元素来说,样式表属性不可继承:

BUTTON || CAPTION || INPUT || INPUT type=button || INPUT type=file || INPUT type=password || INPUT type=reset || INPUT type=submit || INPUT type=text || ISINDEX || OPTION || TEXTAREA

此属性效果不会被累积作用。例如,假如父对象的此属性值设为 tb-rl ,子对象的此属性值设为 tb-rl 不会导致子对象的旋转。
假如对象的 writing-mode 属性设置和它的父对象不一样则其将获得自己的布局。那样一个对象的宽度是通过使用它第一个有布局的父对象的高度而确定的。
当你使用具有不同 writing-mode 属性值的对象时,给每一个对象指定确定的尺寸能够让你更好的整体控制它们的布局。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 writingMode 。

示例:

div { writing-mode: tb-rl; }

7、direction
 

语法:
direction : ltr | rtl | inherit
取值:
ltr : 默认值。文本从左到右流入
rtl : 文本从右到左流入
inherit : 文本流入方向由继承获得

说明:
用于设置文本流入的方向。请参阅对象的 dir 属性。
此属性不会影响拉丁文的字母数字字符,它们总是以 ltr 值被呈递。但是此属性会作用于拉丁文的标点符号。
假如您想应用此属性于内联文本,您必须设定 unicode-bidi 属性为 embed 或 bidi-override 。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 direction 。

示例:

div { direction: rtl; unicode-bidi: bidi-override; }

8、unicode-bidi
 

语法:
unicode-bidi : normal | bidi-override | embed
取值:
normal : 默认值。对象不打开附加的嵌入层,对于内联要素,隐式重排序跨对象边界进行工作
bidi-override : 严格按照 direction 属性的值重排序。忽略隐式双向运算规则
embed : 对象打开附加的嵌入层, direction 属性的值指定嵌入层,在对象内部进行隐式重排序

说明:
用于同一个页面里存在从不同方向读进的文本显示。与 direction 属性一起使用。
假如您想应用 direction 属性于内联文本,您必须设定此属性值为 embed 或 bidi-override 。
Unicode 双向运算法则自动翻转嵌入字符顺序依照它们固有的流动方向。例如,英文文档的默认书写方向是左-右,假如其中包含的部分其他语种的字符其书写方向是右-左,双向运算法则就可以用来代理用户正确的反转其流动方向。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 unicodeBidi 。

示例:

div { direction: rtl; unicode-bidi: bidi-override; }

9、word-break
 

语法:
word-break : normal | break-all | keep-all
取值:
normal : 默认值。允许在词间换行
break-all : 该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all : 与所有非亚洲语言的 normal 相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本

说明:
设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。
对于中文,应该使用 break-all 。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 wordBreak 。

示例:

div {word-break : break-all; }

10、line-break
 

语法:
line-break : normal | strict
取值:
normal : 默认值。应用日文文本的默认换行规则
strict : 强制日文文本换行规则的严谨性

说明:
设置或检索用于日文文本的换行规则。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 lineBreak 。

示例:

div { line-break : strict; }

11、white-space
 

语法:
white-space : normal | pre | nowrap
取值:
normal : 默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行
pre : 换行和其他空白字符都将受到保护。这个值需要IE6+或者 !DOCTYPE 声明为 standards-compliant mode 支持。如果 !DOCTYPE 声明没有指定为 standards-compliant mode ,此属性可以使用,但是不会发生作用。结果等同于 normal 。参阅 pre 对象
nowrap : 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象。参阅 noWrap 属性

说明:
设置或检索对象内空格字符的处理方式。
空格字符,像换行,空格,TAB,在HTML文档中默认的是被忽略的。当此属性设置为 normal 或者 nowrap 时,你可以使用不换行空格的命名实体   来添加空格,用 br 元素来添加换行。此属性对你使用文档对象模型(DOM)操作的内容的影响与其对IE显示内容的影响一样。
此属性作用于块对象。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 whiteSpace 。


示例:

p { white-space: nowrap; }

12、word-wrap
 

语法:
word-wrap : normal | break-word
取值:
normal : 默认值。允许内容顶开指定的容器边界
break-word : 内容将在边界内换行。如果需要,词内换行( word-break )也将发生

说明:
设置或检索当当前行超过指定容器的边界时是否断开转行。
此属性仅作用于有布局的对象,如块对象。内联要素要使用该属性,必须先设定对象的 height 或 width 属性,或者设定 position 属性为 absolute ,或者设定 display 属性为 block 。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 wordWrap 。


示例:

div { word-wrap: break-word; word-break: break-all; }

13、text-autospace

 

语法:
text-autospace : none | ideograph-alpha|ideograph-numeric | ideograph-parenthesis | ideograph-space
取值:
none : 默认值。无调整发生
ideograph-alpha : 在表意字和非表意字(如Latin-based,Greek,Cyrillic,Arabic,Hebrew文本)之间创建额外空格
ideograph-numeric : 在表意字和数字字符之间创建额外空格
ideograph-parenthesis : 在常规(非等宽)插入语和表意字之间创建额外空格
ideograph-space : 当空格相邻表意字符时,扩展空格的宽度

说明:
设置或检索对象文本的自动空格和紧缩空格宽度调整的方式。
表意字是东亚编写系统中的字符,表示一个概念或方法,但不是一个特定的字或词。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 textAutospace 。

示例:

div {text-autospace: ideograph-alpha; }

14、text-kashida-space
 

语法:
text-kashida-space : length | inherit
取值:
length : 百分数。标示kashida膨胀与空格膨胀的比例。为100%,仅有kashida膨胀。为0%,仅有空格膨胀
inherit : 遵循父对象的设置

说明:
设置或检索如何拉伸字符来调节文本行排列。默认值为 0% 。
Kashida是一种印刷效果,通过在恰当的位置拉长字符来调整文本行。它通常用于阿拉伯书写系统。
此属性可以在任何应用Kashida样式的场合使用。例如 text-justify 属性值为 auto , distribute , kashida , newspaper 时。
此属性仅作用于块对象。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 textKashidaSpace 。

示例:

div { text-kashida-space : 50%;text-justify: kashida; }

15、text-justify
 

语法:
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 。

示例:

div {text-justify : auto; text-align:justify; }

16、ruby-align
 

语法:
ruby-align : auto | left | center | right | distribute-letter | distribute-space | line-edge
取值:
auto : 默认值。由浏览器确定对齐方式。对于ideographic(东亚)文本以 distribute-space 值对齐。对于Latin文本以 center 值对齐
left : 根据基本宽度左对齐
center : 根据基本宽度居中对齐。如果基本宽度小于 ruby 文本的宽度,那么基本宽度在 ruby 文本的宽度中居中
right : 根据基本宽度右对齐
distribute-letter : 如果ruby文本的宽度小于基本宽度,则 ruby 文本在基本宽度中均匀分布。如果 ruby 文本的宽度大于或等于基本宽度,居中对齐
distribute-space : 如果 ruby 文本的宽度小于基本宽度,则 ruby 文本在基本宽度中均匀分布。在 ruby 文本中,在第一个字符的前面后最后字符的后面有半个字距的空白区域。如果 ruby 文本的宽度大于或等于基本宽度,居中对齐
line-edge : 如果 ruby 文本不相邻行边缘,则其被居中。否则 ruby 文本行在基本文本边的上方

说明:
设置或检索通过 rt 对象指定的注释文本或发音指南(参考 ruby 对象)的对齐位置。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 rubyAlign 。


示例:

ruby { ruby-align: right; }


17、ruby-overhang
 

语法:
ruby-overhang : auto | whitespace | none
取值:
auto : 默认值。 ruby 文本突出相邻基本文本的任何其他文本
whitespace : ruby 文本只突出空白区域的字符
none : ruby 文本只突出相邻基本文本的任何其他文本

说明:
设置或检索通过 rt 对象指定的注释文本或发音指南(参考 ruby 对象)的位置。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 rubyOverhang 。


示例:

ruby { ruby-overhang: auto; }


18、ruby-position
 

语法:
ruby-position : above | inline
取值:
above : 默认值。在基本文本上方定位 ruby 文本
inline : ruby 文本与基本文本内联

说明:
设置或检索通过 rt 对象指定的注释文本或发音指南(参考 ruby 对象)的位置。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 rubyPosition 。


示例:

ruby { ruby-position: above; }


19、ime-mode
 

语法:
ime-mode : auto | active | inactive | disabled
取值:
auto : 默认值。不影响IME的状态。与不指定 ime-mode 属性时相同
active : 指定所有使用IME输入的字符。即激活本地语言输入法。用户仍可以撤销激活IME
inactive : 指定所有不使用IME输入的字符。即激活非本地语言。用户仍可以撤销激活IME
disabled : 完全禁用IME。对于有焦点的控件(如输入框),用户不可以激活IME

说明:
设置或检索是否允许用户激活输入中文,韩文,日文等的输入法(IME)状态。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 imeMode 。


示例:

input {ime-mode: auto; }


20、layout-grid
 

语法:
layout-grid : layout-grid-mode || layout-grid-type || layout-grid-line || layout-grid-char
取值:
该属性是复合属性。请参阅各参数对应的属性。
默认值为:both loose none none。

说明:
设置或检索复合文档中指定文本字符版式的网格特性。
以东亚语言(如中文,日文)编写的文档通常根据一维或二维网格使用字符的页面版式。
对应的脚本特性为 layoutGrid 。


示例:

div { layout-grid:both loose none none; }


21、layout-grid-char
 

语法:
layout-grid-char : none | auto | length
取值:
none : 默认值。无字符网格设定
auto : 在对象文本中按最大的字符确定网格
length : 百分数 | 由浮点数字和单位标识符组成的长度值,其百分比取值是基于父对象尺寸。请参阅 长度单位

说明:
设置或检索应用于对象内容文本的字符网格尺寸。
其视觉效果类似于 line-height 属性。
以东亚语言(如中文,日文)写的文档通常根据一维或二维网格使用字符的页面版式。你可以用 layout-grid 属性将这种布局加入到网页文档中去。
此属性只应用于块对象(如 div )。
要使此属性发生作用, layout-grid-mode 属性值必须设置为 line 或 both 。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 layoutGridChar 。


示例:

div { layout-grid-char: auto; }


22、layout-grid-line
 

语法:
layout-grid-line : none | auto | length
取值:
none : 默认值。无行网格设定
auto : 在对象文本中按最大的字符确定网格
length : 百分数 | 由浮点数字和单位标识符组成的长度值,其百分比取值是基于父对象尺寸。请参阅 长度单位

说明:
设置或检索应用于对象文本的行网格尺寸。
其视觉效果类似于 line-height 属性。
以东亚语言(如中文,日文)写的文档通常根据一维或二维网格使用字符的页面版式。你可以用 layout-grid 属性将这种布局加入到网页文档中去。
此属性只应用于块对象(如 div )。
要使此属性发生作用, layout-grid-mode 属性值必须设置为 line 或 both 。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 layoutGridLine 。


示例:

div { layout-grid-line: auto; }


23、layout-grid-mode
 

语法:
layout-grid-mode : both | line | char | none
取值:
both : 默认值。指定 char 和 line 都被启用。要在一个对象上完全启用网格版式,此值是必须的
line : 指定只使用行网格。建议与内联对象(如 span )一起使用
char : 指定只使用字符网格。建议和块对象(如 div )一起使用
none : 不使用网格

说明:
设置或检索文本网格版式是否使用二维。
以东亚语言(如中文,日文)编写的文档通常根据一维或二维网格使用字符的页面版式。你可以用 layout-grid 属性将这种布局加入到网页文档中去。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 layoutGridMode 。


示例:

div { layout-grid-mode: char; }


24、layout-grid-type
 

语法:
layout-grid-type : loose | strict | fixed
取值:
loose : 默认值。指定在中文或韩文中使用网格的文本,只有象形文字,假名,宽字符域网格对齐。其余的和通常一样,尽管包含这些字符的文本范围的 layout-grid-mode 被设置为 none 或 line 。该模式还禁用通常用于对象文本的特殊文本对齐和字符宽度调整。最后,如果不能再换行边界的文本中找到一个换行机会,那么文本将被推至下一行,并且上一行的最后留出空白
strict : 指定在日文中使用网格。规则为:如果没有其他的宽度调整效果,则增加宽字符以获取精确的网格填充。窄字符(除了草书字体)按照应用于宽字符的一半增量增加
fixed : 指定使用于等宽版式网格。规则为:所有非草书符号视为等宽。默认情况下,每个字符在单一网格中居中。禁止对齐或任何其他改变字符宽度的行为

说明:
设置或检索应用于对象文本的网格类型。
其视觉效果类似于 line-height 属性。
以东亚语言(如中文,日文)写的文档通常根据一维或二维网格使用字符的页面版式。你可以用 layout-grid 属性将这种布局加入到网页文档中去。
此属性只应用于块对象(如 div )。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 layoutGridType 。


示例:

div { layout-grid-type: strict; }


 

 

 

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

css样式表基本属性2

html中关于css的简介及方法

HTML默认样式表CSS属性

开始的时候 *{margin:0;padding:0;},当需要使用边距的时候,就需要还原HTML默认CSS值了。以前一直在找这份 文档,今天偶然在w3上看到了。除了inline和block的定义,主...

HTML默认样式表CSS属性

转载链接:http://www.xiao-a.com/index.php/archives/440.html 开始的时候 *{margin:0;padding:0;},当需要使用边距的时候,就需要...

css样式表和选择器的优先级以及position元素属性值的区别

css样式表和选择器的优先级以及position元素属性值的区别

css样式表基本属性1

html中关于css的简介及相应的方法

CSS层叠样式表属性(按照功能分类)

CSS3 动画属性(Animation) 属性 描述 CSS @keyframes 规定动画。 3 animation 所有...

css样式表基本属性3

html中有关于css的简介及一些方法

CSS样式表中a:link,a:visited,a:hover,a:active属性

CSS样式表中a:link,a:visited,a:hover,a:active属性含义a:link,a:visited,a:hover,a:active 分别是什么意思,有什么用途 明了的:  ...

css样式表手册属性列表

  • 2009-05-01 13:47
  • 553KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)