1、HTML+CSS+JavaScript网页设计第6章CSS概述第1页第第6章章CSS概述概述本章概述 本章的学习目标主要内容HTML+CSS+JavaScript网页设计第6章CSS概述第2页本章概述本章概述l目前流行的，符合目前流行的，符合Web标准的网页设计模标准的网页设计模式是将页面内容和外观样式分离，前面式是将页面内容和外观样式分离，前面5章章我们学习了用我们学习了用HTML来创建网页，在网页中来创建网页，在网页中添加各类元素，从本章开始，我们将学习添加各类元素，从本章开始，我们将学习如何使用如何使用CSS为网页元素定义外观样式，为网页元素定义外观样式，美化页面，将网页装扮的更漂亮，具
2、有独美化页面，将网页装扮的更漂亮，具有独特的风格和个性。特的风格和个性。HTML+CSS+JavaScript网页设计第6章CSS概述第3页本章的学习目标本章的学习目标l理解理解CSS的基本概念的基本概念l了解了解CSS的发展历史的发展历史l理解使用理解使用CSS的好处的好处l掌握在掌握在HTML这使用这使用CSS的几种方法的几种方法l理解理解CSS中的继承中的继承l了解了解!important的用法的用法l掌握掌握CSS的优先级的优先级HTML+CSS+JavaScript网页设计第6章CSS概述第4页主要内容主要内容6.1 为什么要在网页中加入为什么要在网页中加入CSS6.2 在在HTML
3、中使用中使用CSS6.3 CSS继承和优先级继承和优先级6.4 本章小结本章小结6.5 思考和练习思考和练习HTML+CSS+JavaScript网页设计第6章CSS概述第5页6.1为什么要在网页中加入为什么要在网页中加入CSSlCSS的全称是层叠样式表的全称是层叠样式表(Cascading Style Sheets)，它是一种用来表现，它是一种用来表现HTML或或XML等文件样式的计算机语言。等文件样式的计算机语言。CSS不不仅可以静态地修饰网页，还可以配合各种仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化脚本语言动态地对网页各元素进行格式化 lCSS 能够对网页中
4、元素位置的排版进行像能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的样式，拥有对网页对象和模型样式编辑的能力。能力。HTML+CSS+JavaScript网页设计第6章CSS概述第6页CSS产生的原因产生的原因lHTML的设计初衷并不是为了描述外观，的设计初衷并不是为了描述外观，HTML本本身也并不善于此道。身也并不善于此道。l在使用在使用HTML描述描述Web页面的外观时，需要使用页面的外观时，需要使用大量的标记，而且常常要使用许多复杂堆栈或嵌大量的标记，而且常常要使用许多复杂堆栈或嵌套表。页面的布局
5、工作涉及隐藏的像素图像、专套表。页面的布局工作涉及隐藏的像素图像、专有元素与属性、图像中的文本和其他隐秘的复杂有元素与属性、图像中的文本和其他隐秘的复杂方式，这些都需要提供高质量、高可靠度的方式，这些都需要提供高质量、高可靠度的HTML标记代码，这简直就是一场噩梦。因此，标记代码，这简直就是一场噩梦。因此，人们将表示网页外观的功能标记或属性分离出来人们将表示网页外观的功能标记或属性分离出来，这就形成了表示网页外观的替代方法，这就形成了表示网页外观的替代方法CSS。HTML+CSS+JavaScript网页设计第6章CSS概述第7页CSS的发展历史的发展历史l层叠样式表在层叠样式表在Web受到大
6、家的关注时就存受到大家的关注时就存在了。从在了。从1994年第一次提出年第一次提出CSS观点至今观点至今，已经有了，已经有了3个主要版本。个主要版本。l但随着但随着HTML的成长，为了满足设计师的要的成长，为了满足设计师的要求，求，HTML获得了很多显示功能。随着这些获得了很多显示功能。随着这些功能的增加，用来定义样式的语言越来越功能的增加，用来定义样式的语言越来越没有意义了。没有意义了。l1994年哈坤年哈坤利利(Hakun Lee)提出了提出了CSS的的最初建议。最初建议。HTML+CSS+JavaScript网页设计第6章CSS概述第8页CSS的发展历史的发展历史l1996年年12月月C
7、SS的第一版本被发布。的第一版本被发布。CSS 1的大的大部分特征在部分特征在Web浏览器中都获得支持，但是一些浏览器中都获得支持，但是一些不常用的功能不常用的功能(例如空白处理、字母间隔、显示等例如空白处理、字母间隔、显示等)存在一些问题。存在一些问题。lCSS自从第一版发布之后，又在自从第一版发布之后，又在1998年年5月发布月发布了第二版，了第二版，CSS得到了丰富。得到了丰富。lCSS 2.0是一套全新的样式表结构，是由是一套全新的样式表结构，是由W3C推推行的，同以往的行的，同以往的CSS 1.0或或CSS 1.2完全不一样，完全不一样，CSS 2.0推荐的是一套内容和表现效果分离的
8、方推荐的是一套内容和表现效果分离的方式，式，HTML元素可以通过元素可以通过CSS 2.0的样式控制显示的样式控制显示效果效果HTML+CSS+JavaScript网页设计第6章CSS概述第9页CSS的发展历史的发展历史lCSS 2.0提供了一个机制，让程序员开发时提供了一个机制，让程序员开发时可以不考虑显示和界面，就可以制作表单可以不考虑显示和界面，就可以制作表单，显示问题可由美工或程序员到后期再编，显示问题可由美工或程序员到后期再编写相应的写相应的CSS 2.0样式来解决。不过，由于样式来解决。不过，由于没有很好的没有很好的CSS 2.0编辑软件，所以无法做编辑软件，所以无法做到所见即所得
9、，编写起来不易。到所见即所得，编写起来不易。lCSS3在在CSS2的基础上，结合业务发展需的基础上，结合业务发展需求，以及过去浏览者操作习惯和开发者习求，以及过去浏览者操作习惯和开发者习惯，做了大幅改进。惯，做了大幅改进。HTML+CSS+JavaScript网页设计第6章CSS概述第10页使用使用CSS的好处的好处l(1)大大缩减页面代码，提高页面浏览速度，缩减带宽成本。大大缩减页面代码，提高页面浏览速度，缩减带宽成本。l(2)结构清晰。容易被搜索引擎搜索到。用只包含结构化内容的结构清晰。容易被搜索引擎搜索到。用只包含结构化内容的HTML代代替嵌套的标记，搜索引擎将更有效地搜索到内容。替嵌套
10、的标记，搜索引擎将更有效地搜索到内容。l(3)缩短改版时间。只要简单地修改几个缩短改版时间。只要简单地修改几个CSS文件就可以重新设计一个文件就可以重新设计一个有成百上千页面的站点。有成百上千页面的站点。l(4)强大的字体控制和排版能力。使页面的字体变得更漂亮，更容易编强大的字体控制和排版能力。使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。排，使页面真正赏心悦目。l(5)提高易用性。使用提高易用性。使用CSS可以结构化可以结构化HTML，如，如标记只用来控制段标记只用来控制段落，落，标记只用来表现表格式数据等。标记只用来表现表格式数据等。l(6)表现和内容相分离。将设计部分分离出来放
11、在一个独立样式文件中表现和内容相分离。将设计部分分离出来放在一个独立样式文件中l(7)布局灵活性不大，只能遵循布局灵活性不大，只能遵循、的格式，的格式，而使用而使用CSS+div可以有更多格式。可以有更多格式。l(8)便于更新和维护。可以将站点中的所有页面风格都使用一个便于更新和维护。可以将站点中的所有页面风格都使用一个CSS文文件进行控制，只要修改这个件进行控制，只要修改这个CSS文件，就可以更新所以页面的风格样式文件，就可以更新所以页面的风格样式。HTML+CSS+JavaScript网页设计第6章CSS概述第11页主要内容主要内容6.1 为什么要在网页中加入为什么要在网页中加入CSS6.
12、2 在在HTML中使用中使用CSS6.3 CSS继承和优先级继承和优先级6.4 本章小结本章小结6.5 思考和练习思考和练习HTML+CSS+JavaScript网页设计第6章CSS概述第12页6.2 在在HTML中使用中使用CSSl在在HTML网页中使用网页中使用CSS的方法有的方法有4种：第一，内联样式种：第一，内联样式，通过，通过HTML元素的元素的style属性直接将样式嵌入属性直接将样式嵌入HTML标记标记中；第二，定义内部样式表，将表示样式的中；第二，定义内部样式表，将表示样式的style属性的属性的内容，全部提到公共的样式规则块中，然后将其放在内容，全部提到公共的样式规则块中，然
13、后将其放在元素中，这样，整个元素中，这样，整个HTML文件中都可以使用该文件中都可以使用该样式；第三，链接外部样式文件，将样式独立成文件，供样式；第三，链接外部样式文件，将样式独立成文件，供任何页面调用；第四，导入外部样式表，这种方法与链接任何页面调用；第四，导入外部样式表，这种方法与链接相似，外部样式表独立成文件，但是导入样式表是使用相似，外部样式表独立成文件，但是导入样式表是使用import，然后后面跟随关键字，然后后面跟随关键字url和引入的样式表的和引入的样式表的URL。有的书籍把第三和第四种方法算作一种，因为他们。有的书籍把第三和第四种方法算作一种，因为他们都是将样式表独立成为外部文
14、件。都是将样式表独立成为外部文件。HTML+CSS+JavaScript网页设计第6章CSS概述第13页内联样式内联样式l如果只是简单的队某个元素单独定义样式如果只是简单的队某个元素单独定义样式，则可以使用内联样式。例如，只希望针，则可以使用内联样式。例如，只希望针对某个特定的对某个特定的标签设置样式为字号为标签设置样式为字号为50、绿色的楷体字体。则可以使用、绿色的楷体字体。则可以使用标标签的签的style属性。属性。style是核心属性，几乎任是核心属性，几乎任何何HTML元素都有该属性。元素都有该属性。内联样式内联样式,50号绿色楷体号绿色楷体HTML+CSS+JavaScript网页设
15、计第6章CSS概述第14页内联样式内联样式lstyle属性的值是若干个属性的值是若干个CSS属性名属性名/值对。值对。CSS规则要求属性名的后面紧跟一个冒号规则要求属性名的后面紧跟一个冒号，然后是属性值。每一个样式规则以分号，然后是属性值。每一个样式规则以分号结束，最后一个样式规则的结尾可以不加结束，最后一个样式规则的结尾可以不加分号。格式如下：分号。格式如下：property-name1:value1;.property-nameN:valueN;HTML+CSS+JavaScript网页设计第6章CSS概述第15页定义内部样式表定义内部样式表l为了避免为了避免CSS样式和样式和HTML标签
16、的关系过于标签的关系过于紧密，可以采用另外一种更合适的方法来紧密，可以采用另外一种更合适的方法来中添加样式规则，那就是创建与一个特定中添加样式规则，那就是创建与一个特定元素或一组元素绑定的样式规则，这样可元素或一组元素绑定的样式规则，这样可以重复使用样式规则。以重复使用样式规则。属性名 属性值 声明分隔符 选择器 声明块 声明 规则 声明 HTML+CSS+JavaScript网页设计第6章CSS概述第16页定义内部样式表定义内部样式表l当当CSS属性名是多个单词时，应该用短横线分隔属性名是多个单词时，应该用短横线分隔，例如，例如font-face、font-size、line-height等
17、。等。CSS属性值允许多种形式，例如关键字属性值允许多种形式，例如关键字(xx-small)、字符串、字符串(Arial)、数字、数字(0)、带单位的数字、带单位的数字(100px或或2cm)和特殊值等。和特殊值等。lCSS属性名称和很多属性值不区分大小写，但有属性名称和很多属性值不区分大小写，但有的属性值却区分大小写，例如，如果涉及到与的属性值却区分大小写，例如，如果涉及到与HTML文档一起工作的话，文档一起工作的话，class和和id名称对大小名称对大小写是敏感的。为了安全起见，写是敏感的。为了安全起见，Web开发人员应假开发人员应假定定CSS规则的所有部分都区分大小写。规则的所有部分都区
18、分大小写。HTML+CSS+JavaScript网页设计第6章CSS概述第17页元素元素lCSS样式是通过样式是通过标记嵌入到页面中标记嵌入到页面中的。的。元素位于元素位于元素内，用元素内，用于在网页内包含样式表规则，而非链接某于在网页内包含样式表规则，而非链接某个外部文档。有时，它还被用于需要在单个外部文档。有时，它还被用于需要在单一页面中包含某些额外规则，而且这些规一页面中包含某些额外规则，而且这些规则不必应用于网站内共享同一样式表的其则不必应用于网站内共享同一样式表的其他页面的情况。他页面的情况。HTML+CSS+JavaScript网页设计第6章CSS概述第18页链接外部样式文件链接外
19、部样式文件l在在HTML 页面中，通过在文档的页面中，通过在文档的head部分部分使用使用元素，引用外部链接样式文件元素，引用外部链接样式文件。l元素用于在网页中描述两个文档之元素用于在网页中描述两个文档之间的关系。例如，可以在间的关系。例如，可以在HTML页面中使用页面中使用其指定应该用于设置该页面风格的样式表其指定应该用于设置该页面风格的样式表，也可以为对应页面指定一个，也可以为对应页面指定一个RSS订阅。订阅。l元素永远是空元素，而且当与样式元素永远是空元素，而且当与样式表一同使用时，它必须带有两个属性：表一同使用时，它必须带有两个属性：rel和和href。HTML+CSS+JavaSc
20、ript网页设计第6章CSS概述第19页导入外部样式表导入外部样式表l另外一种使用文档范围样式规则的方法是导入外另外一种使用文档范围样式规则的方法是导入外部样式表。这种方法与链接相似。导入样式表的部样式表。这种方法与链接相似。导入样式表的语法是使用语法是使用import，然后后面跟随关键字，然后后面跟随关键字url和和引入的样式表的引入的样式表的URL，最后以分号结束，如下所，最后以分号结束，如下所示：示：import url(corerules.css);limport指令必须在指令必须在标签中使用，而且必标签中使用，而且必须在样式表中所有其他类型的规则之前使用。在须在样式表中所有其他类型的
21、规则之前使用。在实践中，我们会在一个实践中，我们会在一个标签中看到导入的标签中看到导入的和嵌入的样式混合在一起。和嵌入的样式混合在一起。HTML+CSS+JavaScript网页设计第6章CSS概述第20页link与与import的区别的区别llink是是XHTML标签，除了加载标签，除了加载CSS外，还可以定外，还可以定义义RSS等其他事务；等其他事务；import属于属于CSS范畴，只范畴，只能加载能加载CSS。llink引用引用CSS时，在页面载入时同时加载；时，在页面载入时同时加载；import需要页面网页完全载入以后加载。需要页面网页完全载入以后加载。llink是是XHTML标签，无
22、兼容问题；标签，无兼容问题；import是在是在CSS 2.1提出的，低版本的浏览器不支持。提出的，低版本的浏览器不支持。llink支持使用支持使用Javascript控制控制DOM去改变样式；去改变样式；而而import不支持。不支持。HTML+CSS+JavaScript网页设计第6章CSS概述第21页主要内容主要内容6.1 为什么要在网页中加入为什么要在网页中加入CSS6.2 在在HTML中使用中使用CSS6.3 CSS继承和优先级继承和优先级6.4 本章小结本章小结6.5 思考和练习思考和练习HTML+CSS+JavaScript网页设计第6章CSS概述6.3 CSS继承和优先级继承和
23、优先级l继承即子类元素继承父类的样式，继承即子类元素继承父类的样式，CSS中中的继承相对简单，但也容易让人混淆。的继承相对简单，但也容易让人混淆。lCSS规则应用在标记中，而应用于特定元规则应用在标记中，而应用于特定元素的不同样式值可以是从它的父级元素，素的不同样式值可以是从它的父级元素，甚至更远的元素继承而来。甚至更远的元素继承而来。l大多数元素可从其父元素那里继承样式属大多数元素可从其父元素那里继承样式属性，但是有一些样式属性性，但是有一些样式属性(例如边框例如边框)却不可却不可以。以。第22页HTML+CSS+JavaScript网页设计第6章CSS概述!important指示符指示符l
24、如果一个特定的规则不希望被其他规则覆盖，那么可以使如果一个特定的规则不希望被其他规则覆盖，那么可以使用用!important指示符。对于不会被忽略的规则，则在规则指示符。对于不会被忽略的规则，则在规则的分号前面插入的分号前面插入!important指示符。例如，下面的样式规指示符。例如，下面的样式规则将设置所有的段落文本为红色：则将设置所有的段落文本为红色：p color:red!important;font-size:12px;l这样，即使有一个如下所示的内联样式的段落：这样，即使有一个如下所示的内联样式的段落：带内联样式的段落带内联样式的段落l因为上面的规则使用了因为上面的规则使用了!im
25、portant指示符，所以指示符，所以color属属性不能被内联样式覆盖，文本颜色依然会是红色的，而字性不能被内联样式覆盖，文本颜色依然会是红色的，而字号会被覆盖，变为号会被覆盖，变为24px。第23页HTML+CSS+JavaScript网页设计第6章CSS概述!important指示符指示符l当使用当使用!important指示符时，要确认把它放在样指示符时，要确认把它放在样式规则的最后；否则就会被忽略。式规则的最后；否则就会被忽略。l虽然虽然!important指示符可以让样式不被覆盖，让指示符可以让样式不被覆盖，让复杂的继承变得简单清晰，但并不鼓励初学者使复杂的继承变得简单清晰，但并不
26、鼓励初学者使用用!important指示符覆盖，因为指示符覆盖，因为CSS会根据层叠会根据层叠和权重产生正常的作用顺序，使用了和权重产生正常的作用顺序，使用了!important就扰乱了原本的顺序，让更多的权重给了正常情就扰乱了原本的顺序，让更多的权重给了正常情况下本不应该获得这么多权重的样式。如果你从况下本不应该获得这么多权重的样式。如果你从不使用不使用!important，那么这标志着你真正理解了，那么这标志着你真正理解了CSS，并且证明你在编写代码前经过深思熟虑。，并且证明你在编写代码前经过深思熟虑。第24页HTML+CSS+JavaScript网页设计第6章CSS概述CSS优先级优先级
27、l层叠的基本思想是为应用于文档的包含多个样式表的规则层叠的基本思想是为应用于文档的包含多个样式表的规则的系统进行整理。当这些叠加的样式之间有冲突时，就要的系统进行整理。当这些叠加的样式之间有冲突时，就要根据样式的优先级进行选择。前面已经介绍过，内联样式根据样式的优先级进行选择。前面已经介绍过，内联样式、内部样式表和外部样式表的优先级如下：、内部样式表和外部样式表的优先级如下：内联样式内联样式 内部样式表内部样式表 外部样式表外部样式表l同一个样式表中定义的样式，使用不同的选择器也可能存同一个样式表中定义的样式，使用不同的选择器也可能存在叠加，从选择器的角度，当某个元素同时应用标签选择在叠加，从
28、选择器的角度，当某个元素同时应用标签选择器、器、ID选择器、类选择器定义的样式时，将按照下面的优选择器、类选择器定义的样式时，将按照下面的优先级进行处理：先级进行处理：ID选择器选择器 类选择器类选择器 标签选择器标签选择器第25页HTML+CSS+JavaScript网页设计第6章CSS概述第26页主要内容主要内容6.1 为什么要在网页中加入为什么要在网页中加入CSS6.2 在在HTML中使用中使用CSS6.3 CSS继承和优先级继承和优先级6.4 本章小结本章小结6.5 思考和练习思考和练习HTML+CSS+JavaScript网页设计第6章CSS概述第27页6.4 本章小结本章小结 l本
29、章主要介绍了本章主要介绍了CSS的基本概念。首先介绍了为什么要使的基本概念。首先介绍了为什么要使用用CSS，包括，包括CSS的基本概念、的基本概念、CSS产生的原因、产生的原因、CSS的发展历史喝使用的发展历史喝使用CSS的好处，使用的好处，使用CSS可以使页面布局可以使页面布局定位更精确、样式更丰富，实行代码重用，易于移植，更定位更精确、样式更丰富，实行代码重用，易于移植，更有利于网站的设计与维护；接着介绍了在网页中使用有利于网站的设计与维护；接着介绍了在网页中使用CSS的的4种方法：内联样式、定义内部样式表、链接外部样式种方法：内联样式、定义内部样式表、链接外部样式文件和导入外部样式文件；
30、最后介绍了文件和导入外部样式文件；最后介绍了CSS的继承和优先的继承和优先级以及级以及!important指示符的使用。通过本章的学习，读者指示符的使用。通过本章的学习，读者应该了解应该了解CSS的基本概念，掌握在的基本概念，掌握在HTML使用使用CSS的几种的几种方法以及方法以及CSS的继承和层叠样式的优先级。的继承和层叠样式的优先级。HTML+CSS+JavaScript网页设计第6章CSS概述第28页主要内容主要内容6.1 为什么要在网页中加入为什么要在网页中加入CSS6.2 在在HTML中使用中使用CSS6.3 CSS继承和优先级继承和优先级6.4 本章小结本章小结6.5 思考和练习思
31、考和练习HTML+CSS+JavaScript网页设计第6章CSS概述第29页6.5 思考和练习思考和练习 l1.CSS的全称是的全称是 (Cascading Style Sheets)，它是，它是一种用来表现一种用来表现HTML或或XML等文件样式的计算机语言。等文件样式的计算机语言。l2.CSS3语言在朝着模块化方向发展。这些模块包括：盒语言在朝着模块化方向发展。这些模块包括：盒子模型、子模型、超链接方式、语言模块、超链接方式、语言模块、多栏布局等。多栏布局等。l3.简述使用业简述使用业CSS的好处。的好处。l4.在在HTML中使用中使用CSS的方法有几种？的方法有几种？l5.CSS选择器的优先级是什么样的？选择器的优先级是什么样的？l6.!important指示符的作用是什么？如何使用该指示符？指示符的作用是什么？如何使用该指示符？
