网页设计第十三次.ppt

网页制作基础教程,延安大学计算中心,牛永洁,内容提要,本章主要学习内容-格式化文本 选择字体、颜色 改变字号 格式化单词和字母 格式化整个段落 给列表定义样式,格式化文本,图片固然吸引人，但是一个网页中占大部分的仍然是文本。 要使网站上的文本看起来更激动人心，对文本下一番功夫还是很值得的。 你可以做的第一件事情就是给网页中不同部分（标题，段落等）应用不同的字体。,格式化文本-选择字体,字体：font-family:字体名1，字体名2; 不幸的是，你不能随意选择字体，因为你选择的字体在本机上显示可能正常，但是如果客户的计算机上没有安装该字体，那么客户计算机就会使用自己计算机上的默认字体显示，一般这样的字体很难看。 解决办法：设置多种字体，如果字体1没有，使用字体2，。,格式化文本,Arial, Helvetica, sans-serif “Times New Roman“, Times, serif “Courier New“, Courier, monospace Georgia, “Times New Roman“, Times, serif Verdana, Arial, Helvetica, sans-serif Geneva, Arial, Helvetica, sans-serif Tahoma, “Lucida Grande“, Arial, sans-serif “Lucida Console“, Monaco, monospace “Marker Felt“, “Comic Sans MS“, fantasy “Century Gothic“, “Gill Sans“, Arial, sans-serif,如果字体名由多个单词组成，并中间有空格，请”括起,格式化文本-文本颜色,更改字体的颜色：color：#3e8988 设置颜色的其他办法： 十六进制：#xxxxxx； RGB color:rgb(红，绿，蓝)，每个分项范围0-255 直接使用单词：,格式化文本-文本颜色,aqua（浅绿） black（黑） blue（蓝） fuchsia（紫红） gray（灰色） green（绿） lime（石灰色） maroon（栗色） navy（海军蓝）,olive（橄榄色） orange（橙色） purple（紫色） red（红色） silver（银色） teal（水鸭色） white（白） yellow（黄）,格式化文本-改变字号,改变字号：font-size：大小 字号单位：像素(px),百分比，em，关键字 例如：font-size：36px-中间不要有空格 基准文本尺寸：浏览器正常显示文本时，如果该文本不是标题，那么该文本的大小就是基本文本尺寸，一般为16px。,格式化文本-改变字号,关键字：xx-small, x-small, small, medium, large, x-large, xx-large 。 每个关键字在基准文本的基础上增加或者减少1.2倍。 large = 19px, small = 13px， medium=16px,格式化文本-改变字号,百分比%：100%=一个基准单位 em：1em=一个基准单位 32px=2em 中间不要有空格，后面也不要加s（2ems）,格式化单词,斜体：font-style: italic; 正常显示：font-style: normal; 字体加粗：font-weight: bold; 字体正常显示：font-weight: normal; 大写文本：text-transform: uppercase; 小写文本：text-transform:lowercase ; 正常显示文本：text-transform: none;,文本的装饰,text-decoration: underline, overline, line-through, blink 可以联合使用 比如：text-decoration: underline overline; blink在IE中无效 取消装饰：text-decoration: none;,字母与字间距,字母之间的间距：letter-spacing：xpx; 间距值可以取负值,单词间距,单词之间间距的调整：word-spacing: xpx;,段落的格式化,行间距：line-height：可以利用px，em，百分比 一般浏览器正常设置的行间距是line-height：120% 推荐使用百分比来调整行间距 如： line-height：150% 加大行间距就大于120%,减少行间距就小于120%,文本对齐方式,文本的对齐方式text-align: 取值：left, right, justify, center 首行缩进：text-indent: x（em，px）; 首航缩进建议使用em，因为1em就是一个字符的宽度。,控制段落边距,控制段落之间的距离，可以使用margin控制 单位：em，px，百分比, margin-top：上边距 margin-left：左边距 margin-right：右边距 margin-bottom：下边距 上述的数值可以使用负值，让两个段落之间有部分重叠。,控制段落边距,margin:1 2 3 4四个数据可以同时控制四周，分别控制上、右、下、左的距离。,首行与首字母的控制,:first-letter 首字母 p:first-letter font-weight: bold; color: red; :first-line首行 :first-line text-transform: uppercase; ,修饰列表,无序列表：disc、circle 、 square 有序列表：decimal、decimal-leading-zero、 upper-alpha、lower-alpha、 upper-roman、 lower-roman 。,修饰列表,修饰列表,可以使用list-style-type: square;来装饰列表 list-style-position: outside;或者list-style-position: inside; 来修改符号的位置。,修饰列表,可以使用padding-left来调整项目符号与文本之间的距离。注意：只有设定list-style-position: outs