网页设计第十三次.ppt

《网页设计第十三次.ppt》由会员分享，可在线阅读，更多相关《网页设计第十三次.ppt（25页珍藏版）》请在三一办公上搜索。

1、网页制作基础教程,延安大学计算中心,牛永洁,内容提要,本章主要学习内容-格式化文本选择字体、颜色改变字号格式化单词和字母格式化整个段落给列表定义样式,格式化文本,图片固然吸引人，但是一个网页中占大部分的仍然是文本。要使网站上的文本看起来更激动人心，对文本下一番功夫还是很值得的。你可以做的第一件事情就是给网页中不同部分（标题，段落等）应用不同的字体。,格式化文本-选择字体,字体：font-family:字体名1，字体名2;不幸的是，你不能随意选择字体，因为你选择的字体在本机上显示可能正常，但是如果客户的计算机上没有安装该字体，那么客户计算机就会使用自己计算机上的默认字体显示，一般这样的字体很难看

2、。解决办法：设置多种字体，如果字体1没有，使用字体2，。,格式化文本,Arial,Helvetica,sans-serifTimes New Roman,Times,serifCourier New,Courier,monospaceGeorgia,Times New Roman,Times,serifVerdana,Arial,Helvetica,sans-serifGeneva,Arial,Helvetica,sans-serifTahoma,Lucida Grande,Arial,sans-serifLucida Console,Monaco,monospaceMarker Felt,C

3、omic Sans MS,fantasyCentury 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（紫

4、色）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=16p

5、x,格式化文本-改变字号,百分比%：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,

6、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%

7、,文本对齐方式,文本的对齐方式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四个数据可以同时控制四周，分别控制上、右、下、左的距离。,首行与首字母的控制,:f

8、irst-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:outside才有效。,修饰列表,使用图形项目符号：list-style-image:url(images/bullet.gif);注意此处不要使用引号。可以从找到很多免费的项目符号。,