第2章-CSS基础
- 格式：ppt
- 大小：2.70 MB
- 文档页数：77
下载文档原格式
合集下载
《第2单元制作网页14网页动态效果》教案
五、教学反思
在今天的教学中，我尝试通过生活实例引入网页动态效果的概念，希望以此激发学生的兴趣。从课堂反馈来看，这种方法确实起到了一定的效果，大部分同学都能够积极参与课堂讨论，表现出对网页动态效果的好奇心。
在讲授新课内容时，我注意到学生对animation和transition这两个属性的理解较为困难。因此，我通过举例和对比的方式进行了详细解释。从学生的反应来看，这种方法有助于他们理解这两个属性的区别和应用场景。但在今后的教学中，我还需要寻找更多贴近生活的案例，让学生更加直观地感受到这些属性的作用。
3.重点难点解析：在讲授过程中，我会特别强调animation、transition和JavaScript事件处理这两个重点。对于难点部分，我会通过举例和比较来帮助大家理解。
（三）实践活动（用时10分钟）
1.分组讨论：学生们将分成若干小组，每组讨论一个与网页动态效果相关的实际问题。
2.实验操作：为了加深理解，我们将进行一个简单的实验操作。这个操作将演示网页动态效果的基本原理。
（2）掌握JavaScript事件处理机制，如事件冒泡和捕获，以及如何正确使用事件对象。
（3）在设计网页动态效果时，如何优化性能，避免过度使用动画导致页面卡顿。
（4）解决实践操作中遇到的问题，如浏览器兼容性问题、代码调试等。
举例：
-难点在于如何让学生理解animation与transition的适用场景。例如，transition适用于简单的过渡效果，而animation适用于复杂的动画序列。
举例：
-学生需掌握如何使用CSS3中的animation属性制作简单的动画效果，例如让一个元素沿着X轴移动。
-学生需了解如何利用JavaScript的addEventListener方法为网页元素添加点击事件，实现交互效果。
在今天的教学中，我尝试通过生活实例引入网页动态效果的概念，希望以此激发学生的兴趣。从课堂反馈来看，这种方法确实起到了一定的效果，大部分同学都能够积极参与课堂讨论，表现出对网页动态效果的好奇心。
在讲授新课内容时，我注意到学生对animation和transition这两个属性的理解较为困难。因此，我通过举例和对比的方式进行了详细解释。从学生的反应来看，这种方法有助于他们理解这两个属性的区别和应用场景。但在今后的教学中，我还需要寻找更多贴近生活的案例，让学生更加直观地感受到这些属性的作用。
3.重点难点解析：在讲授过程中，我会特别强调animation、transition和JavaScript事件处理这两个重点。对于难点部分，我会通过举例和比较来帮助大家理解。
（三）实践活动（用时10分钟）
1.分组讨论：学生们将分成若干小组，每组讨论一个与网页动态效果相关的实际问题。
2.实验操作：为了加深理解，我们将进行一个简单的实验操作。这个操作将演示网页动态效果的基本原理。
（2）掌握JavaScript事件处理机制，如事件冒泡和捕获，以及如何正确使用事件对象。
（3）在设计网页动态效果时，如何优化性能，避免过度使用动画导致页面卡顿。
（4）解决实践操作中遇到的问题，如浏览器兼容性问题、代码调试等。
举例：
-难点在于如何让学生理解animation与transition的适用场景。例如，transition适用于简单的过渡效果，而animation适用于复杂的动画序列。
举例：
-学生需掌握如何使用CSS3中的animation属性制作简单的动画效果，例如让一个元素沿着X轴移动。
-学生需了解如何利用JavaScript的addEventListener方法为网页元素添加点击事件，实现交互效果。
高手进阶第2章 CSS基础
外部样式表
内部样式表
元素中的样式表
Page 7
4
在网页的标记中应用“样式” ，时采用的是“层叠式”原则 。
ห้องสมุดไป่ตู้
Page 8
目录
CSS简介 CSS基本语法CSS基本语法 1.样式和样式表 2. CSS中的颜色和长度定义 3.常用的样式属性 4.定义样式表 5.内部样式表和外部样式表 6.层叠式应用规则
Page 13
3、常用的样式属性
常用的样式属性 ： 1.文字 2.背景 3.边框线 4.高度和宽度 5.间距和边距 6.列表 7.位置和布局
Page 14
4、定义样式表
指定“对象”来定 义样式表的语法 规则如下：
对象1, 对象2 …… { 样式表 }
Page 15
5、内部样式表和外部样式表
1 内部样式表
Page 17
6、层叠式应用规则
Page 18
第2章 CSS基础
1
CSS简介
2
CSS基本语法
讲师：贾如春 QQ：460669467
目录
CSS简介 CSS基本语法
CSS简介
1.图解CSS 2.CSS定义 3.CSS的特点
1、图解CSS
未应用CSS
应用了CSS
Page 3
2、CSS的定义
CSS是Cascading Style Sheets的缩写
， 中文为“层叠样式表”。
Page 4
3、CSS的特点
2 字体
1
颜色
5 网页内容的位置
4 3 背 景 色 边 框 线
6 网页内容的大小尺寸
1
CSS通过“样式”来表示网页的颜色、字体、背景色、 边框线及网页内容的位置及大小尺寸等属性。
JavaScript+jQuery前端开发基础教程教案
JavaScript+jQuery前端开发基础教程教案第一章：JavaScript概述1.1 课程介绍本章节将介绍JavaScript的发展历程、特点以及应用场景。
使学生了解JavaScript的历史背景和基本概念，为后续学习打下基础。
1.2 教学目标了解JavaScript的历史和发展掌握JavaScript的基本特点掌握JavaScript的应用场景1.3 教学内容1.3.1 JavaScript的历史和发展1.3.2 JavaScript的基本特点1.3.3 JavaScript的应用场景1.4 教学方法采用讲解、案例演示、互动提问等方式进行教学。
1.5 课后作业简述JavaScript的历史和发展。
列举出JavaScript的三个基本特点。
说出JavaScript的应用场景。
第二章：HTML与CSS基础2.1 课程介绍本章节将介绍HTML和CSS的基本概念，以及如何使用它们来创建网页。
学生将学会如何编写HTML代码和应用CSS样式。
2.2 教学目标掌握HTML的基本结构了解CSS的作用和基本语法学会使用CSS样式化网页2.3 教学内容2.3.1 HTML基本结构2.3.2 CSS的基本语法和作用2.3.3 使用CSS样式化网页2.4 教学方法采用讲解、案例演示、互动提问等方式进行教学。
2.5 课后作业编写一个简单的HTML页面，包括、段落和图片。
尝试使用CSS样式化你的HTML页面，使其看起来更美观。
第三章：JavaScript基本语法和操作3.1 课程介绍本章节将介绍JavaScript的基本语法和基本操作，如变量、数据类型、运算符、控制语句等。
学生将学会如何编写简单的JavaScript代码。
3.2 教学目标掌握JavaScript的基本语法学会使用JavaScript进行基本操作3.3 教学内容3.3.1 JavaScript的基本语法3.3.2 变量和数据类型3.3.3 运算符和控制语句3.4 教学方法采用讲解、案例演示、互动提问等方式进行教学。
Web前端技术-第章 CSS新增动画特效含答案 (二)
Web前端技术-第章 CSS新增动画特效含答案(二)- CSS新增动画特效含答案 -1. CSS3动画的基本概念CSS3动画是指利用CSS3技术实现的页面元素动态效果，包括过渡、变形、旋转、平移、缩放、透明度等。
CSS3动画具有兼容性好、效果丰富、代码简洁等优点，被广泛应用于网页设计中。
2. CSS3动画的基本语法CSS3动画的基本语法包括关键帧、动画属性和动画执行时间。
其中，关键帧定义了动画开始和结束时的状态，动画属性定义了动画的表现形式，动画执行时间定义了动画的持续时间。
3. CSS3动画的实现方法CSS3动画的实现方法主要有两种：一种是利用CSS3的transition属性实现简单的动画效果，另一种是利用CSS3的animation属性实现更加复杂的动画效果。
4. CSS3动画的应用场景CSS3动画可以应用于网页设计的各个方面，如导航菜单、图片轮播、页面切换等。
在实际应用中，需要根据具体的需求选择合适的动画效果，以达到最佳的视觉效果和用户体验。
5. CSS3动画的常见问题及解决方法在使用CSS3动画时，常见的问题包括兼容性、性能、代码复杂度等。
为了解决这些问题，可以采取以下措施：使用浏览器前缀、优化代码、减少动画执行时间等。
6. CSS3动画的优化技巧为了提高CSS3动画的性能和效果，可以采取一些优化技巧，如使用硬件加速、合理设置动画属性、避免频繁重绘等。
这些技巧可以有效提升网页的加载速度和用户体验。
7. CSS3动画的未来发展趋势随着互联网技术的不断发展，CSS3动画也在不断更新和完善。
未来，CSS3动画将更加智能化、个性化和实用化，为网页设计带来更加丰富和多样的视觉效果和交互体验。
总之，CSS3动画是一种非常实用和有趣的网页设计技术，可以为网页带来更加生动和动态的视觉效果，提高用户体验和品牌形象。
希望本文对您有所帮助，欢迎大家多多学习和应用。
CSS网页设计标准教程课程设计
CSS网页设计标准教程课程设计简介随着互联网的普及，越来越多的人学习网页设计。
但是，许多人对CSS的理解都不够深入，只能做出简单的网页，并不能做出恰当的效果。
因此，在本课程设计中，我们将重点讲授CSS的使用，让学生们对CSS 有深入和全面的理解，掌握制作一流网页的技能。
学习目标本课程设计的学习目标如下：1.理解CSS的基本概念，掌握CSS的语法和基本知识点。
2.熟悉盒模型和文本属性等CSS层叠样式的基本属性。
3.掌握定位和浮动等CSS布局的基本方法和技巧。
4.练习使用CSS实现不同的网页设计效果。
5.学习常用的CSS框架和工具，提高工作效率。
课程安排本课程设计共分为7个章节，具体内容如下：第一章：CSS基础•CSS概述•CSS语法和选择器•三种CSS样式表：行内样式、嵌入式样式和外部样式表•CSS样式表的优先级和继承第二章：CSS样式属性•盒模型和文本属性•背景、边框、文本、字体、颜色等CSS属性•overflow、display、visibility、z-index等CSS属性第三章：CSS布局•浮动和清除浮动•定位和层级•相对定位、绝对定位、固定定位•弹性布局和栅格布局第四章：CSS选择器•常用选择器：ID选择器、类选择器、标签选择器、伪类选择器•层次选择器、属性选择器、通用选择器、伪元素选择器•选择器组合和选择器优先级第五章：CSS动画和过渡•CSS过渡的基本使用方法•CSS动画的基本使用方法•CSS动画的关键帧动画第六章：CSS预处理器•Less、Sass、Stylus等CSS预处理器的基本语法•CSS预处理器的变量、嵌套、混合等功能•使用CSS预处理器提高工作效率第七章：CSS框架和工具•Bootstrap框架的使用•jQuery库的基本使用方法•Webpack等前端构建工具的基本使用方法教学方法本课程设计采用“讲授+实践”相结合的教学方法，通过灵活的授课方式帮助学生深度理解CSS知识点的实现。
第二章CSS基础
2019/11/24
2.4 Css基础语法
2.4.8伪元素
CSS伪元素用于向某些选择器设置特殊效果。伪元素的 语法： selector :pseudo-element {property : value;} “：first-line” 伪元素用于向文本的首行设置特殊样式 。 （例1-28.html） “：first-letter” 伪元素用于向文本的首字母设置特殊 样式 。（例1-29.html） “:before”伪元素可以在元素的内容前面插入新内容。 （例1-30.html） “:after” 伪元素可以在元素的内容之后插入新内容。
2.4 Css基础语法
3.ID选择器 ID 选择器与类选择器相似，ID选择器名前面
有一个 # 号 ，ID选择器要引用ID属性中的值。 注意： (1)在一个 HTML 文档中，ID 选择器会使用一次，
而且仅一次 。 (2)ID 选择器不能结合使用，因为 ID 属性不允许有
以空格分隔的词列表。 (3) ID 选择器是区分大小写的 。(例1-12.html)
（例1-26.html）
2019/11/24
2019/11/24
2.4 Css基础语法
6.鼠标属性 让鼠标移到不同对象上面，显示不同形状 auto: 正常鼠标 crosshair: 十字鼠标 default: 默认鼠标
text: 文字鼠标 （例1-27.html）
2019/11/24
为列表项标志。 6.鼠标属性 ：鼠标形状等。
2019/11/24
2.4 Css基础语法
1.字体属性
CSS字体属性定义文本的字体系列、大小、 加粗、风格和变形等。（例1-19.html）
font-family 属性 ：定义文本的字体系列 ； font-size 属性：设置文本的大小 ； font-weight 属性：设置文本的粗细 （bold可将 文本设置为粗体，100~900为字体指定9级加粗 度）； font-style 属性最常用于规定斜体文本 ； font-variant 属性可以设定小型大写字母。
体内药物分析第2章 体内药物分析相关的基础理论概述
苯妥英羟基化代谢为对羟基苯妥英
丙咪嗪经氧化脱甲基生成去甲丙咪嗪
氯丙嗪氧化为氯丙嗪亚砜
华法林酮基被还原为醇基
普鲁卡因在体内水解生成对氨基苯甲酸
II相代谢反应（phase II reactions）： I相代谢产物再与体内的一些内源性化
合物结合，生成极性更大的新的代谢物从 尿液中排出体外。
II相反应－结合反应（Conjugation）
II相代谢反应包括： （1）葡萄糖醛酸 （2）硫酸 （3）甘氨酸 （4）谷胱甘肽 （5）S－腺苷甲硫氨酸 （6）乙酰化－异烟肼
非那西丁在体内的I相代谢和II相代谢反应
异烟肼在乙酰基转移酶的作用下被代谢为 乙酰异烟肼
（二）药物代谢产物的药理活性
药物通过生物转化可产生的药理结果有： 1. 有药理活性的药物转化成无活性物质 2. 前体药物在体外无药理活性经体内过程 使药物转变为有活性的代谢物（环磷酰胺 －磷酰胺氮芥 ） 3. 代谢转化使代谢物的药理活性改变（非 那西丁－对乙酰氨基酚）。
2. 从小肠吸收（主要部位）
肠液呈弱碱性：有机弱碱性药物易吸收。
停留时间长，吸收面积大，为胃肠道吸收 的主要部位。
3. 影响胃肠道吸收的因素 （1）剂型及理化特性 溶液剂的吸收较片剂快
分散片的吸收速度和程度＞普通片＞缓释片
微乳化的环孢霉素A＞普通胶囊制剂
（2） 食物－一般认为食物会延缓药物的吸收 减慢药物自胃内排出，延迟小肠的吸收 食物吸收水分，延迟固体制剂的崩解和药物的
快代谢组（EM）和慢代谢组（PM）血浆中乙基 吗啡的浓度变化
2. 年龄和性别对药物代谢的影响
年龄：未成年人和老年病人对药物的药理 作用及毒性的敏感性均较一般成年人明显 增强（酶活性低、内源性辅助因子少、肝 血流量少，而引起药物的代谢速率减慢）。
06386网页设计与制作
湖北省高等教育自学考试课程考试大纲课程名称：网页设计与制作课程代码：06386第一部分课程性质与目标一、课程的性质与特点“网页设计与制作”是湖北省高等教育自学考试网络传播专业（专科段）开设的一门专业实践课程。
网页是网络中信息传播的重要载体，是当今网络传播应用的主要形式。
作为网络与新媒体专业的学生只有了解、掌握了网页设计与制作的基本原理、基本操作方法，才能更好进行网络传播的应用与实践。
本课程通过对网页的基本原理、CSS基础、网页页面的布局结构、文本图像与多媒体的使用、页面链接、列表与表格、表单与程序控制制作流程、以及对相关软件的操作掌握后，可以独立完成对网页的制作设计与编辑，从而将新闻等网络信息通过网页展现，更好将网络新闻的采编评与网络传播的网页展现形式结合，充分发挥网络传播的特点。
在网络与新媒体专业学生将来的实际工作中需要经常用到本课程内容中介绍的基本原理和方法。
因此，本课程是该专业学生必须掌握的一门课程。
本课程是本专业及相关专业相关课程进一步学习的基础课程。
二、课程目标和基本要求网页的设计与制作是一门与计算机结合十分紧密的课程。
既需要一定的理论知识，也需要一定的实际操作能力。
通过本课程自学、上机实习、作业等方式的学习，要求学生掌握网页的基本原理、网页制作与设计的基本方法、能操作相关应用软件，最终达到可以独立或者与他人分工合作完成简单和复杂网页的设计与制作。
具体地说，包括以下几个方面：（1）考生了解网页的基本概念、基本结构、制作流程和设计原则等相关基础知识，掌握网站的开发流程，能独立规划和设计网站。
（2）要求考生能熟练掌握多媒体素材在网页制作中的运用。
（3）使考生掌握网页描述语言HTML、CSS的用法，能熟练运用常见的网页标记。
掌握JavaScript 脚本语言程序设计的基础知识，能编写JavaScript脚本创建具有动态效果的网页。
本课程要求学生在自学过程中，特别要加强实践环节，培养动手能力，掌握相关软件的使用方法，要求应试者具备一定的上机能力和实际应用能力。
CSS基础实用PPT学习教案
第39页共41页小结小结本章主要介绍了本章主要介绍了csscss的概念与作用如何构造的概念与作用如何构造csscss样式规则样式规则引用引用csscss样式到样式到htmlhtml页面中的四种方法页面中的四种方法csscss中的基本选择器中的基本选择器复合选择器和常用到的伪类伪元素选择器的使用方法复合选择器和常用到的伪类伪元素选择器的使用方法csscss的的继承特性和层叠特性的运行机制以及继承特性和层叠特性的运行机制以及csscss中常用单位和中常用单位和csscss书写与命名规范
（任其4何）中元E:E素a为c。ti前ve 面向被介用绍户过激的活某的种元素标设记置、样类式别，、可用ID于或页复面合中的 选择器，冒号后面为伪类，选择器与冒号之间不能 有空格，要连续书写。
【例4-3】利用ID选择器为不同标题设置样式示例 。
<style type = "text/css">
#one{
/* ID选择器 */
background-color:blue; /* 背景色为蓝色 */
color:#FFF;
/* 文字为白色 */
}
#two{
font-size:20px; /* 文字大小为20像素 */
#id名称{属性1:属性值1; 属性2:属性值2;……}
一个id最多只能赋予一个HTML标记是因为不 仅CSS可以使用，JavaScript等其他脚本语言也可 以使用id属性值。
另外，id选择器不支持像class选择器那样可以 多风格同时使用。
第17页/共41页
4.3.1 基本选择器
3.ID选择器
第1页/共41页
4.2 CSS的基本语法
CSS的一个核心特征，就是能够很容易地向HTML 文件中的所有同类型的标记应用一组样式。
（任其4何）中元E:E素a为c。ti前ve 面向被介用绍户过激的活某的种元素标设记置、样类式别，、可用ID于或页复面合中的 选择器，冒号后面为伪类，选择器与冒号之间不能 有空格，要连续书写。
【例4-3】利用ID选择器为不同标题设置样式示例 。
<style type = "text/css">
#one{
/* ID选择器 */
background-color:blue; /* 背景色为蓝色 */
color:#FFF;
/* 文字为白色 */
}
#two{
font-size:20px; /* 文字大小为20像素 */
#id名称{属性1:属性值1; 属性2:属性值2;……}
一个id最多只能赋予一个HTML标记是因为不 仅CSS可以使用，JavaScript等其他脚本语言也可 以使用id属性值。
另外，id选择器不支持像class选择器那样可以 多风格同时使用。
第17页/共41页
4.3.1 基本选择器
3.ID选择器
第1页/共41页
4.2 CSS的基本语法
CSS的一个核心特征，就是能够很容易地向HTML 文件中的所有同类型的标记应用一组样式。
《ASP程序设计及应用》电子教案第2章 Web页面制作
2.1 HTML语言概述 HTML语言概述
HTML概述 2.1.1 HTML概述 HTML是 Language， HTML是（Hyper Text Markup Language，超文本 标记语言）的缩写，最早源于SGML语言。 标记语言）的缩写，最早源于SGML语言。 SGML语言 HTML用来表示网上信息的符号标记语言 用来表示网上信息的符号标记语言。 WWW上 HTML用来表示网上信息的符号标记语言。在WWW上， 发布信息通常使用HTML 它是Web页面的基础， HTML， Web页面的基础 发布信息通常使用HTML，它是Web页面的基础，任何 一个Web页面都离不开HTML 而且HTML也是Web Web页面都离不开HTML， HTML也是Web应用 一个Web页面都离不开HTML，而且HTML也是Web应用 开发的基础。 开发的基础。 HTML语言是大多数浏览器都能识别的语言 语言是大多数浏览器都能识别的语言， HTML语言是大多数浏览器都能识别的语言，使用 HTML语法规则建立的文本可以运行在不同的操作系 HTML语法规则建立的文本可以运行在不同的操作系 统平台上，而且能被大多数用户所接受。 统平台上，而且能被大多数用户所接受。
2.1 HTML语言概述 HTML语言概述
2.1.2 文档的结构 <HTML> <HEAD> 头部信息 </HEAD> <BODY> 正文部分 </BODY> </HTML> 文件开头和结尾由 <HTML>和</HTML>来 <HTML>和</HTML>来 标记。 标记。 <HEAD>和 <HEAD>和</HEAD> 标记头部， 标记头部，用来包含 文件的基本信息； 文件的基本信息； <BODY>和</BODY>标 <BODY>和</BODY>标 记正文部分，是整个 记正文部分， 文件的主体部分。 文件的主体部分。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
示例CSS样式： h1 { color:red;} h1 em { color:blue;} em { color:green;} 示例HTML代码： <h1>这个标题<em>很</em>重要</h1> 思考：div p *[href] { color: red; }
2.3.2 关系选择符（ Relationship Selectors
教学重点和难点
重点：选择符、盒子模型。
难点：选择符的复合使用。
2.1 理解பைடு நூலகம்CSS
2.1.1 CSS的简介 CSS（Cascading Style Sheet，层叠样式表）。 样式就是格式，对于网页来说，像网页显示的文字的大小、 颜色以及图片位置等，都是网页显示的样式。层叠就是指当 HTML文件引用多个CSS样式时，如果CSS的定义发生冲突， 浏览器将依据层次的先后顺序来应用样式，如果不考虑样式 的优先级时，一般会遵循“最近优先原则”。 CSS能将样式的定义与HTML文件内容分离。只要建立定义 样式的CSS文件，并且让所有的HTML文件都来调用CSS文件 所定义的样式。如果要改变HTML文件中任意部分的显示风 格时，只要把CSS文件打开，更改样式即可。
（6）外部样式表优先级低于内部样式表；
（7）可同时链接几个样式表，靠后的样式表优先于靠前的样式表。
示例代码调用的外部style.css文件的内容还是： .p1{font-size:18px; color:blue}
2.3 选择符
选择符（Selector，也可译为选择器）决定了格式化将应用 于哪些元素。最简单的选择器可以对给定类型的所有元素进行 格式化，更复杂的选择器可以根据元素的class或id、上下文、 状态等来应用格式化规则。 2.3.1 元素选择符（Universal Selector） 2.3.2 包含选择符（Relationship Selectors） 2.3.3 属性选择符（Attribute Selectors） 2.3.4 伪类与伪对象选择符（Pseudo-Classes Selectors） 2.3.5 群组选择符（Grouping）
以下代码第一个段落标记被直接定义了style属性，此行文字将显示36像素 大小，蓝色字体；而第二个段落标记没有被定义，将按照默认设置来显示 文字样式。
2.2.2 定义内部样式表
内部样式表允许在他们所应用的HTML文档的顶部设置样
式，后在整个HTML文件中直接调用使用该样式的标记。 基本语法：
<style type="text/css"> 选择器1{样式属性：属性值；样式属性：属性值；……} 选择器2{样式属性：属性值；样式属性：属性值；……} …… 选择器n{样式属性：属性值；样式属性：属性值；……} </style>
第 2 章 CSS 基础
教学目标
1. 理解CSS在页面风格设计中的作用。 2. 掌握样式表的定义与使用方法。 3. 掌握如何定义选择符，了解CSS3新增的选择器。 4. 理解长度单位与颜色设置方法。 5. 掌握盒子模型。 6. 了解CSS3实现圆角边框与块阴影的方法。
教学内容 2.1 理解CSS 2.2 样式表的定义与使用 2.3 选择符 2.4 长度单位与颜色设置方法 2.5 盒子模型 2.6 圆角边框与块阴影
语法说明：
（1）链接外部样式表时，不需要使用style元素，只需直接用 <link>标记放在<head>标记中就可以了； （2）外部样式表的文件扩展名为.css； （3）CSS文件一定是纯文本格式； （4）修改外部样式表时，引用它的所有网页也会自动更新样式； （5）外部样式表中的URL相对于样式表文件在服务器上的位置；
2.2 样式表的定义与使用
（1）定义标记的style属性 （2）定义内部样式表
（3）嵌入外部样式表
（4）链接外部样式表
2.2.1 定义标记的 style 属性
基本语法： <标记 style="样式属性:属性值;样式属性:属性值;…">
语法说明：
（1）标记：HTML标记，如body、table、p等； （2）标记的style定义只能影响标记本身； （3）style的多个属性之间用分号分隔； （4）标记本身定义的style优先于其他所有样式定义。
2.3.1 元素选择符（ Universal Selector ）
示例CSS样式： p1 {font-size:16px;color:red;} p.p2{font-size:32px;color:blue;} 示例HTML代码： <p>此段文字以默认方式显示</p> <p class="p1">此段文字以16像素大小，红色字体显示</p> <p class="p2">此段文字以32像素大小，蓝色字体显示</p> <h3 class="p2">此段也是“p2”类，但不受“pp2”样式影 响</h3> 思考：如果把“p.p2”样式改为“.p2”有影响吗？
们有相同的父节点。
示例CSS样式：h1+h2 { color:red;} 示例HTML代码：<h1>这是一级标题</h1> <h2>该二级标题将显示为红色</h2> <h2>该二级标题的颜色不受影响</h2>
2.3.2 关系选择符（ Relationship Selectors
4. 通用兄弟元素选择符（General Sibling Combinator） 基本语法：E1~E2 { sRules }
2. 子对象选择符（Child Combinator） 基本语法：E1 > E2 { sRules } 语法说明：子对象选择器实际上是包含选择器的一种特 例，即元素E1和E2之间是父子关系，中间不隔代。注意， “>”前后可以有空格也可以没有空格。
示例CSS样式： body>p { color:red;}
示例HTML代码：
<p>此段的颜色显示为红色</p> <div><p>此段落显示的颜色不受影响</p></div> 请解释：div ol>li p { color:red;}
2.3.2 关系选择符（ Relationship Selectors
3. 相邻兄弟选择符（Adjacent Sibling Combinator） 基本语法：E1 + E2 { sRules } 使用说明：选择所有作为E1元素相邻的下一个元素E2，它
2.3.1 元素选择符（ Universal Selector ）
1. 通配选择符（Universal Selector） 基本语法： * { sRules } 语法说明：通配选择器“*”匹配任何元素名称，匹配选 定文档树中的任意单一元素， 如果通配符不是一个简单选 择器的唯一组件，则可以省略“*”。例如： *[lang=fr] 与 [lang=fr] 是等价的； *.warning 与 .warning 与是等价的； *#myid 与 #myid 也是等价的。 代码示例： * { padding: 0px; margin: 0px; }
2.1.2 CSS 构造
CSS就是包含一个或多个规则的文本文件。这些规则通过 属性和值来决定网页中的元素应该如何显示。CSS属性可以
控制基本格式（如字体、尺寸和颜色等）和布局（如定位和
浮动），还可以决定元素的显示和关闭等。
1. 构造样式规则
样式表的每个规则都有两个主要部分：选择器（selector） 和声明（declaration）。选择器决定哪些因素要受到影响， 声明由一个或多个属性值对组成。 基本语法： selector{属性:属性值[[;属性:属性值]…]} 语法说明： （1）selector表示希望进行格式化的元素； （2）声明部分包括在选择器后的大括号中； （3）用“属性:属性值”描述要应用的格式化操作； （4）声明中的多个属性值对之间必须用分号隔开。
2.3.1 元素选择符（ Universal Selector ）
2. 类选择符（Class Selectors） 基本语法：E.className { sRules } 语法说明：可以简写为“.className { sRules }”，其效果 等同于E［ class ~= className］，但“.news{color:red;}”会 影响所有标记中定义了class="news"类的元素，而 “div.news{color:red;}”只影响属性中定义了class="news"类的 div元素。 可以为对象的class属性（特性）指定多于一个值 （className），其方法是指定用空格隔开的一组样式表的 类名，例如：<p class="class1 class2">。
嵌入外部样式表就是在HTML代码的主体中直接导入样式 表的方法。 基本语法： <style type="text/css"> @import url("要嵌入的样式表文件名称"); </style> 语法说明： （1）import语句后的“;”号，一定要加上！ （2）要嵌入的样式表文件扩展名为.css； （3）@import应该放在style元素的任何其他样式规则前面。
2.3.2 关系选择符（ Relationship Selectors
1. 包含选择符（Descendant combinator）
基本语法：E1 E2 { sRules }
语法说明：有时要选择匹配的元素是另一个元素是文档 树的后代，是一种包含关系，后代选择器是由空格分隔的两
2.3.2 关系选择符（ Relationship Selectors
教学重点和难点
重点：选择符、盒子模型。
难点：选择符的复合使用。
2.1 理解பைடு நூலகம்CSS
2.1.1 CSS的简介 CSS（Cascading Style Sheet，层叠样式表）。 样式就是格式，对于网页来说，像网页显示的文字的大小、 颜色以及图片位置等，都是网页显示的样式。层叠就是指当 HTML文件引用多个CSS样式时，如果CSS的定义发生冲突， 浏览器将依据层次的先后顺序来应用样式，如果不考虑样式 的优先级时，一般会遵循“最近优先原则”。 CSS能将样式的定义与HTML文件内容分离。只要建立定义 样式的CSS文件，并且让所有的HTML文件都来调用CSS文件 所定义的样式。如果要改变HTML文件中任意部分的显示风 格时，只要把CSS文件打开，更改样式即可。
（6）外部样式表优先级低于内部样式表；
（7）可同时链接几个样式表，靠后的样式表优先于靠前的样式表。
示例代码调用的外部style.css文件的内容还是： .p1{font-size:18px; color:blue}
2.3 选择符
选择符（Selector，也可译为选择器）决定了格式化将应用 于哪些元素。最简单的选择器可以对给定类型的所有元素进行 格式化，更复杂的选择器可以根据元素的class或id、上下文、 状态等来应用格式化规则。 2.3.1 元素选择符（Universal Selector） 2.3.2 包含选择符（Relationship Selectors） 2.3.3 属性选择符（Attribute Selectors） 2.3.4 伪类与伪对象选择符（Pseudo-Classes Selectors） 2.3.5 群组选择符（Grouping）
以下代码第一个段落标记被直接定义了style属性，此行文字将显示36像素 大小，蓝色字体；而第二个段落标记没有被定义，将按照默认设置来显示 文字样式。
2.2.2 定义内部样式表
内部样式表允许在他们所应用的HTML文档的顶部设置样
式，后在整个HTML文件中直接调用使用该样式的标记。 基本语法：
<style type="text/css"> 选择器1{样式属性：属性值；样式属性：属性值；……} 选择器2{样式属性：属性值；样式属性：属性值；……} …… 选择器n{样式属性：属性值；样式属性：属性值；……} </style>
第 2 章 CSS 基础
教学目标
1. 理解CSS在页面风格设计中的作用。 2. 掌握样式表的定义与使用方法。 3. 掌握如何定义选择符，了解CSS3新增的选择器。 4. 理解长度单位与颜色设置方法。 5. 掌握盒子模型。 6. 了解CSS3实现圆角边框与块阴影的方法。
教学内容 2.1 理解CSS 2.2 样式表的定义与使用 2.3 选择符 2.4 长度单位与颜色设置方法 2.5 盒子模型 2.6 圆角边框与块阴影
语法说明：
（1）链接外部样式表时，不需要使用style元素，只需直接用 <link>标记放在<head>标记中就可以了； （2）外部样式表的文件扩展名为.css； （3）CSS文件一定是纯文本格式； （4）修改外部样式表时，引用它的所有网页也会自动更新样式； （5）外部样式表中的URL相对于样式表文件在服务器上的位置；
2.2 样式表的定义与使用
（1）定义标记的style属性 （2）定义内部样式表
（3）嵌入外部样式表
（4）链接外部样式表
2.2.1 定义标记的 style 属性
基本语法： <标记 style="样式属性:属性值;样式属性:属性值;…">
语法说明：
（1）标记：HTML标记，如body、table、p等； （2）标记的style定义只能影响标记本身； （3）style的多个属性之间用分号分隔； （4）标记本身定义的style优先于其他所有样式定义。
2.3.1 元素选择符（ Universal Selector ）
示例CSS样式： p1 {font-size:16px;color:red;} p.p2{font-size:32px;color:blue;} 示例HTML代码： <p>此段文字以默认方式显示</p> <p class="p1">此段文字以16像素大小，红色字体显示</p> <p class="p2">此段文字以32像素大小，蓝色字体显示</p> <h3 class="p2">此段也是“p2”类，但不受“pp2”样式影 响</h3> 思考：如果把“p.p2”样式改为“.p2”有影响吗？
们有相同的父节点。
示例CSS样式：h1+h2 { color:red;} 示例HTML代码：<h1>这是一级标题</h1> <h2>该二级标题将显示为红色</h2> <h2>该二级标题的颜色不受影响</h2>
2.3.2 关系选择符（ Relationship Selectors
4. 通用兄弟元素选择符（General Sibling Combinator） 基本语法：E1~E2 { sRules }
2. 子对象选择符（Child Combinator） 基本语法：E1 > E2 { sRules } 语法说明：子对象选择器实际上是包含选择器的一种特 例，即元素E1和E2之间是父子关系，中间不隔代。注意， “>”前后可以有空格也可以没有空格。
示例CSS样式： body>p { color:red;}
示例HTML代码：
<p>此段的颜色显示为红色</p> <div><p>此段落显示的颜色不受影响</p></div> 请解释：div ol>li p { color:red;}
2.3.2 关系选择符（ Relationship Selectors
3. 相邻兄弟选择符（Adjacent Sibling Combinator） 基本语法：E1 + E2 { sRules } 使用说明：选择所有作为E1元素相邻的下一个元素E2，它
2.3.1 元素选择符（ Universal Selector ）
1. 通配选择符（Universal Selector） 基本语法： * { sRules } 语法说明：通配选择器“*”匹配任何元素名称，匹配选 定文档树中的任意单一元素， 如果通配符不是一个简单选 择器的唯一组件，则可以省略“*”。例如： *[lang=fr] 与 [lang=fr] 是等价的； *.warning 与 .warning 与是等价的； *#myid 与 #myid 也是等价的。 代码示例： * { padding: 0px; margin: 0px; }
2.1.2 CSS 构造
CSS就是包含一个或多个规则的文本文件。这些规则通过 属性和值来决定网页中的元素应该如何显示。CSS属性可以
控制基本格式（如字体、尺寸和颜色等）和布局（如定位和
浮动），还可以决定元素的显示和关闭等。
1. 构造样式规则
样式表的每个规则都有两个主要部分：选择器（selector） 和声明（declaration）。选择器决定哪些因素要受到影响， 声明由一个或多个属性值对组成。 基本语法： selector{属性:属性值[[;属性:属性值]…]} 语法说明： （1）selector表示希望进行格式化的元素； （2）声明部分包括在选择器后的大括号中； （3）用“属性:属性值”描述要应用的格式化操作； （4）声明中的多个属性值对之间必须用分号隔开。
2.3.1 元素选择符（ Universal Selector ）
2. 类选择符（Class Selectors） 基本语法：E.className { sRules } 语法说明：可以简写为“.className { sRules }”，其效果 等同于E［ class ~= className］，但“.news{color:red;}”会 影响所有标记中定义了class="news"类的元素，而 “div.news{color:red;}”只影响属性中定义了class="news"类的 div元素。 可以为对象的class属性（特性）指定多于一个值 （className），其方法是指定用空格隔开的一组样式表的 类名，例如：<p class="class1 class2">。
嵌入外部样式表就是在HTML代码的主体中直接导入样式 表的方法。 基本语法： <style type="text/css"> @import url("要嵌入的样式表文件名称"); </style> 语法说明： （1）import语句后的“;”号，一定要加上！ （2）要嵌入的样式表文件扩展名为.css； （3）@import应该放在style元素的任何其他样式规则前面。
2.3.2 关系选择符（ Relationship Selectors
1. 包含选择符（Descendant combinator）
基本语法：E1 E2 { sRules }
语法说明：有时要选择匹配的元素是另一个元素是文档 树的后代，是一种包含关系，后代选择器是由空格分隔的两