项目4开发今日影评网站_第1页
项目4开发今日影评网站_第2页
项目4开发今日影评网站_第3页
项目4开发今日影评网站_第4页
项目4开发今日影评网站_第5页
已阅读5页，还剩104页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

（HTML5+CSS3+JavaScript）

微课版主讲人：卞孝丽Web前端开发项目教程从剧情简介页面制作、CSS样式控制到高级设置三个维度梳理核心点项目4开发今日影评网站项目描述/Summary今日影评网站是一个以电影评论为核心的文化类网站，面向广大影迷提供权威影评、电影资讯、剧情简介、评分排行等功能。其核心页面包括：首页、电影详情/剧情简介页、影评列表、用户评分与评论、后台管理等。今日影评网站项目开发的重难点集中在：剧情简介页面：数据结构、动态加载、交互复杂度CSS样式控制：响应式布局、视觉与交互、统一风格CSS高级设置：高级选择器、动态效果、复杂布局目标及建议：掌握CSS样式规则的特点，能够区分HTML属性和CSS样式的写法差异。采用模块化CSS（如Sass/Less），提高样式可维护性。掌握CSS层叠性、继承性、优先级等特点，能够清晰描述并举例说明。使用CSS框架（如Bootstrap、TailwindCSS），加速开发并保证一致性。掌握引入CSS样式表的不同方式，能够在网页中引入CSS样式。掌握使用CSS样式控制网页中的文本外观的技巧。注重性能优化，如图片懒加载、CSS压缩、关键路径内联等。目录/Contents0102【任务4.1】制作今日影评网站剧情简介页面【任务4.2】使用CSS控制元素样式03【任务4.3】使用CSS高级设置制作今日影评网站剧情简介页面01学习目标/Target熟悉CSS样式规则的定义，掌握CSS选择器的用法,能够选择恰当的CSS的引入方式,灵活运用CSS选择器定义元素样式,开发今日影评网站。掌握不同类型元素的CSS样式属性及其取值，熟练使用CSS控制不同元素的样式效果，从而改善页面外观。掌握CSS组合选择器、CSS的特征，理解CSS优先级、了解CSS排错，能够使用CSS组合选择器准确匹配元素，完成CSS高级设置。今日影评——需求分析页面概述与目标：核心内容页之一，旨在为用户提供某一部电影的详细信息、剧情梗概、相关评价以及互动入口。该页面的主要目标是信息全面、体验流畅、引导互动、内容权威。功能/非功能需求分析：核心信息展示（电影基础信息、剧情简介、海报与预告片、评分与标签）、用户互动（评分系统、评论与短评、收藏/想看、分享）、

推荐与关联（相关推荐、影评专栏、用户动态）。性能、可用性、安全与隐私、

可维护性。数据结构设计建议：电影信息表、用户评论表。常见问题与对策：信息过载采用折叠面板、分页加载等方式，避免一次性展示过多内容。性能瓶颈图片懒加载、分页加载评论、CDN加速静态资源。用户参与度低设计激励措施，如积分、徽章等，鼓励用户评论、评分。内容更新不及时后台需支持批量导入、定时同步第三方数据源（如豆瓣、IMDb）。剧情简介应用CSS样式规则CSS样式规则有什么特点？深入巩固CSS样式规则、选择器、CSS控制文本样式等CSS知识，动手完成“今日影评”专题页的制作。

