1、商业网页设计与制作商业网页设计与制作第五讲第五讲 文字和图像的排版文字和图像的排版文字的排版文字的排版o CSS文字样式文字样式n 准备网页准备网页n 设置字体设置字体n 文字大小文字大小n 行高行高n 文字颜色与背景颜色文字颜色与背景颜色n 文字加粗、倾斜与大小写文字加粗、倾斜与大小写n 文字的装饰效果文字的装饰效果n 文字的水平对齐方式文字的水平对齐方式n 文字布局文字布局n 段落的垂直对齐方式段落的垂直对齐方式文字的排版文字的排版o CSS文字样式文字样式n 准备网页准备网页 (无样式）无样式）Head Linehe Internet Society mission is to achi
2、eve a world in which everyone everywhere is connected to an open and universally accessible Internet. The Internet Societys mission is to achieve a world in which everyone everywhere is connected to an open and universally accessible Internet. Since its inception in 1992, ISOC has been at the forefr
3、ont of global Internet education by bringing essential information and training to people throughout the world.The Internet Societys mission is to achieve a world in which everyone everywhere is connected to an open and universally accessible Internet. Since its inception in 1992, ISOC has been at t
4、he forefront of global Internet education by bringing essential information and training to people throughout the world.文字的排版文字的排版o CSS文字样式文字样式n 设置字体设置字体CSS中字体是通过中字体是通过 font-family属性控制的。如属性控制的。如font-family: Arial,”Times New Roman”;font-family属性可以同时声明多种字体，字体间用逗号属性可以同时声明多种字体，字体间用逗号分隔开。另外一些字体的名称中间会有空格出
5、现，这时需分隔开。另外一些字体的名称中间会有空格出现，这时需要用双引号将其引起来。要用双引号将其引起来。文字的排版文字的排版o CSS文字样式文字样式n 文字大小文字大小CSS中文字大小是通过中文字大小是通过 font-size属性控制的。如属性控制的。如font-size:12px;长度单位长度单位 PX，表示在浏览器上的，表示在浏览器上的 1个像素的大小，这个像素的大小，这个是跟浏览器的分辨率有关，是个相对单位。个是跟浏览器的分辨率有关，是个相对单位。长度单位长度单位 em和和 ex，也是相对单位。，也是相对单位。 1em相对表示的相对表示的是其父元素中字母是其父元素中字母 m的标准宽度，
6、的标准宽度， 1ex相对表示的是其父相对表示的是其父元素中字母元素中字母 x的标准高度。当父元素的文字大小变化时，使的标准高度。当父元素的文字大小变化时，使用这两个单位的子元素的大小会同比例变化。用这两个单位的子元素的大小会同比例变化。文字的排版文字的排版o CSS文字样式文字样式n 行高行高CSS中文本行的行高是通过中文本行的行高是通过 line-height属性控制的。如属性控制的。如line-height :18px;line-height :1.5;请思考；对于文本字大小是请思考；对于文本字大小是 12px的文本行来说，两种的文本行来说，两种表示有什么不同？要实现首字母下沉，请问用哪种
7、方式设表示有什么不同？要实现首字母下沉，请问用哪种方式设置行高？置行高？文字的排版文字的排版o CSS文字样式文字样式n 文字颜色与背景颜色文字颜色与背景颜色CSS文字颜色是通过文字颜色是通过 color属性控制的。如属性控制的。如color: blue;color: #0000ff;color: #00f;color: rgb(0,0,255);CSS背景颜色是通过背景颜色是通过 background-color属性控制的。属性控制的。文字的排版文字的排版o CSS文字样式文字样式n 文字加粗、倾斜与大小写文字加粗、倾斜与大小写CSS中文字加粗是通过中文字加粗是通过 font-weight属
8、性控制的。如属性控制的。如font-weight: normal;font-weight: bold;CSS中文字倾斜是通过中文字倾斜是通过 font-style属性控制的。如属性控制的。如font-style: normal;font-style: obliquefont-style: italic;文字的排版文字的排版o CSS文字样式文字样式n 文字加粗、倾斜与大小写文字加粗、倾斜与大小写CSS中英文字母大小写是通过中英文字母大小写是通过 text-transform属性控制的。属性控制的。如如text-transform : capitalize;text-transform : uppercase;text-transform : lowercase;文字的排版文字的排版o CSS文字样式文字样式n 文字的装饰效果文字的装饰效果CSS中文字的装饰效果是通过中文字的装饰效果是通过 text-decoration属性控制的。如属性控制的。如text-decoration: underline; /* 下划线下划线 */text-decoration: overline; /* 顶划线顶划线 */text-decoration: line-through; /* 删除线删除线 */text-decoration: blink; /* 闪烁闪烁 */
