HTML5+CSS3网页设计基础-第三章-CSS入门.pptx

1、HTML5+CSS3网页设计基础第3章 CSS入门第1页第第3章章 CSS入门入门本章概述 本章的学习目标主要内容HTML5+CSS3网页设计基础第3章 CSS入门第2页本章概述本章概述lCSS在在Web设计领域是一个突破，它为设计领域是一个突破，它为HTML标标记语言提供了一种样式描述，定义了其中元素的记语言提供了一种样式描述，定义了其中元素的显示方式，包括版式、颜色和大小等。显示方式，包括版式、颜色和大小等。CSS样式样式表可以将所有的样式声明统一存放，进行统一管表可以将所有的样式声明统一存放，进行统一管理，也就是说，页面中显示的内容放在结构里，理，也就是说，页面中显示的内容放在结构里，而

2、修饰、美化放在样式里，做到结构而修饰、美化放在样式里，做到结构(内容内容)与样与样式分开，这样，当页面使用不同的样式时，呈现式分开，这样，当页面使用不同的样式时，呈现出的效果是不一样的。出的效果是不一样的。W3C(万维网联盟万维网联盟)推荐使推荐使用用CSS来完成表现。来完成表现。HTML5+CSS3网页设计基础第3章 CSS入门第3页本章的学习目标本章的学习目标l理解理解CSS的定义、优点。的定义、优点。l掌握掌握CSS的定义与使用方法。的定义与使用方法。l掌握掌握CSS样式规则。样式规则。l掌握掌握CSS基础选择器，能够运用基础选择器，能够运用CSS选择器选择页选择器选择页面元素。面元素。

3、l掌握掌握CSS长度单位、百分比单位和色彩单位的长度单位、百分比单位和色彩单位的使用使用l掌握掌握CSS的层叠性和继承性。的层叠性和继承性。l理解理解CSS优先级，能够区分复合选择器权重的优先级，能够区分复合选择器权重的大小大小HTML5+CSS3网页设计基础第3章 CSS入门第4页主要内容主要内容3.1 CSS定义与定义与使用使用3.2 CSS 选择选择器器3.3 CSS属性单位属性单位3.4 CSS高级高级特性特性3.5 实训实训3.6 本章小结本章小结 HTML5+CSS3网页设计基础第3章 CSS入门第5页3.1 CSS定义与定义与使用使用本节主要内容：本节主要内容：lCSS概述概述l

4、CSS定义和定义和引用引用HTML5+CSS3网页设计基础第3章 CSS入门3.1.1 CSS概述概述lCSS以以HTML为基础，提供了丰富的功能，如字体、颜色为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。器设置不同的样式。l同时同时CSS非常常灵活，既可以嵌入在非常常灵活，既可以嵌入在HTML文档中，也可文档中，也可以是一个单独的外部文件，如果是独立的文件，则必须以以是一个单独的外部文件，如果是独立的文件，则必须以.css为后缀名为后缀名。l如今大多数网页都是遵循如今大多数网页都是遵

5、循Web标准开发的，即用标准开发的，即用HTML编编写网页结构和内容，而相关版面布局、文本或图片的显示写网页结构和内容，而相关版面布局、文本或图片的显示样式都使用样式都使用CSS控制。控制。HTML与与CSS的关系就像人的骨骼的关系就像人的骨骼与衣服，通过更改与衣服，通过更改CSS样式，可以轻松控制网页的表现样样式，可以轻松控制网页的表现样式式。第6页HTML5+CSS3网页设计基础第3章 CSS入门第7页3.1.2 CSS定义和引用定义和引用l1.内联样式内联样式l内联样式就是在元素标签内使用内联样式就是在元素标签内使用style属性，属性，style属性值属性值可以包含任何可以包含任何CS