网页设计往往需要更有层次的字体、更丰富的样式、更绚丽的图形动画。CSS在不改变原有HTML结构的情况下，增加了样式效果，极大地满足了网页制作的需求。前面已经接触了CSS基础选择器等CSS的基础知识，本次将进行深入讲解，了解结构与表现分离、CSS样式规则的应用、CSS样式表的引入、CSS中的特殊选择器、高级设置等CSS核心知识。结构与表现分离结构与表现相分离的好处为什么要将结构和表现分离？结构与表现分离结构与表现相分离的好处维护困难不利于代码的阅读使用HTML对网页进行修饰，存在很大的局限和不足结构与表现分离结构与表现相分离的好处如果希望网页美观、大方，并且升级轻松、维护方便，就需要使用CSS，实现结构与表现的分离。结构与表现分离结构与表现相分离的好处所示的代码片段，就是将CSS嵌入在HTML文档中，虽然与HTML在同一个文档中，但CSS集中写在HTML文档的头部，也是符合结构与表现相分离的。热点新闻热门游戏网上购物CSS样式修饰的网页大家随处可见CSS3简介—认识CSS样式CSS3简介—认识CSS样式CSS发展史CSS21985年5月，CSS2正式推出，这个版本开始使用样式表结构CSS11996年12月W3C发布了第一个有关样式的标准CSS1。CSS2.12004年2月，CSS2.1正Z式推出。CSS3早在2001年，W3C就着手开始准备开发CSS第三版规范。虽然完整的、规范权威的CSS3标准还没有尘埃落定。但是各主流浏览器已经开始支持其中的绝大部分特性。CSS3简介—认识CSS样式CSS3浏览器支持情况CSS3模块Chrome4Safari4Firefox3.6Opera10.5IE10RGBA√√√√√HSLA√√√√√MultipleBackground√√√√√BorderImage√√√√×BorderRadius√√√√√BoxShadow√√√√√Opacity√√√√√CSSAnimations√√××√CSSColumns√√√×√CSSGradients√√√×√CSSReflections√√×××CSSTransforms√√√√√CSSTransforms3D√√××√CSSTransitions√√√√√CSSFontFace√√√√√内核类型相关浏览器私有前缀TridentIE8/IE9/IE10-msWebkit谷歌（Chrome）/Safari-webkitGecko火狐（Firefox）-mozBlinkOpera-oCSS3简介—认识CSS样式CSS3浏览器支持情况由于各浏览器厂商对CSS3各属性的支持程度不一样，因此在标准尚未明确的情况下，会用厂商的前缀加以区分，通常把这些加上私有前缀的属性称之为“私有属性”。各主流浏览器都定义了自己的私有属性，以便让用户更好的体验CSS的新特性。注意：1.运用CSS3私有属性时，要遵从一定的书写顺序，即先写私有的CSS3属性，再写标准的CSS3属性。2.当一个CSS3属性成为标准属性，并且被主流浏览器的最新版普遍兼容的时候，就可以省略私有的CSS3属性。CSS3简介—认识CSS样式颜色属性背景属性字体属性CSS概述：CSS提供了丰富的样式color:属性值;font:属性值;background:属性值;float:属性值;浮动属性通过CSS控制例如：图中文字的颜色、粗体、背景、行间距和左右两列的排版等，都是通过CSS控制的。CSS3简介—认识CSS样式通过CSS控制CSS非常灵活，既可以嵌入在HTML文档中，也可以是一个单独的外部文件，如果是独立的文件，则必须以.css为后缀名。CSS3简介—认识CSS样式掌握CSS样式规则的书写方式，能够列举代码进行演示、在网页制作中正确书写CSS样式。了解CSS代码结构，熟悉CSS样式的书写特点，能够知道在书写CSS样式时，需要注意的特点，避免常见的书写错误。代码举例：p{color:#339;font-size:14px;line-height:30px;}CSS样式规则定义基本的CSS样式规则：选择器{属性1:属性值1;属性2:属性值2;…;属性n:属性值n;}CSS样式的书写规则是什么？在上面的样式规则中，选择器用于指定CSS样式作用的HTML对象，大括号内是对该对象设置的具体样式。其中，属性和属性值以“键值对”的形式出现，用英文“:”连接，多个“键值对”之间用英文“;”进行区分。CSS样式规则CSS代码结构中的特点12345CSS样式中的选择器严格区分大小写，属性和值（声明）不区分大小写，按照书写习惯一般将“选择器、属性和值”都采用小写的方式。多个属性之间必须用英文状态下的分号隔开，最后一个属性后的分号可以省略，但是为了便于增加新样式最好保留。如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号。在编写CSS代码时，为了提高代码的可读性，可使用“/*注释语句*/”来进行注释，通常会加上注释。在CSS代码中空格是不被解析的，花括号以及分号前后的空格可有可无。因此可以使用空格键、Tab键、回车键等对样式代码进行排版，即所谓的格式化CSS代码。引入CSS样式表引入CSS样式表的方式有哪些？引入CSS样式表行内式内嵌式外链式导入式行内式也称为内联样式，是通过标签的style属性来设置元素的样式，其基本语法格式如下:<标签名style="属性1:属性值1;属性2:属性值2;属性3:属性值3;">内容</标签名>引入CSS样式表行内式内嵌式外链式导入式内嵌式是将CSS代码集中写在HTML文档的<head>头部标签中，并且用<style>标签定义，其基本语法格式如下:<head><styletype="text/css">选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;}</style></head>引入CSS样式表行内式内嵌式外链式导入式外链式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过<link/>标签将外部样式表文件链接到HTML文档中，其基本语法格式如下:<head><linkhref="CSS文件的路径"type="text/css"rel="stylesheet"/></head>引入CSS样式表行内式内嵌式外链式导入式导入式针对外部样式表文件。对HTML头部文档应用style标签，并在<style>标签内的开头处使用@import语句，即可导入外部样式表文件。其基本语法格式如下:<styletype="text/css">

@importurl(css文件路径);或@import"css文件路径";/*在此还可以存放其他CSS样式*/</style>CSS基础选择器什么是选择器？CSS基础选择器要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器。CSS基础选择器标签选择器类选择器id选择器通配符选择器标签名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：标签选择器CSS基础选择器标签选择器类选择器id选择器通配符选择器类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：.类名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}CSS基础选择器标签选择器类选择器id选择器通配符选择器id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：#id名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}CSS基础选择器标签选择器类选择器id选择器通配符选择器通用选择器也称通配符选择器，用“*”表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。通常用于设置全局样式。其基本语法格式如下：*{属性1:属性值1;属性2:属性值2;…;属性n:属性值n;}初始化页面示例：*{margin:0;padding:0;text-decoration:none;}CSS基础选择器标签指定式选择器又称交集选择器，由两个选择器构成，其中第一个为标签选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格。标签名.类名|#id名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}标签指定式选择器CSS基础选择器后代选择器用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标记写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。后代选择器CSS基础选择器并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器都可以作为并集选择器的一部分。若某些选择器定义的样式完全或部分相同，可利用并集选择器为它们定义相同的样式。并集选择器掌握input、textarea、select控件的用法，能够在网页中设置不同类型的input控件。基础表单控件是指网页设计中经常用到的表单控件，是表单的核心部分。只有掌握了这些基础表单控件的使用方法，才能创建功能多样的表单。构建表单控件—基础表单控件你还了解哪些表单控件？构建表单控件—input控件input控件常用在登录和注册模块输入视角控件类型浏览网页时经常会看到单行文本输入框、密码框、单选按钮、复选框、提交按钮、重置按钮等，要想定义这些元素就需要使用input控件。<inputtype="控件类型"/>在HTML中，<input>标签拥有多个type属性值，用于定义不同的控件类型。构建表单控件—input控件文件域<inputtype="file"/>当定义文件域时，页面中将出现一个文本框和一个“浏览...”按钮，用户可以通过填写文件路径或直接选择文件的方式，将文件提交给后台服务器。<inputtype="file"/>标签属性标签格式基本语法格式<textareacols="每行中的字符数"rows="显示的行数">

