WEB前台技术_4_CSS

1、Neusoft Group Ltd.WEB前台技术_4_CSS1WEB前台技术4-CSSNeusoft Group Ltd.WEB前台技术_4_CSS2课程结构内容内容课时（课时（H H）第一章：第一章：CSSCSS概述概述0.20.2第二章：第二章：CSSCSS的样式的样式0.30.3第三章第三章：CSSCSS基本语法基本语法2.02.0第四章：第四章：CSSCSS布局布局1.01.0第五章：使用第五章：使用JavaScriptJavaScript控制控制CSSCSS0.50.5Neusoft Group Ltd.WEB前台技术_4_CSS3第一章：CSS概述学时：学时：0.20.2学时学时

2、教学方法：讲授教学方法：讲授pptppt目标目标: :本章旨在向学员介绍本章旨在向学员介绍CSSCSS的相关的相关概念及优点，通过本课的学习，概念及优点，通过本课的学习，学员应该掌握如下知识：学员应该掌握如下知识：1 1）了解）了解CSSCSS的概念的概念2 2）了解）了解CSSCSS的优点的优点Neusoft Group Ltd.WEB前台技术_4_CSS4概述概述 CSSCSS（Cascading Style SheetCascading Style Sheet）级联样式表）级联样式表 在W3C标准中被定义为“一种对Web页面进行外观控制的机制” CSS和HTML、JavaScript是并

3、列的3种用于Web开发的技术 CSSCSS开始是为开始是为HTMLHTML文档设计的文档设计的 定义文档样式 将文档的内容与表现分离开Neusoft Group Ltd.WEB前台技术_4_CSS5示例示例Neusoft Group Ltd.WEB前台技术_4_CSS6示例示例Neusoft Group Ltd.WEB前台技术_4_CSS7基本概念基本概念 CSSCSS简介简介 CSS能够将文档的格式化信息与文档的正文分离开来 CSS的功能不断被扩充，目前为止，CSS样式单有两个官方标准：CSS1和CSS2 目前，CSS1的功能在大多数浏览器中都得到了广泛的支持 CSSCSS的基本概念的基本概

4、念 CSS由一定的语法组成，对Web页面元素的外观进行控制 CSS通过一定的机制与特定文档相关联，对此文档进行样式控制 CSS是Web标准推荐的页面表现控制方式 CSS被设计用来替代传统的HTML表现代码Neusoft Group Ltd.WEB前台技术_4_CSS8优点优点 CSSCSS优点优点 样式代码独立于HTML页面，有利于进行站点的统一控制 样式文件可在浏览器中缓存，节省带宽，提高加载速度 提高开发效率，有利于分工合作 由于HTML页面中不再包含大量的表现代码，提高了可访问性 控制外观更加容易 提供比传统HTML更多的外观控制手段Neusoft Group Ltd.WEB前台技术_4

5、_CSS9第二章：CSS的样式学时：学时：0.30.3学时学时教学方法：讲授教学方法：讲授ppt+ppt+演示演示目标目标: :本章旨在向学员介绍本章旨在向学员介绍CSSCSS的样式的样式及怎样将样式表加入到及怎样将样式表加入到HTMLHTML和和XMLXML中，通过本课的学习，学员中，通过本课的学习，学员应该掌握如下知识：应该掌握如下知识：1 1）了解）了解CSSCSS的样式的样式2 2）能够将样式表加入到）能够将样式表加入到HTMLHTML中中3 3）能够将样式表加入到）能够将样式表加入到XMLXML中中Neusoft Group Ltd.WEB前台技术_4_CSS10样式样式 CSSCS

6、S的样式的样式 按CSS代码的位置划分 嵌入样式（Internal Style Sheet）：嵌入一个样式块 内联样式（Inline Style） 外联样式（External Style Sheet）：链接一个样式文件 将样式表加入到将样式表加入到HTMLHTML中中 嵌入样式 内联样式 外联样式Neusoft Group Ltd.WEB前台技术_4_CSS11CSS使用使用-内联内联 内联样式内联样式-Inline Styles -Inline Styles 示例：示例：inlineCSS.htmlinlineCSS.html 将样式代码直接内联到标记内，以style作为属性，语句作为属性值

7、 style属性可以包含任意的CSS值 使用style控制标记的边框样式为不折叠 内联样式特点内联样式特点 看上去很直观 仅针对个别元素进行控制 将外观控制代码散布于整个HTML文档，和传统的外观控制方式没有本质的不同 一般不推荐使用Neusoft Group Ltd.WEB前台技术_4_CSS12CSS使用使用-嵌入嵌入 嵌入样式嵌入样式-Internal Style Sheet -Internal Style Sheet 示例：示例：internalCSS.htmlinternalCSS.html 使用标记将一段CSS语句插入到HTML文档层次结构中 一般将这段CSS语句作为一个独立部分插

8、入在和标记之间 嵌入样式的特点嵌入样式的特点 也是将CSS语句直接写在HTML文档中，但它做为一个独立的标记块存在，维护和修改都要方便得多 利用CSS规则来选择标记 嵌入样式仅能够针对一个HTML文档进行设置，无法与多个文档关联，一般用于控制一些针对性强的独立样式 嵌入样式是HTML文档的一部分，仍然有需要重复加载的问题，无法利用浏览器的缓存机制Neusoft Group Ltd.WEB前台技术_4_CSS13CSS使用使用-外联外联 外联样式外联样式-External Style Sheet-External Style Sheet 通过外部样式文件对页面进行控制 建立外部样式文件（.css

9、） 外部的样式文件可以通过HTML的link元素连接到HTML文档中 标记放置在文档的head部分Neusoft Group Ltd.WEB前台技术_4_CSS14外联示例外联示例 外联样式外联样式-External Style Sheet -External Style Sheet 示例：示例：externalCSS.htmlexternalCSS.html 建立外部样式文件（.css） 外部的样式文件不能含有任何像或这样的HTML标记 样式表文件仅仅由样式规则或声明组成Neusoft Group Ltd.WEB前台技术_4_CSS15外联特点外联特点 外联样式的特点外联样式的特点 当样式被

10、应用到很多的网页时，一个外部样式表是最理想的 网页制作者使用外部样式表，在改变整个网站的外观时，仅需要改变一个文件 大多数浏览器会保存外部样式表在缓冲区，从而如果样式表在缓冲区就避免了在展示网页时的延迟 在实际开发中一般都使用外联样式Neusoft Group Ltd.WEB前台技术_4_CSS16外联详解外联详解 外联样式外联样式-External Style Sheet-External Style Sheet 建立外部样式文件（.css） 外部的样式文件可以通过XML处理指令PI（Processing Instruction）连接到XML文档中Neusoft Group Ltd.WEB前

11、台技术_4_CSS17第三章：CSS基本语法学时：学时：2.02.0学时学时教学方法：讲授教学方法：讲授ppt+ppt+上机练习上机练习目标目标: :本章旨在向学员介绍本章旨在向学员介绍CSSCSS的基本的基本语法，通过本课的学习，学员应语法，通过本课的学习，学员应该掌握如下知识：该掌握如下知识：1 1）知道）知道CSSCSS的基本语法的基本语法2 2）了解）了解CSSCSS的选择器的选择器3 3）了解）了解CSSCSS的伪类及伪对象的伪类及伪对象Neusoft Group Ltd.WEB前台技术_4_CSS18选择符选择符 CSSCSS的基本语法的基本语法 选择符 任何HTML元素都可以是一

12、个CSS选择符，选择符仅仅是指向特别样式的元素。如：P font-size:12pt当中的选择符是P 选择符分类 类选择符 Id选择符 关联选择符Neusoft Group Ltd.WEB前台技术_4_CSS19属性属性 CSSCSS的基本语法的基本语法- -属性（简略了解）属性（简略了解） CSS的颜色 常用的，如red，#00ff00等 CSS的前景色 color属性 CSS的背景 background、background-color、background-image、background-repeat、background-position CSS的文本 letter-spacing、

13、word-spacing、text-decoration、text-transform、text-align、text-indentNeusoft Group Ltd.WEB前台技术_4_CSS20属性属性 CSSCSS的基本语法的基本语法- -属性（简略了解）属性（简略了解） CSS的字体 font-family、font-size、font-style、font-variant、font-weight、font CSS的边框 border-width、border-color、border-style、border CSS的伪类 link、hover、active、visitedNeuso

