项目三任务2美化“鲜花配送网站”(精)

1、项目三 css层叠样式表教学班级课时任课教师仝素梅授课课题任务2美化“鲜花配送网站”教学目标：1 .掌握创建、应用和管理 css样式表的方法。2 .灵活应用css样式表美化网页。教学重点：1 .创建复合样式表2 .创建外部样式表文件 教学难点1.复合样式表的创建教学环境机房+电子教室教学过程教学内容上节回顾新课讲授1、css层叠样式表的作用？2、css层叠样式表的的定义形式？3、定义的类样式和id样式该如何引用？4、重新定义标签 body,设置上、边距为 0,左右边距自动？ 任务2美化“鲜花配送网站”首页一、“鲜花配送网站”首页美化后的效果，如图 3-3所示。百贯t打沈f或慨工* 日第也亘一首

2、亘生日兰花.王行用在 史能需二轴斜t- e望阮用一审正比比在宓豆用本悚价恪金类3元即 1w-1507c; u，*警承黄 m三斗。;n跳电,正属三在批别口 /补女制毂密匣主蚌花ecm 站性曲扎品.感青钳的代理节节节t雷七教寺廿史u 寻一1,.i, 2 星la汶嚏花苜合花也巴卷用”古上口无把帆冷凄wn 帽悄礼晶令小 i5 *. 雪同更花芭情送itil * k胃内析st一心一意战四席法猿下心宰通icox霖 二免费2器：先送花后付款本页面主要是对鲜花配送网站进一步美化，美化导航、和右侧的四个虚线表格。复合标记1、选择符组可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定

3、义：h1,h2,h3,h4,h5,h6 color : green （这个组里包括所有的标题元素，每个标题元素的文字都为绿色）。p,table font-size : 9pt （段落和表格里的文字尺寸为9号字） 效果完全等效于：p font-size : 9pt table font-size : 9pt 例如，设置“鲜花配送网站”首页左侧的四个表格的边框线为虚线、1像素、粉色。#tab1 td,#tab2 td,#tab3 td,#tab4 tdborder:dashed 1px #f6f;2、包含选择符可以单独对某种元素包含关系定义的样式表，元素1里包含元素2,这种方式只对在元素1里的元素

4、2定义，对单独的元素1或元素2无定义。例一：重定义所有表格标记中的链接样式。table afont-size : 12px 在表格内的链接改变了小式，文字大小为12象素，而表格外的链接的文字仍为默认大小。例二：重定义指定id （#tab1 ）表格中的单元格进行重新定义。#tab1 td font-family: 隶书;font-size: 30px;color: #ff0;例三：重定义指定id (#tab2)表格中的列表项目进行重新定义。#tab2 li margin-bottom: 10px;border-bottom-width: 1px;border-bottom-style: dash

5、ed;border-bottom-color: #ccc;list-style-position: outside;/当图片位置位于外侧时，图片下无下划线list-style-image: url(./images/jxbz.gif);例四：更改链接后的效果a:active color: #f00;text-decoration: underline;a:link ,a:visitedcolor: #333;text-decoration: none;三、样式表的层叠性层叠性就是继承性，样式表的继承规则是外部的元素样式会保留下来继承给这个元素 所包含的其他元素。事实上，所有在元素中嵌套的元素都

6、会继承外层元素指定的属性值，有时会把很多层嵌套的样式叠加在一起，除非另外更改。例如在 div标记中嵌套p标记:div color: red;font-size : 9pt这个段落的文字为红色9号字（p元素里的内容会继承 div定义的属性）有些情况下内部选择符不继承周围选择符的值，但理论上这些都是特殊的。例如，上边界属性值是不会继承的,直觉上，一个段落不会同文档bod一样的上边界值。另外，当样式表继承遇到冲突时,总是以最后定义的样式为准。如果上例中定义了p的颜色：div color: redfont-size:9ptp color: bluecss这个段落的文字为蓝色 9号字。段落里的文字大小为

7、9号字是继承div属性的,而color属性则依照最后定义的。不同的选择符定义相同的元素时，要考虑到不同的选择 符之间的优先级。id选择符，类选择符和htmlfe记选择符，因为id选择符是最后加上元素上的，所以优先级最高，其次是类选择符。如果想超越这三者之间的关系，可以用important提升样式表的优先权，例如:p color#ff0000!important blue color:#0000ff#id1 color:#ffff00同时对页面中的一个段落加上这三种样式，它最后会依照被important 申明的htm而记选择符样式为红色文字。如果去掉important,则依照优先权最高的id选择

8、符为黄色文四、样式表中的注释在css中插入注释来说明你代码的意思,注释有利于你或别人以后编辑和更改代码时理解代码的含义。在浏览器中，注释是不显示的。css1释以/* 开头，以*/ 结尾,如下:/*定义段落样式表*/text-align: centercolor: black ； /*;/*文本水平居中排列 文字为黑色*/*/font-family: arial /*字体为arial */五、外部样式表外部样式表将管理整个web页的外观。外部样式表是把样式表保存为一个单独的样式表文件，文件扩展名为.css,在页面中用link标记，可以链接到外部样式表文件，这个link标记必须放到贝囿的 区内，如

9、下所不：其中，rel=stylesheet”是指在页面中使用这个外部的样式表；type=text/css 是指文件的类型是样式表文本；href=style.css是文件所仕的位直；media是选择媒体类型。一个外部样式表文件可以应附十多个页面。当你改变这个样式表文件时，所有页面的样式都会随之改变。在制作大量相同样式页面的网站时，非常有用，不仅减少了重复的 工作量，而且有利于以后的修改、编辑，浏览时也减少了重复卜载代码。随堂实训1.分别使用头部样式表和外部样式表文件，美化“鲜花配送网站”的各个页面。小结本节主要讲述了样式表中复合标记和外部样式表文件的建立，运用复合标记:可以灵活 自如的美化网页中的指定内容，运用外部样式表文件，可以对相同效果的页面进