模块09CSS3入门与基础电子课件 HTML5网页设计.pptx
《模块09CSS3入门与基础电子课件 HTML5网页设计.pptx》由会员分享,可在线阅读,更多相关《模块09CSS3入门与基础电子课件 HTML5网页设计.pptx(82页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、模块九 CSS3入门与基础9.1CSS3概述、车票调配监督、收款监督及收益监督等。CSS的全称是层叠样式表(cascading style sheets),简称CSS样式表,是万维网(W3C)组织在1996年制定的,最新的版本为CSS3。CSS3的主要特点是将新增技术分解成盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块,这些模块可以独立发布和实现。说明:CSS3是使以前需要用图片和脚本实现的效果现在只需要用几行代码就能完成。9.2CSS3的一个简单应用【例9-1】使用CSS3的动画功能实现卡通小车从左运动至右的动画效果。例题9.1 CSS3示例 /*CSS部分代
2、码*/#car width:100px;height:60px;position:absolute;9.2CSS3的一个简单应用【例9-1】运行结果如图9-1所示。background:url(./car.jpg);background-size:100%100%;animation:car_move 3s;keyframes car_move 0%left:0px;100%left:500px;图9-1 【例9-1】在IE浏览器中的运行结果9.3CSS3的创建和使用9.3.1 CSS3的基本格式pfont-size:14px /*其中p表示选择器,用于选择页面元素*/*而font-size:
3、14px为样式规则,可以是一组语句*/CSS样式表由选择器(selector)与样式规则(rule)组成,基本格式如下。9.3CSS3的创建和使用9.3.1 CSS3的基本格式1.选择器CSS样式规则只对指定页面中的相关元素起作用,而相关元素的指定则是通过各种类型的选择器实现的。在CSS3中常使用的选择器有标签选择器、ID选择器、类选择器、属性选择器等。语法如下。h1,h2,h3,h4font-family:微软雅黑;line-height:32px;9.3CSS3的创建和使用9.3.1 CSS3的基本格式2.样式规则样式规则是用大括号括起来的部分,在选择器后面,每个规则由属性和属性值组成,属
4、性和属性值之间使用冒号(:)隔开,多个不同的规则间可以使用分号(;)隔开。为了使程序容易阅读,通过会将样式进行分行处理,分行处理除了可以让样式更被易读外,还可以方便在语句后加入注释。样式规则的语法格式如下。p font-size:14px;/*设置文字大小为14像素*/text-decoration:underline;/*设置文字的下划线*/color:red;/*设置文字颜色为红色*/9.3CSS3的创建和使用9.3.2 使用CSS3样式表1.行内声明行内声明(inline)就是直接将CSS3样式写在HTML标记中。在对应的标记中利用style属性声明CSS3语法,并写明样式规则就可以了,
5、语法格式如下。曲曲折折的荷塘上面,弥望的是田田的叶子。叶子出水很高,像亭亭的舞女的裙。层层的叶子中间,零星地点缀着些白花,有袅娜地开着的,有羞涩地打着朵儿的;正如一粒粒的明珠,又如碧天里的星星,又如刚出浴的美人。9.3CSS3的创建和使用9.3.2 使用CSS3样式表2.内嵌声明内嵌声明(embedding)就是将CSS样式表放在HTML文件的标头区域,也就是标记中。内嵌声明的方式是在HTML中的区域中以标记进行声明,语法格式如下。内嵌声明 文档标题说明:内嵌声明的好处是可以将网页中的CSS3样式进行统一管理,做到样式与HTML代码的分离,便于设计师编写样式代码,但缺点是只能应用于当前网页,不
6、能被重用,如果网站的其他页面需要用到某些相同的样式代码,则需要重写一份,这会造成代码的冗余问题。9.3CSS3的创建和使用9.3.2 使用CSS3样式表3.链接外部样式文件链接外部样式文件是应用CSS3样式最常用的方法,一是能做到样式与代码的有效分离;二是能实现代码的重用,可以帮助网站内的其他页面复用页面样式。(1 1)链接外部样式文件)链接外部样式文件(2 2)导入外部样式文件)导入外部样式文件9.4CSS3的常用选择器9.4.1 标签选择器由于一个网页文档主要是由很多的HTML标签按照一定的规则组织而成的,因此标签选择器是CSS中使用频率最高的一类选择器。标签选择器无须重新命名设置,可以直
7、接引用HTML的标签元素名,因此标签选择器又称为元素选择器。一般可以使用标签选择器定义网页标签的默认样式,语法格式如下。标签(元素)名 /样式代码9.4CSS3的常用选择器9.4.1 标签选择器【例9-2】将段落标记p的背景颜色设置为红色,文字颜色设置为白色,同时将大小设置为14像素。例题9.2 标签选择器 p background-color:#ff0000;/*设置背景颜色为红色#ff0000*/color:#ffffff;/*设置前景文字的颜色为白色#ffffff*/font-size:14px;/*设置文字的大小为14像素*/9.4CSS3的常用选择器9.4.1 标签选择器【例9-2】
8、将段落标记p的背景颜色设置为红色,文字颜色设置为白色,同时将大小设置为14像素 这是一个文字段落运行结果如图9-2所示。图9-2【例9-2】在IE浏览器中的运行结果9.4CSS3的常用选择器9.4.2 ID选择器ID选择器可以为标有ID属性值的HTML元素指定特定的样式,在同一个网页中可以指定不同的页面元素,但ID选择器只能在HTML页面中使用一次。通常情况下,使用ID选择器来定义HTML框架结构的布局效果,因为HTML框架元素的ID值都是唯一的。ID选择器的选择符是“#”。语法格式如下。#ID名 /样式代码9.4CSS3的常用选择器9.4.2 ID选择器【例9-3】为页面中的两个不同的DIV
9、盒子设置相同的大小(长宽均为100像素),并设置为并排显示,两个盒子的颜色分别为红色及绿色。例题9.3 ID选择器 /*使用标签选择器设置两个DIV盒子的通用样式*/div /*设置宽度、高度和浮动方式*/width:100px;height:100px;float:left;/*设置box1盒子样式*/#box1 background-color:#ff0000;/*#ff0000为红色*/*设置box2盒子样式*/#box29.4CSS3的常用选择器9.4.2 ID选择器【例9-3】为页面中的两个不同的DIV盒子设置相同的大小(长宽均为100像素),并设置为并排显示,两个盒子的颜色分别为红
10、色及绿色。background-color:#00ff00;/*#00ff00为绿色*/盒子一 盒子二运行结果如图9-3所示。图9-3【例9-3】在IE浏览器中的运行结果9.4CSS3的常用选择器9.4.3 类选择器类选择器的定位就是方便不同的标签元素实现相同的样式效果,类似于“#”表示ID选择器的标志,类选择器的标志符号为点号“.”。语法格式如下。.类名 /样式代码9.4CSS3的常用选择器9.4.3 类选择器【例9-4】将所给定素材的文字内容(素材文件ch09/9.4.txt)进行排版,并将正文中包含的“君”字格式设置为红色、加粗。代码如下。例题9.4类选择器 h1 font-size:2
11、4px;text-align:center;/*字体水平对齐方式为居中对齐*/p font-size:16px;line-height:20px;/*段落行高为20像素*/text-align:center;font-family:楷体;/*字体名称为楷体*/9.4CSS3的常用选择器9.4.3 类选择器【例9-4】将所给定素材的文字内容(素材文件ch09/9.4.txt)进行排版,并将正文中包含的“君”字格式设置为红色、加粗。代码如下。.jun color:#ff0000;font-weight:bold;/*字体加粗,值为bold*/只愿君心似我心,定不负相思意我住长江头,君住长江尾。日日
12、思君不见君,共饮长江水。9.4CSS3的常用选择器9.4.3 类选择器【例9-4】此水几时休,此恨何时已。只愿君心似我心,定不负相思意。运行结果如图9-4所示。图9-4【例9-4】在IE浏览器中的运行结果9.4CSS3的常用选择器9.4.3 类选择器 如果把标签与类捆绑在一起定义选择器,则可以限定类的使用范围,指定该类只适合在特定的标签范围内使用。它的用法是在标签的后面紧跟一个类,组成一个指定类范围的复合选择器,语法格式如下。span.font14 font-size:14px;9.4CSS3的常用选择器9.4.4 属性选择器所谓属性选择器,就是利用网页标签包含的属性及其属性值来定义特定元素或
13、一定范围元素的样式。属性选择器一般是一个元素后面跟中括号,中括号内是属性或属性表达式,语法格式如下。divid=footer font-size:14px;9.4CSS3的常用选择器9.4.4 属性选择器 属性选择器在IE 6及其以下版本的浏览器中不能被很好地支持,因此在使用时应注意浏览器的兼容性问题。属性选择器一般分为如下几种。匹配属性名选择器匹配属性值选择器模糊匹配属性值选择器(1)(2)(3)9.4CSS3的常用选择器9.4.4 属性选择器【例9-5】利用模糊匹配属性值选择器分别实现标签元素的选择,并设置不同的字体大小和颜色。代码如下。例题9.5 属性选择器 pclass|=p1font
14、-size:12px;color:red;/*连字符匹配*/pclass=abcfont-size:14px;color:green;/*空白符匹配*/pclass=abcfont-size:16px;color:blue;/*前缀匹配*/pclass$=abc4font-size:18px;color:pink;/*后缀匹配*/pclass*=c5font-size:20px;color:brown;/*子字符串匹配*/9.4CSS3的常用选择器9.4.4 属性选择器【例9-5】利用模糊匹配属性值选择器分别实现标签元素的选择,并设置不同的字体大小和颜色。代码如下。这是p1段落 这是p2段落
15、这是p3段落 这是p4段落 这是p5段落运行结果如图9-5所示。图9-5【例9-5】在IE浏览器中的运行结果9.4CSS3的常用选择器9.4.5 伪类选择器伪类选择器是一种特殊的选择器,它定义了一些特殊区域或特殊状态下的样式,这些特殊的区域或状态是无法通过标签、ID或Class及其他属性来进行精确控制的。伪类一般以冒号(:)为前缀来表示,示例如下。a:hovercolor:red;text-decoration:underline;9.4CSS3的常用选择器9.4.5 伪类选择器【例9-6】利用超链接a标签的4种伪类选择器定义超链接的4种不同状态。例题9.6 伪类选择器 a:linkcolor
16、:#ff0000;/*正常链接状下的样式*/a:visitedcolor:#00ff00;/*访问后的样式*/a:hovercolor:#0000ff;/*鼠标经过时的样式*/a:activecolor:#ff00ff;/*超链接被激活时的样式*/9.4CSS3的常用选择器9.4.5 伪类选择器【例9-6】利用超链接a标签的4种伪类选择器定义超链接的4种不同状态。点击此链接运行结果如图9-6所示。图9-6【例9-6】在IE浏览器中的运行结果9.4CSS3的常用选择器9.4.5 伪类选择器伪类选择器分成三大类,具体如下。(1)结构伪类E:first-of-type:匹配与E同类型、同级的兄弟元素
17、中的第一个元素。E:last-of-type:匹配与E同类型、同级的兄弟元素中的最后一个元素。E:only-of-type:匹配与E同类型、同级的兄弟元素中的唯一一个。E:last-child:匹配E元素,而且必须是其父元素的最后一个子结点元素。E:first-child:匹配E元素,而且必须是其父元素的第一个子结点元素。9.4CSS3的常用选择器9.4.5 伪类选择器伪类选择器分成三大类,具体如下。(1)结构伪类E:only-child:匹配E元素,而且必须是其父元素的唯一子结点的元素。E:nth-child(n):匹配E元素,而且必须是其父元素的第n个子结点元素。E:nth-last-ch
18、ild(n):匹配E元素,而且必须是其父元素的倒数第n个子结点元素。E:nth-of-type(n):匹配E元素,而且是与其同类型、同级的兄弟元素中的第n个元素。E:nth-last-of-type(n):匹配E元素,而且是与其同类型、同级的兄弟元素中的倒数第n9.4CSS3的常用选择器9.4.5 伪类选择器伪类选择器分成三大类,具体如下。(2)UI元素状态伪类可以设置元素处于某种状态下的样式。在人机交互过程中,只要元素状态发生变化,选择符就有可能会匹配成功。E:checked:匹配E元素,且当前处于选中状态。E:enabled:匹配E元素,且当前处于可用状态(大多用在表单元素上)。E:dis
19、abled:匹配E元素,且当前处于不可用状态。9.4CSS3的常用选择器9.4.5 伪类选择器伪类选择器分成三大类,具体如下。(3)伪元素选择器并不针对真正的元素使用该选择符,而是针对CSS已经定义好的伪元素使用。E:target:匹配E元素,而且必须是命名锚点的目标元素。URL后面跟有锚名称#,指向文档内的某个具体的元素。该被链接的元素就是目标元素(target element),应用于锚点(要跳转到的位置),如:targetbackground:#F00;。E1:not(E2):匹配非E2元素的每个E1元素,如:not(P)background:#F00;。9.4CSS3的常用选择器9.4
20、.6 派生选择器01子选择器子选择器就是指定父元素所包含的子元素的样式。子选择器使用尖角号()来表示,语法格式如下。divspancolor:#ff0000;02相邻选择器相邻选择器是指定一个元素相邻的下一个元素的样式,相邻选择器使用加号(+)来表示,语法格式如下。div+spancolor:#00ff00;9.4CSS3的常用选择器9.4.6 派生选择器03包含选择器包含选择器通过空格标识符来表示,前面的一个选择器表示包含框对象的选择器,而后面的选择器表示被包含的选择器,语法格式如下。div spancolor:#0000ff;04多层选择器嵌套在CSS选择器中,使用选择器嵌套来实现对HTM
21、L结构中一些纵深元素的控制。嵌套的层级并没有明确的限制,嵌套的分隔符也用空格来表示,语法格式如下。div p.title afont-size:14px;color:red;9.5控制页面样式9.5.1 控制圆角边框样式border-radius:圆角半径;在CSS2样式设计中,有关边框的样式一直是以直角形式呈现的,这样的设计虽然中规中矩,但灵活度不够,页面美观上显得比较僵硬。通常使用的方法是利用多张图片作为背景图案,利用这种方法需要编写额外的冗余代码,而且要载入图片,会增加页面文件的大小。而CSS3通过引入border-radius属性彻底解决了圆角边框的问题,此属性会同时设置矩形4个角的圆
22、角效果,语法格式如下。9.5控制页面样式9.5.1 控制圆角边框样式【例9-7】设置给定图片的长度为200像素,宽度自适应,并设置边框为1像素实线,颜色为#ccc,内边留白为4像素,同时设置图片的4个角为圆角,大小为20像素。例题9.7 圆角边框 img width:200px;height:auto;/*高度自适应*/9.5控制页面样式9.5.1 控制圆角边框样式【例9-7】设置给定图片的长度为200像素,宽度自适应,并设置边框为1像素实线,颜色为#ccc,内边留白为4像素,同时设置图片的4个角为圆角,大小为20像素。border:1px solid#ccc;/*设置边框样式*/border
23、-radius:20px;/*设置圆角边框*/padding:4px;/*设置内边距*/9.5控制页面样式9.5.1 控制圆角边框样式【例9-7】运行结果如图9-7所示。图9-7【例9-7】在IE浏览器中的运行结果9.5控制页面样式9.5.2 控制背景样式(1)background-color:设置元素的背景颜色,这种颜色是一种纯色,会填充元素的内容、内边距和边框区域,扩展到元素边框的外边界(但不包括外边距),如果边框有透明部分,会透过这些透明部分显示出背景色。其语法格式如下。div#picbackground-color:#ff0000;/*设置#pic元素的背景颜色为红色*/9.5控制页面
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 模块09CSS3入门与基础电子课件 HTML5网页设计 模块 09 CSS3 入门 基础 电子 课件 HTML5 网页 设计
限制150内