6、S样式声明样式声明。内。内联样式的格式为联样式的格式为:ll需要需要说明的是，内联样式由于将表现和内容混在一起，不说明的是，内联样式由于将表现和内容混在一起，不符合符合Web标准，所以要慎用这种方法，当样式仅需要在一标准，所以要慎用这种方法，当样式仅需要在一个元素上应用一次时可以使用内联样式个元素上应用一次时可以使用内联样式。l参考示例参考示例：3-1-1.htmlHTML5+CSS3网页设计基础第3章 CSS入门第8页3.1.2 CSS定义和引用定义和引用l2.内部样式表内部样式表l内部样式表是写在内部样式表是写在HTML的的里面的，只对所里面的，只对所在的网页有效在的网页有效。l（1）内部

7、内部样式表的格式为：样式表的格式为：选择选择符符1属性：属性值；属性：属性值属性：属性值；属性：属性值 /*注释内容注释内容*/选择符选择符2属性：属性值；属性：属性值属性：属性值；属性：属性值选择符选择符n属性：属性值；属性：属性值属性：属性值；属性：属性值HTML5+CSS3网页设计基础第3章 CSS入门第9页3.1.2 CSS定义和引用定义和引用l（2）组合组合选择符的格式选择符的格式除了在除了在内分别定义各种选择符的样式外，如内分别定义各种选择符的样式外，如果多个选择符具有相同的样式，可以采用组合选择符，以减果多个选择符具有相同的样式，可以采用组合选择符，以减少重复定义的麻烦，其格式为

8、：少重复定义的麻烦，其格式为：选择选择符符1，选择符，选择符2，选择符，选择符n属性：属性值；属性：属性值属性：属性值；属性：属性值ll参考示例参考示例：3-1-2.htmlHTML5+CSS3网页设计基础第3章 CSS入门第10页3.1.2 CSS定义和引用定义和引用l3.外部外部样式表样式表l多个页面需要应用相同样式时，应该使用外部样式表。外多个页面需要应用相同样式时，应该使用外部样式表。外部样式表管理整个部样式表管理整个Web页的外观。页的外观。Web开发时，首先对整开发时，首先对整个外观定义一个个外观定义一个CSS文件（扩展名为文件（扩展名为css），当页面需要），当页面需要使用样式时

9、，通过使用样式时，通过标签链接外部样式表文件。使用标签链接外部样式表文件。使用外部样式表可以实现改变一个文件就能改变整个站点外观外部样式表可以实现改变一个文件就能改变整个站点外观的目的。的目的。HTML5+CSS3网页设计基础第3章 CSS入门第11页3.1.2 CSS定义和引用定义和引用l(1)用用标签链接样式表文件标签链接样式表文件标签必须放到页面的标签必须放到页面的 标签对内。标签对内。其格式为其格式为:HTML5+CSS3网页设计基础第3章 CSS入门第12页3.1.2 CSS定义和引用定义和引用l(2)样式样式表文件的格式表文件的格式l样式表文件可以用任何文本编辑器样式表文件可以用任

10、何文本编辑器(如记事本如记事本)打开并编辑打开并编辑，一般样式表文件的扩展名为，一般样式表文件的扩展名为.css。样式表文件的内容是。样式表文件的内容是定义的样式表，不包含定义的样式表，不包含HTML标签。样式表文件的格式为标签。样式表文件的格式为：l选择符选择符1属性：属性值；属性：属性值属性：属性值；属性：属性值 /*注释内容注释内容*/l选择符选择符2属性：属性值；属性：属性值属性：属性值；属性：属性值ll选择符选择符n属性：属性值；属性：属性值属性：属性值；属性：属性值l参考示例参考示例：3-1-3.htmlHTML5+CSS3网页设计基础第3章 CSS入门第13页3.2 CSS 选择

11、器选择器本节主要内容：本节主要内容：l案例分析案例分析lCSS样式样式规则规则lCSS基础选择基础选择器器l案例案例制作制作HTML5+CSS3网页设计基础第3章 CSS入门第14页3.2.1 案例案例分析分析l【案例展示】【案例展示】使用链入外部样式表的方法制作企业简介页使用链入外部样式表的方法制作企业简介页面面。l【知识要点】【知识要点】常用的常用的CSS选择符、网页中引用选择符、网页中引用CSS。l【学习目标】【学习目标】掌握掌握CSS的定义与使用的定义与使用方法方法l参考代码：参考代码：3-2.htmlHTML5+CSS3网页设计基础第3章 CSS入门第15页3.2.2 CSS样式样式

