css的精髓是布局，而不是样式——之三

第三天 文字相关样式

1）容易混淆或遗忘的单位

比较有意思的现象：国外的设计师们喜欢用em、百分比、关键字（small、xx-small之类）等设置网页字体大小，国内喜欢用px和pt（注意，如果网页都用em作为单位，ie6会出现bug，可以指定任意一个百分比解决）

浏览器默认的字体大小是16px

在中文window系统中，ie浏览器默认中文字体是宋体或新宋体，英文为Arial，其它浏览器则未知（新的浏览器都可以用户指定页面中跌字体，即字体可配置），定义font-family时，尽量备用几个字体，因为用户操作系统中未必装有你定义的字体，如：font-family:“宋体”,Arial,Helvetica,sans-serif;

xx-small(=9px),x-small(=11px),medium(-16px),large(=19px),x-large(=23px),xx-large(=27px)

1em (= 100%),  0.5em (= 50%)

2em或者200% 单位是指2倍于父级元素的字体大小，如果父元素没有字体大小，则自动向上继承祖先元素的字体大小。

font: italicsmall-caps bold 12px/1.6em 宋体      含义为：文本为斜体、大写、加粗显示，字体大小为12像素，行高为字体大小的1.6倍，字体为宋体。

2）serif和sans-serif

2-1）serif：衬线字体，比较常见的衬线字体有 Georgia, Garamond, Times New Roman, 中文的宋体等等。衬线字体的可读性非常好，所以它应用的最多的地方也正是出版物或者印刷品的正文内容等以大段文字作为表现形式的作品上

2-2）sans-serif：非衬线字体（sans为“法语”中没有的意思），常见的无i衬线字体有 Trebuchet MS, Tahoma, Verdana, Arial, Helvetica, 中文的幼圆、隶书等等，无衬线字体比较圆滑，线条一般粗细均匀。比较适合用作艺术字、标题等。因为无衬线字体通常粗细比较均匀，所以在小字体显示的时候，可读性会降低，容易引起视觉疲劳。

具体衬线字体和非衬线字体的区别见：点击打开链接

3）布局对齐

3-1）在table中比较容易，通过在单元格中设置align的“left,right,center,justify”对齐，或者valign的"top,bottom,middle,baseline”等

3-2）布局居中

text-align在做布局居中时，常常会发现文本居中了，但是图片等不居中现象，ie没有此问题。解决此问题常常配合margin设置auto属性解决，如下：

body{ text-align:center;}

div{margin-left:auto;margin-right:auto;width:60%}

3-3）垂直布局

vertical-align仅能作用于单元格或者图像显示而定义的，所有用于文本对齐时，需要制定display:table-cell,但是ie并不支持table-cell，因此可以利用line-height和height解决ie下面文本垂直对齐问题

a)firefox等文本对齐到中间方法：

div{vertical-align:bottom;display:table-cell}

b)兼容ie的解决方法:

div{line-height:6em;height:6em}

4) 什么样的行高最适合阅读

浏览器默认是120%，最适合的是160%~180%

在做距离拉伸时，line-height常常在firefox中无效，因此建议用更为安全的padding和margin

5）字体颜色

16进制简写方式即为16进制中一种严责一致时的简写，例如#f00,等于#ff0000;#112233,等于#123

css3中除了十六进制、简写16进制、英文名、RGB、 百分比RGB以外，还增加了3种描述颜色的：

a）RGBA，即在RGB基础上增加了Alpha通道，用于透明

b）HSL：H:色相，S：饱和度，L：亮度，color：hsl(0,100%,100%)表示红色

c）HSLA：即在HSL基础上增加Alpha通道

PS: 居中布局较为常用，也较为重要。大家常见了借助父类div的relative属性、父标签left和top设定为50%，然后用负margin等都可以实现。大家可以查阅相关资料