1.10为网页添加CSS样式表（课件）-高二《网页设计与制作》同步教学（劳动版）

使用CSS3设置网页格式 第二阶段 能够叙述CSS的概念。 能够使用外部样式法为D清单网页添加CSS样式表。 能够使用CSS标签选择符选择目标标签，使用正确的语法格式编写样式代码。 能够使用CSS设置文字的大小、颜色和加粗效果。 任务目标 任务10 为网页添加CSS样式表 本次任务要求在上一阶段的D清单网页内容基础上，使用外部样式法为网页添加CSS样式表，并使用CSS样式设置整个页面通用的文字大小样式效果。完成后的效果图如图2-1所示。 任务描述 图2-1 设置页面通用文字大小后的效果图 任务10 为网页添加CSS样式表 要使用外部样式法为D清单页面添加CSS样式表，并设置整个页面通用的文字大小样式，需要： 学习CSS3的基本语法； 学习引入CSS样式的方法，正确使用外部样式法引入CSS样式表； 分析D清单页面中文字大小样式，正确使用CSS设置D清单页面文字大小样式。 D清单页面文字大小分析如图2-1-1所示。 任务分析 任务10 为网页添加CSS样式表 图2-1-1 D清单页面文字大小分析图 知识与技能准备 CSS（Cascading Style Sheet）称为层叠样式表，也可以称为CSS样式表（或样式表），其文件扩展名为.css。CSS是用于增强或控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 CSS3是CSS技术的升级版本，于1999年开始制订，内容涵括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。最终于2001年5月23日W3C完成工作草案并正式公布。 1、认识CSS 知识与技能准备 每个样式包含两部分内容：选择器和声明（或称为规则），如图2-1-2所示： 2、CSS3的基础语法 图2-1-2 CSS样式基本格式 知识与技能准备 （1）行内样式 把CSS样式代码添加到HTML5的标记中，即作为HTML5标记的属性标记存在。例如：<p style=”color:red”>红色字体</p> （2）内嵌样式 将CSS样式代码添加到<head>与</head>标签之间，并且用<style>和</style>标记进行声明。例如： 这种用法也称为网页内部样式，适合为单页面定义CSS样式，不适合为一个网站或多个页面定义样式。其中/*字体为红色*/为CSS的注释格式。 3、引入CSS样式 1 2 3 4 5 6 7 8 <head> <meta charset="utf-8"> <title>使用CSS3样式</title> <style> p{ color:red; /*字体为红色*/ font:16px; /*字体大小为16px*/ } </style> </head> 打开Visual Studio Code软件，输入如下标签： 课堂练习2-1-1 使用CSS样式设置文字 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <!doctype html> <html> <head> <meta charset="utf-8"> <title>使用CSS3样式</title> <!--CSS样式--> <style> h1{ text-align: center; /*字体居中*/ } p{ color:blue; /*字体为蓝色*/ } </style> </head> 17 18 19 20 21 22 23 <body> <h1>CSS样式</h1> <p>内嵌样式</p> <p>适合为单页面定义CSS样式，不适合为一个网站或多个页面定义样式。</p> </body> </html> 课堂练习2-1-1 使用CSS样式设置文字 效果图如下： 图2-1-3 使用内嵌样式效果图 知识与技能准备 （3）外部样式 把样式放在独立的文件中，然后使用<link>标签或者@import关键字导入，一般网站都采用这种方法来设计样式，真正实现HTML结构和CSS样式的分离，以便统筹规划、设计、编辑和管理CSS样式。 使用<link> 标签 使用<link>标签导入外部样式表文件的代码如下： rel：用于定义文档关联，这里表示关联样