第五章 文字与图像
5.1.2 设置字体
通过font-family属性设置字体。可以声明多种字体，字体之间用逗号分隔开。如一些字体名称中间有空格，需用双引号将其引起来，使浏览器知道这是一种字体的名称。
p{ font-family:Arial,"Times New Roman";}
5.1.3 文字大小
通过font-size属性来控制文字大小。
1. 长度单位px。表示在浏览器上1个像素的大小。px是相对单位，也就是相对于1个像素的比例。因为不同访问者的显示器的分辨率不同，而且每个像素的实际大小也不相同。
p{ font-size:12px;}
绝对长度单位有以下5种，不会随显示器的变化而变化。
A. in ： inch，英寸
B. cm： centimeter，厘米
C. mm： millimeter， 毫米
D. pt： point，印刷的点数，在一般的显示器中1pt相当于1/72inch
E. pc： pica，1pc=12pt
2. 长度单位em和ex
也是相对长度单位。1em表示的长度是其父元素中字母m的标准宽度，1ex则表示字母x的标准高度。当父元素的文字大小变化时，使用这两个单位的子元素的大小会痛比例变化。
头文字下沉，使用em 使首字母放大到父文字的3倍，再左浮动下沉： .firstLetter{ font-size:3em; float:left;}
3. 长度单位%
百分比作为单位，如 font-size：200%， 表示文字大小是原来的两倍。
5.1.4 行高
使用line-height 属性设置各行文本的高度。 属性值表示两行文字之间基线的距离，也就是每行文字的高度。上下划线及文字的基线。
line-height:1.5。 表示原像素大小的1.5倍
字体、大小和行高，可以写作： font:12px/18px Arial;
5.1.5 文字颜色与背景颜色
h1{ color:blue;} 使用颜色的英文名称
h1{ color:#0000ff;} 使用十六进制数值
h1{ color:#00f;} 第2中方式的简介方式
h1{ color:rgb(0,0,255);} 红绿蓝3个颜色分量的十进制数值
h1{ color:rgb(0%,0%,100%);} 红绿蓝3个颜色分量的百分比。
背景颜色：”background-color“
5.1.6 文字加粗、倾斜与大小写
使用font-weight属性控制文字的粗细。
font-weight:normal 正常
font-weight:bold 加粗
A. font-style：normal 正常字体
A. font-italic 即意大利提。
B. font-oblique 即真正的倾斜。
字母大小写：
A. text-transform: capitalize; 单词首字大写
B. text-transform:uppercase; 全部大写
C. text-transform:lowercase 全部小写
5.1.7 文字的装饰效果
下划线： text-decoration:underline;
定划线：text-decoration：overline
删除线：text-decoration：line-through
闪烁：text-decoration：blink (ie浏览器无效)
如果要同时有多重线，可 p{text-decoration:underline overline line-through}
5.1.8 文字的水平对其方式与段首缩进设置
text-align属性控制，属性值有：center、left、right、justify(两端对齐)
首行缩进，空两格：text-indent:2em;
5.1.10 段落的垂直对其方式
竖直对齐方式：vertical-align。 只能用表格单元格中的对象竖直方向的对其设置。对于一般块级元素 div等都不起作用。
块级元素中文字可以使用 height 和line-height相同的方法使文字竖直居中。
5.2 CSS图像样式
5.2.1 基本设置
图像的基本设置包括设置图像的边框、内外边距和大小等。
5.2.2 背景图像
1. 设置背景图像
background-image:url{bg.gif};
2. 控制图像平铺方向
默认情况下，图像会自动向水平和竖直两个方向平铺。可通过以下方式设置平铺:
A. repeat: 沿水平和竖直两个方向平铺；
B. no-repeat：不平铺，即只显示一次；
C. repeat-x：只沿水平方向平铺；
D. repeat-y：只沿竖直方向平铺。
3. 同时设置背景图像和背景颜色
同时设置背景图像和背景颜色，这样背景图像覆盖的地方就显示背景图像，没有覆盖的地方就按照设置的背景颜色显示。
4. 背景样式属性的简写,属性之间用空格
body{ background:#3399ff url(bg-grad.gif) repeat-x;}
5.2.3 标题的图像替换
1. "图像替换法“是使文字不显示在页面上，而使图片以背景图像的形式出现。通常使用PNG透明格式图片。
<h1><span>文字标题中英文</span></h1>
h1{ background:url(图像地址) no-repeat; height:高度;}
h1 span{ display:none;}
2. 标题的对齐方式：
标题背景图片对齐方式：background-positon： ; 值有：left, right,top, bottom。
如果设置两个属性 background-position: right bottom; 表示竖直位置 右对齐， 水平位置 下对齐。就是右下角位置。
如果只设置一个值，则表示另一个缺省的值为 center。
5.2.4 为图像增加投影效果。
1. 基本方法: