03情境一任务3使用CSS美化HTML页面课件.ppt

1、情境一：情境一：WebWeb前台页面设计前台页面设计任务3：使用CSS美化HTML页面主 讲：刘 晓 知WEB 应 用 开 发主 要 内 容CSS样式规则1 1样式的继承与层叠2 2CSS盒模型3 3学习目标学习目标知识目标：知识目标：CSS样式的使用方法能力目标：能力目标：能够使用CSS样式美化网页元素技术应用的背景技术应用的背景在HTML文档里使用CSS样式可以美化页面的外观，改变页面的布局。使用外部样式可以解决网站内容与表现分离的问题，另外外部样式表可以极大提高工作效率，能轻松的为网页进行改版或维护。一、任务一、任务1-31-3任务描述：设计图文页面任务描述：设计图文页面使用CSS美化H

2、TML页面完成后效果如图所示：二、CSS简介 1.CSS 1.CSS（Cascading Style Sheet Cascading Style Sheet）中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS 是用于布局与美化网页的CSS 语言是一种标记语言,因此不需要编译,可以直接由浏览器执行(属于浏览器解释型语言)CSS 文件是一个文本文件,它包含了一些CSS 标记,CSS 文件必须使用css 为文件名后缀CSS 是大小写不敏感的,CSS 与css 是一样 CSS 是由W3C 的CSS 工作组产生和维护的 二、CSS简介2.CSS2.CSS的作用的

3、作用页面的载入更快,可以降低网站的流量费用 使设计师在修改设计时更有效率，而代价更低 使整个站点保持视觉的一致性 使HTML 代码更为清晰、简洁，可更好的被搜索引擎找到和索引,使站点对浏览者和浏览器更具有亲和力 仅仅HTMLHTML+CSSCSS的思想就是首先指定对什么“对象”进行设置，然后指定对该对象的哪个方面的“属性”进行设置，最后给出该设置的“值”。CSS由3个基本部分组成的“对象”、“属性”和“值”。1.CSS规则规则CSS文档由一条或多条CSS规则（Rules）组成，规则拥有特定的格式：三、CSS样式规则三、CSS样式规则2.CSS2.CSS单位单位单位名称单位名称说明说明pc(pi

4、ca)1 pc=12 point（点）pt(point)1 pt=1/72 inch（英寸）mm(millimeter)亳米cm(centimeter)厘米in(inch)英寸px(pixel)像素，代表计算机屏幕上的一点em表示字体的高度的单位ex表示字体中字母X的高度三、CSS样式规则 行内式：在HTML标签的style属性中写CSS代码 嵌入式：在中写CSS代码 链接式：使用链接外部CSS文件 导入式：使用import指令 import url(mystyle.css“);3.3.在在HTMLHTML中引入中引入CSSCSS样式样式三、CSS样式规则4.基本基本CSS选择器选择器在CSS

5、的3个组成部分中，“对象”是很重要的，它指定了对哪些网页元素进行设置，因此，它有一个专门的名称选择器（selector）。基本CSS选择器有以下四种：标签选择器类别选择器ID选择器伪类选择器h1 color:red;font-size:25px;选择器 属性 值 声明 声明 值 属性（1 1）CSSCSS标签选择器标签选择器用于设定HTML文档中指定标签的显示样式三、CSS样式规则 演示演示 h2 font-family:幼幼圆圆;color:blue;这这是是标题标题文本文本 这这里是正文里是正文内内容容 这这是是标题标题文本文本 这这里是正文里是正文内内容容 这这是是标题标题文文 这这里是

6、正文里是正文内内容容 显示效果显示效果三、CSS样式规则（1 1）CSSCSS标签选择器（续）标签选择器（续）h2：标题标签所有h2均使用同一种样式.class color:green;font-size:20px;类别选择器 属性 值 属性 值 声明 声明 类别名称（2）类别选择器）类别选择器给特定的一组CSS代码取名，可以应用于多个不同的标签：三、CSS样式规则三、CSS样式规则 class选择选择器器 .red color:red;/*红红色色*/font-size:18px;/*文字大小文字大小*/.green color:green;/*绿绿色色*/font-size:20px;/*

7、文字大小文字大小*/class选择选择器器1 class选择选择器器2 h3同同样样适用适用 类名为red的样式在p元素中应用类名为red的样式类名为green的样式类名为green的样式用在p元素中，也可用在h3元素中。（2）类别选择器（续）类别选择器（续）同同时时使用使用两个两个class .blue color:blue;/*颜颜色色*/.big font-size:22px;/*字体大小字体大小*/一一种种都不使用都不使用 两种两种class，只使用，只使用blue 两种两种class，只使用，只使用big 两种两种class，同，同时时blue和和big 一一种种都不使用都不使用 三

