电子商务网页设计与制作 教案 第9次课 CSS初接触（二）

湖南商务职业技术学院教案教学过程设计

（1）行内样式

（2）内部样式

（3）链接式

（4）导入式链接式与导入式最大的区别在于链接式使用HTML的标签引入外部CSS文件，而使用导入式则是使用CSS的规则引入外部CSS文件

（5）各种方式的优先级问题如果以上四种方式同时运用到一个HTML文件的同一个标记上时，将会出现优先级的问题如果所引入的CSS没有冲突，则所有样式都表现出来；如果样式发生冲突，按照以卜.规则表现行内式的优先级最高行内样式（Style—）ID选择符样式类选择符样式标签样式》浏览器默认样式；当CSS选择器同名的时候，HTML会按照CSS在网页中出现的顺序，至上而下的表现，后面的CSS样式覆盖前面的CSS样式（-）CSS与浏览器就我们目前主流的两大浏览器IE（InternetExplorer）和Firefox（火狐）而言，在某些细节的处理上就不尽相同而IE本身在其不同的版本上如IE

6、IE

7、IE

8、IE

9、正10对相同的页面的浏览效果都会存在一些差异注意:一•般建议大家在电脑上安装多个主流浏览器，如IE、FirefoxOpera等使用CSS制作网页时.，通常的做法是一边编写HTML和CSS代码，一边在不同的浏览器上进行预览测试，及时调整各个细节，这对深入掌握CSS也是很有好处的对于不同版本的IE浏览器我们可以在电脑上装一个高版本的IE浏览器，然后使用正test进行测试另外Dreamweaver里面的设计视图模式只能作为设计时候的参考使用，绝对不能作为最终的显示效果的依据，只有在浏览器中看到的效果才是真正大家看到的效果

（三）CSS的继承性微课学习学生自主观看微课视频，掌握“css的继承性”知识内容CSS的继承特性color、fontsize、fontfamily、font-style、font-weight、的属性，如峥rder、marginpaddingtexttext1ine2align、textdecoraLioruindent、letterspacingheight不能被继承盒子、定位、布局注意不是所有的css样式都可以继承（I）CSS文本属性都会被继承的

（四）CSS的层叠性微课学习学生自主观看微课视频，掌握“CSS的层叠性”知识内容

1、先选人再抢答内部样式使用哪个标签插入在网页的哪个部分呢？

2、先选人再抢答以链接的方式引入外部样式使用的是哪个标签放在网页的哪个部分呢？（linkhead）现在有一个外部样式表文件ys.css如下图授课章节及主题CSS初接触

（二）课次9教学目标知识目标.掌握在HTML中引入CSS的方法（行内样式、内部样式、链接式、导入式）.掌握CSS与浏览器的关系能力目标.能够利用CSS进行网页样式的定义；.能够利用CSS进行网页元素的排版与定位素养目标.培养学生清IW有序的逻辑思维；.培养学生数据分析与总结的意识；.培养学生系统分析与解决问题的能力学情分析知识基础学生已经具备了一定的计算机操作能力和Photoshop.Dreamweaver软件的基本操作技能，对HTML标记语言与CSS的语法结构有一些基本的了解学生特点.学生爱学习爱思考爱表达，喜欢动手实践，但学生自律性不强，遇到困难时畏难.前续内容的知识绝大部分同学掌握较好，少部分同学操作不太熟练.解决复杂问题能力弱，缺乏知识迁移能力教学重点.行内样式.内部样式.链接式.导入式.各种方式的优先级问题.CSS和浏览器的关系教学难点在HTML引入CSS的四种方式的比较与优先级教学方法讲授法案例演示法讨论法实践法线上线下混合式教学资源与平台教学平台超星学习通https:〃www.xueyinonline.com/detai1/221724252参考书.《电子商务网页设计与制作》，电子工业出版社.《HTML5+CSS3网页设计与制作》，人民邮电出版社参考网络资源.菜鸟教程https://ww.runoob.com/.虎课网:https://huke

88.com/环节教学内容教师活动学生活动知识回顾12min

1、先选人再抢答什么CSS

2、先选人再抢答CSS的语法结构是怎样的？写出来拍照回复

3、先选人再抢答连连看【课堂活动】.教师发布签到活动，选“值日生”指令；.值日生拍照上传，教室左前，左后，右前，右后和全景图5张，并拍摄一段全景视频；

3.教师通过开展各种课堂活动回顾上次课知识点

1.学生积极参与课堂活动通配选择符标签选择符ID选择符类选择符

