WEB前台技术_4_CSS.ppt

《WEB前台技术_4_CSS.ppt》由会员分享，可在线阅读，更多相关《WEB前台技术_4_CSS.ppt（51页珍藏版）》请在三一文库上搜索。

1、1,WEB前台技术 4-CSS,2,课程结构,3,第一章：CSS概述,学时：0.2学时 教学方法：讲授ppt,目标: 本章旨在向学员介绍CSS的相关概念及优点，通过本课的学习，学员应该掌握如下知识： 1）了解CSS的概念 2）了解CSS的优点,4,概述,CSS（Cascading Style Sheet）级联样式表 在W3C标准中被定义为“一种对Web页面进行外观控制的机制” CSS和HTML、JavaScript是并列的3种用于Web开发的技术 CSS开始是为HTML文档设计的 定义文档样式 将文档的内容与表现分离开,5,示例,6,示例,7,基本概念,CSS简介 CSS能够将文档的格式化信息

2、与文档的正文分离开来 CSS的功能不断被扩充，目前为止，CSS样式单有两个官方标准：CSS1和CSS2 目前，CSS1的功能在大多数浏览器中都得到了广泛的支持 CSS的基本概念 CSS由一定的语法组成，对Web页面元素的外观进行控制 CSS通过一定的机制与特定文档相关联，对此文档进行样式控制 CSS是Web标准推荐的页面表现控制方式 CSS被设计用来替代传统的HTML表现代码,8,优点,CSS优点 样式代码独立于HTML页面，有利于进行站点的统一控制 样式文件可在浏览器中缓存，节省带宽，提高加载速度 提高开发效率，有利于分工合作 由于HTML页面中不再包含大量的表现代码，提高了可访问性 控制外

3、观更加容易 提供比传统HTML更多的外观控制手段,9,第二章：CSS的样式,学时：0.3学时 教学方法：讲授ppt+演示,目标: 本章旨在向学员介绍CSS的样式及怎样将样式表加入到HTML和XML中，通过本课的学习，学员应该掌握如下知识： 1）了解CSS的样式 2）能够将样式表加入到HTML中 3）能够将样式表加入到XML中,10,样式,CSS的样式 按CSS代码的位置划分 嵌入样式（Internal Style Sheet）：嵌入一个样式块 内联样式（Inline Style） 外联样式（External Style Sheet）：链接一个样式文件 将样式表加入到HTML中 嵌入样式 内联样

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

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

6、式-External Style Sheet 示例：externalCSS.html 建立外部样式文件（.css） 外部的样式文件不能含有任何像或这样的HTML标记 样式表文件仅仅由样式规则或声明组成,15,外联特点,外联样式的特点 当样式被应用到很多的网页时，一个外部样式表是最理想的 网页制作者使用外部样式表，在改变整个网站的外观时，仅需要改变一个文件 大多数浏览器会保存外部样式表在缓冲区，从而如果样式表在缓冲区就避免了在展示网页时的延迟 在实际开发中一般都使用外联样式,16,外联详解,外联样式-External Style Sheet 建立外部样式文件（.css） 外部的样式文件可以通过X

7、ML处理指令PI（Processing Instruction）连接到XML文档中,17,第三章：CSS基本语法,学时：2.0学时 教学方法：讲授ppt+上机练习,目标: 本章旨在向学员介绍CSS的基本语法，通过本课的学习，学员应该掌握如下知识： 1）知道CSS的基本语法 2）了解CSS的选择器 3）了解CSS的伪类及伪对象,18,选择符,CSS的基本语法 选择符 任何HTML元素都可以是一个CSS选择符，选择符仅仅是指向特别样式的元素。如：P font-size:12pt当中的选择符是P 选择符分类 类选择符 Id选择符 关联选择符,19,属性,CSS的基本语法-属性（简略了解） CSS的颜

8、色 常用的，如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,20,属性,CSS的基本语法-属性（简略了解） CSS的字体 font-family、font-size、font-style、font-variant、font-wei

9、ght、font CSS的边框 border-width、border-color、border-style、border CSS的伪类 link、hover、active、visited,21,选择器,CSS的基本语法 选择器 使用一定的规则来指定一个或一组标记，从而对它们进行统一的外观控制 每个选择器后面都跟着一组属性，这些属性用大括号括起来，以分号隔开 每组属性包括属性名称和属性值,22,标记选择器,使用标记选择器 可以对HTML或XML中所有你想要定义的元素进行标识 选择文档内所有指定标记的结点，然后对它们应用样式 html.css,body color:block p font-fa

