HTML+CSS+JavaScript项目3 “网上花店”专题页制作_0519_lianrui.pptVIP

1 CSS定义背景颜色 【任务3-2】知识拓展 1、CSS定义背景颜色 在CSS中，网页元素的背景颜色使用background-color属性来设置，其属性值与文本颜色的取值一样，可使用预定义的颜色值、十六进制#RRGGBB或RGB代码rgb(r,g,b)。background-color的默认值为transparent，即背景透明，这时子元素会显示其父元素的背景。 【任务3-2】知识拓展 需求分析 仅仅学习CSS基础选择器、CSS控制文本样式，并不能良好地控制网页中元素的显示样式。想要使用CSS实现结构与表现的分离，解决工作中出现的CSS调试问题，就需要学习CSS高级特性。下面，本节将对CSS复合选择器、CSS层叠性与继承性以及CSS优先级进行详细讲解。 【任务3-3】CSS高级特性 1 2 CSS层叠性与继承性 CSS复合选择器 3 CSS优先级 【任务3-3】知识储备 1、CSS复合选择器 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的，具体如下： （1）标签指定式选择器 标签指定式选择器又称交集选择器，由两个选择器构成，其中第一个为标记选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格，如h3.special或p#one。 （2）后代选择器 后代选择器用来选择元素或元素组的后代，其写法就是把外层标记写在前面，内层标记写在后面，中间用空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代。 【任务3-3】知识点讲解 1、CSS复合选择器 （3）并集选择器 并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器（包括标记选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。 【任务3-3】知识点讲解 * 项目3 “网上花店”专题页制作 · CSS选择器 · CSS高级特性 · CSS核心基础 · CSS文本相关样式 HTML 【任务3-1】 CSS核心基础 【任务3-2】 CSS控制文本样式 【任务3-3】 CSS高级特性 【任务3-4】 制作“网上花店”专题页 ? 目录 需求分析 使用HTML修饰页面时，存在很大的局限和不足，例如维护困难、不利于代码的阅读等。如果希望网页升级轻松、维护方便，就需要使用CSS实现结构与表现的分离。CSS核心基础是学习CSS的关键，下面将对CSS样式规则、引入CSS样式表、CSS基础选择器进行详细讲解。 【任务3-1】CSS核心基础 1 2 引入CSS样式表 3 CSS基础选择器 CSS样式规则 【任务3-1】知识储备 1、CSS样式规则 使用CSS对网页进行修饰，首先需要了解CSS样式规则，其基本语法格式如下： 上述样式规则中，选择器用于指定CSS样式作用的HTML对象，花括号{}内是对该对象设置的具体样式。其中，属性和属性值以“键值对”的形式出现，属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。属性和属性值之间用英文“:”连接，多个“键值对”之间用英文“;”进行区分。 选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} 【任务3-1】知识点讲解 初学者在书写CSS样式时，除了要遵循CSS样式规则，还必须注意CSS代码结构中的几个特点，具体如下： CSS样式中的选择器严格区分大小写，属性和值不区分大小写，按照书写习惯一般将“选择器、属性和值”都采用小写的方式。 如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号。 为了提高代码的可读性，书写CSS代码时，通常会加上CSS注释。 在CSS代码中空格是不被解析的，花括号以及分号前后的空格可有可无。因此，可以使用空格键、Tab键、回车键等对样式代码进行排版，提高代码的可读性。 属性的值和单位之间是不允许出现空格的。 【任务3-1】知识点讲解 2、引入CSS样式表 （1）行内式 行内式是通过标记的style属性来设置元素的样式，其基本语法格式如下： 该语法中style是标记的属性，实际上任何HTML标记都拥有style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标记及嵌套在其中的子标记起作用。 标记名 style=属性1:属性值1; 属性2:属性值2; 属性3:属性值3; 内容 /标记名 【任务3-1】知识点讲解 2、引入CSS样式表 （2）内嵌式 内嵌式是将CSS代码集中写在HTML文档的head头部标记中，并且用style标记定义，其基本语法格式如下： 该语法中，style标记一般位于head标记中title标记之后，也可以把他放在HTML文档的任何地方。 sty