12、规则规则lCSS为样式化网页内容提供了一条捷径，即样式规则，每为样式化网页内容提供了一条捷径，即样式规则，每一条规则都是单独的语句。样式表的每个规则都有两个主一条规则都是单独的语句。样式表的每个规则都有两个主要部分：选择符要部分：选择符(selector)和声明和声明(declaration)。lCSS控制网页内容显示格式的方式是通过许多定义的样式控制网页内容显示格式的方式是通过许多定义的样式属性属性(如字号、段落控制等如字号、段落控制等)实现的，并将多个样式属性定义实现的，并将多个样式属性定义为一组可供调用的选择符为一组可供调用的选择符(selector)。l用户只需要通过选择符对不同的用户

13、只需要通过选择符对不同的HIML标签进行控制，并赋标签进行控制，并赋予各种样式声明，即可实现各种效果。声明由一个或多个予各种样式声明，即可实现各种效果。声明由一个或多个属性值对组成。属性值对组成。HTML5+CSS3网页设计基础第3章 CSS入门第16页3.2.2 CSS样式样式规则规则l样式规则的语法为：样式规则的语法为：lselector属性：属性值属性：属性值；属性：属性值；属性：属性值l语法说明语法说明:lselector表示希望进行格式化的元素；声明部分包括在选择表示希望进行格式化的元素；声明部分包括在选择符后的大括号中；用符后的大括号中；用“属性：属性值属性：属性值”描述要应用的格

14、式描述要应用的格式化操作化操作。HTML5+CSS3网页设计基础第3章 CSS入门第17页3.2.3 CSS基础选择基础选择器器l1标记选择器标记选择器l标记选择器是指用标记选择器是指用HTML标记名称作为选择器，按标记名称标记名称作为选择器，按标记名称分类，为页面中某一类标记指定统一的分类，为页面中某一类标记指定统一的CSS样式。其基本样式。其基本语法格式为：语法格式为：l标记名属性标记名属性1:属性属性值值1;属性属性2:属性属性值值2;属性属性3:属性属性值值3;l该语法中，所有的该语法中，所有的HTML标记名都可以作为标记选择器，如标记名都可以作为标记选择器，如body、hl、p、st

15、rong等。用标记选择器定义的样式对等。用标记选择器定义的样式对页页面中面中该类型的所有标记都生效该类型的所有标记都生效。l标记选择器最大的优点是能快速为页面中同类型的标记统标记选择器最大的优点是能快速为页面中同类型的标记统一样式，同时这也是它的缺点，不能设计差异化样式。一样式，同时这也是它的缺点，不能设计差异化样式。HTML5+CSS3网页设计基础第3章 CSS入门第18页3.2.3 CSS基础选择基础选择器器l2类选择器类选择器l类选择器使用类选择器使用“.”（英文点号）进行标识，后面紧跟类名（英文点号）进行标识，后面紧跟类名，其基本语法格式为：，其基本语法格式为：l.类名属性类名属性1：

16、属性值：属性值1；属性；属性2：属性值：属性值2；属性；属性3：属性：属性值值3；l该语法中，类名即为该语法中，类名即为HTML元素的元素的class属性值，大多数属性值，大多数HTML元素都可以定义元素都可以定义clas属性。类选择器最大的优势是可属性。类选择器最大的优势是可以为元素对象定义单独或相同的样式以为元素对象定义单独或相同的样式。l参考示例参考示例：3-2-1.htmlHTML5+CSS3网页设计基础第3章 CSS入门第19页3.2.3 CSS基础选择基础选择器器l3id选择器选择器lid选择器使用选择器使用“”进行标识，后面紧跟进行标识，后面紧跟id名，其基本语法名，其基本语法格

