1使用CSS设置文字效果课件.ppt

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

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

3、隶书;各字体之间用英文逗号隔开。另外，有些字体中间会出现空格，如各字体之间用英文逗号隔开。另外，有些字体中间会出现空格，如Times New RomanTimes New Roman字体，这时需要用英文双引号将字体扩起来。字体，这时需要用英文双引号将字体扩起来。属性为font-size，基本语法为：2设置文字大小font-size:font-size:尺寸尺寸|百分比百分比|关键字关键字;尺寸：使用尺寸设置文字大小，一般使用的单位为尺寸：使用尺寸设置文字大小，一般使用的单位为pxpx（像素）。（像素）。百分比：以父元素中的字体大小为参考值，如果没有设置父元素的百分比：以父元素中的字体大小为参考

4、值，如果没有设置父元素的字体大小，则是相对于浏览器默认字体大小的百分比。字体大小，则是相对于浏览器默认字体大小的百分比。关键字：使用关键字设置文字大小，从小到大包括关键字：使用关键字设置文字大小，从小到大包括xx-samllxx-samll（极（极小）、小）、x-smallx-small（较小）、（较小）、smallsmall（小）、（小）、mediummedium（标准大）、（标准大）、largelarge（大）、（大）、x-largex-large（较大）和（较大）和xx-largexx-large（极大）（极大）7 7个关键字。在不同类型个关键字。在不同类型的浏览器中，使用同一关键字设置

5、的文字尺寸有时候会不同，因此不推的浏览器中，使用同一关键字设置的文字尺寸有时候会不同，因此不推荐使用关键字设置文字尺寸。荐使用关键字设置文字尺寸。属性为font-style，基本语法为：3设置斜体font-style:normal|italic|oblique;font-style:normal|italic|oblique;属性值说 明normal正常显示（默认）italic斜体显示文字oblique比斜体更斜的歪斜体显示属性为font-weight，基本语法为：4设置文字粗细font-weight:normal|bold|bolder|lighter|number;font-weight:

6、normal|bold|bolder|lighter|number;例如：例如：pfont-weight:600;pfont-weight:600;属性值说 明normal正常粗细（默认）bold粗体（约为数字700）bolder加粗体lighter细体number100900九个级别，数字越大文字越粗。属性为color，基本语法：5设置文字颜色color:color:颜色的名称颜色的名称|RGB|RGB值值|十六进制数十六进制数;其属性值可以是颜色的英文名称，如其属性值可以是颜色的英文名称，如redred、blueblue；也可以是颜色的；也可以是颜色的RGBRGB值，值，如如rgbrgb(

7、255,0,0)(255,0,0)；还可以是颜色的十六进制值，如；还可以是颜色的十六进制值，如#ff0000#ff0000。为网页元素设置颜色的技巧为网页元素设置颜色的技巧在在HTML页面中，颜色统一使用页面中，颜色统一使用RGB颜色模式，该模式下，颜色由红、颜色模式，该模式下，颜色由红、绿、蓝三原色按一定比例混合而成。这三种原色的取值范围均为绿、蓝三原色按一定比例混合而成。这三种原色的取值范围均为0255，共可混合出一千多万种颜色。例如，当将这三种原色的值都设为共可混合出一千多万种颜色。例如，当将这三种原色的值都设为255时，时，颜色为白色；都设为颜色为白色；都设为0时，颜色为黑色。时，颜色

8、为黑色。RGB颜色也可以使用十六进制表示，如颜色也可以使用十六进制表示，如#ff0000，其中前两位为红色分，其中前两位为红色分量，中间两位为绿色分量，最后两位是蓝色分量。量，中间两位为绿色分量，最后两位是蓝色分量。属性为font-variant，作用是将所有小写字母转换为小型大写字母，基本语法：6设置变体font-variant:normal|small-caps;font-variant:normal|small-caps;属性值说 明normal正常字母（默认）small-caps小型大写字母可以用font来组合设置文字属性。例如：7组合设置文字属性pfont:italic bold s

9、mall-caps 15pt pfont:italic bold small-caps 15pt 宋体宋体;表示该段落文字为斜体加粗体的宋体文字，大小为表示该段落文字为斜体加粗体的宋体文字，大小为1515像素，其中英文采像素，其中英文采用小型大写字母显示。用小型大写字母显示。二、网页中元素的长度单位二、网页中元素的长度单位网页中为了准确显示各个元素，许多CSS属性都设置了详细而具体的尺寸。属性中尺寸可以用正数或负数加上一个单位来表示。尺寸为0时不需要单位。一般来说，网页中元素的长度单位可分为绝对长度单位和相对长度单位2种。绝对长度单位所定义的元素大小一般都比较固定，大小显示不受其他因素影响，一

