《第10章 文字与背景设置课件.ppt》由会员分享，可在线阅读，更多相关《第10章 文字与背景设置课件.ppt（21页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、在制作网站页面时，可以通过CSS控制文字样式，对文字的字体、大小、颜色、粗细、斜体、下画线、顶画线和删除线等属性进行设置。使用CSS控制文字样式的最大好处是，可以同时为多段文字赋予同一CSS样式，在修改时只需修改某一个CSS样式，即可同时修改应用该CSS样式的所有文字。font-family属性属性字体字体在HTML中提供了字体样式设置的功能，在HTML语言中文字样式是通过来设置的，而在CSS样式中则是通过font-family属性来进行设置的。font-family属性的语法格式如下。font-family: name1,name2,name3;font-size属性属性字体大小字体大小在网
2、页应用中，字体大小的区别可以起到突出网站主题的作用。字体大小可以是相对大小也可以是绝对大小。在CSS样式中，可以通过设置font-size属性来控制字体的大小。font-size属性的基本语法如下。font-size: 字体大小;在设置字体大小时，可以使用绝对大小单位也可以使用相对大小单位。color属性属性字体颜色字体颜色在HTML页面中，通常在页面的标题部分或者需要浏览者注意的部分使用不同的颜色，使其与其他文字有所区别，从而能够吸引浏览者的注意。在CSS样式中，文字的颜色是通过color属性进行设置的。color属性的基本语法如下。color: 颜色值;实战练习实战练习设置网页文字基本效果
3、设置网页文字基本效果 font-weight属性属性字体粗细字体粗细在HTML页面中，将字体加粗或是变细是吸引浏览者注意的另一种方式，同时还可以使网页的表现形式更多多样。在CSS样式中通过font-weight属性对字体的粗细进行控制。定义字体粗细font-weight属性的基本语法如下。font-weight: normal | bold | bolder | lighter | inherit | 100900;最终文件：光盘最终文件第10章10-1-3.html视频：光盘视频第10章10-1-3.swf font-style属性属性字体样式字体样式所谓字体样式，也就是平常所说的字体风格，
4、在Dreamweaver中有3种不同的字体样式，分别是正常、斜体和偏斜体。在CSS中，字体的样式是通过font-style属性进行定义的。定义字体样式font-style属性的基本语法如下。font-style: normal | italic | oblique;实战练习实战练习设置网页文字的加粗和倾斜效果设置网页文字的加粗和倾斜效果 text-transform属性属性英文字体大小写英文字体大小写text-transform属性可以实现转换页面中英文字体的大小写格式，是非常实用的功能之一。text-transform属性的基本语法如下。text-transform: capitalize
5、| uppercase | lowercase;实战练习实战练习设置网页中英文字体大小写设置网页中英文字体大小写最终文件：光盘最终文件第10章10-1-5.html视频：光盘视频第10章10-1-5.swf最终文件：光盘最终文件第10章10-1-6.html视频：光盘视频第10章10-1-6.swftext-decoration属性属性文字修饰文字修饰在网站页面的设计中，为文字添加下画线、顶画线和删除线是美化和装饰网页的一种方法。在CSS样式中，可以通过text-decoration属性来实现这些效果。text-decoration属性的基本语法如下。text-decoration: unde
6、rline | overline | line-through;实战练习实战练习为网页文字添加修饰为网页文字添加修饰letter-spacing属性属性字符间距字符间距在CSS样式中，字间距的控制是通过letter-spacing属性来进行调整的，该属性既可以设置相对数值，也可以设置绝对数值，但在大多数情况下使用相对数值进行设置。letter-spacing属性的语法格式如下。letter-spacing: 字符间距;实战练习实战练习设置中文字符间距设置中文字符间距最终文件：光盘最终文件第10章10-1-7.html视频：光盘视频第10章10-1-7.swf最终文件：光盘最终文件第10章10-
7、1-8.html视频：光盘视频第10章10-1-8.swf在设计网页时，CSS样式可以控制字体样式，同时也可以控制字间距和段落样式。在一般情况下，设置字体样式只能对少数文字起作用，对于文字段落来说，还是需要通过设置段落样式来加以控制。line-height属性属性行间距行间距在CSS中，可以通过line-height属性对段落的行间距进行设置。line-height的值表示的是两行文字基线之间的距离，既可以设置相对数值，也可以设置绝对数值。line-height属性的基本语法格式如下。line-height: 行间距;text-indent属性属性段落首行缩进段落首行缩进段落首行缩进是对一个段
8、落第1行文字缩进两个字符进行显示。在CSS样式中是通过text-indent属性进行设置的。text-indent属性的基本语法如下。text-indent: 首行缩进量;实战练习实战练习美化网页中的段落文本美化网页中的段落文本最终文件：光盘最终文件第10章10-2-2.html视频：光盘视频第10章10-2-2.swf text-align属性属性文本水平对文本水平对齐齐在CSS样式中，段落的水平对齐是通过text-align属性进行控制的，水平对齐有4种方式，分别为左对齐、水平居中对齐、右对齐和两端对齐。text-align属性的基本语法如下。text-align: left | cent
9、er | right | justify;实战练习实战练习设置文本水平对齐设置文本水平对齐 vertical-align属性属性文本垂直文本垂直对齐对齐在CSS样式中，文本垂直对齐是通过vertical-align属性进行设置的，常见的文本垂直对齐方式有3种，分别为顶端对齐、垂直居中对齐和底端对齐。vertical-align属性的语法格式如下。vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | length; 实战练习实战练习设置文本垂直对齐设置文本垂直对齐最终文件
10、：光盘最终文件第10章10-2-3.html视频：光盘视频第10章10-2-3.swf最终文件：光盘最终文件第10章10-2-4.html视频：光盘视频第10章10-2-4.swf对于网页而言，文字永远都是不可缺少的重要元素，文字也是传递信息的主要手段。在CSS 3.0中新增加了几种有关网页文字控制的新增属性，下面分别对这几种新增的文字控制属性进行介绍。 text-overflow 属性属性文本文本溢出处理溢出处理text-overflow属性用于设置是否使用一个省略标记（）标示对象内文本的溢出。text-overflow属性仅是注解，当文本溢出时是否显示省略标记，并不具备其它的样式属性定义。
11、要实现溢出时产生省略号的效果还需要定义：强制文本在一行内显示（white-space: nowrap）及溢出内容为隐藏（overflow: hidden），只有这样才能实现溢出文本显示省略号的效果。text-overflow属性的语法格式如下。text-overflow: clip | ellipsis;实战练习实战练习控制文本溢出效果控制文本溢出效果最终文件：光盘最终文件第10章10-3-1.html视频：光盘视频第10章10-3-1.swfword-wrap和和word-break属性属性文本换行控制文本换行控制word-wrap属性用于设置当文本行超过指定容器的边界时是否断开转行，wor
12、d-wrap属性的语法格式如下。word-wrap: normal | break-word;word-break属性用于设置指定容器内文本的字内换行行为，尤其在出现多种语言时。word-break属性的语法格式如下。word-break: normal | break-all | keep-all;实战练习实战练习控制英文内容强制换行控制英文内容强制换行 text-shadow 属性属性文本阴影文本阴影通过CSS 3.0中新增的text-shadow属性就可以轻松的实现为文字添加阴影的效果，text-shadow属性的语法格式如下。text-shadow: length | length |
13、opacity | color;实战练习实战练习为网页文本添加阴影效果为网页文本添加阴影效果最终文件：光盘最终文件第10章10-3-2.html视频：光盘视频第10章10-3-2.swf最终文件：光盘最终文件第10章10-3-3.html视频：光盘视频第10章10-3-3.swf font-face规则规则使用服务器使用服务器端字体端字体通过font-face规则可以加载服务器端的字体文件，让客户端显示客户端所没有安装的字体，font-face规则的语法格式如下。font-face: font-family:取值; font-style:取值; font-variant:取值; font-we
14、ight:取值; font-stretch:取值; font-size:取值; src:取值; 实战练习实战练习在网页中使用特殊字体在网页中使用特殊字体最终文件：光盘最终文件第10章10-3-4.html视频：光盘视频第10章10-3-4.swf通过CSS属性来控制列表，能够从更多方面控制列表的外观，使列表看起来更加整齐和美观，使网站实用性更强。在CSS样式中专门提供了控制列表样式的属性，下面就不同类型的列表分别进行介绍。 list-style-type属性属性设置列表符号设置列表符号无序列表使用标签来罗列各个项目，并且每个项目前面都带有特殊符号。在CSS样式中，list-style-type
15、属性用于控制无序列表项目前面的符号，list-style-type属性的语法格式如下。list-style-type: disc | circle | square | none;有序列表与无序列表相反，有序列表即具有明确先后顺序的列表，默认情况下，创建的有序列表在每条信息前加上序号1、2、3。通过CSS样式中的list-style-type属性可以对有序列表进行控制。list-style-type属性的基本语法格式如下。list-style-type: decimal | decimal-leading-zero | lower-roman | upper-roman | lower-alp
16、ha | upper-alpha | none | inherit;实战练习实战练习设置新闻列表效果设置新闻列表效果实战练习实战练习设置编号列表效果设置编号列表效果最终文件：光盘最终文件第10章10-4-11.html视频：光盘视频第10章10-4-11.swf最终文件：光盘最终文件第10章10-4-12.html视频：光盘视频第10章10-4-12.swf list-style-image属性属性自定义列表符号自定义列表符号除了可以使用CSS样式中的列表符号，还可以使用list-style-image属性自定义列表符号，list-style-image属性的基本语法如下。list-style
17、-image: 图片地址;实战练习实战练习自定义新闻列表符号自定义新闻列表符号设置定义列表设置定义列表定义列表是一种比较特殊的列表形式，相对于有序列表和无序列表来说，应用得比较少。定义列表的标签是成对出现的，并且需要在“代码”视图手动添加代码。从开始到结束，列表中每个元素的标题使用标签，后跟随标签，用于描述列表中元素的内容。实战练习实战练习制作复杂新闻列表制作复杂新闻列表最终文件：光盘最终文件第10章10-4-2.html视频：光盘视频第10章10-4-2.swf最终文件：光盘最终文件第10章10-4-3.html视频：光盘视频第10章10-4-3.swf通过为网页设置一个合理的背景能够烘托网
18、页的视觉效果，给人一种协调和统一的视觉感，达到美化页面的效果。不同的背景给人的心理感受并不相同，因此为网页选择一个合适的背景非常重要。 background-color属性属性背景颜色背景颜色只需在CSS样式中添加background-color属性，即可设置网页的背景颜色，它接受任何有效地颜色值，但是如果对背景颜色没有进行相应的定义，将默认背景颜色为透明。background-color的语法格式如下。background-color: color | transparent;background-image属性属性背景图像背景图像在CSS样式中，可以通过background-image属性
19、设置背景图像。background-image属性的语法格式如下。background-image: none | url; background-repeat属性属性背景图像平铺方式背景图像平铺方式使用background-image属性设置的背景图像默认会以平铺的方式显示，在CSS中可以通过background-repeat属性设置背景图像重复或不重复的样式，以及背景图像的重复方式。background-repeat属性的语法格式如下。background-repeat: no-repeat | repeat-x | repeat-y | repeat;实战练习实战练习设置网页背景效果设置
20、网页背景效果 background-position属性属性背景图像位置背景图像位置通过CSS样式中的background-position属性，能够在页面中精确定位背景图像，更改初始背景图像的位置。该属性值可以分为4种类型：绝对定义位置、百分比定义位置、垂直对齐值和水平对齐值。background-position: length | percentage | top | center | bottom | left | right; 实战练习实战练习定位网页中的背景图像定位网页中的背景图像最终文件：光盘最终文件第10章10-5-3.html视频：光盘视频第10章10-5-3.swf最终文件
21、：光盘最终文件第10章10-5-4.html视频：光盘视频第10章10-5-4.swfbackground-attachment属性属性背景图像固定背景图像固定在CSS样式表中，针对背景元素的控制，提供了background-attachment属性，通过对该属性的设置可以使页面的背景不受滚动条的限制，始终保持在固定位置。background-attachment属性的语法格式如下。background-attachment: scroll | fixed;实战练习实战练习固定网页中的背景图像固定网页中的背景图像最终文件：光盘最终文件第10章10-5-5.html视频：光盘视频第10章10-5
22、-5.swf网页中的颜色搭配可以更好地吸引浏览者的目光，在CSS 3.0中新增了几种网页中定义颜色的方法，下面依次进行介绍 。 RGBA颜色值颜色值RGBA是在RGB的基础上多了控制Alpha透明度的参数，RGBA颜色定义语法如下。rgba (r,g,b,);实战练习实战练习使用使用RGBA方式设置方式设置背景颜色背景颜色最终文件：光盘最终文件第10章10-6-1.html视频：光盘视频第10章10-6-1.swf HSL颜色值颜色值HSL是一种工业界是广泛使用的颜色标准，通过对色调（H）、饱和度（S）和亮度（L）3个颜色通道的改变，以及他们相互之间的叠加来获得各种颜色。CSS 3.0中新增了
23、HSL颜色设置方式，在使用HSL方法设置颜色时，需要定义3个值，分别是色调（H）、饱和度（S）和亮度（L）。HSL颜色定义语法如下。hsl (,);HSLA颜色值颜色值HSLA是HSL颜色定义方法的扩展，在色相、饱和度、亮度三要素的基础上增加了不透明度的设置。使用HSLA颜色定义方法，能够灵活的设置各种不同的透明效果。HSLA颜色定义的语法如下。hsla (,); 实战练习实战练习使用使用HLSA方式设置背景颜色方式设置背景颜色最终文件：光盘最终文件第10章10-6-3.html视频：光盘视频第10章10-6-3.swfopacity属性属性元素不透明度元素不透明度opacity属性用来设置一
24、个元素的透明度，能够使页面元素呈现透明效果，并且可以通过具体的数值设置透明的程度。opacity属性的语法格式如下。opacity: | inherit;实战练习实战练习设置网页元素的半透明效果设置网页元素的半透明效果transparent颜色值颜色值如果在CSS样式中设置颜色值为transparent，则会使背景颜色、文字颜色或边框颜色等设置为完全透明。在CSS 1中，只能在background-color属性中设置transparent属性值。在CSS 2中，可以在background-color和border-color属性中设置transparent属性值。在CSS 3.0中，可以在一
25、切指定颜色值的属性中设置transparent属性值。现在，transparent属性值已经得到Firefox、Chrome、Safari、Opera和IE等浏览器的支持。最终文件：光盘最终文件第10章10-6-4.html视频：光盘视频第10章10-6-4.swf在CSS3.0中新增了渐变设置属性gradients，通过该属性可以在网页中实现渐变颜色填充的效果。避免了过多地使用渐变图片所带来的麻烦，而且在放大页面的情况下一样过渡自然。 线性渐变背景线性渐变背景基于Webkit内核的线性渐变，语法如下。-webkit-gradient ( linear,from(),to() , color-
26、stop(, )*)基于Gecko内核的线性渐变，语法如下。-moz-linear-gradient ( | , ? , () ?*,)实战练习实战练习为网页设置线性渐变为网页设置线性渐变背景颜色背景颜色最终文件：光盘最终文件第10章10-7-1.html视频：光盘视频第10章10-7-1.swf径向渐变背景径向渐变背景基于Webkit内核的径向渐变，语法如下。-webkit-gradient ( radial ,2,from(),to() , color-stop(, )*)基于Gecko内核的径向渐变，语法如下。-moz-linear-gradient ( | , ? | ? , () ?
27、*, )实战练习实战练习为网页设置径向渐变背为网页设置径向渐变背景颜色景颜色最终文件：光盘最终文件第10章10-7-2.html视频：光盘视频第10章10-7-2.swf在CSS 3.0中新增加了有关网页背景控制的几种属性，下面分别对这几种种新增的背景设置属性进行介绍。 background属性属性设置多背景图像设置多背景图像在CSS3.0中可以通过background属性为一个元素应用一个或多个图片作为背景。代码和CSS 2中一样，只需要用逗号来区分各个图片。第一个声明的图片定位在元素顶部，其它的图片依次在其下排列。background: background-image | backgro
28、und-origin | background-clip | background-repeat | background-size | background-position;实战练习实战练习为网页设置多个背景图像为网页设置多个背景图像background-size 属性属性背景图像大小背景图像大小在CSS 3.0中新增了一个background-size属性，通过该属性可以自由控制背景图像的大小。background-size属性的语法格式如下。background-size: | | auto 1,2 | cover | contain ; 实战练习实战练习控制背景图像的大小控制背景图像
29、的大小最终文件：光盘最终文件第10章10-8-1.html视频：光盘视频第10章10-8-1.swf最终文件：光盘最终文件第10章10-8-2.html视频：光盘视频第10章10-8-2.swfbackground-origin 属性属性背景图像原点背景图像原点使用CSS 3.0中新增的background-origin属性可以改变这种背景图像定位方式，通过该属性可以大大改善背景图像的定位方式，能够更加灵活的对背景图像进行定位。background-origin属性的语法格式如下。background-origin: border-box | padding-box | content-box
30、;实战练习实战练习控制背景图像开始显示的原点位置控制背景图像开始显示的原点位置 background-clip 属性属性背景图像显示区域背景图像显示区域在CSS 3.0中新增了背景图像裁剪区域属性background-clip，通过该属性可以定义背景图像的裁剪区域。background-clip: border-box | padding-box | content-box | no-clip; 实战练习实战练习控制背景图像的显示区域控制背景图像的显示区域最终文件：光盘最终文件第10章10-8-3.html视频：光盘视频第10章10-8-3.swf最终文件：光盘最终文件第10章10-8-4.html视频：光盘视频第10章10-8-4.swf本章详细的介绍了CSS样式中对网页中文字和背景相关元素进行控制的各种CSS样式属性的设置和使用方法，并通过实例的制作使读者能够快速的理解和掌握通过CSS样式对网页中文字和背景相关元素的控制，并且还介绍了CSS 3.0中新增对文本和背景的设置属性，通过本章的学习，读者能够灵活的运用CSS样式来控制网页中的文字和背景相关元素。