文本内容</textarea>属性详细说明cols和rows为<textarea>标记的必须属性，其中cols用来定义多行文本输入框每行中的字符数，rows用来定义多行文本输入框显示的行数，取值均为正整数。构建表单控件—textarea控件掌握textarea控件的用法，能够在网页中使用textarea控件设置多行文本。新增表单控件—需求分析

HTML5中增加了许多新的表单控件类型和属性。通过这些新的控件类型和属性，可以丰富表单功能，让我们更好的对表单进行控制和验证。本节将对HTML5新增的表单类型和属性做详细讲解。新增表单控件—类型

掌握全新的input控件类型，能够在网页中设置不同类型。在HTML5中，增加了一些新的input控件类型，通过这些新的控件，可以丰富表单功能，更好的实现表单的控制和验证。email类型<inputtype="email"/>email类型的input元素是一种专门用于输入E-mail地址的文本输入框，用来验证email输入框的内容是否符合Email邮件地址格式；如果不符合，将提示相应的错误信息。请输入您的邮箱：<inputtype="email"name="formmail"/>新增表单控件—属性

掌握全新的input控件属性，能够使用input控件属性完成简单的页面交互。autofocus属性用于指定页面加载后是否自动获取焦点，将标签的属性值指定为true时，表示页面加载完毕后会自动获取该焦点。autofocus属性1（1）autofocus属性新增表单控件—属性

