WEB前台技术_4_CSS

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