CSS样式表2课时
- 格式：doc
- 大小：38.00 KB
- 文档页数：5
下载文档原格式
合集下载
CSS的样式PPT课件
知识点精讲
知识点分析 CSS文字样式的常用属性 设置字体： 基本语法为font-family:字体1，字体2，字体3。 例如：h1{font-family:宋体，楷体，隶书;}。 设置文字大小 基本语法为font-size:尺寸|百分比|关键字。 设置斜体 基本语法为font-style:normal|italic|oblique。 设置文字粗细 基本语法为font-weight:normal|bold|bolder|lighter|number。 设置变体 基本语法为font-variant:normal|small-caps。
网站建设与管理
CSS的样式
考纲解读
1 掌握CSS的基础知识。 2 掌握CSS的属性。
考点解读
重难点分析：CSS样式表、样式选择器及CSS的属性。
知识点精讲
知识点1 CSS的基础知识 例题精讲 请输入正确的代码
【解析】外部链接样式表的声明方法为<link rel=″stylesheet″ type=″text/css″ href=″样式 表文件的地址″>
知识点精讲
巩固提高
在Dreamweaver软件中，给网站首页设置“页面属性”的具体要求如下:
网站首页中文字大小设置为12 px，文字颜色设置为“#000”。
设置网页背景颜色为“#CCC”。 设置“链接（CSS） ”中“下划线样式”为“始终无下划线”。 设置“链接（CSS）”中“链接颜色”为“#000”。 下面是网站首页的部分源代码，请从选项A~N中将正确的内容填入相应位置。
知识点精讲
CSS段落和其他文字样式属性 修饰文字 基本语法为text-decoration:underline|overline|line-through|blink|none。 设置段落的水平对齐方式 基本语法为text-align:left|right|left|justify。 颜色及背景 设置文字颜色 基本语法为color：颜色的名称|RGB值|十六进制数。 设置背景 基本语法为background:背景颜色|背景图像|背景重复|背景附件|背景位置。 设置背景颜色属性 基本语法为background-color:颜色|transparent（透明）。 设置背景图像属性 基本语法为background-image:url（背景图片的路径和名称）。
css实现课程表
css实现课程表使用CSS实现课程表可以分为以下几个步骤：1.创建一个表格来存储课程信息。
2.使用CSS来设置表格的样式。
3.使用CSS来设置单元格中的文本和图像。
以下是一个简单的课程表的示例：✧<!DOCTYPE html>✧<html lang="en">✧<head>✧<title>课程表</title>✧<style>✧table{✧border-collapse:collapse;✧border:1px solid black;}✧th,td{✧border:1px solid black;✧padding:5px;}✧th{✧background-color:#ccc;}✧</style>✧</head>✧<body>✧<table>✧<tr>✧<th>课程名称</th>✧<th>教室</th>✧<th>时间</th>✧</tr>✧<tr>✧<td>计算机科学</td>✧<td>101</td>✧<td>周一8:00-9:00</td>✧</tr>✧<tr>✧<td>数学</td>✧<td>202</td>✧<td>周二10:00-11:00</td>✧</tr>✧<tr>✧<td>英语</td>✧<td>303</td>✧<td>周三12:00-13:00</td>✧</tr>✧</table>✧</body>✧</html>这个课程表使用了以下CSS代码来设置样式：✧table{✧border-collapse:collapse;✧border:1px solid black;}✧th,td{✧border:1px solid black;✧padding:5px;}✧th{✧background-color:#ccc;}这些CSS代码将表格设置为具有黑色边框和5像素内边距。
《网页设计与制作》教案-第18讲 使用CSS美化网页二
第18讲使用CSS美化网页二1.1教学目标：◆知识目标1.掌握一些CSS样式表的基本滤镜效果。
2.理解Dreamweaver CS6新增加的Spry组件功能。
◆技能目标1.能使用CSS样式表定义链接的各种状态2.运用重定义HTML标签来统一页面元素格式◆品质目标培养学生认真细致、踏实进取的精神1.2教学重点：1.掌握一些CSS样式表的基本滤镜效果。
2.掌握Dreamweaver CS6新增加的Spry组件功能。
1.3 教学难点制作CSS样式表的基本滤镜效果1.4教学方法：讲练结合，任务驱动、分子任务操练1.5课时安排：2课时1.6教学对象分析：这个班学生具有基本专业技能，不仅仅是要教会他们方法，最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力，在保证全班同学教学进度一致的情况上，培养学生较好的专业基础与创新创作意识。
1.7教学过程：一、CSS滤镜在许多图像编辑软件中都有制作特效的滤镜功能，例如Photoshop和Fireworks，滤镜神奇的功能常常使我们赞叹不绝。
在Dreamweaver中也有这样的功能，我们可以在CSS样式表中使用特定的语法来制作特效。
一般来说，制作文字特效往往使用专业的图像编辑软件，但是图像下载的时间较长，严重影响了页面的下载速度。
通过CSS样式表可以解决这个问题，CSS样式表的定义仅需要三至四行源代码，大大加快了页面下载的速度，同时又增加了页面的视觉效果。
但是，应用样式表也同时带来了许多问题，例如浏览器对样式表的兼容性，同时较复杂的样式表中要用到层，这对其他不支持样式表和层的浏览器来说，无疑是一种限制。
下面我们介绍利用CSS滤镜制作阴影字。
在“CSS样式”面板中单击“新建CSS样式”按钮，打开“新建CSS样式”对话框。
在“名称”文本框中输入样式表的名称，例如.shadow，在选择器类型选项中选择“类”，在“定义在”选项中选择“仅对该文档”，如图3-64所示。
前段课程设计报告
前段课程设计报告一、课程目标知识目标：1. 让学生掌握前端开发的基本概念，如HTML、CSS和JavaScript；2. 使学生了解Web标准，理解页面结构和表现分离的原则；3. 帮助学生掌握常用的HTML标签和属性，能构建结构清晰的网页；4. 让学生学会使用CSS进行页面布局和样式设计，实现页面美化和响应式设计；5. 引导学生了解JavaScript的基本语法，能编写简单的交互功能。
技能目标：1. 培养学生运用前端技术进行网页设计和开发的能力；2. 培养学生解决实际问题的能力，如调试代码、优化页面性能等；3. 提高学生的团队协作能力，学会与他人共同完成项目。
情感态度价值观目标：1. 激发学生对前端开发的兴趣，培养自主学习和技术探究的精神；2. 引导学生树立正确的审美观，关注用户体验，提高服务质量；3. 培养学生的创新意识，鼓励尝试新技术，不断提升个人技能。
课程性质：本课程为信息技术学科的前端开发课程，旨在让学生掌握网页设计与开发的基本技能，提高学生的实践操作能力和创新能力。
学生特点：学生具备一定的计算机操作基础，对网页设计有一定了解，但大部分学生对前端开发技术尚不熟悉。
教学要求：结合学生特点，注重理论与实践相结合，以项目驱动教学，强调学生动手实践，培养实际操作能力。
同时，关注学生的个性化发展，鼓励创新和探究。
通过本课程的学习，使学生能够独立完成简单的网页设计与开发任务，为后续深入学习奠定基础。
二、教学内容1. HTML基础：讲解HTML的基本概念、文档结构，重点掌握常用的HTML 标签和属性，包括文本、链接、图片、列表、表格等，并学习使用HTML5的新特性。
2. CSS样式设计：介绍CSS的基本语法、选择器、属性和值，重点掌握盒模型、布局模型、浮动和定位，以及响应式设计的媒体查询。
3. 页面布局与美化：通过实例讲解如何使用CSS进行页面布局，包括固定布局、流体布局、弹性布局等，以及如何进行页面美化，提高用户体验。
表格布局网页课程设计
表格布局网页课程设计一、课程目标知识目标：1. 让学生掌握网页设计中的表格布局基础知识，理解表格布局的原理和用途；2. 学会运用HTML标签创建表格，设置表格的行、列和单元格属性；3. 掌握CSS样式表中与表格布局相关的属性，如边框、间距、填充等。
技能目标：1. 培养学生运用表格布局设计网页的能力，能独立完成简单的网页布局；2. 提高学生在网页设计中的问题解决能力，能够调整表格布局以适应不同设备和屏幕尺寸；3. 培养学生团队协作和沟通能力，能在小组合作中共同完成网页设计任务。
情感态度价值观目标：1. 培养学生对网页设计的兴趣和热情，激发学生的创造力和创新精神；2. 培养学生关注用户体验，注重网页布局的美观性和易用性；3. 增强学生的信息素养，使学生认识到网络技术在信息传播中的重要作用。
课程性质：本课程为信息技术课程，以实践操作为主，结合理论知识，培养学生的实际操作能力和创新思维。
学生特点：学生处于初中阶段，对新鲜事物充满好奇，具备一定的计算机操作基础，喜欢动手实践。
教学要求：教师应注重理论与实践相结合，以学生为主体，引导学生主动探究，培养其独立思考和解决问题的能力。
同时，关注学生个体差异，因材施教，确保每个学生都能在课程中取得进步。
通过课程学习，使学生能够达到上述具体的学习成果，为后续的网页设计学习打下坚实基础。
二、教学内容1. 理解表格布局的概念与作用- 表格布局的定义与分类- 表格布局在网页设计中的应用场景2. HTML表格标签的使用- <table>、<tr>、<td>、<th>等基本标签的用法- 表格行、列、单元格的属性设置3. CSS样式表中与表格布局相关的属性- 边框样式：border、border-collapse、border-spacing等- 单元格样式：padding、margin、text-align、vertical-align等- 表格背景与颜色：background-color、background-image等4. 表格布局实例分析与操作- 分析经典表格布局案例，了解其设计思路和实现方法- 学生实践操作，完成一个简单的表格布局网页5. 响应式表格布局- 介绍响应式网页设计的基本概念- 学习使用CSS媒体查询调整表格布局以适应不同屏幕尺寸6. 表格布局在实际项目中的应用- 分析实际项目需求，确定表格布局设计方案- 学生团队合作，完成一个具有实际意义的网页设计项目教学内容安排与进度：第1课时：理解表格布局的概念与作用，学习HTML表格标签的使用第2课时：CSS样式表中与表格布局相关的属性，分析表格布局实例第3课时：实践操作，完成一个简单的表格布局网页第4课时：学习响应式表格布局，调整表格布局以适应不同屏幕尺寸第5课时：团队合作，完成实际项目中的表格布局设计教学内容与教材关联性：本教学内容与教材中关于网页设计、HTML和CSS的知识点紧密相关，涵盖了表格布局的基本概念、用法和实际应用，确保了教学内容的科学性和系统性。
Dreamweaver_CS5自学教程-第十课：CSS样式表 2
第十课：CSS样式表10-1 认识CSS (1) 10-2 认识CSS (2)如果说目前在Web设计和开发技术领域，什么是非常“火”的新技术，CSS/DIV页面的布局无疑是其中之一CSS（Cascading Style Sheet），中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。
但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。
本课从CSS的基本概念出发，介绍CSS语言的特点，以及如何在网页中引入CSS，并对CSS进行初步的体验。
（其实我们在前面的课程中已经接触到）作用：例子演示。
从CSS对标记的控制入手，讲解CSS的初步知识以及编辑方法。
希望大家能够掌握下一面几个方面的内容：①、标记的概念②、传统HTML的缺点③、CSS的引入1、传统HTML标记，在批量编辑时效率低，不够标准利用CSS样式编辑网页，可以大大挺高效率，规范网页的设计标准。
2、CSS样式代码在网页代码中的位置CSS代码style type="text/css"><!--body,td,th {font-size: 12px;color: #FF0000;}--></style>特点：1）灵活控制网页中的每个元素的样式2）把内容和格式处理相分离，提高工作效率3、CSS样式的链接10-3 编辑CSS样式(1) 10-4 编辑CSS样式(2) 如何编辑CSS样式█1) 属性面板快捷操作1、在下方的属性面板对选中的目标建立CSS规则创建的CSS规则将会应用到所有同类目标上2、建立的CSS规则代码自动添加在网页代码＜head＞部分中3、对建立的CSS样式修改：把鼠标光标在设计页面中放置到需要修改的内容上边，在下方的属性面板中修改，即可对所有应用了此CSS规则的目标修改█2）使用CSS样式面板打开“CSS样式”面板：全部﹤style﹥中显示的是当前网页中的所有CSS样式P表示CSS样式应用的标签的类型，下方显示的是当前CSS样式设置的属性下方修改当前CSS样式的属性修改CSS样式后将会全部应用到同类标签1、利用CSS样式给图片添加边框：选中图片，在CSS样式面板中点击“新建规则”设置“新建CSS规则”的应用属性设置成功，全部﹤style﹥中显示刚刚设置的“img”的属性2、属性的显示方式从下方的按钮中设置█3）手工输入代码10-5 CSS选择器选择器（selector）是CSS中很重要的概念，所有HTML语言中的标记都是通过不同的CSS选择器进行控制的。
第9章 CSS样式表
9.3 实例——使用CSS样式控制页面
把外部CSS样式表链接到页面
CSS样式表文件与网页文件的关系
9.3 实例——使用CSS样式控制页面
操作步骤:
– 打开未设置样式的主页文件 – 打开CSS样式面板，单击面板下方的（附加样式表）按钮，打开如下
图所示“链接外部样式表”对话框，单击“浏览”按钮，打开如下图 所示对话框，选择CSS文件夹中的wenzi.css和font.css进行链接，网 页中相应的样式即发生改变
9.3 实例——使用CSS样式控制页面
9.3 实例——使用CSS样式控制页面
– 采用上述方法定义biankuang的CSS规则，参数设置如下图所 示
9.3 实例——使用CSS样式控制页面
9.3 实例——使用CSS样式控制页面
– 采用上述方法定义bankuai的CSS规则，参数设置如下图所示
9.3 实例——使用CSS样式控制页面
9.4 DIV+CSS布局
–单击【确定】按钮，完成Body标签样式的定义 –定义#container容器。单击“CSS样式”面板右下角的“新建样式” 按钮，弹出“新建CSS规则”对话框，设置参数如下图所示。
9.4 DIV+CSS布局
–单击【确定】按钮，打开“#container的CSS规则定义”对话框，设 置参数如下图所示
“插入Div标签”对话框
9.4 DIV+CSS布局
插入DIV标签
–在页面中单击，执行“插入”|“布局对象”|“Div标签”命令， 弹出“插入Div标签”对话框，在“插入”栏中选择“在插入 点”，在“ID”栏中选择“container”样式，如下图所示
“插入Div标签”对话框
9.4 DIV+CSS布局
css课程设计
css课程设计一、课程目标知识目标：1. 理解CSS（层叠样式表）的基本概念与功能，掌握CSS选择器、属性和值的使用方法。
2. 学会使用CSS对HTML文档进行美化和布局，掌握盒模型、浮动、定位等核心CSS技术。
3. 了解CSS的继承、层叠、优先级和伪类等高级特性。
技能目标：1. 能够编写结构清晰、可维护性强的CSS代码，实现网页的视觉效果。
2. 能够运用所学CSS知识对现有网页进行优化和美化，提高用户体验。
3. 能够利用CSS解决跨浏览器兼容性问题，确保网页在不同浏览器中的表现一致。
情感态度价值观目标：1. 培养学生对前端开发的兴趣，激发学习热情，增强自信心。
2. 培养学生良好的审美观，提高对网页设计美学的认识。
3. 培养学生的团队协作精神，鼓励相互学习、交流、分享，提高沟通能力。
本课程针对初中年级学生，结合学科特点，注重实用性，将CSS知识与实际案例相结合，使学生在掌握知识的同时，提高实际操作能力。
课程设计充分考虑学生的认知水平和学习需求，通过循序渐进的教学方法，帮助学生更好地理解和运用CSS，培养其在前端开发领域的兴趣和能力。
在教学过程中，关注学生的学习反馈，及时调整教学策略，确保课程目标的达成。
二、教学内容1. CSS基础- CSS概念与作用- CSS的引入方式- 选择器（标签、类、ID、属性等）- CSS属性与值（颜色、字体、文本、背景等）2. CSS布局与盒模型- 盒模型概念- margin、padding、border属性- 盒子水平垂直居中- 浮动布局与清除浮动- 定位（相对、绝对、固定、静态）3. CSS高级特性- 继承与层叠- 优先级与特殊性- 伪类与伪元素- 媒体查询与响应式设计4. CSS兼容性与优化- 跨浏览器兼容性问题- CSS代码优化与压缩- 常用CSS框架介绍（如Bootstrap）5. 实战案例与拓展- 网页布局案例- 响应式设计案例- CSS动画与过渡效果教学内容按照课程目标进行科学组织和系统安排，结合教材章节，由浅入深，循序渐进。
CSS样式代码基础教程教学课件讲议
二、过程与步骤：
1.通过依次单击任务栏上的【开始】→【程序】→【附件】 →【记事本】菜单命令打开记事本。
2．在记事本的编辑面板中输入以下代码，创建了使用样式 的页面css1.htm： <html> <head> <title>样式表举例</title> <style type="text/css">
<p style="color：#ff0000">内联式样式表</p>
这种样式表只会对使用它的元素起作用，而不会影响 HTML文档中的其他元素。也正因为如此，内联式样式表 通常用在需要特殊格式的某个网页对象上。本案例就一个 应用内联式样式表的一个网页实例，在这个实例中，各段 文字都定义了自己的内联式样式表：
<style type="text/css">
<!--
p{color:red;font-weight:bold}
</style>
在这个格式中，style元素的type属性必须设为 "text/css"，表示这定义的是一个层叠样式表。这样一来， 当不支持层叠样式表的浏览器读到这个属性时，会自动忽 略这个样式表。
<!-h1{
font-size: 36px; font-family: "隶书"; font-weight: bold; color: #993366; } --> </style> </head> <body>
<p style="color:#ff0000">这段文字将显示为红色</p>
1.通过依次单击任务栏上的【开始】→【程序】→【附件】 →【记事本】菜单命令打开记事本。
2．在记事本的编辑面板中输入以下代码，创建了使用样式 的页面css1.htm： <html> <head> <title>样式表举例</title> <style type="text/css">
<p style="color：#ff0000">内联式样式表</p>
这种样式表只会对使用它的元素起作用，而不会影响 HTML文档中的其他元素。也正因为如此，内联式样式表 通常用在需要特殊格式的某个网页对象上。本案例就一个 应用内联式样式表的一个网页实例，在这个实例中，各段 文字都定义了自己的内联式样式表：
<style type="text/css">
<!--
p{color:red;font-weight:bold}
</style>
在这个格式中，style元素的type属性必须设为 "text/css"，表示这定义的是一个层叠样式表。这样一来， 当不支持层叠样式表的浏览器读到这个属性时，会自动忽 略这个样式表。
<!-h1{
font-size: 36px; font-family: "隶书"; font-weight: bold; color: #993366; } --> </style> </head> <body>
<p style="color:#ff0000">这段文字将显示为红色</p>
TP02[CSS样式]
![TP02[CSS样式]](https://img.taocdn.com/s1/m/7483f9d626fff705cc170aad.png)
id优先级高于class
<style type="text/css"> #f14 {font-size:14px;color:red} .f18 {font-size:18px;color:blue} </style>
<div id=“f14” class=“f18”>id优先</div> <div class=“f18” id=“f14”>id优先</div>
ID ID只是页面元素的标识，ID在页面里也只 能出现一次，并且是唯一性。 在css样式中以“#”来命名，如：#css5 { } 在CSS里的ID不一定为JS而设置的， 遵循ID在一个页面里唯一性。以免出现浏 览器兼容问题。
14
CSS样式表
CSS属性标签总结
class id
类，css选择器，优点：可重复使用，css中以 . 开头 一个页面只能有一个，唯一性，css中以 # 开头
19
CSS样式e type="text/css"> .f14 {font-size:14px;color:red} .f18 {font-size:18px;color:blue} </style>
<div class="f14"> <div style="font-size:38px">行内高于内部或外部</div> </div>
√
23
随堂测试
在 HTML 文档中，引用外部样式表的正确位置是？
A：文档的末尾
B：文档的顶部 C：<body> 部分 D：<head> 部分
<style type="text/css"> #f14 {font-size:14px;color:red} .f18 {font-size:18px;color:blue} </style>
<div id=“f14” class=“f18”>id优先</div> <div class=“f18” id=“f14”>id优先</div>
ID ID只是页面元素的标识，ID在页面里也只 能出现一次，并且是唯一性。 在css样式中以“#”来命名，如：#css5 { } 在CSS里的ID不一定为JS而设置的， 遵循ID在一个页面里唯一性。以免出现浏 览器兼容问题。
14
CSS样式表
CSS属性标签总结
class id
类，css选择器，优点：可重复使用，css中以 . 开头 一个页面只能有一个，唯一性，css中以 # 开头
19
CSS样式e type="text/css"> .f14 {font-size:14px;color:red} .f18 {font-size:18px;color:blue} </style>
<div class="f14"> <div style="font-size:38px">行内高于内部或外部</div> </div>
√
23
随堂测试
在 HTML 文档中，引用外部样式表的正确位置是？
A：文档的末尾
B：文档的顶部 C：<body> 部分 D：<head> 部分
《网页格式刷》教学案例
《网页格式刷》——CSS样式表教学案例【教材分析】“CSS样式表”是高中信息技术选修《网络技术应用》的第五章“动态网页制作”中的内容。
教材中将这块内容分为“什么是CSS”、“CSS实现”、“在HTML中加入CSS”三部分。
本节内容的重点应该是“运用CSS进行样式设置的方法和格式”及“在HTML中加入CSS的三种方法”。
因此我认为将“CSS实现”与“在HTML中加入CSS”两部分结合在一起讲比较好。
此外，我认为“体会CSS样式表的优点”也应该是一个教学重点。
学生以往用FrontPage做网页都习惯用工具按钮、菜单命令来进行网页外观设置，使用代码对学生来说是件令他们头疼的事，所以我认为有必要通过让学生体会CSS样式表的优点让学生明白为何我们要学习这部分内容。
【教学目标分析】1、知识与技能(1)什么是CSS样式表。
(2)CSS样式表的优点。
(3)嵌入式、内联式、外联式三种样式表的使用方法。
(4)通过对三种样式表的亲身实践，感受这三种样式表的优缺点。
2、过程与方法(1)通过WORD排版中的“格式刷”引入网页中的“CSS样式表”，通过类比，使学生初步了解CSS 样式表的作用，激发学习兴趣。
(2)对于CSS样式表的概念和优点主要由教师讲解，并让学生在实践操作中感受样式表的优点。
(3)对于嵌入式、内联式、外联式三种样式表的使用，由教师讲授方法和代码的书写格式要求，由学生根据实例要求自我实践操作。
(4)在学生的实践操作过程中，让完成较快的学生充当小老师，帮助其他同学发现和改成错误。
3、情感态度与价值观(1)通过CSS样式表的学习，提高学生美化网页的技能。
(2)培养学生的探索、实践能力。
(3)通过实践过程中的“小老师”角色，让学生感受同学之间的互助友爱，团结协作。
【学情分析】通过前阶段的学习，学生已经认识了动态网页，并对HTML的标签及属性也有了了解。
考虑到我所在学校的学生学习能力、领悟能力比较强。
因此虽然CSS样式表对于学生来说是全新的内容，但如果教师采用“讲授概念→操作演示→学生操作”的模式上课，将无法激发学生自主探索学习的兴趣和热情，所以我采用了教师讲授概念和方法，然后由学生自主探索实践操作，使学生的学习更具挑战性。
《网页设计与制作》教案-第17讲 使用CSS美化网页一
第17讲使用CSS美化网页一1.1教学目标：◆知识目标1.熟练掌握CSS样式表的创建与编辑。
2.掌握CSS样式表的基本语法和定义位置。
3.理解CSS样式表的标签样式、高级样式、类样式的定义方法。
◆技能目标1.能合理创建和管理样式表文件，在网页设计中能够灵活利用CSS样式对页面元素变换不同的视觉效果◆品质目标培养学生认真细致、踏实进取的精神1.2教学重点：1.掌握CSS样式表的创建与编辑。
2.掌握CSS样式表的基本语法和定义位置。
1.3 教学难点1.理解CSS样式表的标签样式、高级样式、类样式的定义方法。
1.4教学方法：讲练结合，任务驱动、分子任务操练1.5课时安排：2课时1.6教学对象分析：这个班学生具有基本专业技能，不仅仅是要教会他们方法，最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力，在保证全班同学教学进度一致的情况上，培养学生较好的专业基础与创新创作意识。
1.7教学过程：一、激趣导入，揭示课题对于一个网站的多个页面文件，经常出现布局一致的情况，甚至网页的一些部分是完全相同的，比如导航栏、标题栏等，利用Dreamweave中的模板可以方便快捷地创建大量风格统一、布局一致的网页，运用方便灵活的库文件，可省去设计者大量的重复工作。
二、使用样式表在Internet的汪洋大海之中，怎样才能使自己的页面独树一帜？怎样使自己的页面保持统一的风格？怎样免除众多HTML标志属性设置的烦恼？Dreamweaver中的CSS（层叠样式表）可以使我们很方便地完成页面风格的设置。
利用CSS不仅可以控制一篇文档中的文本格式，而且可以控制多篇文档的文本格式。
因此使用CSS样式表定义页面文字，将会使设计制作工作量大大减小。
一些好的CSS样式表的建立，使我们可以更进一步地对页面进行美化，对文本格式进行精确定制。
什么是样式表？样式表的英文缩写为CSS，即Cascading Style Sheet（层叠样式表）的缩写，我们又常称这为风格样式单Style Sheet，顾名思义，是用来进行页面风格设计的。
第02章CCS样式表
2.范例
–
3.说明
–
多个选择器集体声明
1.语法
–
html标记1,html标记2,html标记3 {property1:valuel;property2:value2;.....} h1,h2,h3 {font-style:italic;color:blur} 所有<h1>,<h2>,<h3>标记的样式为斜体兰色字体
例 <style> <!-H3{font-family:"细明体“； font-style:italic; color:red;} --> </style>
CSS优势之一：维护方便
这个CCS程序代码的含义是：网页内所有 <H3>标记内的字型格式均被设置成红色细明 体且斜体显示； 你如果想改变<H3>标记的样式，只须改变 CCS程序代码的内容，而不需要去改动HTML 代码。
2.范例
–
3.说明
–
在HTML中引入CSS
1.行内定义样式 2.内嵌样式表 3.链接样式表
行内定义样式
直接把CSS的程序代码和传统HTML程序代码 写在一起。 （例）
2.内嵌样式表
内嵌样式表的声明方式是将CSS程序代码写在 <head>和</head>标记内。 例
3.链接样式表
CSS中通用的长度单位
CSS中定义颜色的几种方式
CSS 中的继承 cursor属性(定义鼠标的形状)
CSS中通用的长度单位
第4章CSS样式表
图4.2 “链接外部样式表”对话 框
图4.3 “新建CSS样式”对话框
“编辑样式表”按钮：打开如图4.4所示的“编辑样式表”对话 框，编辑当前文档或外部样式表中的任何样式。 “删除CSS样式”按钮：删除“CSS样式”面板中的所选CSS样 式，并删除该样式应用于任何元素中的格式设置。
图4.4 “编辑样式表”对话框 本书将以第4章的“本章实例”目录下的“样本原文.html”为例，对 以上几个操作进行讲解。
CSS（层叠样式表）其实是一系列格式规则，这些规则由两部分组 成：选择符和声明。选择符通常是指样式表的名称或特定的标 签，而声明则用于定义样式元素。声明由两部分组成：属性和 值。要注意的是，单一选择符的复合样式声明应该用分号隔开。 术语“层叠”是指同一个网页应用多个样式表的能力，例如创 建两个样式表分别用来设置字体和行距，它们同样用于一个网 页。这些规则组合在一起，就可以告诉浏览器怎样去呈现一个 文档。 CSS样式表起初或许只为了控制文本的属性，如字体、字号、颜色 等，但是随着CSS更高版本的推出，弥补了HTML对传统的文本 属性控制的不足，如段落间距、行距等。除了对传统文本的控 制，CSS还加入了对其他网页元素属性甚至网页布局的控制， 比如图片的显示效果、网页元素的位置、表单元素的边框粗细、 鼠标指针的形状、排版定位等，并且这些设置都可以随着CSS 样式表文件的更新而动态更新。
2.重定义特定标签格式 重定义特定标签格式
使用这种CSS样式可以改变HTML标记的原意，从而使所有应用了这 些标记的HTML文本按照CSS的定义格式显示，例如为<body>和 </body>标签定义了CSS，那么所有包含在<body>和</body> 标签内的内容都要按照此CSS样式进行显示，代码如下： Body｛font-size: 10pt;｝ ｛ ｝ 本例将<body>和</body>标签内的所有文本字体都设置为10像素 大小。
CSS-样式表
步骤2 设置页边距 单击“方框”选项卡，在边界中分别设置上、下 均为50像素，左右均为100像素。
1.3.2 样式表的实例应用2：文本及列 表的应用
在【例5.6】中，文本和列表都应用了CSS样式，分别设置字体、 段落、列表的相关属性。第一行文本是标题1（标签为H1），第二 行文本是标题2（标签为H2），正文部分用了列表（标签为UL）。 1. 字体的样式设置
1.3.4 样式表的实例应用4：动态链接样式
简单的CSS链接样式可以在页面属性中的“链接”选项卡中设 置，1.1节中已经讲过。
在【例5.6】中，建立较为复杂的CSS链接样式，当鼠标经过链 接文字时，文字颜色会变色、字体样式变粗、出现背景颜 色、文字修饰有下划线等。这里还讲解两个重要的知识点： 如何建立CSS链接样式和如何调用外部CSS样式表。
2.编辑和删除CSS样式
创建CSS样式后，如果要修改CSS样式，在“CSS样式”面板 中，单击“CSS样式”面板右下角的“编辑”按钮，进入 “CSS规则定义”的对话框，可进行修改。
某个CSS样式不再需要时，在“CSS样式”面板中，首先选中 某个样式，单击CSS样式面板右下角的“删除”按钮。
1.3 CSS 样式的应用
1.1 利用CSS 样式表的网页实例
CSS样式表是由一系列样式选择器和CSS属性组成，它支持字体 属性、颜色和背景属性、文本属性、边框属性、列表属性以及精确 定位网页元素属性等，增强了网页的格式化功能。
使用CSS样式表的另一个优点是可以利用同一个样式表对整个站 点的具有相同性质的网页元素进行格式修饰，当需要更改样式设置 时，只要在这个样式表中修改，而不用对每个页面逐个进行修改， 简化了格式化网页的工作。
1.3.6 CSS样式进阶 利用CSS＋DIV进行网页布局的实例
1.3.2 样式表的实例应用2：文本及列 表的应用
在【例5.6】中，文本和列表都应用了CSS样式，分别设置字体、 段落、列表的相关属性。第一行文本是标题1（标签为H1），第二 行文本是标题2（标签为H2），正文部分用了列表（标签为UL）。 1. 字体的样式设置
1.3.4 样式表的实例应用4：动态链接样式
简单的CSS链接样式可以在页面属性中的“链接”选项卡中设 置，1.1节中已经讲过。
在【例5.6】中，建立较为复杂的CSS链接样式，当鼠标经过链 接文字时，文字颜色会变色、字体样式变粗、出现背景颜 色、文字修饰有下划线等。这里还讲解两个重要的知识点： 如何建立CSS链接样式和如何调用外部CSS样式表。
2.编辑和删除CSS样式
创建CSS样式后，如果要修改CSS样式，在“CSS样式”面板 中，单击“CSS样式”面板右下角的“编辑”按钮，进入 “CSS规则定义”的对话框，可进行修改。
某个CSS样式不再需要时，在“CSS样式”面板中，首先选中 某个样式，单击CSS样式面板右下角的“删除”按钮。
1.3 CSS 样式的应用
1.1 利用CSS 样式表的网页实例
CSS样式表是由一系列样式选择器和CSS属性组成，它支持字体 属性、颜色和背景属性、文本属性、边框属性、列表属性以及精确 定位网页元素属性等，增强了网页的格式化功能。
使用CSS样式表的另一个优点是可以利用同一个样式表对整个站 点的具有相同性质的网页元素进行格式修饰，当需要更改样式设置 时，只要在这个样式表中修改，而不用对每个页面逐个进行修改， 简化了格式化网页的工作。
1.3.6 CSS样式进阶 利用CSS＋DIV进行网页布局的实例
表格表单css样式设计教案
一体化课程教案编号：QD-0707-05版本号：D/0 流水号：编制：教研室批准:成振洋2011/2012 学年度第二学期计算机系（部）任课教师颜虹一体化课程网络编程基础学习任务CSS表格表单样式设计授课时数 6 授课日期2012.5.17 周次13 审批年月日教学班级10计网1学习目标学习重点及其化解方法根据教材上要求，通过本次课程学习学生要能运用CSS样式实现表格、表单的样式设计。
本次课程的学习内容应该是学生比较感兴趣的知识，我们可以从简单例子入手，到复杂的网页效果实现，再结合书本要求完成的综合实例，还可以让学生自由创作。
这样学生既理解了书上的表格表单CSS样式设计的用法，真正具备进行网页设计的能力。
学习重点：分析并制作出网页表格、表单的样式表。
学习难点及其化解方法学习难点：指导学生的自主学习和正确评价自己和他人的设计多看优秀的表单表格设计例子，例如google的日历视图等网页上实例。
教学准备➢教学设备：电脑、投影、PowerPoint软件、Dreamweaver软件➢教学准备：示例网页、素材图片、任务书教学内容（课时 6 ）：学习任务书教学任务一绘制交换颜色变化的表格【任务内容】讲解表格CSS样式表设置的方式方法【任务目的】使学生掌握表格样式，学会熟练设置表格边框、背景色、单元格间距等属性。
【学习重点】CSS样式表的灵活运用【学习难点】理解表格的各个属性、间距设置的意义【教学方式】案例分析式、任务教学【教学内容】一、制作4X5的表格，并输入相应的文字内容提示：没有特殊合并格式的表格，可以使用<table>、<tr>、<td>标签完成。
或直接用dw生成。
二、设置表格CSS样式1、设置table的样式为border-collapse:collapse;2、设置tbody、td的样式为color:#333;padding:8px;border-right-width: 1px;border-bottom-width: 1px;border-right-style: solid;border-bottom-style: solid;border-right-color: #F60;border-bottom-color: #F60;border-top-width: 1px;border-top-style: solid;border-left-style: solid;border-top-color: #F60;border-left-color: #F60;border-left-width: 1px;3、设置两种颜色的表格单元格样式类分别为in\on，颜色可自行设计。
CSS样式PPT课件
<link href="mycss.css" rel="stylesheet"
type="text/css">
17
5.2.2 链接外部样式表文件
样式表是一个包含样式规则的文本文件，它 的扩展名为*.CSS。它可分为2种类型。一种 是用户自己创建的样式文件，称为内部样式 表；另一种是外部样式表文件，即把现成的 样式表文件链接到页面，直接使用它进行格 式控制。编辑外部样式表将会影响到所有链 接引用它的文件。我们先讲后一种情况。
20
5.2.2 链接外部样式表文件
在Dreamweaver MX 2004中，预先创建了一 些现成的样式文件，我们可以把它链接在当前文档， 直接使用，可以快速进行格式控制。具体操作如下： 选择【窗口】/【CSS样式】命令，打开【CSS样式】 面板。 在【CSS样式】面板中单击右下角的【附加样式表】 按钮，打开【链接外部样式表】对话框。 单击对话框中的【范例样式表】，打开【范例样式 表】对话框，如图5-4所示。
5.2 链接和创建样式表
5.2.1 链接外部样式表文件
5.2.2 创建新的CSS样式
5.2.3 应用类样式
5.2.4 编辑样式
5.3 CSS样式的属性设置
5.3.1 设置类型属性
5.3.2 设置背景属性
5.3.3 设置区块属性
5.3.4 设置方框属性
5.3.5 设置边框属性
5.3.6 设置列表属性
单击【确定】按钮。在【CSS样式】面板中出现了 该样式表，同时，该样式表文件已自动应用到当前 文档。
22
5.2.3 应用类样式
直接通过【属性】面板以手工给文本设置格式，也 会生成样式，该样式只对当前文档起作用。这种操 作会自动在【属性】面板的【样式】文本框中生成 新样式，名称分别为Style1，Style2……等，切换 到代码视图，在<head>……</head>中可以看到样 式文件的内容。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
CSS样式表教学课时：2节教学目标：介绍CSS样式表的概念、应用，及深化CSS样式知识点。
教学重点难点：１、样式表的导入和导出。
２、对两种以上链接样式的掌握。
教学过程：一、css样式表我们已经学习了如何在DW中使用CSS，我们通过CSS面板可以建立、修改、删除CSS 样式，我们也知道了新建CSS样式文件或仅对该文档建立样式。
但我们知道的仅此而已，离开DW软件，我们对CSS不无所知。
今天我们要来学习CSS语法，来深入了解CSS的实质。
CSS就是Cascading Style Sheets，中文翻译为“层叠样式表”，简称样式表，它是一种制作网页的新技术。
优点是结构与格式分离；对网页布局、字体、背景和其它图文效果实现更加精确的控制；更好的易用性和扩展性，可以单独以一个文件的形式出现。
网页设计最初是用HTML标记来定义页面文档及格式，例如标题＜h1＞、段落＜p＞、表格＜table＞、链接＜a＞等，但这些标记不能满足更多的文档样式需求，为了解决这个问题，在1997年W3C(The World Wide Web Consortium)颁布HTML4标准的同时也公布了有关样式表的第一个标准CSS1, 自CSS1的版本之后，又在1998年5月发布了CSS2版本，样式表得到了更多的充实。
W3C把DHTML(Dynamic HTML)分为三个部分来实现：脚本语言(包括JavaScript、Vbscript等)、支持动态效果的浏览器(包括Internet Explorer、Netscape Navigator等)和CSS样式表。
你可以用CSS精确的控制页面里每一个元素的字体样式、背景、排列方式、区域尺寸、四周加入边框等。
使用CSS能够简化网页的格式代码，加快下载显示的速度，外部链接样式可以同时定义多个页面，大大减少了重复劳动的工作量。
注意：CSS需要IE4(Internet Explorer 4.0)和NC4(Netscape 4.0)以上的浏览器支持，有些效果需要更高版本的浏览器支持。
二、基础语法CSS语法主要有三种：①自定义CSS样式，格式为“样式名”如：.a1 定义样式名为.a1，颜色为红色，文字大小为12象素自定义样式名必须由“点”开头，样式名最好为字母或数字自定义样式通过"class=样式名"可被任何HTML标记运用如：＜p class="a1"＞...＜/p＞＜table class="a1"＞...＜/table＞＜div class="a1"＞...＜/div＞＜span class="a1"＞...＜/span＞②重定义HTML标记，格式为“HTML标记｛属性名：属性值；属性名：属性值；｝”如：h1 body重定义HTML标记的功能是改变HTML的原有功能，如上面的定义把“标题1”文字定义为红色字，网页的所有文字大小这12象素③CSS选择器，专用于控制链接的显示效果，共有4种选择器a:link 控制链接的默认显示效果a:visited 控制链接被单击后的显示效果a:hover 控制鼠标移到链接上时的显示效果a:active 控制鼠标按下时的显示效果（较少使用）以上4中选择器第4种较少使用，在定义选择器时，必须严格按此顺序定义，否则可能会无效练习一：分析以下CSS代码的功能，变上机验证.a1{color: #FF0000;}body {color: #333333;background-color: #FFCCFF;text-align: center;margin-top: 0px;font-size: 12px;line-height: 150%;}a:link{text-decoration: none;}a:visited{text-decoration: none;}a:hover{color: #FF0000;text-decoration: underline;}三、如何在网页中插入CSSCSS分类–嵌入式：在独立的文档用CSS样式–外部链接式：使用外部独立的CSS文件存放定义。
方法1：仅在该文档。
定义的CSS效果只在该文档中有效。
语法格式：在网页头中输入如下语句＜style type="text/css"＞＜!--CSS语句--＞方法2：链接一个外部的CSS样式文件，这种方法的最大好处是整个网站可以共享一个CSS 文件。
语法格式：在网页头中加入以下语句＜link href="mycss.css" rel="stylesheet" type="text/css"＞，其中mycss.css是形如.a1{color: #FF0000;}body {color: #333333;background-color: #FFCCFF;text-align: center;margin-top: 0px;font-size: 12px;line-height: 150%;}a:link{text-decoration: none;}a:visited{text-decoration: none;}a:hover{color: #FF0000;text-decoration: underline;}的文本文件。
练习一：分析以下代码，变上机验证＜style type="text/css"＞＜!--.a1.a2{padding: 6px;}.a3{border: 1px dotted #666666;}--＞＜/style＞......＜table width="400" border="1" cellpadding="0" cellspacing="0" class="a1"＞＜tr＞＜td＞table上设置下边界＜/td＞＜/tr＞＜/table＞＜table width="400" border="1" cellspacing="0" cellpadding="0"＞＜tr＞＜td＞＜/td＞＜/tr＞＜p＞＜/p＞＜table width="400" border="0" cellspacing="0" cellpadding="0"＞＜tr＞＜td width="6"＞＜/td＞＜td bgcolor="#CCCCCC" class="a2"＞td上设置“填充”＜/td＞＜td width="6"＞＜/td＞＜/tr＞＜/table＞＜p＞＜/p＞＜table width="400" border="0" cellpadding="0" cellspacing="0" class="a3"＞＜tr＞＜td＞一行一列的table上设置“边框”＜/td＞＜/tr＞＜/table＞.a1 .a2{padding: 6px;} .a3{border: 1px dotted #666666;}练习二：练习下载1、在1.htm网页中新建一个CSS样式表，要求在网页文字内容显示为9pt,行距150%,蓝色。
再把这个样式表导出到网站文件夹，保存名字为wz1.css，然后在2.htm和3.htm中应用这个样式，让三张网页风格一致。
2、在2.htm再新建一个CSS样式表，要求定义在wz1.css中，要求设置为中文本字体为楷体，颜色为灰色,背景为浅黄色，然后把三张网页的标题都设置为此样式。
3、修改刚才建好的wz1.CSS样式表，要求网页中的文字颜色为红色、背景为淡灰色。
练习三：设置body样式为：BODY字体为宋体大小为18px颜色为#333333背景颜色为#CCCCCC设置完后观察效果。
练习四：１、新建一个CSS样式表，要求在网页中的表格内文本显示颜色为红色，字体为黑体，大小为24，行高为50像素，并有删除线。
2、使用CSS选择器：请设置链接样式为：a:link--黑体36px，修饰选择“无”去掉下划线，行高为20像素，颜色为#333333灰色，以和文本默认的黑色有差别。
a:hover --黑体36px，颜色为红色#FF3300。
背景为#CCCCCCa:active --黑体36px，颜色为灰色#999999。
背景为#333333a:visited--黑体36px，下划线为“无”，颜色为黑色。
四、css深入思考：如果同一个页面有好几种链接样式呢？如：答案：我们在一张网页中要设置几种不同的链接样式，方法：第一步：在原网页上设置一组链接样式。
第二步：新建一张空白网页，设置出第二组链接样式，然后复制它的原代码到原网页中。
第三步：复制过来的这组链接代码名字作些改动，例如，我们定义一组链接为红色，访问后为蓝色；另一组为绿色，访问后为黄色：a.red:link {color: #FF0000}a.red:visited {color: #0000FF}a.blue:link {color: #00FF00}a.blue:visited {color: #FF00FF}。