掌握全新的input控件属性，能够使用input控件属性完成简单的页面交互。（5）min、max和step属性HTML5中的min、max和step属性用于为包含数字或日期的input输入类型规定限值，也就是给这些类型的输入框加一个数值的约束，适用于date、pickers、number和range标签。min、max和step属性5max规定输入框所允许的最大输入值。min规定输入框所允许的最小输入值。step为输入框规定合法的数字间隔，如果不设置，默认值是1。使用CSS控制元素样式02需求分析学习HTML时，我们可以使用文本样式标签和属性控制文本内容的显示样式，但是这种方式繁琐且不利于代码的维护。为此，CSS提供了文本样式属性。使用CSS文本样式属性可以轻松方便的控制内容的显示样式。CSS文本样式属性包括CSS字体样式属性和CSS文本外观属性，本节将对这两种属性做详细讲解。知识储备

CSS字体样式属性掌握各种CSS字体样式属性的设置方式，能够在网页中熟练应用。学习目标知识储备

CSS字体样式属性（1）font-size属性用于设置字号。（2）font-family属性用于设置字体。（3）font-weight属性用于定义字体的粗细。（4）font-variant属性用于设置变体（字体变化）。（5）font-style属性用于定义字体风格。（6）font属性用于对字体样式进行综合设置。（7）@font-face属性是CSS3的新增属性，用于定义服务器字体。CSS字体样式属性（1）font-size属性用于设置字号。相对长度单位说明em相对于当前对象内文本的字体尺寸px像素，最常用，推荐使用绝对长度单位说明in英寸cm厘米mm毫米pt点font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。知识储备

CSS字体样式属性font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等。（2）font-family属性用于设置字体。例如，将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码：p{font-family:"微软雅黑";}知识储备文本样式属性字体样式属性font-family：字体font-family属性用于设置字体。各种字体之间必须使用英文状态下的逗号隔开中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。CSS字体样式属性（3）font-weight属性用于定义字体的粗细。值描述normal默认值。定义标准的字符。bold定义粗体字符。bolder定义更粗的字符。lighter定义更细的字符。100~900（100的整数倍）定义由细到粗的字符。其中400等同于normal，700等同于bold，值越大字体越粗。font-weight:字体粗细知识储备CSS字体样式属性（4）font-variant属性用于设置变体（字体变化）。font-variant属性用于设置变体（字体变化），一般用于定义小型大写字母，仅对英文字符有效。normal：默认值，浏览器会显示标准的字体;small-caps：浏览器会显示小型大写的字体，即所有的小写字母均会转换为大写;知识储备CSS字体样式属性（5）font-style属性用于定义字体风格font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体。normal：默认值，浏览器会显示标准的字体样式;italic：浏览器会显示斜体的字体样式;oblique：浏览器会显示倾斜的字体样式;font-style:字体风格知识储备CSS字体样式属性font属性用于对字体样式进行综合设置。（6）font属性用于对字体样式进行综合设置。选择器{font:font-stylefont-variantfont-weightfont-size/line-heightfont-family;}知识储备CSS字体样式属性@font-face属性是CSS3的新增属性，用于定义服务器字体。通过@font-face属性，开发者可以在用户计算机未安装字体时，使用任何喜欢的字体。@font-face{ font-family:字体名称; src:url(字体路径); }（7）@font-face属性是CSS3的新增属性，用于定义服务器字体。知识储备CSS文本外观属性掌握各种CSS文本外观属性的设置方式，能够在网页中设置文本颜色、字间距、行间距等熟练应用。学习目标知识储备