10、mily:”sans serif” p text-align:center;color:red p text-align:center; color:black; tont-family:arial ,如果是多个单词，使用双引号括上,如果有多个属性，使用分号将各个属性分隔开,注意代码的格式，使可读性更好,23,标记选择器,xml.css,Music display:block Title display:block; font-size:30pt; font-weight:bold; text-align:center Singer display:block; margin-bottom:4

11、px; text-align:center Content display:block; margin-bottom:4px;,按块的方式显示其内容,粗体,选择器selector,居中,24,群组选择器,标记选择器-群组选择器（Group Selectors） 为了减少样式表的重复声明，组合的选择器声明是允许的,25,类型选择器,标记选择器-类型选择器 标记选择器便于统一设置结点样式 标记选择器的应用范围很大，对页面中的所有这类标记都有效 需要把HTML/XML文档中同一类型的两个或两个以上的元素设计成不同的样式类型选择器 类型选择器 缩小指定的结点范围 类型选择器通过class属性来指定要应

12、用样式的标记 将class属性加到（同一类型）两个或两个以上的标记上，达到区分的目的，分别对其指定不同的样式,26,类型选择器,类型选择器 用class属性区分标记通常在HTML/XML文档中进行 通过class属性指定要应用样式的标记,27,类型选择器,类型选择器 在W3C标准中规定class属性是可以重复的，多个标记可以具有同样的class属性 但是在一个HTML/XML元素中只可以使用一个class属性,28,类型选择器,类型选择器 ,在选择器中省略了标记名称，则可以在所有的HTML元素中使用此属性,29,id选择器,id选择器 用户可以使用id属性对页面中的标记进行自定义名称 id是一

13、个标识，在网页中每个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文档中某一子元素的格式化属性依赖于其父元素的属性规则 仅仅想对某一个对象中的子对

14、象进行样式指定时，使用层次选择器 层次选择器是由多个子选择器组成的，它们之间用空格符分开，子选择器组合中前一个对象包含后一个对象,32,组合选择器,组合选择器 对于所有CSS选择器，无论是什么样的选择器，均可以进行组合使用,33,继承,继承 在CSS中，一些样式是可继承的 当父结点定义了一些样式，其子结点也会具有相同的样式 如字体，文本的定义 一些样式是不可继承的 如边框，间距，布局，定位等 设计HTML/XML文档显示格式时，不必对每个元素的属性都进行设置,34,样式就近原则,样式就近原则 在CSS中，常常会有需要重复定义的场合出现 并列的定义 当定义重复时，后出现的定义会覆盖前面的定义 对

15、同一结点指定样式，但选择器的层次结构不一样 在层次结构上最接近指定结点的CSS起作用,35,伪类及伪对象,伪类及伪对象 一种特殊的类和对象 由CSS自动支持，属CSS的一种扩展型类和对象 伪类及伪对象的名称不能被用户自定义 伪类及伪对象使用时只能按照标准格式进行应用,36,伪对象,CSS内置的标准伪对象,37,伪类,CSS内置的标准伪类Pseudo-classes,38,CSS注释,在CSS中添加注释 /* */注释，但要注意不要将注释嵌入到选择器语句里面,39,第四章：CSS布局,学时：1.0学时 教学方法：讲授ppt+上机练习,目标: 本章旨在向学员介绍CSS的布局，通过本课的学习，学员应

16、该掌握如下知识： 1）了解div的概念 2）会使用CSS的布局功能,40,div,div标签 一个容器，能够放置内容 专门用于布局设计的容器对象 div是CSS布局的核心对象 传统采用表格式布局，在页面中绘制一个由多个单元格组成的表格，在相应的表格中放入内容,41,div,使用div 应用标签形式，将内容放置其中，并可以应用div标签 div对象中除了直接放入文本，也可以放入其他标签，也可以多个div标签进行嵌套使用 div标签只是一个标识，作用是把内容标识成一个区域，并不负责其他事情 div只是CSS布局工作的第一步 使用div对象时，可以加入其他属性 id，class，align，styl

17、e等 在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,

18、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

19、、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对象 在JavaScript中利用style对象来控制元素的CSS 每个style对象对应为该元素指定的CSS 示例：style.html 每个CSS属性一一对应style对象的属性，只是在书写上有所区别 对于单个单词的属性，在style对象中的属性名称不变 对于双单词或多单词的属性，在style对象中的属性名称改写为骆驼形写法（第一个单词首字母小写，其它单词首字母大写）,51,练习,练习-css_control.html 自己设计一个页面，参考div布局的示例，分为页头、内容、版权；内容自己设定； 引入外部CSS，在CSS文件中有两套样式（可以把样式规定得简单一些，不需要很多样式代码）；,