文字和图像的排版概要.ppt

商业网页设计与制作 第五讲 文字和图像的排版 文字的排版 CSS文字样式 准备网页 设置字体 文字大小 行高 文字颜色与背景颜色 文字加粗、倾斜与大小写 文字的装饰效果 文字的水平对齐方式 文字布局 段落的垂直对齐方式 文字的排版 CSS文字样式 准备网页(无样式） body h1Head Line/h1 p class=p1he Internet Society mission is to achieve a world in which everyone everywhere is connected to an open and universally accessible Internet. /p p class=p2span class=first LetterT/Spanhe Internet Society’s 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 forefront of global Internet education by bringing essential information and training to people throughout the world.The Internet Society’s 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 forefront of global Internet education by bringing essential information and training to people throughout the world./p /body 文字的排版 CSS文字样式 设置字体 CSS中字体是通过font-family属性控制的。如 font-family: Arial,”Times New Roman”; font-family属性可以同时声明多种字体，字体间用逗号分隔开。另外一些字体的名称中间会有空格出现，这时需要用双引号将其引起来。 文字的排版 CSS文字样式 文字大小 CSS中文字大小是通过font-size属性控制的。如 font-size:12px; 长度单位PX，表示在浏览器上的1个像素的大小，这个是跟浏览器的分辨率有关，是个相对单位。 长度单位em和ex，也是相对单位。1em相对表示的是其父元素中字母m的标准宽度， 1ex相对表示的是其父元素中字母x的标准高度。当父元素的文字大小变化时，使用这两个单位的子元素的大小会同比例变化。 文字的排版 CSS文字样式 行高 CSS中文本行的行高是通过line-height属性控制的。如 line-height :18px; line-height :1.5; 请思考；对于文本字大小是12px的文本行来说，两种表示有什么不同？要实现首字母下沉，请问用哪种方式设置行高？ 文字的排版 CSS文字样式 文字颜色与背景颜色 CSS文字颜色是通过color属性控制的。如 color: blue; color: #0000ff; color: #00f; color: rgb(0,0,255); CSS背景颜色是通过background-color属性控制的。 文字的排版 CSS文字样式 文字加粗、倾斜与大小写 CSS中文字加粗是通过font-weight属性控制的。如 font-weight: normal; font-weight: bold; CSS中文字倾斜是通过font-style属性控制的。如 font-style: normal; font-style: oblique font-style: italic; 文字的排版 CSS文字样式 文字加粗、倾斜与大小写 CSS中英文字母大小写是通过text-transform属性控制的。如 text-transform : capitali