文本样式属性文本外观属性CSS文本样式属性有哪些？CSS样式属性修饰的文本随处可见CSS文本外观属性colorletter-spacingword-spacingline-heighttext-transformtext-decorationtext-aligntext-indentwhite-spacetext-shadow知识储备字体样式属性word-wrap属性word-wrap属性用于实现长单词和URL地址的自动换行。选择器{word-wrap:属性值;}值描述normal只在允许的断字点换行（浏览器保持默认处理）。break-word在长单词或URL地址内部进行换行。

文本样式属性CSS文本外观属性color属性用于定义文本的颜色，其取值方式有如下3种：预定义的颜色值，如red，green，blue等。十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。color注意:如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。知识储备

CSS文本外观属性十六进制颜色值的缩写十六进制颜色值是由#开头的6位十六进制数值组成，每2位为一个颜色分量，分别表示颜色的红、绿、蓝3个分量。当3个分量的2位十六进制数都相同时，可使用CSS缩写。例如，#FF6600可缩写为#F60，#FF0000可缩写为#F00，#FFFFFF可缩写为#FFF。多学一招:知识储备CSS文本外观属性letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白。letter-spacing属性，其属性值可为不同单位的数值，允许使用负值，默认为normal。letter-spacing知识储备CSS文本外观属性word-spacing属性用于定义英文单词之间的间距，对中文字符无效。word-spacing属性用于定义英文单词之间的间距，和letter-spacing一样，其属性值可为不同单位的数值，允许使用负值，默认为normal。word-spacing知识储备CSS文本外观属性line-height属性用于设置行间距，所谓行间距就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px。line-height知识储备CSS文本外观属性text-transform属性用于控制英文字符的大小写。其可用属性值如下：none：不转换（默认值）。capitalize：首字母大写。uppercase：全部字符转换为大写。lowercase：全部字符转换为小写。text-transform知识储备

CSS文本外观属性text-decoration属性用于设置文本的下画线，上画线，删除线等装饰效果。其可用属性值如下：none：没有装饰（正常文本默认值）。underline：下画线。overline：上画线。line-through：删除线。text-decorationtext-decoration:文本装饰知识储备

CSS文本外观属性text-align属性用于设置文本内容水平对齐，相当于html中的align对齐属性。其可用属性值如下：left：左对齐（默认值）right：右对齐。center：居中对齐。text-align注意：1.text-align属性仅适用于块级元素，对行内元素无效，关于块元素和行内元素，会在后面章节具体介绍。2.如果需要对图像设置水平对齐，可以为图像添加一个父标签如<p>或<div>，然后对父标签应用text-align属性，即可实现图像的水平对齐。知识储备CSS文本外观属性text-indent属性用于设置首行文本的缩进。其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值,建议使用em作为设置单位。text-indent注意:text-indent属性仅适用于块级元素，对行内元素无效。知识储备CSS文本外观属性white-space属性可设置空白符的处理方式。其属性值如下：normal：常规（默认值），文本中的空格、空行无效，满行（到达区域边界）后自动换行。pre：预格式化，按文档的书写格式保留空格、空行原样显示。nowrap：空格空行无效，强制文本不能换行，除非遇到换行标签<br/>。内容超出元素的边界也不换行，若超出浏览器页面则会自动增加滚动条。white-space知识储备

