使用CSS设置文字效果.ppt

二、HTML常用符号在Dreamweaver的设计视图中输入一些符号时，由于它们与HTML代码的关键字有冲突，因此不能直接在代码视图中显示，而是转化成了相应的HTML代码，如表3-11所示。我们可以在设计视图中利用键盘或“插入”“HTML”“特殊字符”菜单命令来输入这些符号，如图3-4所示，也可以直接在代码视图中输入这些符号的HTML代码（注意大小写）。符号HTML代码quot;apos;amp;lt;gt;￥yen;?copy;?reg;空格nbsp;****使用CSS设置文字效果1制作个人博客首页——设置文字样式2制作个人博客子页——设置段落和其他文字样式3制作个人博客排行榜——设置列表样式目录页ContentsPage案例一制作个人博客首页——设置文字样式众所周知，文字是网页中最为重要的元素，同样，对网页中文字的修饰也是至关重要的。在第二章中，我们已经学会了如何在网页中插入文字、段落和标题等。在本案例中，我们将通过制作个人博客首页（参见图3-1），学习如何运用CSS对文字进行美化和修饰，包括设置文字的字体、字号、颜色和加粗效果等。案例说明案例步骤为便于理解，我们将本案例分为两部分来制作，第1部分插入文字等网页元素，构建网页HTML主体结构；第2部分使用CSS的各种文字属性对文字进行修饰，以达到效果图上的要求。CSS样式表的核心内容就是各种属性，对网页效果产生直接作用的也是这些属性。案例一制作个人博客首页——设置文字样式设置字体：font-family设置字号：font-size设置斜体：font-style设置加粗：font-weight设置颜色：color设置变体：font-variant组合设置字体属性：font一、CSS文字样式常用属性属性为font-family，基本语法为：font-family:字体1,字体2,字体3;。例如：01设置文字字体02p{font-family:宋体，楷体，隶书;}03各字体之间用英文逗号隔开。另外，有些字体中间会出现空格，如TimesNewRoman字体，这时需要用英文双引号将字体扩起来。04属性为font-size，基本语法为：2．设置文字大小font-size:尺寸|百分比|关键字;尺寸：使用尺寸设置文字大小，一般使用的单位为px（像素）。百分比：以父元素中的字体大小为参考值，如果没有设置父元素的字体大小，则是相对于浏览器默认字体大小的百分比。关键字：使用关键字设置文字大小，从小到大包括xx-samll（极小）、x-small（较小）、small（小）、medium（标准大）、large（大）、x-large（较大）和xx-large（极大）7个关键字。在不同类型的浏览器中，使用同一关键字设置的文字尺寸有时候会不同，因此不推荐使用关键字设置文字尺寸。属性为font-style，基本语法为：3．设置斜体font-style:normal|italic|oblique;属性值说明normal正常显示（默认）italic斜体显示文字oblique比斜体更斜的歪斜体显示表3-2font-style各属性值的意义4．设置文字粗细属性为font-weight，基本语法为：font-weight:normal|bold|bolder|lighter|number;例如：p{font-weight:600;}表3-3font-weight各属性值的意义属性值说明normal正常粗细（默认）bold粗体（约为数字700）bolder加粗体lighter细体number100～900九个级别，数字越大文字越粗。设置文字颜色color:颜色的名称|RGB值|十六进制数;其属性值可以是颜色的英文名称，如red、blue；也可以是颜色的RGB值，如rgb(255,0,0)；还可以是颜色的十六进制值，如#ff0000。属性为color，基本语法：在HTML页面中，颜色统一使用RGB颜色模式，该模式下，颜色由红、绿、蓝三原色按一定比例混合而成。这三种原色的取值范围均为0～255，共可混合出一千多万种颜色。例如，当将这三种原色的值都设为255时，颜色为白色；都设为0时，颜色为黑色。RGB颜色也可以使用十六进制表示，如#ff0000，其中前两位为红色分量，中间两位为绿色分量，最后两位是蓝