CSS 设计彻底研究（五）文字与图像

第五章 文字与图像

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. 基本方法: