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