8、、CSS样式规则使用两个类样式，使用空格隔开。（2）类别选择器（续）类别选择器（续）#id color:yellow;font-size:30px;ID 选择器 属性 值 属性 值 声明 声明（3）ID选择器选择器对于页面中独一无二的元素，比如页脚，可以给其id属性赋予一个独一无二的值，用ID选择器给指定ID的元素设置样式。三、CSS样式规则三、CSS样式规则 ID选择器选择器#bold font-weight:bold;/*粗体粗体*/#green font-size:30px;/*字体大小字体大小*/color:#009900;/*颜色颜色*/ID选择器选择器1 ID选择器选择器2 ID选

9、择器选择器3 ID选择器选择器4 ID名为bold的样式在p元素中应用ID名为bold的样式（3）ID选择器（续）选择器（续）三、CSS样式规则（4）伪类选择器）伪类选择器超链接标签支持几个特殊的CSS样式类，用于定义超链接不同状态的样式，这些样式类被称为“伪类（pseudo class）”属性属性说明说明a:link超链接的普通样式，即正常浏览状态的样式a:visited被点击过后呈现的样式a:hover鼠标指针悬停于超链接元素之上时呈现的样式a:active单击超链接时呈现的样式三、CSS样式规则5.5.“复合选择器复合选择器”包括：包括：（1）交集选择器（2）并集选择器（3）后代选择器三

10、、CSS样式规则（1 1）交集选择器）交集选择器直接指定特定标记特定标记中特定类别特定类别或IDID的样式。p.special /*标记标记.类别选择类别选择器器*/color:red;p#special/*id选择选择器器*/color:green;注意：选择器字符注意：选择器字符间不要有空格！间不要有空格！三、CSS样式规则（2 2）并集选择器）并集选择器一次定义多个标签或类别或ID的样式div,.special,#one/*集体集体声声明明*/text-decoration:underline;/*下下划线划线*/注意：以逗号隔开各个选择器注意：以逗号隔开各个选择器（3 3）后代选择器）

11、后代选择器选择嵌套在指定元素的内部元素的样式p spancolor:red;注意：以空格分隔选择器注意：以空格分隔选择器三、CSS样式规则三、CSS样式规则6.6.常用常用CSSCSS属性属性（1）CSS 背景属性（Background）属性属性 描述描述background在一个声明中设置所有的背景属性。background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。background-color 设置元素的背景颜色。background-image 设置元素的背景图像。background-position设置背景图像的开始位置。background-repe

12、at 设置是否及如何重复背景图像。三、CSS样式规则（2）CSS 边框属性（Border）属性属性 描述描述border在一个声明中设置所有的边框属性。border-bottom在一个声明中设置所有的下边框属性。border-bottom-color设置下边框的颜色。border-bottom-style设置下边框的样式。border-bottom-width设置下边框的宽度。border-color设置四条边框的颜色。border-left在一个声明中设置所有的左边框属性。border-left-color设置左边框的颜色。border-left-style设置左边框的样式。border-l

13、eft-width设置左边框的宽度。三、CSS样式规则（2）CSS 边框属性（Border）（续）属性属性 描述描述border-right在一个声明中设置所有的右边框属性。border-right-color设置右边框的颜色。border-right-style设置右边框的样式。border-right-width设置右边框的宽度。border-style设置四条边框的样式。border-top在一个声明中设置所有的上边框属性。border-top-color设置上边框的颜色。border-top-style设置上边框的样式。border-top-width设置上边框的宽度。border-w

14、idth设置四条边框的宽度。三、CSS样式规则（3）CSS 文本、字体属性（Text、Font）属性属性 描述描述color设置文本的颜色。line-height设置行高。text-align规定文本的水平对齐方式。text-decoration规定添加到文本的装饰效果。text-indent规定文本块首行的缩进。font在一个声明中设置所有字体属性。font-family规定文本的字体系列。font-size规定文本的字体尺寸。font-style规定文本的字体样式。font-weight规定字体的粗细。三、CSS样式规则（4）CSS 外边距、内边距属性（Margin、Padding）属性属

15、性 描述描述margin在一个声明中设置所有外边距属性。margin-bottom设置元素的下外边距。margin-left设置元素的左外边距。margin-right设置元素的右外边距。margin-top设置元素的上外边距。padding在一个声明中设置所有内边距属性。padding-bottom设置元素的下内边距。padding-left设置元素的左内边距。padding-right设置元素的右内边距。padding-top设置元素的上内边距。三、CSS样式规则（5）CSS 列表属性（List）属性属性 描述描述list-style在一个声明中设置所有的列表属性。list-style-i

16、mage将图象设置为列表项标记。list-style-position设置列表项标记的放置位置。list-style-type设置列表项标记的类型。四、CSS的层叠与继承1.CSS1.CSS层叠原则层叠原则行内样式行内样式idid样式样式 类别样式类别样式 标记样式标记样式结论：特殊者胜出!没有定义没有定义CSSCSS规则的规则的HTMLHTML元素从元素从它的父元素中继承样式！它的父元素中继承样式！div.fathercolor:blue;/*颜颜色色*/text-decoration:underline;/*下下划线划线*/这这是父元素是父元素内内的文本，的文本，显显示示为蓝为蓝色加下色加

17、下划线划线 这这是子元素是子元素内内的文本的文本 使用交集选择器定义样式定义两个嵌套的元素四、CSS的层叠与继承（续）2.CSS2.CSS继承原则继承原则五、CSS盒模型1.HTML1.HTML文档的逻辑结构文档的逻辑结构五、CSS盒模型（续）marginpaddingBox2.2.盒模型示意图盒模型示意图五、CSS盒模型（续）2.2.盒模型示意图（续）盒模型示意图（续）五、CSS盒模型（续）3.块元素与行内元素块元素与行内元素1.、等是常见的块级（block）元素标签2.、等是常见的行内（inline）元素标签3.每一个块级元素都定义了一个盒子。4.与没有特殊的语义，多用于页面布局与排版，因

18、此是网页布局设计中打交道最多的两个标签。五、CSS盒模型（续）div border-width:6px;border-color:#000000;margin:20px;/*盒子盒子间间距距*/padding:5px;/*内内容容与边与边界距离界距离*/background-color:#FFFFCC;border-style:dashed;通过设定盒子的边框和线型可以在页面上清晰地显示出盒子所占用的页面区域。4.盒模型示例盒模型示例五、CSS盒模型（续）属性值个数属性值个数说明说明2第1个值表示上下边框的属性第2个值表示左右边框的属性3第1个值表示上边框的属性第2个值表示左右边框的属性第3个

19、值表示下边框的属性4依次表示上、右、下、左边框的属性（成顺时针方向）divborder-color:Red Green;border-width:1px 2px 3px;border-style:dotted dashed solid double;5.5.有关有关CSSCSS盒子设定边框属性的简写盒子设定边框属性的简写六、任务实施1.1.任务分析任务分析所有内容放于一个div容器主标题二级标题段落文本图片列表链接2.2.构建页面框架（构建页面框架（HTMLHTML文档）文档）六、任务实施使用CSS样式美化页面 ASP.NET MVC 3 高级编程 编辑推荐 ASP.NET MVC 3 高级编

20、程 作者简介 Jon Galloway，在Microsoft的服务器和工具在线组工作，主要负责ASP.NET社区和ASP.NET网站。查看目录 六、任务实施3.3.创建样式文件，清除元素默认样式创建样式文件，清除元素默认样式css基础链接外部样式文件：web.csscharset utf-8;/*CSS Document*/body,div,h2,h3,p,ul,li margin:0;padding:0;body font-family:宋体;font-size:12px;清除body,div,h2,p,ul,li默认边距与间距。六、任务实施4.4.设置设置divdiv样式样式.main w

21、idth:780px;padding:10px;margin:10px auto 0将div设置宽度，外边距左右为自动会使整个div在浏览器中居中显示。使用类别选择器.main，设置宽度为780px，上下左右内边距为10px，外边距为上10px，左右自动，下0px。效果如下图所示。六、任务实施5.5.设置标题样式设置标题样式设置主标题字体为“黑体”,大小为18px,背景色为浅灰色，上下左右内填充为15px，文字居中显示。效果如图所示。.main h2 font-family:黑体“;font-size:18px;background-color:#EFEFEF;padding:15px;tex

22、t-align:center六、任务实施6.6.设置标题样式设置标题样式设置次标题为宋体14px。效果如图所示。.main h3 font-family:宋体;font-size:14px;padding:10px 0;六、任务实施7.7.设置图片样式设置图片样式设置图片左浮动，四周的外边距5px、内边距3px，边框为1px实线灰色边框。效果如图所示。.main img float:left;margin:5px;padding:3px;border:1px solid#CCC六、任务实施8.8.设置段落格式设置段落格式设置字体为宋体12px，行高1.4倍，首行缩进两个字符，外边距为10px。

23、.main p font-family:宋体;font-size:12px;line-height:1.4;text-indent:2em;margin:10px;六、任务实施9.9.设置项目列表样式设置项目列表样式.main ul padding-left:2em;.main li line-height:1.5;10.10.设置链接样式设置链接样式.main a color:#900;.main a:hover color:#F90;六、任务实施11.11.添加注释添加注释css中，注释的语句都位于”/*”和”*/”之间，其内容可以是单行也可以是多行。在学习的过程中，给自己写的代码添加注释，更能加深理解。七、小结 本次课主要介绍CSS相关知识，包括CSS语法、在HTML中使用CSS样式的方式、选择器类型，在运用的过程中理解CSS的层叠与继承与盒模型原理，能够使用CSS样式美化网页中的各元素。八、作业 使用使用CSSCSS样式完成一个样式完成一个HTMLHTML首页面的美化，以获得更好的首页面的美化，以获得更好的视觉效果，增强用户体验。视觉效果，增强用户体验。