WEB前台技术_4_CSSppt课件

1,WEB前台技术4-CSS,2,课程结构,3,第一章：CSS概述,学时：0.2学时教学方法：讲授ppt,目标:本章旨在向学员介绍CSS的相关概念及优点，通过本课的学习，学员应该掌握如下知识：1）了解CSS的概念2）了解CSS的优点,4,概述,CSS（CascadingStyleSheet）级联样式表在W3C标准中被定义为“一种对Web页面进行外观控制的机制”CSS和HTML、JavaScript是并列的3种用于Web开发的技术CSS开始是为HTML文档设计的定义文档样式将文档的内容与表现分离开,5,示例,6,示例,7,基本概念,CSS简介CSS能够将文档的格式化信息与文档的正文分离开来CSS的功能不断被扩充，目前为止，CSS样式单有两个官方标准：CSS1和CSS2目前，CSS1的功能在大多数浏览器中都得到了广泛的支持CSS的基本概念CSS由一定的语法组成，对Web页面元素的外观进行控制CSS通过一定的机制与特定文档相关联，对此文档进行样式控制CSS是Web标准推荐的页面表现控制方式CSS被设计用来替代传统的HTML表现代码,8,优点,CSS优点样式代码独立于HTML页面，有利于进行站点的统一控制样式文件可在浏览器中缓存，节省带宽，提高加载速度提高开发效率，有利于分工合作由于HTML页面中不再包含大量的表现代码，提高了可访问性控制外观更加容易提供比传统HTML更多的外观控制手段,9,第二章：CSS的样式,学时：0.3学时教学方法：讲授ppt+演示,目标:本章旨在向学员介绍CSS的样式及怎样将样式表加入到HTML和XML中，通过本课的学习，学员应该掌握如下知识：1）了解CSS的样式2）能够将样式表加入到HTML中3）能够将样式表加入到XML中,10,样式,CSS的样式按CSS代码的位置划分嵌入样式（InternalStyleSheet）：嵌入一个样式块内联样式（InlineStyle）外联样式（ExternalStyleSheet）：链接一个样式文件将样式表加入到HTML中嵌入样式内联样式外联样式,11,CSS使用-内联,内联样式-InlineStyles示例：inlineCSS.html将样式代码直接内联到标记内，以style作为属性，语句作为属性值style属性可以包含任意的CSS值使用style控制标记的边框样式为不折叠内联样式特点看上去很直观仅针对个别元素进行控制将外观控制代码散布于整个HTML文档，和传统的外观控制方式没有本质的不同一般不推荐使用,12,CSS使用-嵌入,嵌入样式-InternalStyleSheet示例：internalCSS.html使用标记将一段CSS语句插入到HTML文档层次结构中一般将这段CSS语句作为一个独立部分插入在和标记之间嵌入样式的特点也是将CSS语句直接写在HTML文档中，但它做为一个独立的标记块存在，维护和修改都要方便得多利用CSS规则来选择标记嵌入样式仅能够针对一个HTML文档进行设置，无法与多个文档关联，一般用于控制一些针对性强的独立样式嵌入样式是HTML文档的一部分，仍然有需要重复加载的问题，无法利用浏览器的缓存机制,13,CSS使用-外联,外联样式-ExternalStyleSheet通过外部样式文件对页面进行控制建立外部样式文件（.css）外部的样式文件可以通过HTML的link元素连接到HTML文档中标记放置在文档的head部分,14,外联示例,外联样式-ExternalStyleSheet示例：externalCSS.html建立外部样式文件（.css）外部的样式文件不能含有任何像或这样的HTML标记样式表文件仅仅由样式规则或声明组成,15,外联特点,外联样式的特点当样式被应用到很多的网页时，一个外部样式表是最理想的网页制作者使用外部样式表，在改变整个网站的外观时，仅需要改变一个文件大多数浏览器会保存外部样式表在缓冲区，从而如果样式表在缓冲区就避免了在展示网页时的延迟在实际开发中一般都使用外联样式,16,外联详解,外联样式-ExternalStyleSheet建立外部样式文件（.css）外部的样式文件可以通过XML处理指令PI（ProcessingInstruction）连接到XML文档中,17,第三章：CSS基本语法,学时：2.0学时教学方法：讲授ppt+上机练习,目标:本章旨在向学员介绍CSS的基本语法，通过本课的学习，学员应该掌握如下知识：1）知道CSS的基本语法2）了解CSS的选择器3）了解CSS的伪类及伪对象,18,选择符,CSS的基本语法选择符任何HTML元素都可以是一个CSS选择符，选择符仅仅是指向特别样式的元素。如：Pfont-size:12pt当中的选择符是P选择符分类类选择符Id选择符关联选择符,19,属性,CSS的基本语法-属性（简略了解）CSS的颜色常用的，如red，#00ff00等CSS的前景色color属性CSS的背景background、background-color、background-image、background-repeat、background-positionCSS的文本letter-spacing、word-spacing、text-decoration、text-transform、text-align、text-indent,20,属性,CSS的基本语法-属性（简略了解）CSS的字体font-family、font-size、font-style、font-variant、font-weight、fontCSS的边框border-width、border-color、border-style、borderCSS的伪类link、hover、active、visited,21,选择器,CSS的基本语法选择器使用一定的规则来指定一个或一组标记，从而对它们进行统一的外观控制每个选择器后面都跟着一组属性，这些属性用大括号括起来，以分号隔开每组属性包括属性名称和属性值,22,标记选择器,使用标记选择器可以对HTML或XML中所有你想要定义的元素进行标识选择文档内所有指定标记的结点，然后对它们应用样式html.css,bodycolor:blockpfont-family:”sansserif”ptext-align:center;color:redptext-align:center;color:black;tont-family:arial,如果是多个单词，使用双引号括上,如果有多个属性，使用分号将各个属性分隔开,注意代码的格式，使可读性更好,23,标记选择器,xml.css,Musicdisplay:blockTitledisplay:block;font-size:30pt;font-weight:bold;text-align:centerSingerdisplay:block;margin-bottom:4px;text-align:centerContentdisplay:block;margin-bottom:4px;,按块的方式显示其内容,粗体,选择器selector,居中,24,群组选择器,标记选择器-群组选择器（GroupSelectors）为了减少样式表的重复声明，组合的选择器声明是允许的,25,类型选择器,标记选择器-类型选择器标记选择器便于统一设置结点样式标记选择器的应用范围很大，对页面中的所有这类标记都有效需要把HTML/XML文档中同一类型的两个或两个以上的元素设计成不同的样式类型选择器类型选择器缩小指定的结点范围类型选择器通过class属性来指定要应用样式的标记将class属性加到（同一类型）两个或两个以上的标记上，达到区分的目的，分别对其指定不同的样式,26,类型选择器,类型选择器用class属性区分标记通常在HTML/XML文档中进行通过class属性指定要应用样式的标记,27,类型选择器,类型选择器在W3C标准中规定class属性是可以重复的，多个标记可以具有同样的class属性但是在一个HTML/XML元素中只可以使用一个class属性,28,类型选择器,类型选择器,在选择器中省略了标记名称，则可以在所有的HTML元素中使用此属性,29,id选择器,id选择器用户可以使用id属性对页面中的标记进行自定义名称id是一个标识，在网页中每个id名称只能使用一次和类型选择器不同，id选择器使用“#”代替“.”实现标记的定位用id属性区分标记通常在HTML/XML文档中进行通过id属性指定要应用样式的标记,30,id选择器,id选择器练习：建立一个HTML文件，其中有h1-h6标记的文字；对h1与h2标记使用类型选择器设置样式；对h3与h4标记使用id选择器设置样式；对h5标记使用通用的类型选择器设置样式；对h6标记使用通用的id选择器设置样式；css_choose.html,31,层次选择器,层次选择器通常HTML/XML文档中某一子元素的格式化属性依赖于其父元素的属性规则仅仅想对某一个对象中的子对象进行样式指定时，使用层次选择器层次选择器是由多个子选择器组成的，它们之间用空格符分开，子选择器组合中前一个对象包含后一个对象,32,组合选择器,组合选择器对于所有CSS选择器，无论是什么样的选择器，均可以进行组合使用,33,继承,继承在CSS中，一些样式是可继承的当父结点定义了一些样式，其子结点也会具有相同的样式如字体，文本的定义一些样式是不可继承的如边框，间距，布局，定位等设计HTML/XML文档显示格式时，不必对每个元素的属性都进行设置,34,样式就近原则,样式就近原则在CSS中，常常会有需要重复定义的场合出现并列的定义当定义重复时，后出现的定义会覆盖前面的定义对同一结点指定样式，但选择器的层次结构不一样在层次结构上最接近指定结点的CSS起作用,35,伪类及伪对象,伪类及伪对象一种特殊的类和对象由CSS自动支持，属CSS的一种扩展型类和对象伪类及伪对象的名称不能被用户自定义伪类及伪对象使用时只能按照标准格式进行应用,36,伪对象,CSS内置的标准伪对象,37,伪类,CSS内置的标准伪类Pseudo-classes,38,CSS注释,在CSS中添加注释/*/注释，但要注意不要将注释嵌入到选择器语句里面,39,第四章：CSS布局,学时：1.0学时教学方法：讲授ppt+上机练习,目标:本章旨在向学员介绍CSS的布局，通过本课的学习，学员应该掌握如下知识：1）了解div的概念2）会使用CSS的布局功能,40,div,div标签一个容器，能够放置内容专门用于布局设计的容器对象div是CSS布局的核心对象传统采用表格式布局，在页面中绘制一个由多个单元格组成的表格，在相应的表格中放入内容,41,div,使用div应用标签形式，将内容放置其中，并可以应用div标签div对象中除了直接放入文本，也可以放入其他标签，也可以多个div标签进行嵌套使用div标签只是一个标识，作用是把内容标识成一个区域，并不负责其他事情div只是CSS布局工作的第一步使用div对象时，可以加入其他属性id，class，align，style等在CSS布局方面，为了实现内容与表现分离，不应将align，style属性写在div标签之中,42,div,理解div在一个没有任何CSS应用的页面中，即使应用了div，也没有任何实际效果div是一个block对象div用于大面积，大区域的块状排版两个div的关系，只是前后关系，div本身与样式没有任何关系样式需要编写CSS来实现,43,div,css布局使用div将内容标记出来然后为这个div编写出需要的CSS样式div的并列与嵌套结构div可以多层进行嵌套使用，实现更为复杂的页面排版应当尽可能少用嵌套，以保证浏览器不要过分消耗资源对嵌套关系进行解析,44,div,45,CSS盒模型,盒模型将所有HTML/XML元素都放置在一个盒子中，然后通过对这个盒子的外观控制来实现整个页面的外观控制一个盒模型包括4个区内容（content）内边距（padding）边框（border）外边距（margin）,46,CSS布局,47,CSS布局,设计合理的CSS结构采用2层CSS结构既能够统一全站风格，又能够根据不同的页面设计独立的样式如：一个网站中有一个index.html文件，可以做设置,48,CSS布局,使用Div布局真正使用div布局，要把页面的内容和表现完全分离开，在页面的内容部分不应该出现表现控制标签，如font、color、height、width、align等标签。使用Div+css设计：1、用div来定义语义结构；2、使用CSS来美化网页，如加入背景、线条边框、对齐属性等3、在CSS定义的盒子内加入内容，如文字、图片等（没有表现属性的标签）,49,第五章：使用JavaScript控制CSS,学时：0.5学时教学方法：讲授ppt+上机练习,目标:本章旨在向学员介绍怎么使用JavaScript来控制CSS，通过本课的学习，学员应该掌握如下知识：1）使用JavaScript改变结点的CSS,50,使用JavaScript控制CSS,style对象在Ja