17、式为：格式为：l#id名属性名属性1：属性值：属性值1；属性；属性2：属性值：属性值2；属性；属性3：属性：属性值值3；l该语法中，该语法中，id名即为名即为HTML元素的元素的id属性值。大多数属性值。大多数HTML元素都可以定义元素都可以定义id属性，元素的属性，元素的id值是唯一的，只能对应于值是唯一的，只能对应于文档中某一个具体的元素。文档中某一个具体的元素。l参考参考示例示例：3-2-2.htmlHTML5+CSS3网页设计基础第3章 CSS入门第20页3.2.3 CSS基础选择基础选择器器l4通配符选择器通配符选择器l通配符选择器用通配符选择器用“*”号表示，它是所有选择器中作用范

18、围号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式为：最广的，能匹配页面中所有的元素。其基本语法格式为：l*属性属性1：属性值：属性值1；属性；属性2：属性值：属性值2；属性；属性3：属性值：属性值3；l例如下面的代码，使用通配符选择器定义例如下面的代码，使用通配符选择器定义CSS样式，清除样式，清除所有所有HTML标记的默认边距。标记的默认边距。l*lmargin:0;/*定义外边距定义外边距*/lpadding:0;/*定义内边距定义内边距*/lHTML5+CSS3网页设计基础第3章 CSS入门第21页3.2.3 CSS基础选择基础选择器器l5标签指定式选择器

19、标签指定式选择器l标签指定式选择器又称交集选择器，由两个选择器构成，标签指定式选择器又称交集选择器，由两个选择器构成，其中第一个为标记选择器，第二个为其中第一个为标记选择器，第二个为class选择器或选择器或id选择选择器，两个选择器之间不能有空格，如器，两个选择器之间不能有空格，如h：h3.special或或pone。l参考参考示例示例：3-2-3.htmlHTML5+CSS3网页设计基础第3章 CSS入门第22页3.2.3 CSS基础选择基础选择器器l6后代选择器后代选择器l后代选择器用来选择元素或元素组的后代，其写法就是把后代选择器用来选择元素或元素组的后代，其写法就是把外层标记写在前面

20、，内层标记写在后面，中间用空格分隔外层标记写在前面，内层标记写在后面，中间用空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代。当标记发生嵌套时，内层标记就成为外层标记的后代。l参考参考示例示例：3-2-4.htmlHTML5+CSS3网页设计基础第3章 CSS入门第23页3.2.3 CSS基础选择基础选择器器l7并集选择择器并集选择择器l并集选择器是各个选择器通过逗号连接而成的，任何形式并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器（包括标记选择器、类选择器及的选择器（包括标记选择器、类选择器及id选择器等），选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的都

21、可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同或部分相同，就可以利用并集选择器为它们样式完全相同或部分相同，就可以利用并集选择器为它们定义相同的定义相同的CSS样式。样式。l参考参考示例示例：3-2-5.htmlHTML5+CSS3网页设计基础第3章 CSS入门3.2.4 案例制作案例制作l制作完成演示案例制作完成演示案例:制作企业简介制作企业简介。l参考代码参考代码 3-2.html第24页HTML5+CSS3网页设计基础第3章 CSS入门3.3 CSS属性单位属性单位第25页本节主要内容：本节主要内容：l长度长度单位单位l色彩色彩单位单位HTML5+CSS3网页设计基础第3章

22、 CSS入门3.3.1 长度长度、百分比单位、百分比单位l1长度单位长度单位l长度单位有相对长度单位和绝对长度单位两种类型。长度单位有相对长度单位和绝对长度单位两种类型。l相对长度单位是指以该属性前一个属性的单位值为基础来相对长度单位是指以该属性前一个属性的单位值为基础来完成目前的设置。完成目前的设置。l绝对长度单位将不会随着显示设备的不同而改变。换句话绝对长度单位将不会随着显示设备的不同而改变。换句话说，属性值使用绝对长度单位时，不论在哪种设备上，显说，属性值使用绝对长度单位时，不论在哪种设备上，显示效果都是一样的，如屏幕上的示效果都是一样的，如屏幕上的lcm与打印机上的与打印机上的1cm是