14、ft Group Ltd.WEB前台技术_4_CSS21选择器选择器 CSSCSS的基本语法的基本语法 选择器 使用一定的规则来指定一个或一组标记，从而对它们进行统一的外观控制 每个选择器后面都跟着一组属性，这些属性用大括号括起来，以分号隔开 每组属性包括属性名称和属性值Neusoft Group Ltd.WEB前台技术_4_CSS22标记选择器标记选择器 使用标记选择器使用标记选择器 可以对HTML或XML中所有你想要定义的元素进行标识 选择文档内所有指定标记的结点，然后对它们应用样式 html.csshtml.cssbody color:blockp font-family:”sans s

15、erif”p text-align:center;color:redp text-align:center; color:black; tont-family:arial如果是多个单词，使用双引号括上如果有多个属性，使用分号将各个属性分隔开注意代码的格式，使可读性更好Neusoft Group Ltd.WEB前台技术_4_CSS23标记选择器标记选择器 xml.cssxml.cssMusic display:blockTitle display:block; font-size:30pt; font-weight:bold; text-align:centerSinger display:bl

16、ock; margin-bottom:4px; text-align:centerContent display:block; margin-bottom:4px;按块的方式显示其内容粗体选择器selector居中Neusoft Group Ltd.WEB前台技术_4_CSS24群组选择器群组选择器 标记选择器标记选择器- -群组选择器（群组选择器（Group SelectorsGroup Selectors） 为了减少样式表的重复声明，组合的选择器声明是允许的Neusoft Group Ltd.WEB前台技术_4_CSS25类型选择器类型选择器 标记选择器标记选择器- -类型选择器类型选择器

17、 标记选择器便于统一设置结点样式 标记选择器的应用范围很大，对页面中的所有这类标记都有效 需要把HTML/XML文档中同一类型的两个或两个以上的元素设计成不同的样式类型选择器 类型选择器类型选择器 缩小指定的结点范围 类型选择器通过class属性来指定要应用样式的标记 将class属性加到（同一类型）两个或两个以上的标记上，达到区分的目的，分别对其指定不同的样式Neusoft Group Ltd.WEB前台技术_4_CSS26类型选择器类型选择器 类型选择器类型选择器 用class属性区分标记通常在HTML/XML文档中进行 通过class属性指定要应用样式的标记Neusoft Group L

18、td.WEB前台技术_4_CSS27类型选择器类型选择器 类型选择器类型选择器 在W3C标准中规定class属性是可以重复的，多个标记可以具有同样的class属性 但是在一个HTML/XML元素中只可以使用一个class属性Neusoft Group Ltd.WEB前台技术_4_CSS28类型选择器类型选择器 类型选择器类型选择器在选择器中省略了标记名称，则可以在所有的HTML元素中使用此属性Neusoft Group Ltd.WEB前台技术_4_CSS29id选择器选择器 idid选择器选择器 用户可以使用id属性对页面中的标记进行自定义名称 id是一个标识，在网页中每个id名称只能使用一次

19、 和类型选择器不同，id选择器使用“#”代替“.”实现标记的定位 用id属性区分标记通常在HTML/XML文档中进行 通过id属性指定要应用样式的标记Neusoft Group Ltd.WEB前台技术_4_CSS30id选择器选择器 idid选择器选择器 练习：建立一个HTML文件，其中有h1-h6标记的文字；对h1与h2标记使用类型选择器设置样式；对h3与h4标记使用id选择器设置样式；对h5标记使用通用的类型选择器设置样式；对h6标记使用通用的id选择器设置样式；css_choose.htmlNeusoft Group Ltd.WEB前台技术_4_CSS31层次选择器层次选择器 层次选择器

20、层次选择器 通常HTML/XML文档中某一子元素的格式化属性依赖于其父元素的属性规则 仅仅想对某一个对象中的子对象进行样式指定时，使用层次选择器 层次选择器是由多个子选择器组成的，它们之间用空格符分开，子选择器组合中前一个对象包含后一个对象Neusoft Group Ltd.WEB前台技术_4_CSS32组合选择器组合选择器 组合选择器组合选择器 对于所有CSS选择器，无论是什么样的选择器，均可以进行组合使用Neusoft Group Ltd.WEB前台技术_4_CSS33继承继承 继承继承 在CSS中，一些样式是可继承的 当父结点定义了一些样式，其子结点也会具有相同的样式 如字体，文本的定义

