使用CSS设置文字效果.ppt

《使用CSS设置文字效果.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、使用CSS设置文字效果1制作个人博客首页——设置文字样式2制作个人博客子页——设置段落和其他文字样式3制作个人博客排行榜——设置列表样式目录页ContentsPage案例一制作个人博客首页——设置文字样式众所周知，文字是网页中最为重要的元素，同样，对网页中文字的修饰也是至关重要的。在第二章中，我们已经学会了如何在网页中插入文字、段落和标题等。在本案例中，我们将通过制作个人博客首页（参见图3-1），学习如何运用CSS对文字进行美化和修饰，包括设置文字的字体、字号、颜色和加粗效果等。案例说明案例一制作个人博客首页——设置文字样式为便于理解，我们将本案例分为两部

2、分来制作，第1部分插入文字等网页元素，构建网页HTML主体结构；第2部分使用CSS的各种文字属性对文字进行修饰，以达到效果图上的要求。CSS样式表的核心内容就是各种属性，对网页效果产生直接作用的也是这些属性。案例步骤构建HTML结构构建CSS样式12一、CSS文字样式常用属性设置字体：font-family设置字号：font-size设置斜体：font-style设置加粗：font-weight设置颜色：color设置变体：font-variant组合设置字体属性：font属性为font-family，基本语法为：font-family:字体1,字体2,字

3、体3;。例如：1．设置文字字体p{font-family:宋体，楷体，隶书;}各字体之间用英文逗号隔开。另外，有些字体中间会出现空格，如TimesNewRoman字体，这时需要用英文双引号将字体扩起来。属性为font-size，基本语法为：2．设置文字大小font-size:尺寸

4、百分比

5、关键字;尺寸：使用尺寸设置文字大小，一般使用的单位为px（像素）。百分比：以父元素中的字体大小为参考值，如果没有设置父元素的字体大小，则是相对于浏览器默认字体大小的百分比。关键字：使用关键字设置文字大小，从小到大包括xx-samll（极小）、x-small（较小）、sma

6、ll（小）、medium（标准大）、large（大）、x-large（较大）和xx-large（极大）7个关键字。在不同类型的浏览器中，使用同一关键字设置的文字尺寸有时候会不同，因此不推荐使用关键字设置文字尺寸。属性为font-style，基本语法为：3．设置斜体font-style:normal

7、italic

8、oblique;属性值说明normal正常显示（默认）italic斜体显示文字oblique比斜体更斜的歪斜体显示表3-2font-style各属性值的意义属性为font-weight，基本语法为：4．设置文字粗细font-weight:norma

9、l

10、bold

11、bolder

12、lighter

13、number;例如：p{font-weight:600;}表3-3font-weight各属性值的意义属性值说明normal正常粗细（默认）bold粗体（约为数字700）bolder加粗体lighter细体number100～900九个级别，数字越大文字越粗。属性为color，基本语法：5．设置文字颜色color:颜色的名称

14、RGB值

15、十六进制数;其属性值可以是颜色的英文名称，如red、blue；也可以是颜色的RGB值，如rgb(255,0,0)；还可以是颜色的十六进制值，如#ff0000。为网页元素设置颜色的技

16、巧在HTML页面中，颜色统一使用RGB颜色模式，该模式下，颜色由红、绿、蓝三原色按一定比例混合而成。这三种原色的取值范围均为0～255，共可混合出一千多万种颜色。例如，当将这三种原色的值都设为255时，颜色为白色；都设为0时，颜色为黑色。RGB颜色也可以使用十六进制表示，如#ff0000，其中前两位为红色分量，中间两位为绿色分量，最后两位是蓝色分量。属性为font-variant，作用是将所有小写字母转换为小型大写字母，基本语法：6．设置变体font-variant:normal

17、small-caps;表3-4font-variant各属性值的意义属性值说

18、明normal正常字母（默认）small-caps小型大写字母可以用font来组合设置文字属性。例如：7．组合设置文字属性p{font:italicboldsmall-caps15pt宋体;}表示该段落文字为斜体加粗体的宋体文字，大小为15像素，其中英文采用小型大写字母显示。二、网页中元素的长度单位网页中为了准确显示各个元素，许多CSS属性都设置了详细而具体的尺寸。属性中尺寸可以用正数或负数加上一个单位来表示。尺寸为0时不需要单位。一般来说，网页中元素的长度单位可分为绝对长度单位和相对长度单位2种。绝对长度单位所定义的元素大小一般都比较固定，大小显示不受其

19、他因素影响，一般在网页制作中使用较少。1．绝对长度单位表3-5绝对