《HTML5+CSS3网页制作教程》课件_第11章.pptx

模块11CSS页面样式属性

11.1文本样式

11.2背景样式

11.3边框样式

11.4列表样式

11.5案例：使用CSS美化网页思考与练习题

BACK

11.1文本样式

开发网页时，页面的文本样式是最基本的样式。文本样式包含两种，一种是字体样式，包括字体类型、字体大小、字体粗细等；另一种是文本外观样式，包括文本颜色、文

本水平对齐方式、段落首行缩进、文本修饰等。

属性

说明

font-family

设置字体的类型

font-size

设置字体的大小

font-style

设置字体倾斜效果

font-weight

设置字体的粗细

11.1.1字体样式

CSS字体样式常用属性如表11-1所示。

表11-1CSS字体样式常用属性

1.字体类型font-family

字体类型其实就是我们熟悉的“宋体”“隶书”等字体。在CSS中，使用font-family属性来定义字体类型。

语法格式如下：

font-family:字体1,字体2,字体3,...;

【例11-1】设置字体类型。

!doctypehtml

html

head

metacharset=utf-8

title例11-1/title

styletype=text/css

P{

font-family:黑体，宋体；

}

/style

/head

body

p字体应显示为黑体。/p

/body

/html

2.字体大小font-size

在CSS中，使用font-size属性来定义字体大小。语法格式如下：

font-size:关键字|数值；

说明：关键字属性值不常用，有x-small(较小)、

medium(默认值，正常)、large(大)等。数值是常用的取值方式，常用单位如表11-2所示。

单位

说明

px

像素，是指显示器上最小的点，实际显示大小与显示器相关，所以是相对单位。px单位最常用，推荐使用

em

相对于当前元素内文本的字体尺寸。如元素的font-size为16px,那么lem=16px,所以em也是相对单位

%

百分比，相对单位。如设置样式“font-size:12px;line-height:150%”,那么行高(行间距)为字体的150%(12×1.5=18px)

cm

厘米，绝对单位

mm

毫米，绝对单位

in

英寸，绝对单位

pt

点，绝对单位，1点=1/72英寸≈0.3527毫米

表11-2CSS字体大小常用单位

【例11-2】设置字体大小。

!doctypehtml

html

head

metacharset=utf-8

title例11-2/title

styletype=text/css

#pl{

font-size:18px;

}

#p2{

font-size:14px;

}

/style

/head

body

pid=pl段落1,字体大小为18像素。/p

pid=p2段落2,字体大小为14像素。/pbody

/html

3.字体风格font-style

font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体。

语法格式如下：

font-style:关键字；

说明：font-style的属性取值如表11-3所示。

属性值

说明

normal

默认值，正常体

italic

斜体，只有自带斜体属性的字体才能正常显示italic斜体样式

oblique

倾斜，没有斜体属性的文字倾斜就需要设置为oblique值

inherit

从父元素继承字体样式。该属性值在其他属性中也适用。因其不常用，所以接下来其他属性的取值不再将其列出

表11-3font-style属性取值

【例11-3】设置字体斜体。

!doctypehtml

html

head

metacharset=utf-8

title例11-3/title

styletype=text/css

P{

font-family:微软雅黑；

}

#pl{

font-style:italic;

}

#p2{

font-style:oblique;

}

/style

/head

body

pid=pl段落1,斜体italic。/p

pid=p2段落2,字体倾斜oblique。/p

p段落3,正常字体。/p

/body

上述代码在浏览器中的预览效果如图11-1所示，可以

看出段落1和段落2均显示为斜体。

段落1,斜体italic。

段落2,字体倾斜oblique。

段落3,正常字体。

图11-1设置字体斜体

4.字体粗细font-weig