《css-day01教案.docx》由会员分享，可在线阅读，更多相关《css-day01教案.docx（34页珍藏版）》请在三一办公上搜索。
1、CSS第一天o.1学习目标（1）可以用三种方式书写CSS。（2）可以说出选择器的种类以及优先级。（3）能使用文字与字体样式属性。（4）明白列表样式属性的具体使用方式。（5）能够说出伪类选择器的使用场景，会使用伪类选择器进行超级链接的美化。（6）能够说出样式的继承特点和注意点。0.2学习指南重点掌握CSS代码的书写方式。掌握选择选择器的种类、优先级以及特点。掌握样式属性名、值以及含义掌握列表样式属性名、值以及含义。第一堂课本节知识点:CSS的简介、作用、以及三种书写方式的格式和应用。本节目标：能说出CSS作用能够利用三种方式书写CSS代码明确三种方式书写CSS的注意点1.1CSS简介1.1.1知
2、识概述1.1.2视频详情（14：30）.a.，*1.1CSSNl介MWHff.W7MMCW1：I-LW何总习).OTeyOI三*Xi9rsym*a,1.L3总结与补充CSS（CascadingStyleSheets的缩写），翻译为层叠样式表”或者级联样式表，简称样式表。CSS代码的书写规范选择器声明吉明CSS代码它是由选择器与，对大括号来组成大括号里面是由一条条声明语句组成每条声明语句都必须使用英文状态下面的分号来结束每-条声明语句都是由属性:属性值”来组成属性值不需要加引号在CSS代码中如果属性值是数值型数据的时候通常都需要加单位单位是PX像素CSS代码中不能出现有任何HTML标签的东西1.
3、1.4课堂提问与练习1,CSS的作用是什么？2、书写CSS代码的注意点？1.1.5习题答案1、它主要是用来给HTML网页来设置外观外观其实指的是：HTML中的比如字体的颜色、字体的大小、以及文本用什么字体、背景颜色、背景图片2、CSS代码它是由选择器与一对大括号来组成大括号里面是由一条条声明语句组成每一条声明语句都必须使用英文状态下面的分号来结束每一条声明语句都是由属性:属性值来组成属性值不需要加引号在CSS代码中如果属性值是数值型数据的时候通常都需要加单位单位是PX像素CSS代码中不能出现有任何HTML标签的东西1.2嵌入式1.2.1知识概述学习CSS代码书写格式以及嵌入式的概念和使用方式。
4、1.2.2视频详情（9）l2fMnce.IVS17HA3fiVM91.2.AAimEaUW1.2.3总结与补充1、什么叫嵌入式？将CSS代码报入在HTML网页里面嵌入式是通过HTML中的标记将CSS代码嵌入到HTML网页中格式：选择器属性:属性值;特别说明：标记它可以放置在HTML网页中的任何地方但是我们建议就把它放置在head标记里面1.2.4课堂提问与练习1、什么是嵌入式？2、嵌入式的格式是怎样的？1.2.5习题答案1、什么叫嵌入式？将CSS代码嵌入在HTML网页里面嵌入式是通过HTML中的标记将CSS代码报入到HTML网页中2、格式：选择器属性:属性值;特别说明：标记它可以放置在HTML
5、网页中的任何地方但是我们建议就把它放置在head标记里面1.3外链式13.1知识概述学习CSS外徒式的概念和使用方式。1.3.2视频详情(11)MHKIlUOMB*1JMWm闯与修日1.IttfJMKtN$m?39KC，3EmUOSKMfiSnLAJfiZ*1.3.3总结与补充外链式是指单独写，个以.CSS为扩展名的文件,然后在中使用Clink标签,将这个css文件链接到html文件中格式I说明：CSS文件的地址可以是相对路径与绝对路径注意：1、Iink标记可以有多个意思同时可以引入多个CSS文件head外链式2、我们一定要先确认CSS文件是否被引入成功1.3.4课堂提问与练习什么是外徒式？2
6、、外链式的格式？3.如何确认CSS文件是否被引入成功?13.5习题答案1、外住式是指单独写个以.css为犷展名的文件，然后在中使用Vlink标签,将这个css文件链接到html文件中2、格式t说明：CSS文件的地址可以是相对路径与绝对路径3、以谷歌浏览器来例：失败的和正确的D?*ACfleCheAlMOwl/Dnlttop/CSSDAYl/代M4fiChtInlM-y杏罔览图机口行立航行的右It出-rrm的的。曲第三步：选JFfOrtr这个酢VmiU.*mVstacusi2-iiPMyf*rT*败砌泉示文住甫宵廿置人城功IDlIiftSTrwhedW.lrt11(flEICmrreCencoi
7、tSOurCMMtMXiTmeonScuMAudmO：j0SVjBE%OPMgObUMCAdwomft2WeHMgJr-U9eUHdtMorSmTET*w!-SMTe40000m00m100XCmtLOOiAW%MMeM9WM(M5MCMFlFmINddvwtOttwrOlJw1IMdtaXzn(Mad)-lOl3mMIlpuMezscFwedrtefhet2*MT:OBlm1-4行内式1.4.1知识概述IMMM!，.|1.4行内式第值息Iw方长-%w渺T程名秽14HKaw*与第W1.ft4fyW?2.*s*3.KSSW三iaWtHTMMKW.叱可以1.4.3总结与补充什么是行内式？将CSS代
8、码写在HTML的标签的style属性中格式I标签名Style=格式声明语句1;格式声明语句1;/标签名1.4.4课堂提问与练习1、什么是行内样式？2、行内样式的格式？3,哪一种CSS书写方式可以被多个HTML文件所共享，那种不可以？1.4.5习题答案1、行内样式：将CSS代码写在HTML的标签的Style属性中。2、格式t标签名StyIe=格式声明语句1;格式一句1;，标签名。3、使用嵌入式这种方式书写的C5S代码不能被多个HTML文件所共享使用外住式书写的CSS代码可以被多个HTML文件所共享第二堂课本节知识点：CSS代码注释，基本选择器的各类使用。本节目标：会使用CSS代码的注释会使用各类
9、的基本选择器2.1注释2.1.1知识概述学习C55代码注释方式2.1.2视频详情（5：30）IMaBT”3CftIICy2.1JU?ram*Al程时长：5分27秒iXW稀：2lvi问售与练习1.住IV的作用？2.注V*的格式？3.注K的住3?2.1.3总结与补充格式，/*注释的内容767/*我们要给div元素设置宽度100像素高度100像素背景颜色为红色*/8div9width:lpx;/*!：来曾宽尸*/10height:100px;*h1l1S*/11background-coLor:#f。；/*用；殳百哥12131415注意t千万不要在CSS代码中使用HTML的注释格式2.1.4课堂提问
10、与练习1注释的作用？2、注释的格式？3、注释的注意点？2.1.5习题答案1、帮助程序员维护代码。2、格式：/*注释的内容73、写CSS代码不要使用html的注释。同理写html的代码不要使用CSS的注释。2.2基本选择器2.2.1知识概述学习选择器的概念、作用，以及选择器的分类，重.点学习基本选择器中各种使用方式。2.2.2视频详情(20：22)(ZT)BMSS|1*MarMiTUafl11aMfIiHIfndw*Ti*l一22g课程信息触时长：1929秒Wg:22基本透择.avi问答与练习1.什么是选8?2.基本选揖器中各种使用方式以及对应格式是什么？2.2.3总结与补充选择器是指通过一定的
11、语法规则选取到对应的HTML标记,然后给这个对应的HTML标记设置样式选择器分类：基本选择器.复合选择器.伪类选择器.属性选择器224课堂提问与练习1,什么是选择器？2.基本选择器中各种使用方式以及对应格式是什么？2.2.5习题答案1、选择器是指通过一定的语法规则选取到对应的HTML标记,然后给这个对应的HTML标记设置样式2、基本选择选择器格式含义举例通用选择器*格式声明语句;通用选择器，将匹配HTML所有标签。不建议使用，晓不支持,大网站增加客户端负担，*margin:Opx;标签选择器标签名格式声明语句;标磐选择器，匹配所有HTML标签元素。pfont-size:14px;类选择器.cl
12、ass属性值格式声明语句；类选择器，给拥有指定的CLASS属性值的元素设置样式.boxwidth:800p右Id选择器#id属性值格式声明语句;Id选择器可以为标有特定ID的HTML元素指定特定的样式，只能使用一次。ID选择器以#来定义。#titlefont-size:14px;第三堂课本节知识点：学习尺寸属性，文本与字体样式属性案例：本节目标：会在浏览器中查看尺寸属性。能使用文字与字体样式属性。3.1尺寸样式属性3.1.1知识概述学习尺寸样式属性有哪些以及如何查看3.1.2视频详情（3：59）Jmg.inmrM.B*.Tanffi31尺寸样式属性课程（S息Sft:3分5秒.课程8称：3L尺寸
13、样式属性.avi问答与练习1、尺寸祥式M性的、值、含义？2.在爸联浏览髓M元案的尺寸属性的两种方式是什么？3.1.3总结与补充属性值含义heightauto：目动，浏览器会目动计算高度length：使用PX定义高度%：基于包含它的块级对象的百分比高度设置元素高度width同上设置元素的宽度3.1.4课堂提问与练习1、尺寸样式属性的、值、含义？2、在谷歌浏览器查看元素的尺寸属性的两种方式是什么？3.1.5习题答案1、height/widthauto：自动length：使用px定义高度%:基于包含它的块级对象的百分比高含义：设置元素的高、宽2、在谷歌浏览器第一种方式:Ah+向左箭头 Ah向有需头
14、CtrifRCtrIfS CtH+PCtdUCtrl+Shift+Ifi(B)前进(F)重新加Ife(R)月存为（八）.Hffl(P)-总成中文(置体)(T)在红色方块上右Sl 点击-选择检查查看河贝房代6(V)第二种方式:再点击红色方块ApplicationSecurityAudits,http;/wmm.w3.oreTRhtallDTDXhtall-transitional.dtd块3.2文本与字体样式属性3.2.1知识概述学习文本与字体样式属性。3.2.2视频详情（19：38）(a*Iaaaaaiaamaaa*3.2文本与字体样式性Mill*WtKW3iR.a2fra?*wtClIQ，”
15、习1.ifiSXX*f三.4ftCHKL?3.2.3总结与补充文本与字体样式属性都有哪些？CSS属性文本与字体样式属性属性名值含义font-size如侬、加记得加单位设置文本大小font-styienormal（正常）、（italic）斜体设置文本为斜体font-family宋体、黑体等设置文字字体font-weightNoiTna1（正常、不加粗）、bold设置文字粗细color#母OOP或red或rqb(358)设置文本濒色text-alignIeft(默认值)、right、center没置文本的水平对齐方向text-decorationrwe（去掉文本修饰线）、Underline（下划线
16、）,、overle（划线）、Hne4hrough（l!除线）设第文本修饰线text-transfoncapitalizeXuppercase、lowercase大小写转换或者首产母大写Line-height固定值或百分比设置行高text-indentPX或者m设置首行缩进3.2.4提问与练习1、设置文本大小、字体、行高、颜色、对齐方式的属性、？325习题答案1、font-sizeafont-family、line-height,color、text-align3.3文本与字体样式属性案例3.3.1知识概述学习文本与字体样式属性的具体使用案例3.3.2视频详情（9：31）333总结与补充无334
17、课堂提问与练习无3.3.5习题答案尤第四堂课本节知识点：学习复合选择器、列表样式属性，列表样式属性案例；本节目标：能够使用复合选择器中各类选择器。知道列表样式属性各个值及其含义。知道列表样式属性的具体使用方式。4.1复合选择器4.1.1知识概述学习复合选择器中各种使用方式.4.1.2视频详情（17：00）4.1MdiKMISXg.*181?4】*Mz何与修习1.MftSmXMM!9WM?2WMjtfltSMmeu?4.1.3总结与补充复合选择器分为L多元素选择器2.后代元素选择器3.子元素选择器4.相邻元素选择器；相邻元素选择器的使用要点:相邻元素选择器它只匹配当前元素的下面的同级兄弟元素，并
18、且要求这两个元素必须是邻居元素这两个元素中间不能有其它的元素存在4.1.4课堂提问与练习1、复合选择器中各类选择器的使用方式？2、相邻元素选择器的使用要点？4.1.5习题答案CSS选择器一一复合选择器选接器含义举例选挂器1,选挂器2格式声明语句;多元素选择器多元素选探器，同时匹配选挂器1和选挂器2,多个选捺器之间用逗号分隔p,h1,h2margin:0px;ER格式声明语句B后代元素选择器后代元素选授器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔#SIidebarpfont-color#990000;ER格式声明语句;子元素选择器子元素选择器，匹配所有E元素的子元三FdivApcol
19、or#990000,E+F格式声明语句3相邻元素选择器相邻元素选择器，匹配所有於随E元素之后的同级元素Fdiv+drvColOr#990000,2、相邻元素选择器它只匹配当前元素的下面的同级兄弟元素，并且要求这两个元素必须是邻居元素这两个元素中间不能有其它的元素存在4.2列表样式属性4.2.1知识概述学习列表样式属性的具体使用方式。4.2.2视频详情(13:40)IaeaIfg-42WI19iMM长135)08.眺洛且4N,UJXm,问答与修习IfJEJRbWS?2W*CmmK41.S5cM94.2.3总结与补充列表样式属性分为有序列表属性和无序列表属性list-style这个属性它是上面三个
20、属性的简写属性它可以同时的设置去除列表前面的项目符号同时也可以设置其位置也可以同时的设置把项目符号换成一个图片IiSt-Style:个数不定位置也不定例如：list-style:noneinsideUrK图片的地址)；4.2.4课堂提问与练习1、列表样式属性分为？2,列表样式属性的类型以及代表值的含义？3、list-style属性的特点？4.2.5习题答案1、列表样式属性分为有序列表属性和无序列表属性2、屋性值含义list-style-typenone（将列表前面的项目符号去掉）,disc（实心园）,square（实心小方块）,circle（空心园）设量列表前项目符号的类型。list-styl
21、e-positionInSkfe（在里面）,outside（在外面）设置列表项标记的放置位置。list-style-image四（图像路径）将图象设置为列表项标记。list-stylesquareinsideurl(arrow.gif)在一个声明中设置所有列表属性3、IiSt-Style:个数不定位置也不定。4.3列表样式属性案例43.1知识概述学习列表属性案例4.3.2视频详情（14：00）迎4.3列=慢案例MHKIBMwJMW4J+WHNIm五习4.3.3总结与补充1、使用列表属性完成案例434课堂提问与练习无4.3.5习题答案第五堂课本节知识点:学习伪类选择器的使用以及其注意要点、超级链
22、接美化。本节目标：能够说出伪类选择器的使用场景，会使用伪类选择器进行超级链接的美化。5.1伪类选择器5.1.1知识概述伪类选择器的使用及其注意要点5.1.2视频详情(14:45).M.，,O.一.5伪类密Hl“硬时长：wsuMIF&*!仆闻与3工Wflfle1JW!二twmwm三r?5.1.3总结与补充伪类选择器它主要是用来给超级链接的不同状态来设置样式超级链接就是指a标签属性含义:link向未被访问的储接添加样式。visrted向已被访问的谁接添加样式。:hover当鼠标悬浮在元素上方时，向元素添加样式。:active鼠标放在元素上面时，点击的一瞬间：link没有访问之前的状态:visite
23、d访问过后的状态:hover当鼠标放上超级链接上面时鼠标放上状态:acitve用户用鼠标点击了超级链接但是用户还没有松开鼠标5.1.4课堂提问与练习1,伪类选择器的主要作用？2、伪类选择器的顺序是什么样的？5.1.5习题答案1、伪类选择器它主要是用来给超级链接的不同状态来设置样式超级链接就是指a标签2、伪类选择器是有顺序的必须是固定的写法Jink:visited:hover:active我们将这个顺序称之为爱恨准则”先有爱才有恨LoveHate”如果不按照这个顺序那么样式效果就会失效！5.2超级链接的美化5.2.1知识概述利用伪类选择器来进行超级t接的美化。5.2.2视频详情(10)*程值息M
24、B-93SMSi?3zta*M匕*问H与博习1.R表1M*HM*三a*5.2.3总结与补充我们通过会将超级链接的下划线去除掉同时给超级链接设置一个颜色-般情况下：未访问之前的状态与访问过后的状态的效果应该是样的然后鼠标放上时又设置另外一种颜色因为鼠标点击的时间太短了所以我们一般不会考虑鼠标激活状态a:Iink,a:ViSited去除下划线;设置-个颜色;a:hover设置-个颜色;5.2.4课堂提问与练习1、如何去除超链接的下划线、设置一个颜色？5.2.5习题答案1、a:Iink,a:ViSited去除下划线;设置-个颜色;a:hover设置-个颜色;第六堂课本节知识点：学习属性选择器、继承性
25、和优先级。本节目标：能够说出属性选择器的概念。能够说出样式的继承特点和注意点。能够说出各种选择器的优先级。6.1属性选择器6.1.1知识概述学习属性选择器的概念和各个选择器的含义6.1.2视频详情(16:23)6,lMiiK UnraaWt 1516 .: KmtfaM(9与修习L gJfflU5OTOTua 含乂忏么 6.1.3总结与补充属性选择器它是与标签的属性名和属性值有关！attr这个是attribute这个英文单词的缩写它表示就是属性的意思6.1.4课堂提问与练习1、各类属性选择器的书写方式以及含义是什么？6.1.5习题答案选择器含义举例糜匹配所有具有atrJI性的元素，不考虑它的值
26、Halgnnpttypeszeattr二uva11匹配所有attr属性值等于Val的元素h1align=ucentern应性值一般加引号腼二yl匹配元索中attrJI性以指定值开头的所有元素FonUcoIor=WlattrS=l,va11匹配元素中attr属性以指定值结尾的所有元素FontcolorSOOattr=aval,Iv*v.匹配元素中attHI性中包含指定值的所有元素FonHcoIore=aOO6.2继承性6.2.1知识概述学习样式的继承性特点。6.2.2视频详情6.21ftjIi.m好宓.mMr62鼻川氏破与习1.a新，KEa奚，2ItSCMkMHYg?6.2.3总结与补充问题：是
27、不是所有的样式都能够被继承呢？不是所有的样式都能够被维承只有文本与字体样式属性才能够被继承特点：外层元素的样式会被内层元素的样式所继承如果内层元素的样式与外层元素的样式相同时外层元素的样式会被内层元素的样式所覆盖不是所有的样式都能够被继承只有文本与字体样式能够被维承注意：我们在实际的工作中会给body标记来设置字体颜色以及字体大小因为body标记是最外层的元素它的样式会被内层元素所继承624课堂提问与练习1、是不是所有的样式都能够被继承呢？2、样式继承性有什么特点？6.2.5习题答案1、不是所有的样式都能够被继承只有文本与字体样式属性才能够被继承2,特点：外层元素的样式会被内层元素的样式所继承
28、如果内层元素的样式与外层元素的样式相同时外层元素的样式会被内层元素的样式所覆盖不是所有的样式都能够被继承只有文本与字体样式能够被继承6.3优先级63.1知识概述学习选择器的优先级。6.3.2视频详情6.3 B“amn长吩会m!?6主片装胸4同与修习1.9*2.SHtt*三M4?6.3.3总结与补充行内样式|D选择器类选择器标签选择器般而言，选择器指向的越准确，它的优先级就越高。通常我们用1表示标签选择器的优先级，用10表示ClaSS选择器的优先级，用IoO标示ID选择器的优先级，用IoOo表示行内样式。标签选择器1类选择器10ID选择器100行内样式1000值越大表示优先级越高不管是单个选择器还是多个选择器之间的优先级我们都可以通过上面这个公式来进行计算!我们符这个值称之为杈重值越大表示权重越高！9color:#0f0;101112div13color:#f00;1415#div16color:#00f;17*/1819divh220coLor:#fee；212223.divh224coLor:#00f;2526#h227coLor:#0fe；28Q6.3.4课堂提问与练习1、选择器的优先级？2、选择器优先级的特点？6.3.5习题答案1、行内样式ID选择器类选择器标签选择器.2、一般而言，选择器指向的越准确，它的忧先级就越高.
