任务4-构建网站层叠样式表-动画版课件

上传人：m*** IP属地：贵州上传时间：2022-12-19 格式：PPTX 页数：204 大小：11.22MB 积分：30 举报 版权申诉

已阅读5页，还剩199页未读，继续免费阅读

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

文档简介

任务4:

构建网站层叠样式表网页设计与制作(HTML+CSS+Javascript)网页设计与制作课程组任务4:构建网站层叠样式表网页设计与制作(HTML+CS目标TARGET知识目标了解CSS3简介；掌握CSS样式设置规则；掌握CSS样式的调用方法；掌握CSS基础选择器的使用方法；掌握CSS3新增选择器的使用方法;掌握CSS的继承与层叠性的应用。目标TARGET知识目标了解CSS3简介；1任务描述

初识CSS3

3CSS的使用

4CSS3选择器

5CSS的继承与层叠

6综合实例7任务实施

8任务拓展1任务描述2初识CSS33CSS的使用4C1任务描述Part使用CSS实现门户网站导航1任务描述Part使用CSS实现门户网站导航

本任务就是在任务3的基础之上，编写基本的CSS3样式表，实现网站头部的页面效果。任务描述：使用CSS实现门户网站导航本任务就是在任务3的基础之上，编写基本的CSS32初识CSS3Part◎CSS3简介◎主流浏览器对CSS3的支持情况2初识CSS3Part◎CSS3简介◎主流浏览器对CSS3CSS3简介CSS即层叠样式表，是Cascading

StyleSheet的缩写。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。例如：禅意花园（/tr/zh-cn/）。CSS3简介CSS即层叠样式表，是Cascading

Sty举例演示禅意花园http:///tr/zh-cn/举例演示禅意花园http://www.csszengarCSS3简介核心内容：盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。盒子模型列表模块超链接方式语言模块背景边框多栏布局文字特效CSS3简介核心内容：盒子模型、列表模块、超链接方式、语言主流浏览器浏览器就是一种把再互联网上的文本文档和其他文件翻译成网页的软件，通过浏览器可以快捷地阅读Internet上的内容。IEFireFoxChromeOperaSafari主流浏览器浏览器就是一种把再互联网上的文本文档和其他文件翻译CSS3模块名称Chrome30Safari5Firefox3.6Opera11IE10RGBA（RGB色彩模式+Alpha透明度）√√√√√HSLA（HSL色彩模式+Alpha透明度）√√√√√MultipleBackgrounds（多背景）√√√√√BorderImage（边框图像）√√√√×BorderRadius（边框半径/圆角）√√√√√BoxShadow（盒阴影）√√√√√Opacity（不透明度）√√√√√CSSAnimations（CSS动画）√√××√CSSColumns（CSS多列布局）√√√×√CSSGradients（CSS渐变）√√√×√CSSReflections（CSS映像）√√×××CSSTransforms（CSS转换）√√√√√CSSTransforms3D（CSS3D转换）√√××√CSSTransitions（CSS过渡）√√√√√CSSFontFace（CSS字体）√√√√√CSS3模块名称Chrome30Safari5Firefox3CSS的使用Part◎CSS样式设置规则◎CSS样式的调用◎CSS基础选择器3CSS的使用Part◎CSS样式设置规则◎CSS样式的调用CSS样式设置规则CSS样式设置规则由选择器和声明部分组成。语法：选择器

{属性1:属性值1;属性2:属性值2;属性3:属性值3;}选择器绿色部分为选择器，大括号部分为声明部分，包括属性与属性值。声明由属性和值两部分组成。属性和值用英文冒号“：”链接。多个“键值对”之间用英文分号“；”进行区分，最后一个分号可以省略，为了规范最好保留。举例：

P{color:red;

font-size:18px;line-height:30px;

}声明部分属性属性值CSS样式设置规则CSS样式设置规则由选择器和声明部分组注意：选择器命名统一使用英文、英文简写或者统一使用拼音。选择器命名尽量不缩写，除非是一看就懂得单词。在编写CSS代码时，为了提高代码的可读性，通常会加上CSS注释，可以使用/**/（斜杠和星号）。CSS样式中的类和id选择器严格区分大小写，属性和值不区分大小写，按照书写习惯一般将“选择器、属性和值”都采用小写的方式。多个属性之间必须用英文状态下的分号隔开，最后用的分号可以省略，但是为了便于增加新样式最好保留。如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号。

例如：p{font-family:"microsoftyahei";}注意：选择器命名统一使用英文、英文简写或者统一使用拼音。选择CSS常见命名规则名称含义名称含义header页头container容器footer页脚nav导航aside或sidebar侧边栏column栏目wrapper或wrap页面外围控制整体布局宽度left左侧right右侧center中间loginbar登录条logo标志banner广告main页面主体hot热点news新闻download下载subnav子导航menu菜单submenu子菜单search搜索friendlink友情链接copyright版权scroll滚动content内容tab标签页list列表msg提示信息title栏目标题joinus加入guild指南service服务register注册status状态vote投票partner合伙伙伴CSS常见命名规则名称含义名称含义header页头contaCSS样式的调用方法01行内样式表02内部样式表03链接样式表插入样式表的方法：行内样式表、内部样式表、链接样式表。CSS样式的调用方法01行内02内部03链接插入样式表的方1.行内样式表语法：<标签名称style="样式属性1:属性值1;样式属性2:属性值2;样式属性…">举例：<pstyle="color:#fff;font-size:24px;">直接在HTML代码行中加入样式规则。适用于指定网页内的某一小段文字的显示规则，效果仅可控制该标签。1.行内样式表语法：<标签名称style="样式属性1举例演示【实例4-1】行内样式表应用。举例演示【实例4-1】行内样式表应用。注意：行内样式也可以通过标签的属性来控制样式，由于没有做到结构与表现的分离，所以，不建议使用。只有在样式规格较少且只在该元素上使用一次，或者需要临时修改某个样式规则时使用。注意：行内样式也可以通过标签的属性来控制样式，由于没有做到结2.内部样式表语法：<head><styletype="text/css">选择器{样式属性:属性值;…}</style></head>内部样式表是将样式表嵌入到HTML文件的文件头<head>中的方式。举例：<head><styletype="text/css">p{color:red;}</style></head>2.内部样式表语法：内部样式表是将样式表嵌入到HTML文举例演示【实例4-2】内部样式表。举例演示【实例4-2】内部样式表。注意：行内样式表与内部样式表的引用方法都属于引用内部样式表，即样式表规则的有效范围只限于该HTML文件，在该文件以外将无法使用。但这也具有一定的局限性，对于一个网站的构建，不建议使用这种方式，因为它不能体现CSS代码的重用优势。注意：行内样式表与内部样式表的引用方法都属于引用内部样式表，3.链接样式表语法：<linkhref="*.css"

type="text/css"

rel="stylesheet">链接样式表将一个外部样式表链接到HTML文档中。链接的CSS文件的位置文档的类型链接样式表3.链接样式表语法：链接样式表将一个外部样式表链接到HTM举例演示【实例4-3】链接样式表。举例演示【实例4-3】链接样式表。

基础选择器1.标签选择器语法：标签名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}标签选择符也称为类型选择符，是指用HTML标签名称作为选择器，HTML中的所有标签都可以作为标签选择符。举例：td{font-size:14px;color:#ff0000;line-height:18px;font-family:"微软雅黑";}基础选择器1.标签选择器语法：标签名{属性1:属性值12.类选择器语法：.类名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}类选择器能够把相同的元素分类定义成不同的样式。定义类选择符时，在自定义类的前面需要加一个英文点号“.”。举例：定义h3标签选择器为“.redtitle”，例如：.redtitle{font-size:20px;color:#ff0000;}调用的方法是通过标签的class属性调用，例如：<h3class="redtitle">类选择器</h3>2.类选择器语法：.类名{属性1:属性值1;属性2:属性值举例演示【实例4-4】类选择器的使用。举例演示【实例4-4】类选择器的使用。注意：类名的第一个字符不能使用数字，并且严格区分大小写，一般采用小写的英文字符。注意：类名的第一个字符不能使用数字，并且严格区分大小写，一般3.ID选择器语法：#id名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}id选择器是用来对某个单一元素定义单独的样式。id选择器使用“#”进行标识，后面紧跟id名。举例：定义h3标签选择器为“.redtitle”，例如：#redtitle{font-size:20px;color:#ff0000;}调用的方法是通过标签的id属性调用，例如：<h3id="redtitle">类选择器</h3>3.ID选择器语法：#id名{属性1:属性值1;属性2:举例演示【实例4-5】id选择器的使用。举例演示【实例4-5】id选择器的使用。4.标签指定式选择器语法：

标签名.类名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

标签名#id名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}标签指定选择器又称交集选择器，由两个选择器构成，其中第一个为标签选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格。4.标签指定式选择器语法：标签指定选择器又称交集选择器，由举例演示【实例4-6】标签指定式选择器的使用。举例演示【实例4-6】标签指定式选择器的使用。5.包含选择器语法：

选择器1选择器2{属性1:属性值1;属性2:属性值2;属性3:属性值3;}包含选择器用来选择元素或元素组的后代，也称后代选择器，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。注意中间的空格5.包含选择器语法：包含选择器用来选择元素或元素组的后代，也举例演示【实例4-7】包含选择器的使用。举例演示【实例4-7】包含选择器的使用。6.群组选择器语法：

选择器1，选择器2{属性1:属性值1;属性2:属性值2;属性3:属性值3;}群组选择器是各个选择器通过逗号”，”连接而成的。注意中间的逗号“，”如果某些选择器定义的样式完全相同或部分相同，就可以利用群组选择器为它们定义相同的CSS样式。6.群组选择器语法：群组选择器是各个选择器通过逗号”，”连7.通配符选择器语法：

*{属性1:属性值1;属性2:属性值2;属性3:属性值3;}通配符选择器用星形标示号“*”表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。注意星号“*”表示所有元素例如：*{margin:0px;padding:0px;}设置所有元素的外边距margin和内边距padding都为0像素。7.通配符选择器语法：通配符选择器用星形标示号“*”表示，4CSS3选择器Part◎属性选择器◎关系选择器◎链接伪类选择器◎结构伪类选择器◎伪元素选择器◎UI元素状态伪类选择器4CSS3选择器Part◎属性选择器◎关系选择器◎链接伪类选

属性选择器属性选择器可以根据元素的属性及属性值来选择元素。包括三类:E[att^=”value”]、E[att$=”value”]、E[att*=”value”]属性名称含义E[att^=”value”]选择名称为E的标签，且该标签定义了att属性，att属性值包含前缀为value的子字符串。class属性以font开头的h2元素

h2[class^="font"]{font-family:"微软雅黑";}例如：属性选择器属性选择器可以根据元素的属性及属性值来选择元举例演示举例演示属性名称含义E[att$=”value”]选择名称为E的标签，且该标签定义了att属性，att属性值包含后缀为value的子字符串。class属性以title结尾的所有元素[class$="title"]{color:red;}例如：属性名称含义E[att$=”value”]选择名称为E的标举例演示举例演示属性名称含义E[att*=”value”]选择名称为E的标签，且该标签定义了att属性，att属性值包含value的子字符串。所有href属性包含www字符串的a元素a[href*="www"]{color:green;}例如：属性名称含义E[att*=”value”]选择名称为E的标举例演示举例演示

关系选择器关系选择器主要包含子代选择器（E>F）、相邻兄弟选择器（E+F）、普通兄弟选择器（E~F）。属性名称含义子代选择器（E>F）选择所有作为E元素的直接子元素F，对更深一层的元素不起作用，用“>”表示。子代选择器,E元素的直接子元素Fdiv>a

{color:red;}例如：关系选择器关系选择器主要包含子代选择器（E>F）、相邻兄举例演示举例演示属性名称含义兄弟相邻选择器（E+F）选择紧贴在E元素之后的F元素，用“+”表示。选择相邻的第一个兄弟元素。相邻兄弟选择器，p元素相邻的第一个兄弟span元素p+span{text-decoration:line-through;}例如：属性名称含义兄弟相邻选择器（E+F）选择紧贴在E元素之后的F举例演示举例演示属性名称含义普通兄弟选择器（E~F）选择E元素之后的所有兄弟元素F，作用于多个元素，用“~”隔开。普通兄弟选择器，p元素所有兄弟span元素p~span{color:green;}例如：属性名称含义普通兄弟选择器（E~F）选择E元素之后的所有兄弟举例演示举例演示

链接伪类选择器伪类不是真正意义上的类，但它确实作为一个类来使用。当在同一网页中使用两种以上不同样式的超链接，就采用伪类与类名或者id相结合的方式实现。伪类名称含义a:link未访问时的超级链接的状态a:visited访问后的超级链接的状态a:hover鼠标经过、悬停时超级链接的状态a:active鼠标单击不动时超级链接的状态超链接伪类及其含义链接伪类选择器伪类不是真正意义上的类，但它确实作为一个类举例演示举例演示

结构伪类选择器1.基本的结构性伪类选择器表达式描述:root将样式绑定到页面的根元素中。所谓根元素，是指位于文档树中最顶层结构的元素，在HTML页面中就是指包含着整个页面的<html>部分。:not

想对某个结构元素使用样式，但想排除这个结构元素下的子结构元素，就是用:not伪类。:empty指定当元素内容为空白时使用的样式。:target对页面中某个target元素指定样式，该样式只在用户点击了页面中的链接，并且跳转到target元素后生效。结构伪类选择器1.基本的结构性伪类选择器表达式描述:ro表达式描述:root将样式绑定到页面的根元素中。所谓根元素，是指位于文档树中最顶层结构的元素，在HTML页面中就是指包含着整个页面的<html>部分。：root伪类选择器，使得所有文本为蓝色:root{color:blue;}例如：表达式描述:root将样式绑定到页面的根元素中。所谓根元素，表达式描述:not

相对某个结构元素使用样式，但想排除这个结构元素下的子结构元素，就是用:not伪类。：not伪类选择器，body中<h2>标签以外的文本都变成了红色body*:not(h2){color:red;}例如：表达式描述:not

相对某个结构元素使用样式，但想排除这个结表达式描述:empty指定当元素内容为空白时使用的样式。:empty伪类选择器，使得<li>标签内为空的元素背景颜色为红色li:empty{background-color:red;}例如：表达式描述:empty指定当元素内容为空白时使用的样式。:e举例演示举例演示表达式描述:target对页面中某个target元素指定样式，该样式只在用户点击了页面中的链接，并且跳转到target元素后生效。:target伪类选择器，对某个target元素指定样式:target{background-color:yellow;}例如：表达式描述:target对页面中某个target元素指定样式举例演示举例演示子元素伪类选择器表达式描述:first-child对父元素中的第一个子元素指定样式例如p:first-child{}表示第一个p元素的样式

:last-child

对父元素中的最后一个子元素指定样式例如p:last-chidl{}表示倒数第一个p元素的样式:only-child当某个父元素中只有一个子元素时使用的样式:nth-child(n)对指定序号的子元素设置样式(正数)，表示第几个子元素例如：p:nth-child(2){}表示第2个p元素的样式:nth-last-child(n)对指定序号的子元素设置样式(正数)，表示倒数第几个子元素例如：p:nth-last-child(2){}表示倒数第2个p元素的样式:nth-child(even)所有正数第偶数个子元素，等同于:nth-child(2n):nth-child(odd)所有正数第奇数个子元素，等同于:nth-child(2n+1):nth-last-child(even)所有倒数第偶数个子元素:nth-last-child(odd)所有倒数第奇数个子元素:

nth-of-type(n)用于匹配属于父元素的特定类型的第n个子元素:nth-last-of-type(n)用于匹配属于父元素的特定类型的倒数第n个子元素子元素伪类选择器表达式描述:first-child对父元素举例演示举例演示01:before伪元素02after伪元素

伪元素选择器

伪元素选择器是针对CSS中已定义的伪元素使用的选择器。CSS中主要使用的伪元素为“:before”伪元素选择器和“:after”伪元素选择器。伪元素(双冒号,例如::before)，css3中的伪类是（单冒号:before），通常两种写法都可以。01:before02after伪元素选择器1.:before伪元素选择器语法：

element:before{

content:文字/url();}:before伪元素选择器用于在被选元素的内容前面插入内容，必须配合“content”属性来指定要插入的具体内容。element表示元素，被选元素位于“:before”之前“{}”中的content属性用来指定要插入的具体内容，该内容既可以为文本也可以为图片，大家还可以根据其他需要添加相应的样式。1.:before伪元素选择器语法：element2.:after伪元素选择器语法：

element:after{

content:文字/url();}:after伪元素选择器用于在被选元素的内容之后插入内容，必须配合“content”属性来指定要插入的具体内容。2.:after伪元素选择器语法：element:举例演示举例演示UI（UserInterface，用户界面）元素状态伪类选择器，是指只有当元素处于某种状态下时才能使用的样式，默认状态不起作用。不起作用。表达式描述E:hover鼠标指针移动到某个文本框控件上的样式E:active元素被激活(鼠标在元素上按下还没有松开)时使用的样式E:focus元素获得光标焦点时使用的样式，主要是在文本框控件获得焦点并进行文字输入的时候使用E:enable指定当元素处于可用状态时的样式E:disable指定当元素处于不可用状态时的样式E:read-only

指定当元素处于只读状态时的样式Firefox浏览器中要写成-moz-read-onlyE:read-write

指定当元素处于非只读状态时的样式Firefox浏览器中要写成：-moz-write-onlyE:checked指定当表单中的radio单选框或checkbox复选框处于选取状态时的样子Firefox浏览器中要写成：-moz-checkedE:default指定当页面打开时默认处于选区状态的radio或checkbox控件的样式E:indeterminate指定当页面打开时，如果一组单选框中任何一个单选框都没有被设定为选取状态时整组单选框的样式，如果用户选取了一个单选框，则该样式被取消E:selection指定当元素处于选中状态时的样式，这里需要注意的是:在Firefox浏览器下使用时，需要写成-moz-selection的形式UI（UserInterface，用户举例演示举例演示5CSS的继承与层叠Part◎CSS的继承性◎

CSS的层叠性5CSS的继承与层叠Part◎CSS的继承性◎CSS的层叠例如：body{color:red;font-size:20pt;}HTML结构文档：<body>好好学习<p>天天向上</p></body>在页面显示时，body标签定义文本的颜色为红色，文字大小为20pt，段落<p>标签虽然没有定义样式，但是里面的文字会继承body的样式，最终显示为红色，大小为20pt。这就是CSS的继承性。CSS的继承性CSS的继承性是被包含的子元素将拥有外层元素的某些样式。例如：body{color:red;font-size:20举例演示举例演示注意：实际开发中，通常会对使用较多的字体、文本属性等网页中通用的样式可以使用继承。所以会在body元素中统一设置字体、字号、颜色、行距等样式。并不是所有的属性都可以继承，对于元素的布局属性、盒模型属性都不能继承。例如：背景属性、边框属性、外边距属性、内边距属性、定位属性、布局属性、元素宽高属性。注意：实际开发中，通常会对使用较多的字体、文本属性等网页中通例如：<style>body{color:red;font-size:30pt;}p{text-decoration:underline;}span{color:blue;}</style>HTML结构文档：<body><p>好好学习<span>天天向上</span><p/></body>CSS的层叠性CSS的层叠性是指多种CSS样式的叠加。例如：<style>HTML结构文档：<body>C权值计算法继承样式的权重=0分标签选择器=1分伪元素或伪对象选择器=1分类选择器=10分属性选择器=10分ID选择器=100分行内样式的权值最高1000分!important的权值是无穷大处理层叠关系的使用优先级别来判断.1.当行内样式、内部样式和链接样式同时应用于同一个元素，就是使用多重样式的情况，依据他们的权重来判断。优先级如下：链接样式<内部样式<行内样式。权值计算法继承样式的权重=0分处理层叠关系的使用优先级别来判举例演示举例演示6综合实例Part◎门户网站导航设计6综合实例Part◎门户网站导航设计

门户网站导航设计【演示】通过CSS的样式表的学习，运用CSS标签选择器、类选择器、id选择器，以及结构选择设计一个门户网站的导航菜单。门户网站导航设计【演示】通过CSS的样式表的学习，运用CS实现步骤1HTML结构代码设计

2CSS样式设计实现步骤1HTML结构代码设计2CSS样式设计76任务实施门户网站导航设计1

HTML结构代码设计任务实施门户网站导航设计1HTML结构代码设计77举例演示举例演示任务实施门户网站导航设计2

CSS样式设计任务实施门户网站导航设计2CSS样式设计79举例演示举例演示7任务实施Part◎使用CSS实现门户网站导航7任务实施Part◎使用CSS实现门户网站导航【演示】结合CSS的继承性、层叠性编写网站的基础样式表，并实现网站头部的页面效果。【演示】结合CSS的继承性、层叠性编写网站的基础样式表，并实实现步骤1任务分析

2编写页面通用样式

3编写页面通用样式

4编写nav区域与链接样式实现步骤1任务分析2编写页面通用样式3编写83任务实施使用CSS实现门户网站导航1

任务分析任务实施使用CSS实现门户网站导航1任务分析84<header>区域的HTML代码如下<header> <ahref="#"><imgsrc="images/logo.png"></a> <nav> <ahref="#">门户首页</a> <ahref="#">学校概况</a> <ahref="#">组织机构</a> <ahref="#">招生就业</a> <ahref="#">科学研究</a> <ahref="#">招聘信息</a> </nav></header><header>区域的HTML代码如下<header>85<header>区域的HTML代码，完成项目要分为以下几步第一步：使用通配符编写通用样式，统一页面中所有的文本样式，统一页面中的内外边距与边框，统一样式表的风格。第二步：根据需要可以在<header>标签内添加2个<div>标签，第1个来放置整个导航信息，第2个来实现超级链接的页面效果。第三步：设置nav区域中的超级链接的样式。<header>区域的HTML代码，完成项目要分为以下几步第86任务实施使用CSS实现门户网站导航2

编写页面通用样式任务实施使用CSS实现门户网站导航2编写页面通用样式87举例演示举例演示任务实施使用CSS实现门户网站导航3

添加div并编写样式任务实施使用CSS实现门户网站导航3添加div并编写样式89举例演示举例演示任务实施使用CSS实现门户网站导航4

编写nav区域与链接样式任务实施使用CSS实现门户网站导航4编写nav区域与链接样91举例演示举例演示8任务拓展Part◎实际元素与伪元素的转化◎浏览器的兼容性处理8任务拓展Part◎实际元素与伪元素的转化◎浏览器的兼容性处【演示】项目中，header中添加了<divid=“headerbottom”></div>标签。#headerbottom{

position:absolute; bottom:0; left:0; width:100%; height:7px;

background:#d6d6d6; }header::after{

content:'';position:absolute; bottom:0; left:0; width:100%; height:7px;

background:#d6d6d6; }【演示】项目中，header中添加了<divid=“hea举例演示举例演示

浏览器的兼容性处理由于浏览器内核不同，CSS3各属性的支持程度不一样，通过前缀可以解决不同浏览器的兼容问题：浏览器描述IE8/IE9/IE10等-ms谷歌（Chrome）/Safari-webkit火狐（Firefox）-mozOpera-o使用css3属性时，大部分都要带这些识别前缀，早期点的浏览器才能识别。现在最新版的浏览器基本都支持css3基本都不用写前缀，写前缀是为了向前兼容老版本的浏览器而已。浏览器的兼容性处理由于浏览器内核不同，CSS3

举例：关于transition过渡属性的设置CSS3transition属性举例：关于transition过渡属性的设置CSS3t举例演示【实例4-19】运用HTML5“过渡属性”实现形变动画，体验浏览器的兼容性处理。border-radius:50%;

/*定义圆角边框半径为50%*/transition-property:border-radius;/*设置过渡属性为边框半径

*/-webkit-transition-property:border-radius;

/*SafariandChrome浏览器兼容代码*/-moz-transition-property:border-radius;

/*Firefox浏览器兼容代码*/-ms-transition-property:border-radius;

/*IE浏览器兼容代码*/-o-transition-property:border-radius;

/*Opera浏览器兼容代码*/举例演示【实例4-19】运用HTML5“过渡属性”实现形变动举例演示举例演示9项目实训Part◎使用样式表美化网页页面9项目实训Part◎使用样式表美化网页页面【实训目的】1.掌握CSS的各种定义方法。2.掌握CSS的各种调用规则与技巧【实训内容】实训任务1：浏览右侧网页界面，发现问题使用样式表优化高校教学资源共建共享平台界面效果。使用样式表美化网页页面【实训目的】使用样式表美化网页页面谢谢多一点努力,多一点实践,多一点点就能创造奇迹!谢谢多一点努力,多一点实践,多一点点就能创造奇迹!任务4:

初识CSS3

3CSS的使用

4CSS3选择器

5CSS的继承与层叠

6综合实例7任务实施

8任务拓展1任务描述2初识CSS33CSS的使用4C1任务描述Part使用CSS实现门户网站导航1任务描述Part使用CSS实现门户网站导航

P{color:red;

font-size:18px;line-height:30px;

type="text/css"

标签名.类名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

:last-child

伪元素选择器

element:before{

element:after{

指定当元素处于只读状态时的样式Firefox浏览器中要写成-moz-read-onlyE:read-write

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

温馨提示

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

任务4-构建网站层叠样式表-动画版课件

文档简介

温馨提示

最新文档

评论

任务4-构建网站层叠样式表-动画版课件

文档简介

温馨提示

最新文档

评论

相关文档