23、是一样长的。一样长的。l由于相对长度单位确定的是一个相对于另一个长度属性的由于相对长度单位确定的是一个相对于另一个长度属性的长度，因而它能更好地适应不同的媒体，所以它是首选的长度，因而它能更好地适应不同的媒体，所以它是首选的。第26页HTML5+CSS3网页设计基础第3章 CSS入门3.3.1 长度长度、百分比单位、百分比单位l2百分比单位百分比单位l百分比单位也是一种常用的相对长度类型，通常的参考依百分比单位也是一种常用的相对长度类型，通常的参考依据为元素的据为元素的font-size属性。百分比值总是相对于另一个值属性。百分比值总是相对于另一个值来说的，该值可以是长度单位或其他单位。每一个

24、可以使来说的，该值可以是长度单位或其他单位。每一个可以使用百分比值单位指定的属性，同时也自定义了这个百分比用百分比值单位指定的属性，同时也自定义了这个百分比值的参照值。在大多数情况下，这个参照值是该元素本身值的参照值。在大多数情况下，这个参照值是该元素本身的字体尺寸。并非所有属性都支持百分比单位。的字体尺寸。并非所有属性都支持百分比单位。l一个百分比值由可选的正号一个百分比值由可选的正号“+”或负号或负号“-”，接着一个，接着一个数字，后跟百分号数字，后跟百分号“%”组成。如果百分比值是正的，正组成。如果百分比值是正的，正号可以不写。正负号、数字与百分号之间不能有空格号可以不写。正负号、数字与

25、百分号之间不能有空格。第27页HTML5+CSS3网页设计基础第3章 CSS入门3.3.2 色彩单位色彩单位l1用十六进制数方式表示色彩值用十六进制数方式表示色彩值l在计算机中，定义每种色彩的强度范围为在计算机中，定义每种色彩的强度范围为0255。当所有色。当所有色彩的强度都为彩的强度都为0时，将产生黑色；当所有色彩的强度都为时，将产生黑色；当所有色彩的强度都为255时，将产生白色。时，将产生白色。l在在HTML中，使用十六进制数指定色彩时，前面是一个中，使用十六进制数指定色彩时，前面是一个“#”号，再加上号，再加上6个十六进制数字表示，表示方法为：个十六进制数字表示，表示方法为：#RRGGB

26、B。其中，前两个数字代表红光强度。其中，前两个数字代表红光强度(Red)，中间，中间两个数字代表绿光强度两个数字代表绿光强度(Green)，后后两个数字代表蓝光强，后后两个数字代表蓝光强度度(Blue)。红色红色、绿色、蓝色、黑色、白色的十六进制设置、绿色、蓝色、黑色、白色的十六进制设置值分别为值分别为:#ff0000、#00ff00、#00000ff、#000000、#ffffff。第28页HTML5+CSS3网页设计基础第3章 CSS入门3.3.2 色彩单位色彩单位l2用色彩名称方式表示色彩值用色彩名称方式表示色彩值CSS中也提供了与中也提供了与HTML一样的用色彩的英文名称表示色彩的一样

27、的用色彩的英文名称表示色彩的方式方式。例如。例如下面的示例代码：下面的示例代码：pcolor:red第29页HTML5+CSS3网页设计基础第3章 CSS入门3.3.2 色彩单位色彩单位l3用用rgb函数方式表示色彩值函数方式表示色彩值在在CSS中，可以用中，可以用rgb函数设置所要的色彩函数设置所要的色彩。语法。语法格式为：格式为：rgb(R,G,B)其中其中，R为红色值，为红色值，G为绿色值，为绿色值，B为蓝色值。这为蓝色值。这3个参数可个参数可取正整数值或百分比值，正整数值的取值范围为取正整数值或百分比值，正整数值的取值范围为0255，百分，百分比值的取值范围为色彩强度的百分比比值的取值

28、范围为色彩强度的百分比0.0%100.0%。例如下面。例如下面的示例代码：的示例代码：pcolor:rgb(128,50,220)pcolor:rgb(15%,100,60%)第30页HTML5+CSS3网页设计基础第3章 CSS入门3.4 CSS高级特性高级特性第31页本节主要内容：本节主要内容：l案例分析案例分析lCSS的层叠和的层叠和继承性继承性lCSS的的优先级优先级l案例制作案例制作HTML5+CSS3网页设计基础第3章 CSS入门3.4.1 案例案例分析分析l【案例展示】【案例展示】使用各种类型的元素制作客户案例的相关产品使用各种类型的元素制作客户案例的相关产品局部页面局部页面。l

