商务网页第14课.pptVIP

4.2 用CSS设置文本样式 采用CSS设置文本样式，是CSS的主要功能之一。文本样式包括文本的文字属性（包括字体、字号、粗体字、斜体字、字间距等）和文本的段落属性等。 4.2.1 设置文字属性 1．设置字体 CSS中，设置字体的属性需要使用文字类标签选择符、类选择符或ID选择符，及其字体属性“font-family”（也可以使用“font”属性为所有文本设置字体属性）。设置方法为 选择符｛font-family:字体属性值列表｝ 其中，字体属性值列表为楷体、宋体、黑体、仿宋等系统已经安装的字体列表，中间以逗号“,”分隔。执行时按照先后顺序依次判断该字体在当前用户的计算机中是否存在，如果存在则使用该字体；如果不存在则判断一个字体属性值。如果字体属性值列表在当前用户计算机中均没有，则使用该用户计算机系统中默认的字体。 html head titleCSS文本字体设置示例/title style h4 { font-family:黑体,楷体,宋体} p {font-family:方正楷体,方正草书,楷体} font { font-family:方正行楷,方正隶书,狂草} /style /head body h4标题h4字体设置实例/h4 p段落字体设置实例/p font文字标签font字体设置实例/font /body /html 2．设置字的大小 字的大小共有5种表达形式，常用的字的大小表达形式如表4.3所示。 表4.3 CSS常用的字的大小表达形式 CSS中，设置字的大小的属性需要使用文字类标签选择符、类选择符或ID选择符，及其字体属性“fong-size”。设置方法为 选择符{fong-size:字的大小属性值} html head titleCSS文本字号大小设置示例/title style .w-xlarge{ font-size:x-large} .w-larger{ font-size:larger} .l-em{ font-size:2em} .l-in{ font-size:0.5in} .l-px{ font-size:24px} .l-pt{ font-size:24pt} .p-percent{ font-size:120%} .i-inherit{ font-size:inherit} /style /head body p class=w-xlarge段落1字体大小应用实例x-large/p p class=w-larger段落2字体大小应用实例larger/p p class=l-em段落3字体大小应用实例2em/p p class=l-in段落4字体大小应用实例0.5in/p p class=l-px段落5字体大小应用实例24px/p p class=l-pt段落6字体大小应用实例24pt/p p class=p-percent段落7字体大小应用实例120%/p p class=i-inherit段落8字体大小应用实例inherit/p /body /html 3．设置粗体字 在HTML中，粗体字只有一种形式，即用粗体字标签b来加粗字体。但在CSS中，字体粗细可以用数值来定义，表达能力更出色。CSS中，字体粗细的表达形式主要有3种（见表4.4）。 表4.4 CSS字体粗细表达形式表 CSS中，设置字体粗细的属性需要使用文字类标签选择符、类选择符或ID选择符，及其字体属性“font-weight”。设置方法为 选择符{fong-weight:字体粗细属性值} html head titleCSS文本粗细设置示例/title style .w-bolder{ font-weight:bolder} .w-bold{ font-weight:bold} .w-lighter{ font-weight:lighter} .l-myvalue{ font-weight:800} .i-inherit{ font-weight:inherit} /style /head body p class=w-bolder段落1字体粗细应用实例bolder/p p class=w-bold段落2字体粗细应用实例bold/p p class=w-lighter段落3字体粗细应用实例lighter/p p class=l-myvalue段落4字体粗细应用实例800/p p class=i-inherit段落5字体粗细应用实例inherit/p/body /html 4.设置斜体字 在CSS中，文字倾斜有3个值，即：正常、斜体、偏斜