CSS文本外观属性text-shadow属性可以为页面中的文本添加阴影效果。h-shadow用于设置水平阴影的距离。v-shadow用于设置垂直阴影的距离。blur用于设置模糊半径。color用于设置阴影颜色。text-shadow选择器{text-shadow:h-shadowv-shadowblurcolor;}注意：阴影的水平或垂直距离参数可以设为负值，但阴影的模糊半径参数只能设置为正值，并且数值越大阴影向外模糊的范围也就越大。知识储备CSS文本外观属性设置多个阴影叠加效果设置阴影叠加的方法非常简单，我们只需设置多组阴影参数，中间用逗号隔开即可。多学一招:P{ font-size:32px; text-shadow:10px10px10pxred,20px20px20pxgreen;

/*红色和绿色的投影叠加*/}知识储备文本样式属性文本外观属性text-overflow:标示对象内溢出文本在CSS中，text-overflow属性用于标示对象内溢出的文本。选择器{text-overflow:属性值;}text-overflow属性的常用取值：clip：修剪溢出文本，不显示省略标记“…”。ellipsis：用省略标记“…”标示被修剪文本，省略标记插入的位置是最后一个字符。文本样式属性文本外观属性text-overflow:标示对象内溢出文本1为包含文本的对象定义宽度。2应用“white-space:nowrap;”样式强制文本不能换行。3应用“overflow:hidden;”样式隐藏溢出文本。4应用“text-overflow:ellipsis;”样式显示省略标记。掌握使用CSS定义背景颜色的方法，能够为网页定义背景颜色。学习目标CSS定义背景色知识储备知识拓展CSS定义背景色background-color:背景颜色属性颜色值，例：red、yellow#十六进制色值，例：#cccrgb(r,g,b)，例：rgb(30,0,0)使用CSS高级设置03学习目标/Target能够分析表单页面的构成，掌握表单样式的应用。掌握使用CSS美化表单页面的方法，学会通过控制CSS来美化表单页面。掌握CSS控制表单控件样式的方法，能够在网页中设置不同的表单控件。学习如何美化背包客旅行网站的注册和登录页面，养成良好的学习方法和习惯，培养审美能力和用户体验意识。需求分析想要使用CSS实现结构与表现的分离，解决工作中出现的CSS调试问题，还需要学习CSS高级特性。CSS高级特性包括CSS复合选择器、CSS层叠性与继承性、CSS优先级，下面对这些高级特性进行详细讲解。1.

CSS复合选择器掌握CSS复合选择器的用法，能够在网页中使用复合选择器单独定义元素样式。学习目标知识储备1.

CSS复合选择器标签指定选择器后代选择器并集选择器标签指定式选择器又称交集选择器，由两个选择器构成，其中第一个为标签选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格，如h3.special或p#one。后代选择器用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器都可以作为并集选择器的一部分。若某些选择器定义的样式完全或部分相同，可利用并集选择器为它们定义相同的样式。知识储备2.

CSS层叠性与继承性熟悉CSS层叠性的特点，能够合理使用CSS层叠性，避免代码冗余。掌握CSS继承性的用法，能够列举具有继承性的元素。学习目标掌握CSS层叠性和继承性的使用，能够叠加多重CSS样式且使子标记继承父标记的样式。知识储备2.

CSS层叠性与继承性所谓层叠性是指多种CSS样式的叠加。层叠性所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。继承性知识储备2.

CSS层叠性与继承性并不是所有的CSS属性都可以继承，例如，下面的属性就不具有继承性：

边框属性

内/外边距属性背景属性定位属性布局属性元素宽高属性知识储备CSS高级特性1.

CSS层叠性和继承性注意：当为body元素设置字号属性时，标题文本不会采用这个样式，读者可能会认为标题没有继承文本字号，这种想法是不正确的。标题文本之所以不采用body元素设置的字号，是因为标题标记h1-h6有默认字号样式，这时默认字号覆盖了继承的字号。3.

CSS优先级了解各类选择器优先级的顺序，能够合理使用CSS优先级，单独控制网页某个模块。学习目标掌握CSS优先级的使用，能够设置CSS样式的优先级。知识储备3.

CSS优先级网页制作时，对统一元素，应用不同的背景，会出现什么情况？思考background-color:pink;background-color:blue;background-color:red;【结论】定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。知识储备3.CSS优先级网页制作时，对统一元素，应用不同的背景，会出现什么情况？思考background-color:pink;background-color:blue;background-color:red;【结论】定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。【结论】知识储备3.

CSS优先级来看一个例子：<pclass="father"id="header">

<strongclass="blue">文本的颜色</strong></p>pstrong{color:black}/*权重为:1+1*/strong.blue{color:green;}/*权重为:1+10*/.fatherstrong{color:yellow}/*权重为:10+1*/p.fatherstrong{color:orange;}/*权重为:1+10+1*/p.father.blue{color:gold;}/*权重为:1+10+10*/#headerstrong{color:pink;}/*权重为:100+1*/#headerstrong.blue{color:red;}

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论