文字的CSS样式

文字样式

 

font-family。

字体。使用的值是系统中安装的字体的名字，如黑体，Arial。如果字体名字带空格，则需要用引号包住。

 

font-size。

字号。这个不光可以使用绝对值，还可以使用百分比相对值。它是以父标签的绝对值为基准的相对值。建议的做法是在body标签上使用绝对值定义字号，其他标签使用百分比定义字号，这样就可以在不同的浏览器当中显示同样的效果。如：

/* Font size conversion chart 这个是在注释中写明字体大小对应关系

10px = 77%

11px  = 85%

12px  =93%

13px  =100%

14px  =108%

15px  = 116%

16px  =123.1%

17px  =131%

18px  =138.5%

19px  =146.5%

20px  =153.9%

21px  =161.6%

22px  =167%

23px  =174%

24px  =182%

25px  =189%

26px  =197%

*/

body{font-size:13px}

div {font-size: 50%}

 

color

字体颜色

 

text-decoration。

横线。分为上划线overline, 下划线underline, 删除线line-through, 闪烁blink

 

text-transform。 

大小写。单词首字母大写capitalize, 全部大写uppercase, 全部小写lowercase

 

text-indent

text-indent 属性规定文本块中首行文本的缩进。

注释：允许使用负值。如果使用负值，那么首行会被缩进到左边。

注意：在 CSS 2.1 之前，text-indent 总是继承计算值，而不是声明值。

取值：

length定义固定的缩进。默认值：0。

%定义基于父元素宽度的百分比的缩进。

inherit规定应该从父元素继承 text-indent 属性的值。

常用用法：

使用的文本缩进隐藏文字

假如你有一张网站的logo图片，这个图片在h1 标记中。为了SEO，于是我们将文字写到h1标记中，方便搜索引擎阅读，但并不要文字显示，有的人可能会使用“display:none” 将元素隐藏，那么就不得不吧logo图片放在别的标记中，我们使用为text-indent设定负值, 也能达到这个效果.

h1 {

  text-indent:-9999px;

  margin:0 auto;

  width:948px;

  background:transparent url("images/header.jpg") no-repeat scroll;

  }

 

font-weight

字体粗细

normal默认值。定义标准的字符。

bold定义粗体字符。

bolder定义更粗的字符。

lighter定义更细的字符。

100

200

300

400

500

600

700

800

900

定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。

inherit规定应该从父元素继承字体的粗细。

 

font-style

斜体

i. letter-spacing

字母间横向间距

 

word-spacing

单词间横向间距

 

line-height

line-height 属性设置行间的距离（行高）。

注释：不允许使用负值。

说明

该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。

line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。

原始数字值指定了一个缩放因子，后代元素会继承这个缩放因子而不是计算值。

 

normal默认。设置合理的行间距。

number设置数字，此数字会与当前的字体尺寸相乘来设置行间距。

length设置固定的行间距。

%基于当前字体尺寸的百分比行间距。

inherit规定应该从父元素继承 line-height 属性的值。

 

white-space

在css中控制文字强制换行或不换行的写法，通常用在td中（也可以在td的html标签中加上nowrap=”nowrap”或nowrap=”true”表示不能换行，nowrap=”false”表示允许换行）。也可以用在div等元素上，控制它的内容

语法：

white-space : normal | pre | nowrap |inherit

取值：

normal默认。空白会被浏览器忽略，文本自动处理换行。假如抵达容器边界内容会转到下一行。

pre换行和其他空白字符都将保留。其行为方式类似 HTML 中的 <pre> 标签。这个值需要IE6+或者 !DOCTYPE 声明为 standards-compliant mode 支持。如果 !DOCTYPE 声明没有指定为 standards-compliant mode ，此属性可以使用，但是不会发生作用。结果等同于 normal 。

nowrap强制在同一行内显示所有文本，文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。

pre-wrap保留空白符序列，但是正常地进行换行。

pre-line合并空白符序列，但是保留换行符。

inherit规定应该从父元素继承 white-space 属性的值。

 

word-break

设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。 对于中文，属性值应该使用break-all 。 对应的脚本特性为wordBreak。

normal: 依照亚洲语言和非亚洲语言的文本规则，允许在字内换行 

break-all:该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本 

keep-all:与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本与之间的高度解决办法

英文不换行 

 CSS里加上 word-break: break-all; 问题解决。这个问题只有IE才有，在FF下测试,FF可以自己加滚动条，这样也不影响效果 

建议大家做Skin时，记得在body里加 word-break: break-all; 这样可以解决IE的框架被英文撑开的问题

 

text-overflow

text-overflow属性，设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果。

取值 ： 

clip：不显示省略标记（...），而是简单的裁切。

ellipsis：当对象内文本溢出时显示省略标记（...）。