日期:2014-05-16  浏览次数:20610 次

CSS 文本样式

?1、文本缩进 text-indent
JavaScript 语法:object.style.textIndent="50px"

示例:
如段落的第一行缩进2em。

<html>
<head>
<style type="text/css">  
p {
  text-indent: 2em;
  }
</style>  
</head>
<body>
中国山东济南
<p>
中国山东济南
</p>
</body>
</html>

?

?
可能的值:正值、负值、百分比(相对于父元素的宽度)
注意:一般来说,可以为所有块级元素应用 text-indent,但无法将该属性应用于行内元素。
提示:如果想把一个行内元素的第一行“缩进”,可以用左内边距或外边距创造这种效果。

?

2、水平对齐 text-align
JavaScript 语法: object.style.textAlign="right"
可能的值:left、right、center、justify(不建议使用)

?

3、word-spacing 属性增加或减少单词间的空白(即字间隔)。
该属性定义元素中字之间插入多少空白符。针对这个属性,“字” 定义为由空白符包围的一个字符串,允许使用负值。
JavaScript 语法:?object.style.wordSpacing="10px"
示例

<html>
<head>
<style type="text/css">
p.spread {word-spacing: 30px;}
p.tight {word-spacing: -1em;}
</style>
</head>
<body>
<p class="spread">This is some text. 中国 山东 济南.</p>
<p class="tight">This is some text. 中国 山东 济南.</p>
</body>
</html>

?

?

4、字母间隔 letter-spacing
该属性与 word-spacing 的区别在于,字母间隔修改的是字符或字母之间的间隔。
JavaScript 语法:?object.style.letterSpacing="3px"

?

5、大小写转换 text-transform
JavaScript 语法:?object.style.textTransform="uppercase"
可能的值:
none?默认。默认值 none 对文本不做任何改动,将使用源文档中的原有大小写
capitalize?文本中的每个单词以大写字母开头。
uppercase?定义仅有大写字母。
lowercase?定义仅有小写字母。

示例:

<style type="text/css">
  h1 {text-transform: uppercase}
  p.uppercase {text-transform: uppercase}
  p.lowercase {text-transform: lowercase}
  p.capitalize {text-transform: capitalize}
</style>
</head>
<body>
<h1>This Is An H1 Element</h1>
<p class="uppercase">This is some text in a paragraph.</p>
<p class="lowercase">This is some text in a paragraph.</p>
<p class="capitalize">This is some text in a paragraph. </p>
</body>

?

?

6、文本装饰 text-decoration
JavaScript 语法:?object.style.textDecoration="overline"
可能的值:
none?默认。定义标准的文本。
underline?定义文本下的一条线。
overline?定义文本上的一条线。
line-through?定义穿过文本下的一条线。

?

7、white-space
JavaScript 语法: object.style.whiteSpace="pre"
可能的值
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。

?

?

?