css-day01教案.docx
CSS第一天o.1学习目标（1）可以用三种方式书写CSS。（2）可以说出选择器的种类以及优先级。（3）能使用文字与字体样式属性。（4）明白列表样式属性的具体使用方式。（5）能够说出伪类选择器的使用场景，会使用伪类选择器进行超级链接的美化。（6）能够说出样式的继承特点和注意点。0.2学习指南重点掌握CSS代码的书写方式。掌握选择选择器的种类、优先级以及特点。掌握样式属性名、值以及含义掌握列表样式属性名、值以及含义。第一堂课本节知识点:CSS的简介、作用、以及三种书写方式的格式和应用。本节目标：能说出CSS作用能够利用三种方式书写CSS代码明确三种方式书写CSS的注意点1.1CSS简介1.1.1知识概述1.1.2视频详情（14：30）.a.，«*1.1CSSNl介MWHff.W7M>MCW1：I-LW何总习).OTeyOI三*Xi9rsym*a,1.L3总结与补充CSS（CascadingStyleSheets的缩写），翻译为"层叠样式表”或者"级联样式表"，简称样式表。CSS代码的书写规范选择器声明吉明<tableWidth="600"><table>CSS代码它是由选择器与，对大括号来组成大括号里面是由一条条声明语句组成每条声明语句都必须使用英文状态下面的分号来结束每-条声明语句都是由"属性:属性值”来组成属性值不需要加引号在CSS代码中如果属性值是数值型数据的时候通常都需要加单位单位是PX像素CSS代码中不能出现有任何HTML标签的东西1.1.4课堂提问与练习1,CSS的作用是什么？2、书写CSS代码的注意点？1.1.5习题答案1、它主要是用来给HTML网页来设置外观外观其实指的是：HTML中的比如字体的颜色、字体的大小、以及文本用什么字体、背景颜色、背景图片2、CSS代码它是由选择器与一对大括号来组成大括号里面是由一条条声明语句组成每一条声明语句都必须使用英文状态下面的分号来结束每一条声明语句都是由"属性:属性值"来组成属性值不需要加引号在CSS代码中如果属性值是数值型数据的时候通常都需要加单位单位是PX像素CSS代码中不能出现有任何HTML标签的东西1.2嵌入式1.2.1知识概述学习CSS代码书写格式以及嵌入式的概念和使用方式。1.2.2视频详情（9）l2¾¾fMnce.IVS17HA3fiVM91.<½JMX>2.AAimEaUW1.2.3总结与补充1、什么叫嵌入式？将CSS代码报入在HTML网页里面嵌入式是通过HTML中的<stylex/style>标记将CSS代码嵌入到HTML网页中格式：<styletype="textcss">选择器属性:属性值;<style>特别说明：<style>标记它可以放置在HTML网页中的任何地方但是我们建议就把它放置在head标记里面1.2.4课堂提问与练习1、什么是嵌入式？2、嵌入式的格式是怎样的？1.2.5习题答案1、什么叫嵌入式？将CSS代码嵌入在HTML网页里面嵌入式是通过HTML中的<stylex/Style>标记将CSS代码报入到HTML网页中2、格式：<styletype="textcss">选择器属性:属性值;<style>特别说明：<style>标记它可以放置在HTML网页中的任何地方但是我们建议就把它放置在head标记里面1.3外链式13.1知识概述学习CSS外徒式的概念和使用方式。1.3.2视频详情(11)MHKIlUOMB*1JM¾Wm闯与修日1.IttfJMKtN$m?39KC，3EmUOSKMfiSnLAJfiZ*1.3.3总结与补充外链式是指单独写，个以.CSS为扩展名的文件,然后在<head></head>中使用Clink>标签,将这个css文件链接到html文件中格式I<linkrel="stylesheet"type="textcss"href=*要链接的css文件的地址">说明：CSS文件的地址可以是相对路径与绝对路径注意：1、Iink标记可以有多个意思同时可以引入多个CSS文件<!CTYPEhtmlPUBLIC"W3CDTDXHTML1.0TransitionalEN"httpwww.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd,><htmlxmlns=Hhttp:/www.w3.org/1999/xhtmlMxml:lang="en,>head><metahttp-equiv=Content-Type,content=texthtml;Charset=UTF-8,><>外链式<t.e><linkrel=nstylesheettype="textcss"href="index.css"><lin-rel«MstylesheetMtype=,te×tcss,href三wpublic.css,><head><body><div><div><body><html>2、我们一定要先确认CSS文件是否被引入成功1.3.4课堂提问与练习>什么是外徒式？2、外链式的格式？3.如何确认CSS文件是否被引入成功?13.5习题答案1、外住式是指单独写个以.css为犷展名的文件，然后在<head></head>中使用Vlink>标签,将这个css文件链接到html文件中2、格式t<linkrel="stylesheet"type="textcss"href="要链接的css文件的地址">说明：CSS文件的地址可以是相对路径与绝对路径3、以谷歌浏览器来例：失败的和正确的D?««*ACfleCheAlMOwl/Dnlttop/CSSDAYl/代M¼4fiChtInlM-y杏罔览图机口行立航行的右It出-rrm的的。曲第三步：选JFfOrtr这个酢VmiU.*mVstacusi2-iiPMyf*rT*败砌泉示文住甫宵廿置人城功IDlIiftSTrwhedW.lrt11(flEICmrreCencoitSOurCMMtMXiT>me<nProtIAp4M>onScuMAudmO：j0SVjBE%OPMgObUMCAdwomft2«WeHMgJr-U9e<UH<dt<iuU«UQKMIftCSSImgMMMIDOrWSMmF8erUnaM200mt300m«0mSOOmimt7100mt100rra1000NmSgg>MorSmTET*w!-SMTe40000m>00m100XCmtLOOiAW%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代码写在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代码的注释会使用各类的基本选择器2.1注释2.1.1知识概述学习C55代码注释方式2.1.2视频详情（5：30）IMaBT”3»CftIICy'2.1JU?ram*Al程时长：5分27秒iXW稀：2lvi问售与练习1.住IV的作用？2.注V*的格式？3.注K的住3?2.1.3总结与补充格式，/*注释的内容76<styletype=,textcss,>7/*我们要给div元素设置宽度100像素高度100像素背景颜色为红色*/8div9width:lpx;/*!：来£曾宽尸*/10height:100px;*h1l1S*/11background-coLor:#f。；/*用；殳百哥12131415<style>注意t千万不要在CSS代码中使用HTML的注释格式2.1.4课堂提问与练习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*«MarMiT»U«afl11aMfIiHIfnd>w*Ti*l一22g课程信息触时长：1929秒Wg:22基本透择.avi问答与练习1.什么是选«8?2.基本选揖器中各种使用方式以及对应格式是什么？2.2.3总结与补充选择器是指通过一定的语法规则选取到对应的HTML标记,然后给这个对应的HTML标记设置样式选择器分类：基本选择器.复合选择器.伪类选择器.属性选择器224课堂提问与练习1,什么是选择器？2.基本选择器中各种使用方式以及对应格式是什么？2.2.5习题答案1、选择器是指通过一定的语法规则选取到对应的HTML标记,然后给这个对应的HTML标记设置样式2、基本选择选择器格式含义举例通用选择器*格式声明语句;通用选择器，将匹配HTML所有标签。不建议使用，晓不支持,大网站增加客户端负担，*margin:Opx;标签选择器标签名格式声明语句;标磐选择器，匹配所有HTML标签元素。pfont-size:14px;类选择器.class属性值格式声明语句；类选择器，给拥有指定的CLASS属性值的元素设置样式.boxwi
