文字样式
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:当对象内文本溢出时显示省略标记(...)。