4、先选人再抢答图中的CIcontentpa{color:1060;text-decoration:

5、先选人再抢答图中的吗？若不正确，错在哪里呢？hl.red{font-family:黑font-size:36px;text-align:centcolor:1060;

6、设置文字颜色为红色的，样式设置hl的文字为红色，置应用#ys的文字为红色，如］化？答案写在纸上，拍照回复I1sfooter■Mrgin C^i;bodyIb«ckground-eolor9TTTTCC;.trytAbl»lMigmrcalSp«:arg—4Cpx;|«401卬5⑶ss样式选择符属于哪种类型？none;css样式交集选择符形式正确体”；;er;旨明如color:red;现要设计如下设置段落p的文字为红色，设可定义这些样式可以代码最优MMMaaMM:x^一1«■•■•■■■■■»♦•一•••*****•二6”.，—一•必i知识准备30m一在HTML中引入CSS的方法

1.【知识讲授】教师讲解在HTML中引入CSS

1.听取教师讲解知识

3、先选人再抢答

1.【发布任务】知识

（1）下图中网页的预览效果会是怎样的？教师在学习通发布活动

2.【归纳总结】来回巡视及时帮助学生解决问题完成知识检测检测15min!doctypehtmlht«lh«adnotachars«t«utf-8-tltl9C33/titlGotyle*typo-t®xt/c3a-h3color:r«d;/f/［色•/font-8iz«:20px;/修，、小为204索♦/float:light;/*文字右对齐♦//styl»/headbody23文字/h3/boly@charsetutf-8;/*CSSDocument*/h3{color:green;/★文字、色为绿色★/font-size:10px;/*字体大小为10位家*/float:left;/*文字左对齐*}2链入一个外部样式会有什么变化呢？!doctypehtmlhtmlheadmetacharset-utf-8titlecs3/titleOtyletype=text/c33wh3{color:red;/*文学■色为红色*/font-size:20px;/♦jT大小为20tt•.*/float:right;/♦文字右对齐♦//atvleklinkhre£=yjcjotype=・text/cj”]7nGacibodyh3文字/h3/body/html3导入一个外部样式会有什么变化呢？!doctypehtmlhtmlheadmetacharset=nutf-8titlecss/titlestyletype=Mtext/cssh3{color:red;/*文字颜色为红色*/font-size:20px;/，厂家大小为20像宏*/float:right;/*文亍行对齐*/@importurlys-css**;/head/stylebodyh3文字/h3/body/html|技能训练30min❷技缝训练・用点

2.

1.1CSS初接触之知识准备操作题

1、新建一个外部样式表文件，名为mycss.css内容如下.【实操演示】教师分析效果网页，并进行实操演示.【发布任务】教师在学习通发布技能任务.【实践指导】来回巡视，及时帮助学生解决问题

1.观看实操演示，掌握CSS语法与选择符的应用

2.完成技能训练题1日港1nrcwcwxIcLarsex•ucf-S1■”的gcolor IOC;ecolor:1C08;color:I0F0;Pcolor:tCOO;

2、新建一个HTML文件，在DW中实现如下效果1DOCTYPEhtal9VBLXCXHTHL

1.0rrantltlOft*1//W■http://wvm.v

3.org/TX/*htal1/OTD/xhtal1-txAnsitional.dldMhtnljnlnB«*http://vwv.w

3.or9/l91/xhtala■a«Qhttp-«julv»Cont»nt-ypconx«nt*t«xt/htal;ch*r»efutf-8/#入C38的方式/tmiMatyl«typ***t«xt/c«»*■7foot-r^uiy F体）22px，liM-b«i9ht30px color:«33C;.〈linkhr«f--tyl«/«yc««.c««r«I«**atyl»ahMt**type«atext/c«a*/p•tyX***col©r r»d;focc・“・24p3K；bcrSr dottyTXL5c■以HFWI不■mint.它0・1浦T仍同产生行用.SCoa-GT方雄%35t；EL3卷在一化.TfcE*ifr./p中.♦入CMft方也王■第2特.分例为・$ro«gMjmmC/・，rQng・〈9加94入式式/nxa・/p“布◎也Tc8M式・WA方式勾以伊演■龄MX个元WQX”尤/pfn/botfy第四步保存为html文件，分成1个文件或者多个文件保存皆可第五步通过不同浏览器查看网页效果第六步将网页效果截图上传课堂小结3min通过对本次课的学习，让学生掌握在HTML中引入CSS的四种方法，为以后课程的学习奠定一个基础作业布置.继续完成技能训练任务，并提交至学习通.预学下一次课的内容教学反思。