版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
项目三
使用CSS样式美化网页网页设计与制作项目三使用CSS样式美化网页网页设计与制作1CSS的基本概念2CSS的语法规则3CSS选择器的使用学习内容4CSS常用属性及式1CSS的基本概念2CSS的语法规则3CSS选择学习目标知识目标：了解CSS的意义；掌握CSS样式的添加、删除和修改方法；掌握各类CSS样式的创建方法；掌握各类CSS样式的应用方法。。技能目标：通过任务的分析讲解与巩固练习，使学生能熟练掌握css的定义及应用方法，能根据页面设计的需要合理地利用CSS样式实现页面的美化。素质目标：1.具有勤奋学习的态度，严谨求实、创新的工作作风；2.具有良好的心理素质和职业道德素质；3.具有高度责任心和良好的团队合作精神；4.具有一定的科学思维方式和判断分析问题的能力；5.具有较强的网页设计创意思维、艺术设计素质。学习目标知识目标：单元三：使用CSS样式美化页面设置如图所示的网页效果图任务描述:单元三：使用CSS样式美化页面设置如图所示的网页任务描述:任务分析1.页面的结构分析单元三：使用CSS样式美化页面任务分析1.页面的结构分析单元三：使用CSS样式美化页面任务分析单元三：使用CSS样式美化页面
要完成该页面的美化任务，必须使用CSS样式，对于CSS样式的设置，需要考虑以下问题：1.什么是CSS样式？2.如何定义CSS样式？3.如何在网页中使用CSS样式？任务分析单元三：使用CSS样式美化页面要完成该页任务分析2.CSS样式设计分析单元三：使用CSS样式美化页面任务分析2.CSS样式设计分析单元三：使用CSS样式美化页面技术要点一.什么是CSS？二.CSS选择器的分类三.各类CSS选择器的定义与应用方法四.各类CSS选择器的应用区别及优先顺序单元三：使用CSS样式美化页面技术要点一.什么是CSS？单元三：使用CSS样式美化页面知识点：CSS简介单元三：使用CSS样式美化页面一组样式可以被调用在多个对象上。只要定义一组样式后，就可以随心所欲地被调用在任一段。语法易学易懂。简化了网页的格式代码，外部的样式表还会被浏览器保存在缓存里，加快了下载显示的速度，也减少了需要上传的代码数量（因为重复设置的格式将被只保存一次）。1.什么是CSS样式？知识点：CSS简介单元三：使用CSS样式美化页面一组样式可以知识点：CSS简介单元三：使用CSS样式美化页面
张飞
{
身高:185cm;
体重:105kg;
性别:男;
性格:暴躁;
民族:汉族;}对于“张飞”这个对象的描述实际由3个要素组成的，即姓名、属性和属性值。h2{
font-family:宋体;font-size:15px;
color:red;text-decoration:underline;}转换成网页代码的形式知识点：CSS简介单元三：使用CSS样式美化页面张飞h2知识点：CSS简介单元三：使用CSS样式美化页面1.什么是CSS样式？CSS的思想就是首先指定对什么“对象”进行设置，然后指定对该对象的哪个方面的“属性”进行设置，最后给出该设置的“值”。因此，概括来说，CSS就是由3个基本部分——“对象”、“属性”和“值”组成的。知识点：CSS简介单元三：使用CSS样式美化页面1.什么是C知识点：CSS选择器单元三：使用CSS样式美化页面2.CSS选择器
在CSS的3个组成部分中，“对象”是很重要的，它指定了对哪些网页元素进行设置，因此，它有一个专门的名称——选择器（selector）。
基本格式选择器{属性1：属性值1；属性2：属性值2；……}CSS语法由三部分构成：选择器、样式属性和值。知识点：CSS选择器单元三：使用CSS样式美化页面2.CSS知识点：CSS选择器单元三：使用CSS样式美化页面类（可应用于任何HTML标签），也称自定义样式。标签（重新定义特定标签的外观），也称HTML标签样式。可以将设置的样式属性自动对应所选的标签名称。ID选择器（仅应用于一个HTML标签）。
复合选择器，可以创建对某一具体的标签组合或者含有特定ID属性的标签、以及超级链接应用样式。
1.各类不同的CSS选择器在使用时有何区别？2.在实际应用中，该如何合理地选择？CSS选择器的类别知识点：CSS选择器单元三：使用CSS样式美化页面类（可应用知识点：CSS选择器单元三：使用CSS样式美化页面格式：
HTML标签记名{属性1：属性值1；属性2：属性值2；……}
作用：相当于重定义HTML标记，在保留该标记原有功能的同时新增在CSS规则中定义的功能。应用方法：自动应用到网页中所有使用了该标记的元素上。使用场合：如果网页中所有同类的对象要使用同一种样式，则通过创建“重定义标签”的方式来设计样式标签选择器<style>
h1{color:red;font-size:25px;}</style>知识点：CSS选择器单元三：使用CSS样式美化页面格式：作用知识点：CSS选择器单元三：使用CSS样式美化页面格式：
.类名{属性1：属性值1；属性2：属性值2；……}
类选择器<style>
.red{color:red;font-size:18px;}</style>作用：可以将定义的类样式应用于任何对象。。应用方法：不能自动应用，必须由设计者选择在何种对象上使用。引用格式：<HTML标签
class=类名>使用场合：如果同样的格式，要分别在不同的对象上应用，或者在某一同类对象的局部使用，则通过创建“类”的方法来分别创建不同的样式，并有选择性地在相关对象上加以应用。知识点：CSS选择器单元三：使用CSS样式美化页面格式：类选知识点：CSS选择器单元三：使用CSS样式美化页面格式：#ID名{属性1：属性值1；属性2：属性值2；……}
用法基本与类选择器相同，但是，ID样式只能在一个对象上使用，其基本作用是对每一个页面中唯一的元素进行定义。引用方法：<HTML标签
ID=ID样式名>ID选择器知识点：CSS选择器单元三：使用CSS样式美化页面格式：用法知识点：CSS选择器单元三：使用CSS样式美化页面a:hover：鼠标经过链接时的状态。
a:visited：已访问过的链接状态。
a:active：活动的链接状态。指鼠标左键按下时但还没有松开时的状态伪类选择器主要通过A:link,A:hover;A:active;A:visited来设置链接对象的四种链接状态。注意：如果是重定义A标签，则相当于同时定义链接的四种状态为相同样式。伪类选择器4种状态的设置顺序为：LVHA知识点：CSS选择器单元三：使用CSS样式美化页面a:hov知识点：CSS选择器单元三：使用CSS样式美化页面组合类型的选择器1）标签选择器、类选择器、ID选择器是三种最基本的选择器。2）以这三种基本选择器为基础，通过组合，还可以产生更多种类的选择器，实现更强、更方便的选择功能。3）复合选择器就是由两个或多全基本选择器通过不同的组合方法得到的。知识点：CSS选择器单元三：使用CSS样式美化页面组合类型的知识点：CSS选择器单元三：使用CSS样式美化页面组合类型的选择器1）交集选择器
交集选择器由两个选择器直接连接而成，其是第1个必须是标签选择器，第2个必须是类选择器或ID选择器，两个选择器之间必须连续书写，不能有空格。这种样式定义的结果为二者的交集。知识点：CSS选择器单元三：使用CSS样式美化页面组合类型的知识点：CSS选择器单元三：使用CSS样式美化页面组合类型的选择器1）交集选择器<body><p>普通段落文本（蓝色）</p><h3>普通标题文本（黑色）</h3><pclass=“special”>指定了.special类别的段落文本（红色</p><h3class=“special”>指定了.special类别的标题文本（绿色）</h3></body>CSS样式定义部分正文部分<styletype="text/css">
P{color:blue;}
p.Special{color:red;}
.special{color:green;}</style>知识点：CSS选择器单元三：使用CSS样式美化页面组合类型的知识点：CSS选择器单元三：使用CSS样式美化页面组合类型的选择器2）并集选择器<styletype="text/css">h1,h2,h3,h4,h5,p{ color:purple; font-size:15px; }h2.special,.special,#one{ text-decoration:underline;}</style>并集选择器是由多个基本选择器通过逗号连接而成。在声明各种选择器时，如果某些选择器的风格是完全相同的，或者部分相同，就可以利用并集选择器同时声明。同时声明多个标签此处的声明代表什么呢？知识点：CSS选择器单元三：使用CSS样式美化页面组合类型的知识点：CSS选择器单元三：使用CSS样式美化页面组合类型的选择器3.后代选择器在CSS选择器中，还可以通过嵌套的方式对特殊位置的HTML标记进行声明，如当<p>与</p>之间包含<span><span>标记时，就可以用后代选择器进行控制。后代选择器的写法是：将外层的标记写在前面，内层的标记写在后面，中间有空格分隔。当标记发生嵌套时，内层的标记就称为外层标记的后代。知识点：CSS选择器单元三：使用CSS样式美化页面组合类型的知识点：CSS选择器单元三：使用CSS样式美化页面组合类型的选择器3)后代选择器<styletype="text/css">pspan{color:red;}span{color:blue; }</style><body><p>嵌套使<span>用CSS（红色）</span>标记的方法
</p>
嵌套之外的<span>标记（蓝色）</span>不生效</body>定义P标记内的SPAN标记的格式为红色定义所有的SPAN标记的格式为蓝色知识点：CSS选择器单元三：使用CSS样式美化页面组合类型的知识点：CSS选择器单元三：使用CSS样式美化页面组合类型的选择器3)后代选择器后代选择器的组合方式后代选择器的使用非常广泛，不仅标记选择器可以以这种方式组合，类别选择器和ID选择器都可以进行嵌套。后代选择器的组合实例.speciali{color:red;}定义使用了类样式special的标记里面包含的<i>的样式规则。#oneli{padding-left:5px;}定义ID为one的标记里面包含的<li>的样式规则td.out.insidestrong{font-size:16px;}
多层嵌套的后代选择器知识点：CSS选择器单元三：使用CSS样式美化页面组合类型的在HTML中使用CSS样式的方法
外部样式表文件：将CSS样式的定义通过独立的.CSS文件保存。行内式：将CSS样式的定义直接放在某HTML标记的SYTLE属性中。内嵌式：将CSS样式的定义嵌入到HTML文档的开头。直接CSS样式的定义语句保存为扩展名为.css的文件在网页中链接一个外部的CSS样式文件语法格式：在网页头中加入以下语句
＜linkhref="mycss.css"rel="stylesheet"
type="text/css"＞如：<pstyle=“color:red”>红色的文字</p>在网页头中输入如下语句
＜styletype=“text/css”＞
＜!--
CSS的定义语句
--＞
＜/style＞单元三：使用CSS样式美化页面在HTML中使用CSS样式的方法外部样式表文件：将CSS样知识点：CSS选择器单元三：使用CSS样式美化页面组合类型的选择器3)后代选择器后代选择器的组合方式后代选择器的使用非常广泛，不仅标记选择器可以以这种方式组合，类别选择器和ID选择器都可以进行嵌套。后代选择器的组合实例.speciali{color:red;}定义使用了类样式special的标记里面包含的<i>的样式规则。#oneli{padding-left:5px;}定义ID为one的标记里面包含的<li>的样式规则td.out.insidestrong{font-size:16px;}
多层嵌套的后代选择器知识点：CSS选择器单元三：使用CSS样式美化页面组合类型的样式的优先级多重样式（MultipleStyles）：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况。一般情况下，优先级如下：外部样式<内部样式<内联样式CSS样式难点分析样式的优先级多重样式（MultipleStyles）：如果样式的优先级有个例外的情况，就是如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。示例如下：CSS样式难点分析样式的优先级有个例外的情况，就是如果外部样式放在内部样式的后CSS样式难点分析CSS样式难点分析CSS优先级法则：选择器都有一个权值，权值越大越优先；当权值相等时，后出现的样式表设置要优于先出现的样式表设置；创作者的规则高于浏览者：即网页编写者设置的CSS样式的优先权高于浏览器所设置的样式；继承的CSS样式不如后来指定的CSS样式；在同一组属性设置中标有“!important”规则的优先级最大。CSS样式难点分析CSS优先级法则：选择器都有一个权值，权值越大越优先；CS任务实施1.站点配置根据所提供的素材完成站点的配置。2.手工编写HTML文件在已经配置好的站点下创建网页文件index.html，网页的内容通过手工编定HTML代码来完成。单元三：使用CSS样式美化页面任务实施1.站点配置单元三：使用CSS样式美化页面任务实施3.为网页设计CSS样式并应用（1）设置body样式重定义body标签，主要用于定义页面的整体设置。对于当前页面，需要进行整体设置的是页面文字和背景效果。单元三：使用CSS样式美化页面图body的样式规则定义及效果任务实施3.为网页设计CSS样式并应用单元三：使用CSS样任务实施3.为网页设计CSS样式并应用（1）设置body样式样式代码如下：body{
font-family:"宋体"; font-size:12px; color:#666; background-image:url(images/bodybg.gif); background-repeat:repeat-x; background-color:#D3F3FB;}单元三：使用CSS样式美化页面任务实施3.为网页设计CSS样式并应用单元三：使用CSS样任务实施3.为网页设计CSS样式并应用（2）重定义table标记通过重定义table标记定义表格的整体效果，包括：宽度、边框、背景、文字对齐方式等。单元三：使用CSS样式美化页面图table的样式规则定义任务实施3.为网页设计CSS样式并应用单元三：使用CSS样任务实施3.为网页设计CSS样式并应用（2）重定义table标记样式代码为：table{
text-align:left; background-color:#FFF; border-bottom-width:8px; border-bottom-style:double; border-bottom-color:##32B5D2; width:700px;}单元三：使用CSS样式美化页面图table的样式规则定义任务实施3.为网页设计CSS样式并应用单元三：使用CSS样任务实施3.为网页设计CSS样式并应用（3）重定义H2标记样式H2的内容只有一幅图片，定义为居中显示。单元三：使用CSS样式美化页面h2{ text-align:center; height:40px;}任务实施3.为网页设计CSS样式并应用单元三：使用CSS样任务实施3.为网页设计CSS样式并应用（4）重定义H3标记样式
单元三：使用CSS样式美化页面h3{ font-size:13px; font-weight:bold;}任务实施3.为网页设计CSS样式并应用单元三：使用CSS样任务实施3.为网页设计CSS样式并应用（5）分别定义类样式.title1,.title2,.title3
单元三：使用CSS样式美化页面由于各H3标记对应的内容在颜色上是不一样的，所以分别定义三个类样式.title1,.title2,.title3来设置文字的颜色。.title1的样式定义规则如图所示。.title2和.title3的样式定义规则与.tilte1相同，只是文字颜色分别为#006600和#ff9933。图.title1的样式规则定任务实施3.为网页设计CSS样式并应用单元三：使用CSS样任务实施3.为网页设计CSS样式并应用（5）分别定义类样式.title1,.title2,.title3
样式代码为：
单元三：使用CSS样式美化页面.title1{ color:#006600;
}.title3{
color:#ff9933;
}.title2{
color:#206996;
}任务实施3.为网页设计CSS样式并应用单元三：使用CSS样任务实施3.为网页设计CSS样式并应用（5）分别定义类样式.title1,.title2,.title3
单元三：使用CSS样式美化页面类样式定义完成后，分别应用在三个H3标记上，效果如图所示。图
应用了类样式后的h3效果任务实施3.为网页设计CSS样式并应用单元三：使用CSS样任务实施3.为网页设计CSS样式并应用（6）重定义P标记
单元三：使用CSS样式美化页面p{ line-height:20px; text-indent:2em;}
任务实施3.为网页设计CSS样式并应用单元三：使用CSS样任务实施3.为网页设计CSS样式并应用（7）设置底部图片之间的间距为了控制底部两幅图片之间的距离，可以定义一个类样式.pic1（设置其margin属性），然后应用于第一幅图片的img标记上。
单元三：使用CSS样式美化页面.pic1{ margin-right:25px; margin-left:25px;}任务实施3.为网页设计CSS样式并应用单元三：使用CSS样任务实施3.为网页设计CSS样式并应用（8）定义列表的样式可以通过重定义LI标记来设置列表的样式，设置的属性包括：列表符、背景、行高和缩进等。
单元三：使用CSS样式美化页面li{ background-image:url(images/t02.png); background-repeat:no-repeat; list-style-type:none; line-height:25px; background-position:leftcenter; height:25px; text-indent:20px; width:460px; border-bottom-width:1px; border-bottom-style:dashed; border-bottom-color:#68A704;}任务实施3.为网页设计CSS样式并应用单元三：使用CSS样任务实施3.为网页设计CSS样式并应用
单元三：使用CSS样式美化页面页面最终效果图任务实施3.为网页设计CSS样式并应用单元三：使用CSS样要点解析1．对于网页的整体效果设置，可以通过重定义body标签来
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2024-2025学年小学英语三年级上册人教版（新起点）教学设计合集
- 教育学基础知识（4-6章）
- 全国校园啦啦操示范套路教案高一上学期体育与健康人教版
- 六年级语文上册第四单元快乐读书吧《城南旧事》整本书阅读推进课教学设计
- 第13课 卖油翁 教学设计
- 小学体育水平一 单手正对投掷方向持沙包掷远与小沙包掷远比赛游戏 教案
- 人教版（2019）第二册Unit 4 History and Traditions reading and thinking教案
- 2023-2024学年五年级上册科学教科版1.2光是怎样传播的（教案）
- 2023年叔胺投资申请报告
- 9月中国采购经理指数运行情况
- 2024辽宁沈阳地铁集团限公司运营分公司诚聘高频500题难、易错点模拟试题附带答案详解
- 《青春的模样》课件2024-2025苏教版（2023）初中心理健康八年级全一册
- 期末测试卷（试题）-2024-2025学年人教PEP版（2024）英语三年级上册
- 浙江省重点中学2025届高三第一次模拟考试物理试卷含解析
- 八年级地理上册 第三章 中国的自然资源 第二节 土地资源教案 （新版）新人教版
- 庆祝新中国成立75周年心得感悟四
- 幼儿园小班社会《我喜欢的颜色》课件
- 员工月度绩效考核表
- 跨学科实践活动1 微型空气质量“检测站”的组装与使用课件-2024-2025学年九年级化学人教版（2024）上册
- 湖南省长沙市2024年中考英语真题【附真题答案】
- 云南省交通投资建设集团限公司下属经营公司管理人员社会招聘（高频重点提升专题训练）共500题附带答案详解
评论
0/150
提交评论