任务4.1使用CSS编辑网页中的文字.pptxVIP

任务4.1使用CSS编辑网页中的文字

任务介绍使用CSS设置页面特定模块中的文本字体、颜色、行高、位置，调整网页链接的文字颜色，下画线样式等，效果如图，为浏览者呈现更好的视觉效果。

任务分析文字是网页中最基本的元素，同时文字的修饰也是网页美化中重要的一环，在任务中，文字的大小，阴影效果如何设置的？一些特殊的图标文字怎么添加的？同时掌握列表样式的设置方式。

1文本样式设置◎设置CSS的字体属性◎调用外部字体

设置CSS的字体属性1.字体设置—font-family字体族科实际上就是CSS中设置的字体，用于改变HTML标签或元素的字体。语法：font-family:字体1,字体2,字体3;浏览器不支持第一个字体时，会采用第二个字体；前两个字体都不支持，则采用第三个字体，以此类推。浏览器不支持定义的所有字体，则会采用系统的默认字体。中文字体需要加英文状态下的引号，各字体之间必须使用英文状态下的逗号隔开。英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或者双引号，例如font-family:arialblack;。

设置CSS的字体属性2.字号大小—font-size字号大小属性用作修改字体显示的大小。语法：font-size:大小取值；取值范围：绝对大小：xx-small|x-small|small|medium|large|x-large|xx-large；相对大小：larger|smaller；长度值或百分比。绝对大小根据对象字体进行调节。绝对大小的单位有px（像素）、in（英寸）、cm（厘米）、mm（毫米）、pt（点），推荐使用px，一般浏览器默认文字大小为16px。相对大小则是相对于父对象中字体尺寸进行相对调节，使用em的较多，如果浏览器默认文字大小为16px，则1em=16px，1.5em=24px。百分比取值基于父对象中字体的尺寸。

设置CSS的字体属性3.字体风格—font-style字体风格就是字体样式，主要是设置字体是否为斜体。语法：font-style:样式的取值；取值范围：normal|italic|oblique。normal(缺省值)是以正常的方式显示；italic则是以斜体显示文字；oblique属于其中间状态，以偏斜体显示。4.字体加粗—font-weight字体加粗用于设置字体的粗细，实现对一些字体的加粗显示。语法：font-weight:字体粗度值；取值范围：normal|bold|bolder|lighter|number。normal(缺省值)表示正常粗细；bold表示粗体；bolder表示特粗体；lighter表示特细体；number表示font-weight还可以取数值，其范围是100-900，实际项目开发中主要使用normal和bold。

设置CSS的字体属性5.小型的大写字母—font-variant小型的大写字母用来设置英文字体是否显示为小型的大写字母。语法：font-variant：取值；取值范围：normal|small-caps。normal(缺省值)表示正常的字体，small-caps表示英文显示为小型的大写字母字体。6.复合属性：字体—fontfont属性是复合属性，用作对不同字体属性的略写。语法：font:字体取值；取值：字体风格、小型的大写字母、文本的粗细、字体大小、行高、字体族科之间使用空格相连接。font复合属性要按照固定的font-style、font-variant、font-weight、font-size/line-height、font-family的顺序编写，不需要的可以不写，但要保证顺序正确。

调用外部字体

下载FontAwesome将fonts文件和font-awesome.min.css复制到站点中

设置CSS的字体属性字体属性-@font-face规则语法：@font-face{font-family:myFont;src:url(font/FZJZJW.ttf);}@font-faceCSSat-rule指定一个用于显示文本的自定义字体；字体能从远程服务器或者用户本地安装的字体加载font-family：定义字体名字，src:定义下载字体的URL在传统的网页制作过程中，涉及图标的情况大多用图片进行处理，图片有优势也有不足，我使用图片会增加总文件的大小，并带来很多额外的HTTP请求，增加服务器的负担，因此推荐用字体图标来代替图片，字体图标将图片字体化，通常是矢量的，能解决图片放大模糊的缺点

2◎文本属性文