10、般在网页制作中使用较少。1绝对长度单位长度单位说 明ininch，英寸cmcentimeter，厘米mmmillimeter，毫米ptpoint，印刷的点数，1pt=1/72inchpcpica，1pc=12pt相对长度单位是指网页元素的大小相对于某个参照物来确定，如使用屏幕分辨率、父元素或浏览器作为参照物等。相对长度单位在网页设计中较常用，如表3-6所示。2相对长度单位长度单位说 明pxpx表示像素，当使用它作为文字或其他网页元素的尺寸单位时，屏幕分辨率越大，相同像素的网页元素就显得越小%以父元素大小的百分比来定义当前文字或其他网页元素的大小，如果没有设定父元素大小，则相对于浏览器默认字体大

11、小的百分比。一般情况下，浏览器默认的字体大小为16pxem以父元素大小的倍数来定义字体大小。例如，若父元素字体大小为12px，则1em就表示12px；2em就表示12px*2=24px。若没有设定父元素大小，则相对于浏览器默认字体大小的倍数 17 案例二 制作个人博客子页设置段落和其他文字样式在CSS中除了可以对文字本身设置样式外，还可以对多个文字的集合，即段落设置样式。下面，我们通过制作图3-3所示的个人博客子页，来学习设置段落样式和其他文字样式的方法，包括设置段落的对齐方式、缩进、行间距和段间距，以及英文字母大小写，文字的上划线和下划线效果等。案例说明案例说明 18 案例二 制作个人博客子

12、页设置段落和其他文字样式下面，我们开始个人博客子页的制作，读者需要重点掌握的是文字间距、段落对齐方式和缩进的设置方法。案例步骤案例步骤构建HTML结构构建CSS样式12一、一、CSS段落和其他文字样式属段落和其他文字样式属性性修饰文字：text-decoration；转换英文字母大小写：text-transform；设置中文字符间距：letter-spacing；设置英文单词间距：word-spacing；设置段落的水平对齐方式：text-align；设置段落缩进：text-indent；设置行间距（行高）：line-height；修饰文字是指为文字添加下划线、删除线和上划线等，属性为text

13、-decoration，基本语法为：1修饰文字text-decoration:underline|overline|line-through|blink|none;text-decoration:underline|overline|line-through|blink|none;属性值说 明underline为文字添加下划线overline为文字添加上划线line-through为文字添加删除线blink为文字添加闪烁效果（多数浏览器不支持）none没有文本修饰，常用于取消超链接产生的下划线属性为text-transform，基本语法为：2转换英文字母大小写text-transform:ca

14、pitalize|uppercase|lowercase;text-transform:capitalize|uppercase|lowercase;属性值说 明capitalize每个单词首字母大写uppercase所有字母大写lowercase所有字母小写none默认值显示属性为letter-spacing，用来调整中文字符或英文字母之间的间距，基础语法为：3设置中文字符间距letter-spacing:normal|letter-spacing:normal|长度长度;属性值说 明normal正常绝对数值如12px字体高如2em属性为word-spacing，用来调整英文单词之间的间距，

15、属性值和使用方法与letter-spacing属性相同。4调整英文单词间距属性为text-align，可以设置段落的左、中、右和两端对齐。该属性可应用于HTML中的任何块级标签，如、等。基础语法为：5设置段落的水平对齐方式text-align:left|right|center|justify;text-align:left|right|center|justify;属性取值说 明left文本左对齐right文本右对齐center文本居中对齐justify文本两端对齐属性为text-indent，基础语法为：6设置段落首行缩进text-indent:长度长度|百分比百分比;一般我们使用以下语句

16、，表示首行缩进2个字符。text-indent:2em;指调整行与行之间的距离，属性为line-height，还可以利用该属性让文字纵向居中。基础语法为：7调整行高line-height:normal|数字|长度|百分比;其中，“数字”表示使用绝对数值，如8px；“长度”表示设置为当前字高的倍数，如2em；百分比在设置行高时很少用。二、二、HTML常用符号常用符号在Dreamweaver的设计视图中输入一些符号时，由于它们与HTML代码的关键字有冲突，因此不能直接在代码视图中显示，而是转化成了相应的HTML代码，如表3-11所示。我们可以在设计视图中利用键盘或“插入”“HTML”“特殊字符”菜

