1、任务5:设置文本、背景与列表样式网页设计与制作(HTML+CSS+Javascript)网页设计与制作课程组目标TARGET知识目标 掌握CSS字体属性的编写；掌握CSS文本属性的编写；掌握CSS基本的背景的编写；掌握CSS3中新增的背景属性的编写；掌握CSS3中新增的渐变属性的编写;掌握CSS中列表样式的设置。1 任务描述 2 文本样式设置 3 背景属性设置 4 列表样式设置 5 综合实例 6 任务实施 7 任务拓展1任务描述Part美化门户网站导航与banner区域 本任务就是编写CSS制作规范的文字、列表，恰当的处理图片与背景，并实现网站关于文本列表与背景的页面效果。任务描述：美化门户网
2、站导航与banner区域2文本样式设置Part 设置CSS的字体属性 文本属性1 设置CSS的字体属性1.字体设置font-family字体族科实际上就是CSS中设置的字体，用于改变HTML标签或元素的字体。语法：font-family:字体1,字体2,字体3;浏览器不支持第一个字体时，会采用第二个字体；前两个字体都不支持，则采用第三个字体，以此类推。浏览器不支持定义的所有字体，则会采用系统的默认字体。注意 中文字体需要加英文状态下的引号，各字体之间必须使用英文状态下的逗号隔开。英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。如果字体名中包含空格、#、$等符号
3、，则该字体必须加英文状态下的单引号或者双引号，例如font-family:arial black;。2.字号大小font-size字号大小属性用作修改字体显示的大小。语法：font-size:大小取值；取值范围：绝对大小：xx-small|x-small|small|medium|large|x-large|xx-large；相对大小：larger|smaller；长度值或百分比。注意 绝对大小根据对象字体进行调节。绝对大小的单位有px（像素）、in（英寸）、cm（厘米）、mm（毫米）、pt（点），推荐使用px。相对大小则是相对于父对象中字体尺寸进行相对调节，使用em的较多。百分比取值基于父对
4、象中字体的尺寸。3.字体风格font-style字体风格就是字体样式，主要是设置字体是否为斜体。语法：font-style:样式的取值；取值范围：normal|italic|oblique。normal(缺省值)是以正常的方式显示；italic则是以斜体显示文字；oblique属于其中间状态，以偏斜体显示。4.字体加粗font-weight字体加粗用于设置字体的粗细，实现对一些字体的加粗显示。语法：font-weight:字体粗度值；取值范围：normal|bold|bolder|lighter|number。normal(缺省值)表示正常粗细；bold表示粗体；bolder表示特粗体；lig
5、hter表示特细体；number表示font-weight还可以取数值，其范围是100-900，实际项目开发中主要使用normal和bold。5.小型的大写字母font-variant小型的大写字母用来设置英文字体是否显示为小型的大写字母。语法：font-variant：取值；取值范围：normal|small-caps。normal(缺省值)表示正常的字体，small-caps表示英文显示为小型的大写字母字体。6.复合属性：字体fontfont属性是复合属性，用作对不同字体属性的略写。语法：font:字体取值；取值：字体风格、小型的大写字母、文本的粗细、字体大小、行高、字体族科之间使用空格相
6、连接。注意font复合属性要按照固定的font-style、font-variant、font-weight、font-size/line-height、font-family的顺序编写，不需要的可以不写，但要保证顺序正确。举例演示【实例5-1】font字体设置。2文本属性1.颜色属性colorcolor属性用来表示文本的颜色。语法：color:颜色代码注意 颜色取值可以是颜色关键字，如red，blue，green，yellow等。颜色取值也可以十六进制来表示，例如#FF0000。颜色取值还可以使用RGB代码来表示。rgb（x,x,x）其中，x是基于0255之间的整数，例如rgb（255，0，
7、0）。使用rgb（y%，y%，y%）表示，y是一个介于0到100之间整数，例如rgb（100%，0%，0%）。这表示为红色，当值为0时百分号不能省略。2.文本行高line-height行高属性用于控制文本基线之间的间隔值，或者说是行与行之间的距离。语法：line-height:行高值；行高值通常使用像素px，相对值em和百分比%，实际开发中使用最多的是像素px。3.单词间隔word-spacing单词间隔用来定义英文单词之间的间隔，对中文无效。语法：word-spacing:取值；取值范围：normal|。normal是指正常的间隔，是默认选项；长度是设定单词间隔的数值及单位，允许使用负值。4
8、.字符间隔letter-spacing字符间隔和单词间隔类似，不同的是字符间隔用于设置字符的间隔数。语法：letter-spacing:取值;5.文字修饰text-decoration文字修饰属性主要是用于对文本进行修饰，如设置下划线、上划线、删除线等。语法：text-decoration:修饰值；取值范围：none|underline|overline|line-through。none表示不对文本进行修饰，这是默认属性值；underline表示对文字添加下划线；overline表示对文本添加上划线；line-through表示对文本添加删除线。取值范围：normal|。normal是指正常
9、的间隔，是默认选项；长度是设定单词间隔的数值及单位，允许使用负值。注意：text-decoration可以赋多个值。例如：text-decoration:underline overline;6.文本转换text-transform文本转换属性仅被用于表达某种格式的要求，是用来转换英文文字的大小写的。语法：text-transform:转换值;7.文本缩进text-indent文本缩进属性用于定义HTML中块级元素（如p，hl等）的第一行可以接受的缩进数量，常用于设置段落的首行缩进。语法：text-indent:缩进值；文本的缩进值必须是一个长度或一个百分比。若设定为百分比，则以上级元素的宽度
10、而定，通常使用em为单位。取值范围：none|capitalize|uppercase|lowercase。取值中，none表示使用原始值；capitalize使每个字的第一个字母大写；uppercase使每个单词的所有字母大写；lowercase则使每个字的所有字母小写。8.文本水平对齐text-align文本水平对齐用来设置文本水平对齐方式。语法：text-align:排列值;9.处理空白white-spacewhite-space属性用于设置页面对象内空白（包括空格和换行等）的处理方式。默认情况下，HTML中的连续多个空格会被合并成一个，而使用这一可以设置成其他的处理方式。语法：whit
11、e-space：值；取值范围：normal|pre|nowrap。其中，normal是默认属性，即将连续的多个空格合并；pre会导致源中的空格和换行符被保留；nowrap则表示强制在同一行内显示所有文本，直到文本结束或者遇到对象。取值范围：left|right|center。其中，left为左对齐；right为右对齐；center为居中对齐。10.垂直对齐vertical-alignvertical-align表示垂直对齐方式，用于设置一个行内元素的纵向位置，相对于它的上级元素或相对于元素行。行内元素是没有行在其前和后断开的元素，例如，在HTML中A和IMG。它主要用于对图像的纵向排列。语法：
12、vertical-align:排列取值；取值范围：baseline|sub|super|top|text-top|middle|bottom|text-bottom|。baseline使元素和上级元素的基线对齐；sub为下标；super为上标；top为使元素和行中最多的元素向上对齐；text-top使元素和上级元素的字体向上对齐；middle是纵向对齐元素基线加上上级元素的x高度的一半的中点，其中x高度是字母“x”的高度；text-bottom使元素和上级元素的字体向下对齐。注意：百分比是一个相对于元素行高属性的百分比，它会在上级基线上增高元素基线的指定数量。这里允许使用负值，负值表示减少相应
13、的数量。;11.阴影效果text-shadowtext-shadow属性可以为页面中的文本添加阴影效果。语法：text-shadow：h-shadow值 v-shadow值 blur值 color;12.对象内溢出文本text-overflowtext-overflow属性用于标示对象内溢出的文本。语法：text-overflow：clip|ellipsis；其中，clip表示修剪溢出文本，不显示省略标记“”；ellipsis：用省略标记“.”标示被修剪文本，省略标记插入的位置是最后一个字符。取值范围：left|right|center。其中，h-shadow用于设置水平阴影的距离，v-sha
14、dow用于设置垂直阴影的距离，blur用于设置模糊半径，color用于设置阴影颜色。例如：text-shadow:10px 10px 5px blue;举例演示【实例5-2】文本外观属性设置。3背景属性设置Part基本的背景设置CSS3中新增的背景属性CSS3中新增的渐变属性1 基本的背景设置1.背景颜色background-colorbackground-color属性设置背景颜色。语法：background-color:颜色取值；颜色取值可以预定义的颜色值、十六进制#RRGGBB或RGB代码（r，g，b）。background-color的默认为透明，此时子元素会显示父元素的背景。在CSS
15、3中，引入了RGBA模式,A就是alpha参数,实现对颜色与背景颜色实现不透明的设置,aipha参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的数字。例如：background-color:rgba(11,66,99,0.2);除了使用RGBA模式，也可以opacity属性来控制元素呈现出透明效果。例如：opacity:0.5；opacity属性用于定义元素的不透明度，参数表示不透明度的值，它是一个介于01的浮点数值。其中，0表示完全透明，1表示完全不透明，样例中的0.5则表示半透明。2.背景图像background-imagebackground-image用来设定一个元素的背景
16、图像。语法：background-image:url(图像地址）；图像地址可以设置成绝对地址，也可以设置成相对地址。举例演示【实例5-3】背景颜色与背景图片的设置。3.背景重复background-repeat背景重复属性也称为背景图像平铺属性，用来设定对象的背景图像重复以及如何铺排。语法：background-repeat：取值；取值范围：repeat|no-repeat|repeat-x|repeat-y。其中，repeat 背景图片横向和竖向都重复；no-repeat 背景图片横向和竖向都不重复；repeat-x 背景图片横向重复；repeat-y 背景图片竖向重复。background
17、-repeat属性和background-image属性连在一起使用。只设置background-image属性，没设置background-repeat属性，在缺省状态下，图片既横向重复，又竖向重复。举例演示【实例】背景图片与背景重复的设置。4.背景位置background-position背景位置属性用于指定背景图像的最初位置。当设置background-repeat为no-repeat时，就能发现图像默认以元素的左上角为基准点显示。语法：background-position:位置取值;取值范围：|1,2|left|center|right|top|center|bottom。取值范围包
18、括两种，一种是采用数字，即|1,2。另一种是关键字描述，即left|center|right|top|center|bottom|1,2：使用确切的数字表示图像位置，使用时首先指定横向位置，接着是纵向位置。百分比和长度可以混合使用，设定为负值也是允许的。默认取值是0%0%。left|center|right|top|center|bottom:left，center，right 是横向的关键字，横向表示在横向上取0%,50%,100%的位置；top，center，bottom是纵向的关键字，纵向表示在纵向上取0%,50%,100%的位置。注意：background-position属性和bac
19、kground-image属性连在一起使用。5.背景附件background-attachment背景附件属性用来设置背景图像是随对象内容滚动还是固定的。语法：background-attachment:scroll|fixed;其中，scroll表示背景图像是随对象内容滚动，是默认选项；fixed表示背景图像固定在页面上静止不动，只有其他的内容随滚动条滚动。注意：background-attachment属性和background-image属性连在一起使用。举例演示【实例】背景图片与背景重复的设置。6.复合属性：背景background背景background是复合属性，是一个明确的背景关
20、系属性的略写。语法：background:取值;背景属性包括：背景颜色background-color，背景图片background-image，重复设置background-repeat，背景附加background-attachment，背景位置background-position等之间用空格相连。注意：写background复合属性要注意属性的先后顺序。语法：background:background-color background-image background-repeat background-attachment background-position background
21、-size background-clip background-origin。其中background-size background-clip background-origin属性为CSS3新增属性，后面进一步学习。举例演示【实例5-4】背景的复合属性设置。2 CSS3中新增的背景属性1.背景图像大小background-sizebackground-size属性用于控制背景图像的大小。语法：background-size:取值;如果使用像素值，使用一个时表示为背景图像的宽，如果使用两个，则第2个像素值表示为高度；取值范围：像素值|百分比|contain|cover。使用百分比，表示以父
22、元素的百分比来设置背景图像的宽度和和高度。第1个值设置宽度，第2个值设置高度。如果只设置一个值，则第二个值会默认为auto，高度会随着宽度的变化而变化，从而保证图像的比例不失真。使用cover把背景图像扩展至足够大，使背景图像完全覆盖背景区域。背景图像的某些部分也许无法在背景定位区域中，这主要是背景图像的大小与父元素的比例不一致导致的。contain则能把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。举例演示【实例5-5】背景图像大小设置。背景图像大小为父元素的60%宽500高150的效果设置为cover设置为contain2.背景图像的坐标background-originbackg
23、round-origin属性用来定义背景图像的初始位置，即坐标。语法：background-origin:取值;取值范围：padding-box|content-box|border-box。其中，padding-box表示背景图像相对于内边距区域来定位，默认值，content-box表示背景图像相对于内容来定位，border-box表示背景图片相对于边框来定位。默认情况下，background-position属性总是以元素左上角为坐标原点定位背景图像，在CSS3中的background-origin属性可以改变这种定位方式，自行定义背景图像的相对位置。举例演示【实例5-6】背景图像的显示区
24、域。背景图像显示区域为content-box背景图像显示区域为border-box3.背景图像的裁剪区域background-clipbackground-clip属性用于定义背景图像的裁剪区域。就是规范背景的显示范围。语法：background-clip:取值;取值范围：padding-box|content-box|border-box。其中，默认值为border-box，表示从边框向外裁剪背景，padding-box表示从内边距区域向外裁剪背景，content-box表示从内容区域向外裁剪背景。举例演示【实例5-7】背景图像的裁剪区域。背景图像裁剪区域为content-box背景图像裁剪
25、区域为padding-box4.多背景图像的设置 在CSS3中，允许一个容器里显示多个背景图像，使背景图像效果更容易控制。通过background-image、background-repeat、background-position和background-size等属性提供多个属性值来实现多重背景图像效果，各属性值之间用逗号隔开。举例演示【实例5-8】多背景图像的设置。background-image:url(img/logo.png),url(img/yks.png),url(img/hs.png);background-repeat:no-repeat;background-positi
26、on:right,left bottom,bottom;background-size:80px,60%,100%;logo.pngyks.pnghs.png4CSS3中新增的渐变属性Part线性渐变属性径向渐变属性重复渐变3 CSS3中新增的渐变属性1.线性渐变线性渐变是指第一种颜色沿着一条直线按顺序过渡到第二种颜色。语法：background-image:linear-gradient(渐变角度,颜色值1,颜色值2,颜色值n);linear-gradient用于定义渐变方式为线性渐变，括号内用与设定渐变角度和颜色值。渐变角度是以自上向下的垂直线为0deg度角，然后顺时针计算；箭头所指方向为
27、45deg的角 默认情况下渐变角度为180deg 0deg相当于“to top”90deg相当于“to right”180deg相当于“to bottom”270deg相当于“to left”例如：linear-gradient(yellow,white)等同于linear-gradient(180deg,yellow,white)在实现渐变的同时还可以控制颜色渐变的位置。实现方法就是在每一个颜色值后面还可以书写一个百分比数值，用于标示颜色渐变的位置例如：background-image:linear-gradient(180deg,yellow 20%,white 60%);举例演示【实例5
28、-9】线性渐变基本应用。角度180由黄色渐变为白色修改渐变位置的线性渐变3 CSS3中新增的渐变属性2.径性渐变径向渐变是指第一种颜色从一个中心点开始，依据椭圆或圆形形状进行扩张渐变到第二种颜色。语法：background-image:radial-gradient(渐变形状 圆心位置,颜色值1,颜色值2,颜色值n);radial-gradient表示渐变方式为径向渐变，括号内的参数值用于设定渐变形状、圆心位置和颜色值。渐变形状用来定义径向渐变的形状，主要包括“circle”和“ellipse”两个值。参数名称含义circle圆形的径向渐变ellipse椭圆形的径向渐变像素值/百分比定义水平半
29、径和垂直半径的像素值，如“200px 150px”表示水平半径为200px，垂直位150px的椭圆形，如果两个数值相同表示为圆形，也可以通过百分比来定义形状，如“80%80%”圆心位置用于确定元素渐变的中心位置，使用“at”加上关键词或参数值来定义径向渐变的中心位置。圆心位置的参数含义参数名称含义center设置中间为径向渐变圆心的横坐标值或纵坐标left设置左边为径向渐变圆心的横坐标值right设置右边为径向渐变圆心的横坐标值top设置顶部为径向渐变圆心的纵标值bottom设置底部为径向渐变圆心的纵标值像素值/百分比用于定义圆心的水平和垂直坐标，可以为负值颜色值的是设置与线性渐变是一致的，“
30、颜色值1”表示起始颜色，“颜色值n”表示结束颜色，起始颜色和结束颜色之间可以添加多个颜色值，各颜色值之间用“，”隔开。例如：background-image:radial-gradient(circle at center,#FFF,#00F );渐变形状 圆心位置,颜色值1 ,颜色值2举例演示【实例5-10】径向渐变基本应用。径向渐变1径向渐变23 CSS3中新增的渐变属性3.重复渐变重复渐变包括重复线性渐变和重复径向渐变。重复线性渐变的语法如下：语法：background-image:repeating-linear-gradient(渐变角度,颜色值1,颜色值2,颜色值n);参数的设置与
31、线性渐变一样相同。重复径向渐变的语法如下：语法：background-image:repeating-radial-gradient(渐变形状 圆心位置,颜色值1,颜色值2,颜色值n);参数的设置与径向渐变一样相同。举例演示【实例5-11】重复渐变基本应用。重复渐变的效果5列表样式设置Part定义列表的基本样式列表布局实例1 定义列表的基本样式1.列表符号list-style-type列表符号属性用于设定列表项的符号。语法：list-style-type:；list-style-type用来设置多种符号作为列表项的符号，其具体取值范围见表所示。属性值含义none不显示任何项目符号或编码disc
32、以实心圆形作为项目符号circle以实心圆形作为项目符号square以实心方块作为项目符号decimal以普通阿拉伯数字1、2、3作为项目编号lower-roman以小写罗马数字、作为项目编号upper-roman以大写罗马数字、作为项目编号lower-alpha以小写英文字母a、b、c作为项目编号upper-alpha以大写英文字母A、B、C作为项目编号2.图像符号list-style-image图像符号属性使用图像作为列表项目符号，以美化页面。语法：list-style-image:none|url(图像地址)；none表示不指定图像；url则使用绝对或相对地址指定作为符号的图像。如果使用
33、“list-style-image”定义列表图像时，通常需要先设置“list-style-type”为“none”，然后再设置list-style-image的值。3.列表缩进list-style-position列表缩进属性用于设定列表缩进的设置。语法：list-style-position:outside|inside；outside表示列表项目标记放置在文本以外，且环绕文本不根据标记对齐 inside是列表的默认属性，表示列表项目标记放置在文本以内，且环绕文本根据标记对齐4.复合属性：列表list-style列表函数list-style是以上3种列表属性的组合。语法：list-style
34、：list-style-image|list-style-position|list-style-type 此属性是设定列表样式的快捷的综合写法。用这个属性可以同时设置列表样式类型属性(list-style-type)，列表样式位置属性(list-style-position)和列表样式图片属性(list-style-image)。举例演示【实例5-12】列表属性样式设置。代码：list-style:none outside url(img/arrow.gif);举例演示【实例5-13】列表布局。列表的布局的垂直导航鼠标放置到菜单选项后的效果6综合实例Part电商产品分类列表展示电商产品分类列
35、表展示【演示】通过文本、背景以及列表的相关内容学习，构建一个电商网站的商品类别展示导航菜单。7任务实施Part美化门户网站导航与banner区域【演示】结合文本、背景、列表的学习，构建网站与区域区域的页面效果。8任务拓展Part文本的word-wrap属性font-face属性1.文本的word-wrap属性word-wrap属性主要用于对长单词和URL地址的自动换行。语法：word-wrap：取值；其中normal表示允许的断字点换行，这是浏览器默认值；break-word是在长单词或URL地址内部进行换行。取值范围：normal|break-word。举例演示【实例5-14】word-wr
36、ap属性的使用。break-word是在长单词或URL地址内部进行换行器默认值,normal表示允许的断字点换行2.font-face属性font-face属性用于定义服务器字体。开发者可以在用户计算器未安装字体时，使用任何喜欢的字体。语法：font-face：font-family:字体名称;src:字体路径;语法中，font-family用于指定该服务器字体的名称，该名称可以随意定义；src属性用于指定改字体文件的路径。举例演示【实例5-14】自定义服务字体。自定义服务器字体9项目实训Part使用CSS导航菜单的制作【实训目的】1.掌握各类文本、字体的定义方法。2.掌握各类页面、元素背景的设置。3.掌握列表的使用方式，以及CSS布局方法。【实训内容】实训任务1：模仿学习几种最不错的用CSS设计的网站，如图所示。使用样式表美化网页页面酷站代码(各类导航菜单)：http:/www.5icool.org/wangyetexiao/menu/谢谢多一点努力,多一点实践,多一点点就能创造奇迹!
