课件2-CSS部分

3-网页设计与制作-css基础课程内容体系主要内容1）什么是CSS?2）CSS的基本语法3）简单案例什么是CSS？css：CascadingStyleSheet层叠样式表background-image:url(self.jpg);background-repeat:no-repeat;background-position:rightbottom;background-color:#e9fbff;代码释义+htmlCSSCSS样式在网页中的应用CSS就是让内容和样式分离开来HTML只控制网页的内容（如文字、图片和超链接等）内容的样式由CSS来控制（如颜色、位置等）举个例子：就像模特和漂亮衣服的关系CSS禅意花园倡导人：CSS禅意花园主人DaveShea创意：提供同一网页的html源文件，人们可以用CSS将它设计成各式各样的风格并提交上来。作用：想改变人们对WEB设计的看法，向人们展示CSS设计可实现的视觉效果，但最终却出乎意料的改变了全球技术发展的趋势。源文件------css------效果优秀作品：优秀作品：优秀作品：更多作品欣赏：现场演示禅意花园更多作品CSS禅意花园—作品欣赏.rar（16课件下载）CSS学习顺序三部曲基本语法结构书写位置命名方式学习重点具体属性文字背景盒模型边框浮动和清除CSS结构类比：李逵{身高：185cm；体重：105kg；性别：男；性格：莽撞；武器：板斧；}分析（三要素）姓名、属性、属性值命名属性值拓展：唐僧八戒……CSS结构真相段落{字体大小：12像素；颜色：红色；}p{font-size:12px;color:red;}选择符（Selector）属性(Property)值（Value）测试标题1{大小：25像素；颜色：蓝色；}h1{font-size:25px;Color:blue;}CSS书写位置内嵌样式表内部样式表外部样式表内嵌样式表位置：作为属性，直接添加在HTML的开始标记里。代码说明：不推荐使用，因为不能发挥样式表的优势，无法将内容和样式分别控制。内部样式表html与CSS结合方式通过link语句链接两个文件内部和外部样式表相互转化headstyletype=“text/css”!--h1{color：red；}--/style/head内部样式表h1{color：red；}外部样式表课程重点总结html-标记-网页内容CSS-属性-网页样式美观的网页+=体验CSS项目5-1项目5-2项目5-3知识点补充!----html的注释标记，在这里是跨越的意思，当浏览器不支持css语法时，会自动越过此标记。/*……*/为CSS的注释标记。不同的属性之间用;分隔开，需要注意的是，一定要用半角的分号，不能用全角的分号。上节课知识点回顾CSS的作用是什么？CSS长什么样子？CSS代码可以写在什么地方？随堂测试：标题1：字体颜色+背景颜色+居中代码解析：综合案例-初恋这件小事本课程内容项目分析，知识讲解常用文字属性（随堂测试）命名方式css基本属性1-文字漂亮页面欣赏-1漂亮页面欣赏-2漂亮页面欣赏-3常用文字属性1、字体样式字体颜色字体、字号、文字加粗下划线2、段落样式行高文本缩进水平对齐常用文字属性color文字颜色color:#98AB6F;font-size文字字号12px;font-weight文字加粗lighter|normal|bold|300text-decoration文本下划线none|underlineline-through|overlinefont-style文字样式normal|italic常用段落样式line-height文本行高line-height:18px;letter-spacing字母间距letter-spacing:6px;text-indent首行缩进2em;text-align水平对齐left|center|right项目中其他常用属性属性名称属性含义示例width宽度width:300pxheight高度height:30px;border边框的样式、宽度和颜色border:1pxsolid#009;list-style-type列表样式类型list-style-type:none;CSS选择符命名方式标签选择符id选择符class选择符复合内容1）标签选择符如：body{}div{}span{}h1{}等等例如：h1{color:red;}……h1……/h1纠结的问题??{color:?;}……h1我是红色的/h1h1我是蓝色的/h1结论：相同的标记，我们需要区分细节！•自己起名字，使用#符号进行标识，在一个网页中只能使用一次。例如：•#red{color:red;}……h1id=“red”……/h1起的名字尽量有含义！2）id选择符id多用来做布局divid=main#maindivid=top#top/divdivid=left#left/divdivid=right#right/divdivid=footer#footer/div/divhtml结构3）class选择符自己起名字，使用.符号的形式定义，允许重复使用。例如：.blue{color:blue;}……h1class=“blue”……/h1h3class=“blue”……/h3起的名字尽量有含义！注意事项1、数字不能打头，也不能写中文。2、字母、拼音、数字和下划线都可以用来命名。3、自己起的名字，尽量有含义。解决方案完成刚才的纠结问题。三种选择符的命名方式CSS选择符命名和调用方式CSS选择符命名和调用方式三种命名方式小结：选择符名称定义示例调用示例说明标签h1{}li{}h1直接使用原有标签重新定义已有标签。id#box{}#left{}divid=left选择性调用，一个名字只能用一次。class.red,.bluepclass=red选择性调用，可多次使用。体验项目5-45-55-65-75-8上节课知识点回顾CSS的选择符有哪三种命名方式？三种命名怎么调用？复合内容群组选择符包含选择符CSS伪类4）群组选择符可以对一组对象进行相同的样式指派，例如：h1,h2,h3,p,span{color:blue;}应用：h1……/h1h2……/h2h3……/h3p……/pspan……/span可以对某个对象的子对象进行样式指派，例如：#boxa{font-size:12px;color:#ba2636;text-decoration:none;}应用：divid=“box”ahref=“#”详细/a/divdivahref=#我没在盒子#box里/a/div5）包含选择符应用举例CSS伪类CSS伪类是一种特殊的CSS定义方法，主要用于对超链接的重新定义。超链接的样式控制a:link对于超链接文字进行设置常用伪类：a:visited链接被访问后的样式a:hover用于鼠标悬停在链接上的样式a:active点击链接，未释放之前的样式选择符总结标签选择符id选择符class选择符复合选择符群组选择符包含选择符伪类?{color:red;……}选择符（Selector）体验项目5-95-105-11本课内容层叠和继承随堂测试：Google图标超链接样式表的位置内嵌样式表粉色h1style=color:#ff00ff内嵌样式-粉色/h1内部样式表红色外部样式表蓝色linkhref=*.cssrel=stylesheettype=text/css/层叠与继承P113项目5-12分别用下述3种方法，控制h1的颜色，看哪种起效果？要求：内嵌式：#ff00ff粉色；内部式：red红色；外部式：blue蓝色；P113项目5-12层叠：三种样式的优先级对于名称相同的样式，样式的优先级从高到低依次是：内嵌(inline),内部(internal),外部(external),浏览器缺省(browserdefault)。其中内部CSS和外部CSS没有优先级的先后，后定义的样式覆盖前面定义的样式，这就是所谓的层叠。继承更多资料：CSS之继承详解此为中文翻译版本，翻译者：张鑫旭。本文档生动有趣的讲解了有关CSS继承的一些知识，相信对您的学习会有所帮助的。本例中，标题1继承了什么属性？课后练习P115项目5-13随堂测试：制作Google的图标提示：字体大小：80像素字母间距：-2像素字体：Arial,Helvetica,sans-serif字母颜色：蓝（#184dc6）红（#c61800）黄（#efba00）绿（#42c34a）随堂测试-超链接的样式超链接文字和访问后：黑色12px没有下划线；鼠标滑过和点击时：橙色有下划线css基本属性2-背景源文件------css------效果背景常用属性back-groundbackground-color设置背景颜色background-color:#98AB6F;background-image设置背景图像background-image:url(a.jpg);background-repeat设置背景图像是否及如何铺排repeat:背景图像在纵向和横向上平铺no-repeat:背景图像不平铺repeat-x:背景图像在横向上平铺repeat-y:背景图像在纵向平铺background-attachment背景图像是否随对象内容滚动scroll:背景图像是随对象内容滚动fixed:背景图像固定background-position设置背景图像位置横轴(x)纵轴(y)left|center|righttop|center|bottom50%50%20px40px例如：background-position:leftcenter;随堂测试-几米的故事解析代码：缩写后的代码：body{background:#e6fbffurl(self.jpg)no-repeatrightbottom;}body{background-color:#e9fbff;background-image:url(self.jpg);background-repeat:no-repeat;background-position:rightbottom;}几米效果拓展：方法：background-position:-135px-165px;深入学习背景图片的位置-CSSSprites实际的网站上，为了背景图片寻找方便，也为了减少图片数量，经常会把常用的背景小图标放置在同一张大图片上。自我领悟——定义标题h1SuperCoolPageTitle/h1h1{……}+学习感悟第5题中10*10的图片，还有第7、8题，用网上给的图片都会有问题，看书或者阅读资料的时候，能够主动的思考，寻找合适的方法解决问题、实现效果，这个能力更重要。利用DW编写CSS看书看教学视频1-选择符命名方式2-正确命名3-书写位置命名方式和书写位置类型属性（文字）背景属性区块属性（段落）方框属性边框属性列表属性定位属性综合项目固定宽度的圆角表格#top#main#bottom4-网页设计与制作—网页布局方法练习时间下面的网页的布局你能看出来吗？是几列（几栏）的布局呢？单栏三列布局（三栏）你能画出下面的网页的布局吗？网页布局方法所谓布局定位，就是CSS网页的核心框架。方法步骤：1、根据内容，建立html文