商务网页第14课课件.ppt

1、4.2 用CSS设置文本样式l 采用CSS设置文本样式，是CSS的主要功能之一。文本样式包括文本的文字属性（包括字体、字号、粗体字、斜体字、字间距等）和文本的段落属性等。4.2.1 设置文字属性1设置字体l CSS中，设置字体的属性需要使用文字类标签选择符、类选择符或ID选择符，及其字体属性“font-family”（也可以使用“font”属性为所有文本设置字体属性）。设置方法为选择符font-family:字体属性值列表l 其中，字体属性值列表为楷体、宋体、黑体、仿宋等系统已经安装的字体列表，中间以逗号“,”分隔。执行时按照先后顺序依次判断该字体在当前用户的计算机中是否存在，如果存在则使用该

2、字体；如果不存在则判断一个字体属性值。如果字体属性值列表在当前用户计算机中均没有，则使用该用户计算机系统中默认的字体。CSS文本字体设置示例 h4 font-family:黑体,楷体,宋体 p font-family:方正楷体,方正草书,楷体 font font-family:方正行楷,方正隶书,狂草 标题h4字体设置实例 段落字体设置实例 文字标签font字体设置实例 l 2设置字的大小l 字的大小共有5种表达形式，常用的字的大小表达形式如表4.3所示。表4.3 CSS常用的字的大小表达形式l CSS中，设置字的大小的属性需要使用文字类标签选择符、类选择符或ID选择符，及其字体属性“fong

3、-size”。设置方法为选择符fong-size:字的大小属性值CSS文本字号大小设置示例 .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 段落1字体大小应用实例x-large 段落2字体大小应用实例larger 段落3字体大小应用实例2em 段落4字体大小应用

4、实例0.5in 段落5字体大小应用实例24px 段落6字体大小应用实例24pt 段落7字体大小应用实例120%段落8字体大小应用实例inherit3设置粗体字l 在HTML中，粗体字只有一种形式，即用粗体字标签来加粗字体。但在CSS中，字体粗细可以用数值来定义，表达能力更出色。CSS中，字体粗细的表达形式主要有3种（见表4.4）。表4.4 CSS字体粗细表达形式表l CSS中，设置字体粗细的属性需要使用文字类标签选择符、类选择符或ID选择符，及其字体属性“font-weight”。设置方法为选择符fong-weight:字体粗细属性值CSS文本粗细设置示例 .w-bolder font-wei

5、ght:bolder .w-bold font-weight:bold .w-lighter font-weight:lighter .l-myvalue font-weight:800 .i-inherit font-weight:inherit 段落1字体粗细应用实例bolder 段落2字体粗细应用实例bold 段落3字体粗细应用实例lighter 段落4字体粗细应用实例800 段落5字体粗细应用实例inherit4.设置斜体字l 在CSS中，文字倾斜有3个值，即：正常、斜体、偏斜体。设置字体倾斜需要使用文字类标签选择符、类选择符和ID选择符，及其“font-style”属性。设置方法为选

6、择符font-style:字体倾斜属性值其中，字体倾斜属性值有normal（正常）、italic（斜体）、oblique（强制倾斜）、inherit（继承）。CSS文本字体倾斜设置示例 .i-normal font-style:normal .i-italic font-style:italic .i-oblique font-style:oblique .i-inherit font-style:inherit 段落1字体倾斜应用实例normal 段落2字体倾斜应用实例italic 段落3字体倾斜应用实例oblique 段落4字体倾斜应用实例inherit5设置文字颜色l CSS中，文字颜色

7、的概念与HTML中是相同的，具有3种表达形式，即英文单词表达、十六进制数值表达和RGB代码值表达。l CSS设置文字颜色需要使用文字类标签选择符、类选择符和ID选择符，及其“color”属性。设置方法为选择符color:文字颜色属性值4.2.2 设置段落属性l 本文所称的段落属性，主要针对段落的排版，主要包括设置字符间距与单词间距、文本缩进、文本对齐、行高等。1设置字符间距和单词间距l CSS中可以设置文本的字符间距和单词间距。（1）设置字符间距在CSS中设置文本字符间距需要使用文本类标签选择符、类选择符和ID选择符，及其“letter-spacing”属性。设置方法为选择符letter-sp

8、acing:属性值（2）设置单词间距在CSS中设置文本单词间距需要使用文本类标签选择符、类选择符和ID选择符，及其“word-spacing”属性。设置方法为选择符word-spacing:属性值l 无论是设置字符间距，还是设置单词间距，都有3种表达形式：normal、固定数字（可以是负值，通常采用像素值）和inherit。CSS字符间距和单词间距设置示例 .letter-normal letter-spacing:normal .letter-value letter-spacing:3px .letter-inheri letter-spacing:inherit .word-normal

9、 word-spacing:normal .word-value word-spacing:10px .word-inherit word-spacing:inherit 段落1字符间距应用实例normal：A true friend is someone who accepts your past,supports your present and encourages your future.真正的朋友会接受你的过去，力挺你的现在，鼓舞你的将来。段落2字符间距应用实例固定像素值3px：A true friend is someone who accepts your past,suppor

