CSS样式--字体、文本

1 字体样式

字体样式是针对字体本身的一些修饰相关的样式，如字体的颜色，字体的大小等等

1.1 color 字体颜色

属性：
color
功能：
设置字体的颜色
值：
（略）( 通用颜色值 )

1.2 font-weight 字体粗细

属性：
font-weight
功能：
设置字体是否加粗
值：
关键字：bold-加粗 normal-默认（不加粗）
数值：100~900（没有单位，且只有几百这种值）

1.3 font-size 字体大小

属性：
font-size
功能：
设置字体的大小
值：
px：固定像素值
%：基于父级字体大小的百分比（body默认16px，浏览器最小12px）
em：1em = 乘以父级元素的字体大小

1.4 font-style 字体风格

属性：
font-style
功能：
设置字体是否斜体
值：
normal：默认
italic：斜体字体

1.5 font-family 字体类型

属性：
font-family:”微软雅黑”;
功能：
设置字体的类型
值：
字体关键字：
‘Microsoft yahei’、‘微软雅黑’：微软雅黑
‘SimSun’、‘宋体’：宋体
…
关于引号：
当使用英文字体的时候，如果中间有空格需要加上引号
字体类型兼容：
字体的类型有很多但是一般只有当用户的系统安装了对应的字体类型我们的类型才能生效，所以通常会在样式初始 化时，在body里选择一组备用类型，当用户没有安装对应的字体类型时替代。
body{ font-family:Arial, “Microsoft Yahei”, sans-serif; }

1.6 line-height 字体行高(设置文字垂直方向的位置)

属性：
line-height
功能：
设置行间的距离
数值：
1.5（基于字体大小（font-size）的倍数）,与最终作用于字体大小的行高代码有关。
22px（具体的数值）
使用:
行高等于高度时，文字垂直方向居中。没有设置高度时，文字垂直方向始终居中。

1.7 font 复合样式

属性：
font
功能：
字体样式的复合样式
顺序：
font:字体加粗 字体风格 字体大小/字体行高 字体类型;
示例：
font:bold italic 16px/1.5 ulul ;
注：
1.字体颜色不能写进符合样式中
2.属性值可以缺省，但是最少要保留 字体大小与字体类型
font:bold italic 16px ‘Microsoft yahei”;
16px/1.5只写一个值，默认为字体大小16px，

2 文本样式

文本样式是针对文字一些排列相关的样式，如字体间距，对齐方式等等

2.1 text-align 文本水平对齐方式

属性：
text-align
功能：
设置字体水平对齐方式
值：
left（左对齐，默认值）、right（右对齐）、center（居中对齐）

2.2 text-decoration 文本修饰

属性：
text-decoration
功能：
修饰文本
值：
none（无修饰）、underline（下划线）、overline（上划线）、line-through（删除线）

2.3 text-indent 首行文本缩进

属性：
text-indent
功能：
设置首行文本的缩进距离
值：
px：固定像素值
em：1em = 当前元素的字体大小
2em = 空两格

2.4 text-overflow 文本溢出处理

属性：
text-overflow
功能：
文本超出元素的时候的处理方式（汉字不会超出元素，只有当某个英语单词过长才会出现）
值：
仅使用text-overflow视觉效果看不出来
clip（超出裁剪）、ellipsis（省略，超出出现省略号）
配合使用（三个步骤缺一不可）：
overflow:hidden; （超出隐藏）
text-overflow:ellipsis; （超出省略）
white-space:nowrap;（强制不换行）

2.5 text-transform 文本字母处理

属性：
text-transform
功能：
设置文本字母的处理方式
值：
none（正常显示）、capitalize（单词首字母大写）、uppercase（全部大写）、lowercase（全部小写）

2.6 letter-spacing 字间距

属性：
letter-spacing
功能：
设置字体与字体之间的间距
值：
px：固定像素值
em：1em = 当前元素的字体大小

2.7 word-spacing 词间距（一个空格为一个词）

属性：
word-spacing
功能：
设置单词与单词之间的间距
无论英语还是汉语，用空格隔开的前后各认为一个词
值：
px：固定像素值
em：1em = 当前元素的字体大小

2.8 white-space 文本换行方式

属性：
white-space
功能：
设置当文本即将换行时的处理方式
值：
nowrap（不换行，强制不换行）
合并空格，缩进，换行，不会自动换行，只有遇到
才会换行。
normal（默认换行方式）
默认情况下，合并空格，缩进，换行，解析成一个文本空格。文本自动换行，换行标签正常生效。
pre （保留空格、缩进、换行，但是文本不会自动换行）
pre-line （合并空格、缩进，文本自动换行）
pre-wrap（保留空格、缩进、换行、并且文本自动换行）

2.9 word-break 单词换行方式

属性：
word-break
功能：
设置单词内需要换行时的处理方式
值：
break-all（允许在单词内换行）
normal（默认换行方式，一个单词整体换行。）
keep-all( 不允许在单词内换行 )

3 转义字符

html界面中有一些特殊符号不可以直接显示在文档当中如< > ’ … 这时候需要对它们进行转义才能在界面中正常的显示，方式是通过使用该字符的编码进行转义之后再界面中显示该字符，但是又不会被浏览器识别为特殊字符.
© 版权号
字符查询：http://tool.oschina.net/commons?type=2