21、 一些样式是不可继承的 如边框，间距，布局，定位等 设计HTML/XML文档显示格式时，不必对每个元素的属性都进行设置Neusoft Group Ltd.WEB前台技术_4_CSS34样式就近原则样式就近原则 样式就近原则样式就近原则 在CSS中，常常会有需要重复定义的场合出现 并列的定义 当定义重复时，后出现的定义会覆盖前面的定义 对同一结点指定样式，但选择器的层次结构不一样 在层次结构上最接近指定结点的CSS起作用Neusoft Group Ltd.WEB前台技术_4_CSS35伪类及伪对象伪类及伪对象 伪类及伪对象伪类及伪对象 一种特殊的类和对象 由CSS自动支持，属CSS的一种扩展型类

22、和对象 伪类及伪对象的名称不能被用户自定义 伪类及伪对象使用时只能按照标准格式进行应用Neusoft Group Ltd.WEB前台技术_4_CSS36伪对象伪对象CSS内置的标准伪对象内置的标准伪对象Neusoft Group Ltd.WEB前台技术_4_CSS37伪类伪类CSS内置的标准伪类内置的标准伪类Pseudo-classesNeusoft Group Ltd.WEB前台技术_4_CSS38CSS注释注释 在在CSS中添加注释中添加注释/* */注释，但要注意不要将注释嵌入到选择器语句里面Neusoft Group Ltd.WEB前台技术_4_CSS39第四章：CSS布局学时：学时：

23、1.01.0学时学时教学方法：讲授教学方法：讲授ppt+ppt+上机练习上机练习目标目标: :本章旨在向学员介绍本章旨在向学员介绍CSSCSS的布局的布局，通过本课的学习，学员应该掌，通过本课的学习，学员应该掌握如下知识：握如下知识：1 1）了解）了解divdiv的概念的概念2 2）会使用）会使用CSSCSS的布局功能的布局功能Neusoft Group Ltd.WEB前台技术_4_CSS40div divdiv标签标签 一个容器，能够放置内容 专门用于布局设计的容器对象 div是CSS布局的核心对象 传统采用表格式布局，在页面中绘制一个由多个单元格组成的表格，在相应的表格中放入内容Neuso

24、ft Group Ltd.WEB前台技术_4_CSS41div使用使用div 应用标签形式，将内容放置其中，并可以应用div标签 div对象中除了直接放入文本，也可以放入其他标签，也可以多个div标签进行嵌套使用 div标签只是一个标识，作用是把内容标识成一个区域，并不负责其他事情 div只是CSS布局工作的第一步 使用div对象时，可以加入其他属性 id，class，align，style等 在CSS布局方面，为了实现内容与表现分离，不应将align，style属性写在div标签之中Neusoft Group Ltd.WEB前台技术_4_CSS42div 理解理解divdiv 在一个没有任何

25、CSS应用的页面中，即使应用了div，也没有任何实际效果 div是一个block对象 div用于大面积，大区域的块状排版 两个div的关系，只是前后关系，div本身与样式没有任何关系 样式需要编写CSS来实现Neusoft Group Ltd.WEB前台技术_4_CSS43div csscss布局布局 使用div将内容标记出来 然后为这个div编写出需要的CSS样式 divdiv的并列与嵌套结构的并列与嵌套结构 div可以多层进行嵌套使用，实现更为复杂的页面排版 应当尽可能少用嵌套，以保证浏览器不要过分消耗资源对嵌套关系进行解析Neusoft Group Ltd.WEB前台技术_4_CSS44

26、divNeusoft Group Ltd.WEB前台技术_4_CSS45CSS盒模型盒模型 盒模型盒模型 将所有HTML/XML元素都放置在一个盒子中，然后通过对这个盒子的外观控制来实现整个页面的外观控制 一个盒模型包括4个区 内容（content） 内边距（padding） 边框（border） 外边距（margin）Neusoft Group Ltd.WEB前台技术_4_CSS46CSS布局布局Neusoft Group Ltd.WEB前台技术_4_CSS47CSS布局布局 设计合理的设计合理的CSSCSS结构结构 采用2层CSS结构 既能够统一全站风格，又能够根据不同的页面设计独立的样式 如：一个网站中有一个index.html文件，可以做设置Neusoft Group Ltd.WEB前台技术_4_CSS48CSS布局布局 使用使用DivDiv布局布局 真正使用div布局，要把页面的内容和表现完全分离开，在页面的内容部分不应该出现表现控制标签，