17、单命令来输入这些符号，如图3-4所示，也可以直接在代码视图中输入这些符号的HTML代码（注意大小写）。符号HTML代码"'&>¥©®空格 28 例 行高的一个常用用法:设置文字垂直居中。29 案例三 制作个人博客排行榜设置列表样式列表能够使文字按一定的方式排列整齐，从而使内容井然有序。通过对列表设置CSS样式，可以制作出较好的版式效果。本案例通过制作图3-5所示的博客排行榜页面，来学习为列表设置CSS样式的方法。案例说明案例说明 30 案例三 制作个人博客排行榜设置列表样式在第二章中我们已经学习了HTML中的列表类型，以及插

18、入不同类型列表的方法。本案例中，我们着重围绕列表的3个样式属性（列表样式、列表图像和列表位置）来展开学习。案例步骤案例步骤一、构建HTML结构二、构建CSS样式12一、一、CSS列表样式常用属性列表样式常用属性关于列表的相关知识，读者可参考第二章案例一中的相关内容。无论是有序列表还是无序列表，在CSS中都可以使用相同的属性值，而且效果完全相同。以下是CSS列表样式的常用属性。设置列表符号：设置列表符号：list-style-type；使用图片符号：使用图片符号：list-style-image；调整列表位置：调整列表位置：list-style-position；属性为list-style-ty

19、pe，用于设置列表项的符号类型，基本语法为：1设置列表符号list-style-type:属性值;属性值说 明disc 黑色圆点，默认值circle空心圆圈square黑色正方形decimal或1数字，如：1，2，3，4，lower-roman或i小写罗马文字，如：I，ii，iii，iv，upper-roman或I大写罗马文字，如：I，II，III，IV，V，lower-latin或a小写拉丁文，如：a，b，c，zupper-latin或A大写拉丁文，如：A，B，C，.Znone不显示任何符号属性为list-style-image，用来将图片作为列表符号，从而丰富和美化列表符号，其基本语法为：

20、2使用图片符号list-style-image:url;输入图像路径时，可以参考第二章中介绍的方法。此外，在Dreamweaver的代码界面中输入CSS代码会出现代码提示，添加列表图像也同样会出现对应的代码提示。单击“浏览”按钮，如图3-7所示，然后在打开的对话框中选择需要的列表图像即可。注意选择的图像必须要存放在站点文件夹内，否则图像将无法正常显示。属性为list-style-position，用来设置列表符号的缩进，即列表项的位置，其基本语法为：3调整列表位置list-style-position:outside|inside;属性值说 明outside列表符号不向内缩进，默认值insid

21、e列表符号向内缩进二、二、清除列表的默认边距清除列表的默认边距列表在HTML页面中默认是有空白距离的，当我们用CSS对其进行操作时，需要将默认的距离消除，以方便使用CSS对其精确控制。在实际操作时，可以使用以下CSS选择器来消除列表的默认内边距及外边距。ul、ol padding:0;margin:0;三、三、与与标签补充讲标签补充讲解解标签对相当于一个容器，在它里面（与之间）可以容纳各种HTML元素，如段落、图片、标题、表格，以及其他标签等。我们可以把标签及其包含的内容视为一个独立的对象，用CSS进行控制。标签与标签一样，在它里面（与之间）可以容纳各种HTML元素，从而形成独立的对象。标签与

22、标签的区别在于，标签是一个块级元素，会独占一行；而标签为行内元素，在它前后的元素都不会自动换行。标签没有结构上的意义，纯粹是为了方便为它独立出来的内容应用样式。四、块级元素与行内元素补充讲四、块级元素与行内元素补充讲解解HTML中的元素分为两大类型，块级元素和行内元素（或称内联元素）。二者的区别是块级元素有自身的结构，默认会独占一行；而行内元素需要超过其父元素的宽度才换行。块级元素一般作为容器，可以把其他元素放在块元素中。行内元素还有以下几个特点：（1）设置宽度）设置宽度width无效。无效。（2）设置高度）设置高度height无效，可以通过无效，可以通过line-height来设置行高。来设置行高。（3）设置）设置margin只有左右有效，上下无效。只有左右有效，上下无效。（4）设置）设置padding只有左右有效，上下则无效。只有左右有效，上下则无效。Feel free to stay in touch!