CSS文本样式

一、文字样式属性

字体：font-family
文字大小：font-size
文字颜色：color
文字粗细：font-weight
文字样式：font-style

font-family：

1、含空格和中文的字体名，用英文引号""括起
2、多个字体，用英文逗号,隔开
3、引号嵌套，外使用双引号，内使用单引号

font-size:绝对单位（不会因为浏览器的改变而改变）

in 英寸
cm 厘米
mm 毫米
pt 磅
pc Pica
xx-small    9px
x-small 11px
small 13px
medium 16px
large 19px
x-large 23px
xx-large 28px

font-size：相对单位（受显示器分辨率影响）

px         像素
em/%    
em和%都是针对父元素设置的字体大小
例子：
p{font-size: 50px;}
.em{font-size: 2em;}    .em{font-size: 150%;}


<p>父元素<span class="em">相对值em</span></p>
相对值em的字体大小为2倍的p中的元素大小
相对值em的字体大小为150%的p中的元素大小

文字加粗

html中：<b></b>      <strong></strong>
CSS中：font-weight
属性值：400等用于normal      700等同于bold
normal 正常
bold 加粗
bolder 更粗
lighter 更细
100~900

文字斜体

html中：<em></em>    <i></i>
CSS中：font-style
属性值：
normal 正常
italic 斜体，对于没有斜体变量的特殊字体，将应用 oblique 
oblique 倾斜字体

字体变形

font-variant
属性值：
normal 正常
small-caps 小型大写字母

CSS文本样式

text-align：设置元素内文本的水平对齐方式（只对块级元素有效）
属性值：
left
right
center
justify

vertical-align:设置元素内容的垂直方式（只对行内元素有效）

可以用于单元格
属性值：
baseline 与基线对齐
sub 下标
super 上标
top 顶端对齐
text-top 与文字顶端对齐
middle 与中线对齐
bottom 底部对齐
text-bottom 与文字底部对齐
长度            例子：style="vertical-align:-15px;"
                  基于基线向下移动15像素
百分比          例子：style="vertical-align:-100%;"
  基于基线向下移动100%
技巧：当单行文字要垂直居中时，可以使用 line-height把值设为行高height一样高！

line-height：设置元素中文本行高

属性值：
长度值
百分比
当使用px作为单位时：.text3{
font-size: 10px;
line-height: 25px;
}行高不会随着字体大小而改变
当使用em作为单位时：.text3{
font-size: 30px;
line-height: 1.3em;
}行高值为30*1.3=39px，会自适应字体大小的改变

当使用%作为单位时：.text3{
font-size: 30px;
line-height: 100%;
}行高值为30*100%=30px，会自适应字体大小的改变

当设置了一个父元素的行高，会继承给子元素，但是继承的是计算后的值，不是直接把em或
    %继承过来！
例子：
div{font-size: 20px;line-height: 1.3em;}
p{font-size: 30px;}
说明：div中的行高为26px，而div中p的行高也为26px（不是39px）

其他文本样式：

word-spacing 设置元素内单词之间间距（单词的判断以空格为准）
letter-spacing 设置元素内字母之间间距（每个字母间的间距）
text-transform          设置元素内文本的大小写
capitalize|uppercase|lowercase|none
(首字母大写|字母大写|字母小写|没有任何效果)
text-decoration 设置元素内文本的装饰
underline|overline|line-through|blink|none
(下划线|上划线|贯穿线|闪烁效果|没有任何效果)