29、【知识要点】【知识要点】CSS的层叠性、继承性及优先级的层叠性、继承性及优先级。l【学习目标】【学习目标】灵活使用灵活使用CSS高级特性的方法设置元素的样高级特性的方法设置元素的样式式第32页HTML5+CSS3网页设计基础第3章 CSS入门3.4.2 CSS的层叠和继承性的层叠和继承性l1.层叠性层叠性l层叠层叠(cascade)是指是指CSS能够对同一个元素应用多个样式能够对同一个元素应用多个样式表的能力表的能力。l一般一般原则是原则是,最接近目标的样式定义优先级最高。高优先最接近目标的样式定义优先级最高。高优先级样式将继承低优先级样式的未重叠定义级样式将继承低优先级样式的未重叠定义,但覆

30、盖重叠的但覆盖重叠的定义。根据规定定义。根据规定,样式表的优先级别从高到低为样式表的优先级别从高到低为:内联样式内联样式表、内部样式表、链接样式表和默认浏览器样式表表、内部样式表、链接样式表和默认浏览器样式表。l参考参考示例示例：3-4-1.html第33页HTML5+CSS3网页设计基础第3章 CSS入门3.4.2 CSS的层叠和继承性的层叠和继承性l2.继承性继承性lCSS的主要特征就是继承（的主要特征就是继承（Inheritance），它依赖于祖），它依赖于祖先先-子孙关系，这种特性允许样式不仅应用于某个特定的子孙关系，这种特性允许样式不仅应用于某个特定的元素，同时也应用于其后代，而后代

31、所定义的新样式，却元素，同时也应用于其后代，而后代所定义的新样式，却不会影响父代样式。不会影响父代样式。l根据根据CSS规则，子元素继承父元素属性。如规则，子元素继承父元素属性。如:bodyfont-family:微软雅黑微软雅黑;通过通过继承，所有继承，所有body的子元素都应该显示为为的子元素都应该显示为为“微软雅黑微软雅黑”字体，子元素的子元素也一样字体，子元素的子元素也一样。l参考参考示例示例：3-4-2.html第34页HTML5+CSS3网页设计基础第3章 CSS入门3.4.3 CSS的优先级的优先级l定义定义CSS样式时，经常出现两个或更多规则应用在同一元样式时，经常出现两个或更

32、多规则应用在同一元素上，这时就会出现优先级的问题，当多个规则应用到同素上，这时就会出现优先级的问题，当多个规则应用到同一个元素时权重越大的样式会被优先采用。一个元素时权重越大的样式会被优先采用。l参考参考示例示例：3-4-3.html第35页HTML5+CSS3网页设计基础第3章 CSS入门3.4.4 案例制作案例制作l制作完成演示案例制作完成演示案例:客户案例相关产品局部页面客户案例相关产品局部页面。l参考代码参考代码 3-4.html第36页HTML5+CSS3网页设计基础第3章 CSS入门3.5 实训实训l制作完成演示案例制作完成演示案例:LED射灯详细信息页面射灯详细信息页面。l参考代

33、码参考代码 3-5.html第37页HTML5+CSS3网页设计基础第3章 CSS入门第38页3.6 本章小结本章小结 l本章全面讲述本章全面讲述了了CSS所实现的结构与表现的分离及所实现的结构与表现的分离及CSS样样式的优先级规则式的优先级规则。首先。首先介绍了介绍了CSS定义与使用、定义与使用、CSS样式样式规则、引入方式及规则、引入方式及CSS基础选择器基础选择器。接下来。接下来，讲解讲解了了CSS属性单位、属性单位、CSS的层叠性、继承性及的层叠性、继承性及优先级优先级。最后。最后通过通过CSS修饰文本，制作出了一个常见的修饰文本，制作出了一个常见的LED射灯详细信息页射灯详细信息页面面。