10、ts your present and encourages your future.真正的朋友会接受你的过去，力挺你的现在，鼓舞你的将来。段落3字符间距应用实例inherit：A true friend is someone who accepts your past,supports your present and encourages your future.真正的朋友会接受你的过去，力挺你的现在，鼓舞你的将来。段落4单词间距应用实例normal：A true friend is someone who accepts your past,supports your present a

11、nd encourages your future.真正的朋友会接受你的过去，力挺你的现在，鼓舞你的将来。段落5单词间距应用实例固定像素值10px：A true friend is someone who accepts your past,supports your present and encourages your future.真正的朋友会接受你的过去，力挺你的现在，鼓舞你的将来。段落6单词间距应用实例inherit：A true friend is someone who accepts your past,supports your present and encourages

12、your future.真正的朋友会接受你的过去，力挺你的现在，鼓舞你的将来。2设置文本缩进l CSS中设置文本缩进，需要使用段落标签选择符、类选择符和ID选择符，及其“text-indent”属性。设置方法为：选择符text-indent:文本缩进属性值l 其中，文本缩进属性值与字的大小的属性值概念相同，常见的表达形式如表4.5所示。表4.5 常见的文本缩进属性值表达形式 值含义及描述length定义固定的缩进。默认值为0。可用px、pt、in、cm、em、mm等多种度量单位%定义基于父元素宽度的百分比的缩进inherit规定应该从父元素继承 text-indent 属性的值3设置文本对齐l

13、 CSS中，可以对段落的内容设置水平对齐和垂直对齐。（1）设置水平对齐设置水平对齐比较常用，在CSS中，设置文本段落水平对齐需要使用段落标签选择符、类选择符和ID选择符，及其“text-align”属性。设置方法为选择符text-align:水平对齐属性值其中，水平对齐属性值有：left（左对齐）、right（右对齐）、center（居中）、justify（两端对齐）。（2）设置垂直对齐设置文本段落垂直对齐不常用。在CSS中，设置文本段落垂直对齐需要使用段落标签选择符、类选择符和ID选择符，及其“vertical-align”属性。设置方法为选择符vertical-align:垂直对齐属性值其

14、中，垂直对齐属性值有：top（上对齐）、middle（垂直居中）、bottom（下对齐）。4设置行高l 行高，就是段落的行距。l 在CSS中，设置段落行距需要使用段落标签选择符、类选择符和ID选择符，及其“line-height”属性。设置方法为选择符line-height:行高属性值其中，行高属性值的表达形式如表4.6所示。表4.6 CSS行高属性值表达形式 值描述normal默认值。设置合理的行间距number设置数字，此数字会与当前的字体尺寸相乘来设置行间距，可以使用1、1.5、2等数字形式length设置固定的行间距。可以采用px、pt、in、cm、mm等度量单位%基于当前字体尺寸的百

15、分比行间距inherit规定应该从父元素继承line-height属性的值 CSS行距设置示例 .line-normal line-height:normal .line-num line-height:2 .line-lenght line-height:15px .line-percent line-height:300%.line-inherit line-height:inherit 段落1行距应用实例normal：A true friend is someone who accepts your past,supports your present and encourages yo

16、ur future.真正的朋友会接受你的过去，力挺你的现在，鼓舞你的将来。段落2行距应用实例文字高度的倍数：A true friend is someone who accepts your past,supports your present and encourages your future.真正的朋友会接受你的过去，力挺你的现在，鼓舞你的将来。段落3行距应用实例固定高度：A true friend is someone who accepts your past,supports your present and encourages your future.真正的朋友会接受你的过去，

17、力挺你的现在，鼓舞你的将来。段落4行距应用实例文字高度的百分比：A true friend is someone who accepts your past,supports your present and encourages your future.真正的朋友会接受你的过去，力挺你的现在，鼓舞你的将来。段落5行距应用实例继承：A true friend is someone who accepts your past,supports your present and encourages your future.真正的朋友会接受你的过去，力挺你的现在，鼓舞你的将来。4.2.3 用CSS

18、设置文本综合范例l 制作一个网页，显示两段文本。第1段文本使用系统默认的显示效果，第2段文本采用CSS样式自定义显示效果。要求综合使用大标题、小标题，字体、字号、颜色、字符间距、行距、加粗、斜体、缩减、对齐等CSS设置方法，采用外部链接样式完成范例制作。1编写HTML主文档主文档“CSS设置文本综合范例.html”CSS文本设置综合范例 CSS文本设置综合范例 默认显示效果 A true friend is someone who accepts your past，supports your present and encourages your future。真正的朋友会接受你的过去，力挺

19、你的现在，鼓舞你的将来。CSS显示效果 A true friend is someone who accepts your past，supports your present and encourages your future。真正的朋友会接受你的过去，力挺你的现在，鼓舞你的将来。2编写CSS样式文档“csstextmodal.css”，保存在主文档下级目录css/下h4 text-align:left;font-family:微软雅黑;font-size:24px;font-style:italic;color:#0000CC;.text-normel .text-css text-indent:29px;text-align:left;font-family:隶书;font-size:24px;font-weight:bolder;color:#339900;letter-spacing:2px;word-spacing:3px;line-height:30px;作业：教材P232，简述题与操作题2。