HTML+CSS+JavaScript网页设计 第8章 使用CSS设置文本样式课件.ppt

《HTML+CSS+JavaScript网页设计 第8章 使用CSS设置文本样式课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第8章　使用CSS设置文本样式本章概述本章的学习目标主要内容1本章概述CSS规则包含了两个部分：选择器(用于指定规则应用的元素)和属性，上一章学习了CSS的各种选择器的使用方法，从本章开始介绍CSS的属性，CSS的属性有很多，本章主要介绍与文本样式相关的属性，包括控制文本的字体、外观、颜色、特殊效果以及换行格式等。通过本章的学习读者应掌握如何使用CSS样式美化网页中的文本。2本章的学习目标掌握控制文本字体的CSS属性了解font-size属性值的几种格式掌握font属性值中包含的多个属性的先后顺序了解CSS中的表

2、示颜色的几种模式掌握CSS中的常用文本格式化属性的用法3主要内容8.1设置文本字体8.2文本格式化8.3本章小结8.4思考和练习48.1设置文本字体文本是网页内容的主要元素，当文本较多时，如果只是简单的罗列，会让访问者觉得单调乏味，因此，合理编排和有效控制文字的显示方式，就显得十分重要了。CSS提供了大量用来控制文本样式的属性，这些属性可以分成两组：直接影响字体及其外观的属性(包括使用的字型，是否为正体、粗体或斜体，以及文本尺寸等)。具有的效果与所用字体无关的属性(包括文本颜色、单词或字母间的距离等)。5font

3、-family属性font-family属性用来指定应用CSS规则的元素中文本的字体。前面的一些示例中已经使用过该属性。该属性中指定的字体受用户环境的影响，浏览器只能在客户端计算机中已经安装对应字型的情况下才能以指定字体显示HTML文本，为了确保指定的字体能够正确显示，该属性还允许同时指定多种字体，浏览器将按顺序采用第一个可用的字体。6嵌入字体所谓“嵌入字体”，就是加载服务器端的字体文件，让浏览器可以显示用户计算机上没有安装的字体。在CSS3之前，网页必须使用已在客户端计算机上安装好的字体，所以在设计中会有诸多限

4、制。而在CSS3中，可以使用@font-face来使得所有客户端加载服务器端的字体文件，从而使得所有用户的浏览器都能正常显示这种字体，语法格式如下：@font-face{font-family:字体名称;src:url("字体文件路径");}7font-size属性font-size属性用来为字体设置大小。该属性的值可以由多种指定方式：绝对尺寸、相对尺寸、长度和百分比。绝对尺寸从下到大有如下几个取值，每一个值都对应一个固定的尺寸：xx-small、x-small、small、medium、large、x-larg

5、e、xx-large。8font-size属性相对尺寸是与周围文本相比较，有smaller和larger两个取值。smaller比当前默认字号小，larger比当前默认字号大。长度是指给出具体数值，然后跟一个表示长度的单位。单位的类型有相对单位和绝对单位。相对单位共有3种：px(像素)，与屏幕的分辨率相关联；以及em和ex，二者都与字体的大小相关联；绝对单位有5种：pt(磅)、pc(pica)、in(英寸)、cm(厘米)和mm(毫米)。百分比方式给出一个与另一值相关的值。9font-weight属性CSS的fon

6、t-weight属性用来设置字体的粗细，它的可能取值有：normal(正常粗细)、bold(粗体)、bolder(特粗，比粗体还粗一些)、lighter(特细)、100、200、300、400、500、600、700、800、900。后面几个数字值越大越粗，400等同于normal，700等同于bold。在这些值中，bold是最常使用的。通常情况下，网页的标题，比较醒目的文字或重点突出的内容一般都会用粗体。10font-style属性font-style属性用来设置字体的风格，可取值包括normal、italic

7、和oblique。其中，normal是正常字体，italic是斜体，oblique是倾斜的字体样式在印刷学中，一个字体的斜体(italic)版本通常是一种基于笔迹的特殊风格版本，而伪斜体(oblique)则是将正常版本倾斜一个角度使用。在CSS中，当指定了font-style属性为italic时，浏览器通常会取字体的正常版本，然后简单倾斜一定角度进行渲染(与使用oblique时应有的效果一样)。11font-variant属性font-variant属性主要用于定义小型大写字母文本，这意味着所有的小写字母均会被转

8、换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。小型大写字体(smallcapsfont)就像是一个较小版本的大写字母集合。font-variant属性有两个可能的取值：normal及small-caps。默认值为normal，即标准字体显示；small-caps表示使用小型大写字体显示。12font属性使用font属性可以将将前面的几个属性联合成