《WEB前端开发案例教程》教案全书电子教案完整版课程设计教学教案.doc
课程名称WEB前端开发（1）课次1任务、项目、课题名称网页设计基础课时2学时教学内容网页的相关知识网站设计流程 教学目标掌握网页的相关知识了解网站设计流程 教学重点网页相关概念教学难点网站设计流程教学活动及主要环节导入新课：（2分钟）1有无制作过网页？2以前学过的网页课程？课程介绍：(10分钟)本学期主要学习如下内容：1）HTML52）Dreamweaver CC2018网页制作编辑软件的使用3） CSS的使用4) DIV+CSS网页布局考试方法：平时成绩（40）+期末考试（60）平时40分：到课率10分+提交实验作业10分+上课表现10分+作品10分新授：一、网页展示与认识（展示百度、淘宝官网，历届学生的优秀作品）（10分钟）（动手操作，任意打开一个网页，查看网页源代码学生一起操作，实现教学做一体化）在学习创建网站、制作网页之前，我们先浏览几个网站，对这些网站的主页进行分析，了解优秀网页的布局结构、色彩搭配、导航栏的设计、动画效果等。二、相关概念（15分钟）1、IP地址和域名2、URL：统一资源定位符3、HTTP：超文本传输协议，提供一种发布和接收HTML页面的方法。 4、网站、网页与主页：主页通常用index.htm或index.html表示。5、HTML:超文本标记语言，在网页空白位置单击鼠标右键，选择“查看源文件”命令即可查看网页源代码。（学生操作）6.WEB标准：包括结构标准（HTML）、表现标准(CSS)和行为标准(JAVASCRIPT).三、 HTML5概述（13分钟）HTML5主要优势：（1）良好的移植性 （2）更直观的结构。（3）内容和样式分离。（4）新的表单元素。（5）更方便地嵌入音频和视频。 （6）矢量图绘制。（演示canvas画布）四、常用的浏览器（5分钟）三大浏览器：IE、火狐FireFox、谷歌Chrome（推荐使用）。总结：（5分钟）本节介绍与网页有关的一些基本常识和基本概念，介绍HTML的基本工作原理，以及常用的网页制作工具、网页设计流程等。作业：理解IP地址、域名、URL、HTTP、HTML的概念。预习：DW工具的使用课程名称WEB前端开发（1）课次2任务、项目、课题名称Dreamweaver工具的使用 课时2学时教学内容Dreamweaver工具的使用新建HTML5页面教学目标熟悉Dreamweaver操作界面掌握新建HTML5页面的方法 教学重点掌握新建HTML5页面的方法 教学难点Dreamweaver工具的使用教学活动及主要环节复习提问（5分钟）URL/HTTP/HTML的含义导入新课：（3分钟）制作网页的工具很多（Hbuilder、VScode等课下可自行了解，大同小异），Dreamweaver就是其中一种，它提供的可视化设计环境可非常方便地创建和编辑网页.因此本节介绍该软件的基本使用。（超星平台利用“随机选人”功能，学生回答问题。）新授：1、 Dreamweaver CC2018界面介绍（2分钟）1、 初始化设置（10分钟）（学生跟随教师一起操作）² 工作区布局² 设置字体选择菜单栏中的【编辑】【首选项】选项，分类列表中选择“字体”，右侧设置“代码视图”合适的字号大小。² 设置界面分类列表中选择“界面”，更改可应用程序主题和代码主题² 更改主浏览器和次浏览器分类列表中选择“实时预览”，主浏览器快捷键F122、界面介绍（15分钟）（教师演示知识点涉及的具体操作）菜单栏：文件、编辑、站点、窗口工具栏：“格式化源代码”按钮、“应用注释”按钮、“删除注释”按钮浮动面板：“文件”面板2、 新建HTML5页面（15分钟）（学生跟随教师一起操作）“文件”“新建”，打开“新建文档”对话框，单击“创建”按钮。（演示后让学生总结，确保每一个同学都会新建网页文件）在<body></body>标记中写入一个段落标记<p></p>，输入内容“这是我的第一个网页文件”。F12再浏览器预览。（注：因电脑设置，部分电脑按Fn+F12预览）小结：（5分钟）熟悉DW界面构成、DW的运行环境，会创建最简单的网页文件并运行。作业：实训一超星作业课程名称WEB前端开发（1）课次3任务、项目、课题名称HTML标记及其属性课时2学时教学内容HTML文档的基本结构HTML标记HTML标记属性教学目标了解HTML文档的基本结构掌握HTML标记的基本语法格式掌握HTML标记属性规则 教学重点HTML标记的基本语法格式 教学难点HTML标记属性规则 教学活动及主要环节复习提问（5分钟）使用DW创建网页文件的步骤？（一名学生回答，其余同学用电脑操作）导入新课：（3分钟）第一节课我们了解了如何查看网页源代码，HTML标记语言构成了网页的具体内容，因此了解和掌握HTML语言也是非常必要的，因此本章学习HTML语言的使用。 新授：3、 HTML文档的基本结构（20分钟）一个WEB页对应于一个HTML文件，通常以.html或.htm为扩展名。HTML文档的基本结构如下：（学生观察自己新建好的网页文件基本结构）<html><head><title>这里是网页的标题</title></head><body>这是页面上显示的内容，网页的主体部分</body></html>（教师讲解每一部分标记的内容）1<html></html>:用来标识HTML文档。2<head></head>: 头部标记，提供一些与WEB页有关的特定信息。例如网页的标题、定义样式表、插入脚本等。3<title></title>:用于定义网页的标题。4<body></body>:主体标记，包括WEB页的具体内容，包括文字、图形、超链接以及其他各种HTML对象。4、 HTML的基本语法1标记（15分钟）标记的格式：<标记>受标记影响的内容</标记>标记的规则：u 标记以<开始，以>结束。u 标记一般由开始标记和结束标记组成。结束标记前有/符号。u 少数标记只有开始标记，无结束标记。如<br />.u 标记不区分大小写，但一般用小写。u 可以同时使用多个标记共同作用，各标记之间的顺序任意。（超星选人功能，学生总结回答）2标记的属性（15分钟）属性的规则：u 所有属性必须在开始标记里，不同属性间用空格隔开。u 每个属性都有默认值，值放在相应的属性后，用等号分隔；用双引号括起来，双引号可省略。u 属性之间顺序任意。小结：（5分钟）（教师提问）u HTML文档的基本结构u HTML标记u HTML标记属性作业：实训二超星作业课程名称WEB前端开发（1）课次4任务、项目、课题名称HTML文本标记课时2学时教学内容HTML文本标记教学目标理解HTML文本标记的作用、掌握其使用教学重点HTML文本标记 教学难点HTML文本标记教学活动及主要环节复习提问：（5分钟）HTML文档的基本页面结构？（超星平台利用“随机选人”功能，学生回答问题）导入新课：（3分钟）网页中出现最多的元素的文本元素和图像元素，这些内容如何显示在浏览器中的呢？这节课我们来介绍一下常用的HTML文本标记。 新授：（教师通过古诗案例贯穿讲解段落标记、换行标记、标题标记、水平线标记、字体样式标记、特殊字符标记，实现教学做一体化）5、 段落标记<p></p>align属性：用于设置段落的对齐方式。6、 换行标记<br> 单标记格式：文本<br />注意：需要产生多个空行，可以连续使用多个<br>标记实现。7、 标题标记<hn></hn>标识文档中的标题和副标题，其中n是1到6的数字；表示1到6级标题。align属性：设置对齐方式,left(默认)、center、right。说明：浏览器在解释标题标记符时，会自动改变文本的大小并将字体设为黑体，同时自动将内容设置为一个段落。四、水平线标记<hr /> 单标记添加水平线可以使文字隔开，起到修饰页面的作用。五、字体样式标记符u 粗体：<b></b>, <strong></strong>u 斜体:<i></i>,<em></em>u 删除线：<s></s>,<del></del>u 下划线：<u></ul>,<ins></ins>六、特殊字符 如果用户需要在网页中显示某些特殊字符，如> <等与HTML语法冲突的符号或用键盘无法输入的符号，则需要用转义字符来表示，而不能直接输入。常用的转义字符有：u >：>；u <：<；u &:&；u 空格： ；注意：转义字符输入时，必须区分大小写。小结：u 标题标记u 段落标记u 水平线标记u 换行标记u 字体样式标记u 特殊字符（超星平台利用“随机选人”功能，学生回答问题）作业：超星作业课程名称WEB前端开发（1）课次5任务、项目、课题名称HTML列表标记课时2学时教学内容HTML列表标记：无序列表、有序列表、自定义列表、列表的嵌套教学目标理解HTML列表标记的作用、掌握其使用教学重点HTML列表标记：无序列表、有序列表、自定义列表教学难点列表的嵌套教学活动及主要环节复习提问：（3分钟）HTML标题标记有哪些？（超星平台利用“随机选人”功能，学生回答问题）导入新课：（2分钟）列表是一种最常用的组织信息的方式，HTML提供了用于实现列表的标记。列表样式有无序列表、有序列表、自定义列表，这节课我们来学习一下HTML列表标记。新授：（教师通过案例讲解有序列表、无序列表、列表的嵌套、自定义列表，实现教学做一体化）8、 有序列表（10分钟）常用格式：<ol type=”符号类型” start=”起始值”> <li>列表项1</li> <li>列表项2</li><li>列表项3</li></ol>说明：type属性用来设置数字序列样式。属性值可以为：1(默认值),A,a,I,i。Start属性设置序列的起始值，可以是任意整数。9、 无序列表(unordered list)（10分钟）常用格式：<ul type=”符号类型” > <li>列表项1</li> <li>列表项2</li><li>列表项3</li></ul>说明：type属性用来设置项目符号的类型。属性值可以为：disc(默认值),circle,square,分别表示实心圆点、空心圆点和方块。（学生独立思考，做完找老师签字）10、 列表嵌套（10分钟）有序列表和无序列表自身可以嵌套，彼此之间也可以进行嵌套。参考课本25页。课堂练习：列表嵌套的案例（10分钟）11、 自定义列表（10分钟）自定义列表项前没有任何项目符号。语法如下：<dl> <dt>标题1</dt> <dd>数据1</dd> <dd>数据2</dd> <dt>标题2</dt> <dd>数据1</dd> <dd>数据2</dd> </dl>小结：（3分钟）v 有序列表v 无序列表v 列表的嵌套v 自定义列表（超星平台利用“随机选人”功能，学生回答问题）作业：超星作业课程名称WEB前端开发（1）课次6任务、项目、课题名称HTML超链接标记课时2学时教学内容HTML超链接标记HTML超链接的类型绝对URL与相对URL教学目标理解HTML超链接标记的作用、掌握其使用教学重点HTML超链接标记HTML超链接的类型教学难点绝对URL与相对URL教学活动及主要环节复习提问：HTML列表标记有几种？导入新课：超链接是所有网站都具有的重要特征，通过超链接我们可以实现网页之间的链接，接下来我们一起来学习超链接的相关知识。（将简单学院官网首页设置超链接效果）新授：一、创建超链接超链接(hyperlink):是实现不同页面之间或者不同网站之间信息浏览的主要手段。包括页面链接、锚点链接、电子邮件链接。创建超链接需要使用<a></a>标记符。它的基本属性是href，用于指定链接的目标。通过为href指定不同的值，可以创建出不同类型的超链接。title属性设置鼠标指向超链接时显示的文字。在文字和图像上都可以创建超链接。target属性用于设置打开新的链接时是否在新的窗口打开。2 什么是URL（教师演示，学生动手操作，实现教学做一体化）URL(Universal Resource Locator,统一资源定位器)是表示WEB上资源的一种方法。例如，在指定Internet资源时，可以使用绝对路径，也可以使用相对路径。即绝对URL和相对URL.n 绝对URL：是指Internet上资源的完整地址，包括协议名、计算机域名和文档名。n 相对URL：是指Internet上资源相对于当前页面的地址，它包含从当前页面指向目的页面位置的路径。使用相对URL时用./表示上一级目录。注意：用户在编写网页时，通常使用的都是相对URL.三创建页面链接页面链接是最常见的超链接，单击页面链接时可跳转到相应的网页。如果超连接的目标网页位于同一站点，则可以使用相对URL;如果超链接的目标网页位于其他位置，则需要指定绝对URL.格式：<a href=“目标文件名” title=“提示文字” target=”_blank”>超链接的文字</a><html><head> <title>超链接示例</title></head><body> <p>这是一个<a href="page2.htm">超链接</a></p> <p>链接到<a href="">百度</a></p></body></html>说明：u 超链接默认有下划线，并且显示为蓝色。u 使用超链接时，一定要确保href属性所指定的页面在指定位置是存在的。u 若链接的网页文件不在当前目录中，则需指定路径。l 链接到上一级目录中的文件<p>这是一个<a href="./page2.htm">超链接</a></p> l 链接到下一级目录web中的文件<p>这是一个<a href="web/page2.htm">超链接</a></p>l 链接到同一级不同目录web中的文件<p>这是一个<a href="./web/page2.htm">超链接</a></p>四创建电子邮件链接使用如下格式可链接到指定的电子邮件。当用户指向电子邮件的超链接时，会默认启动Outlook Express.小结：创建超链接URL:绝对URL、相对URL创建页面超链接创建电子邮件链接作业：超星作业课程名称WEB前端开发（1）课次7任务、项目、课题名称HTML图像标记课时2学时教学内容HTML图像标记常用的图像格式为图像创建超链接教学目标理解HTML图像标记的作用、掌握其使用教学重点HTML图像标记常用的图像格式为图像创建超链接教学难点为图像创建超链接教学活动及主要环节复习演示：1 为页面与页面之间创建超链接？导入新课：图像是所有网站都具有的重要特征，如何在网页中插入图像呢？新授：一Web页图像格式常用的有GIF.JPEG.PNG三种标准的位图格式。Ø GIF格式GIF格式可以高度压缩图像，但它只能包含最多256种颜色，不适于表现真彩色照片或具有渐变色的图片。GIF格式可以支持动画效果。Ø JPEG格式它支持的颜色数几乎没有限制，因此适用于使用真彩色或平滑过渡色的照片和图片。Ø PNG格式Portable Networks Graphics,可移植的网络图形格式，是近年来新出现的一种图像格式。二.插入图像使用标记img在网页中插入图像。HTML代码如下：<html><head><title>无标题文档</title></head><body><img src="mid2.JPG" align="left" width="150" height="150" border="2" ><p>在西藏自助旅行，为高原神奇的风景如痴如醉的同时。</p></body></html>说明属性的含义(学生自行查阅HTML5文档，超星选人进行知识分享)三建立图像超链接：使用<a>标记也可创建图像的超链接。<a href="./image.html"> <img src="Images/mid2.JPG"></a>小结：v HTML图像标记v 常用的图像格式v 为图像创建超链接课程名称WEB前端开发（1）课次8任务、项目、课题名称HTML5结构元素课时2学时教学内容掌握HTML5结构元素教学目标理解HTML5结构元素的使用教学重点HTML5结构元素教学难点HTML5结构元素的应用教学活动及主要环节导入新课：HTML5中新增了几个结构元素，这些元素的作用与块元素非常相似，通过运用这些结构元素，可以让网页的整体结构更加直观和明确、更加具有语义化和更具有现代风格。新授：1、 header元素header元素为页面或页面中某一个区块的页眉，通常是一些引导和导航信息。它可以包含页面标题、logo图片，搜索表单等。语法格式：<header> <h1>标题</h1></ header>2、 nav元素nav元素定义页面的导航链接部分区域，引用nav元素可以让页面元素的语义更加明确。通常nav元素用于以下几种场合。l 传统的导航条。l 侧边栏导航。l 内页导航。l 翻页导航。3、 section元素section元素用于对网站或应用程序中页面的内容进行分块，表示一段专题性的内容，一般会带有标题。Section元素通常用于有文章的章节、页眉、页脚或文档中的其他部分。4、 article元素article元素用来定义独立的内容，该元素定义的内容可独立于其它的内容使用。它可以是一篇博客或报刊中的文章、一篇论坛帖子、一段用户评或独立的插件等。5、 aside元素aside元素通常用来表示当前页面的附属信息部分，它可以包含我们当前页面或者主题内容相关的一些引用，如侧边栏、广告、目录、索引、Web应用、链接、当前页内容简介等，有别与我们主要内容。6、 footer元素 footer元素用于定义页面或区域的页脚，可以为网站的版权信息、作者、日期及联系信息。一个页面中可以包含多个footer元素，也可以在section元素或article元素中使用footer元素。小结：v header元素v nav元素v section元素v article元素v aside元素v footer元素课程名称WEB前端开发（1）课次9任务、项目、课题名称HTML5分组元素、HTML5页面交互元素、HTML5语义元素课时2学时教学内容掌握HTML5分组元素、HTML5页面交互元素、HTML5语义元素教学目标理解HTML5分组元素、HTML5页面交互元素、HTML5语义元素的使用教学重点HTML5分组元素、HTML5页面交互元素、HTML5语义元素教学难点HTML5分组元素、HTML5页面交互元素、HTML5语义元素的应用教学活动及主要环节导入新课：分组元素用于对页面元素进行分组。我们熟悉的div、 p 、ol、ul都是分组元素标记，本节来看3个新加的分组元素，分别是figure元素、figcaption元素和hgroup元素。新授：（操作课本案例，在操作的过程中，更好理解分组元素的意义）7、 figure元素和figcaption元素 figure元素用来定义一块独立内容，该内容如果被删除也不会对周围的内容有影响。它可以用来表示图片、图表、音频、视频，代码等。figcaption元素用于为figure元素组添加标题。8、 hgroup元素hgroup元素用于对网页或区段（section）的标题进行组合。它常与h1h6元素组合使用。通常，将hgroup元素放在header元素中。9、 details和summary元素 details元素用于描述文档或文档某个部分的细节。summary元素经常与details 元素配合使用，作为details 元素的第一个子元素，用于为details定义标题。10、 progress元素progress元素定义运行中的任务进度（进程）。如Windows系统中软件的安装、文件的复制等场景的进度。progress元素的常用属性值有两个，具体如下。（1）value：已经完成的工作量。（2）max：总共有多少工作量。11、 meter元素meter元素用于表示指定范围内的数值。如磁盘使用情况、查询结果、或投票比例等，都可以使用meter元素。属性说明high定义度量的值位于哪个点被界定为高的值low定义度量的值位于哪个点被界定为低的值max定义最大值，默认值是 1min定义最小值，默认值是 0定义什么样的度量值是最佳的值。如果该值optimum高于 high属性，则意味着值越高越好。如果该值低于low属性的值，则意味着值越低越好value定义度量的值12、 time元素time元素用来定义公历的时间（24 小时制）或日期。time元素不会在任何浏览器中呈现任何特殊效果。但能够以机器可读的方式对日期和时间进行编码。13、 mark元素mark元素的主要功能是高亮显示文本或字符，以引起用户注意。其用法与strong类似，但是mark元素更随意灵活。14、 cite元素cite元素用来表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。被引用的文本将以斜体显示，以和其他见容区分。小结：v figure元素和figcaption元素 v hgroup元素v details和summary元素 v progress元素v meter元素课程名称WEB前端开发（1）课次10任务、项目、课题名称引入CSS的方法课时2学时教学内容CSS样式表的概念 样式表的创建及引用教学目标掌握CSS样式表的概念 掌握样式表的创建及使用方法教学重点样式表的创建及使用方法教学难点样式表的创建及使用方法教学活动及主要环节复习演示：1.为页面与页面之间创建超链接？导入新课：网页如何变得美观？新授：一CSS概述CSS（Cascading Style Sheets）：层叠样式表。是一种格式化网页的标准格式，它扩展了HTML的功能，使网页设计者能够以更有效的方式设置网页格式。HTML+CSS: html没有装修的房子css装修房子的过程（美化）精美的页面CSS样式表是由一系列样式选择器和CSS属性组成的，它支持字体属性、颜色和背景属性、文本属性、边框属性、列表属性及精确定位网页元素等属性，从而大大增进了网页的格式化能力。二HTML中引入CSS的方法（例子演示）（1）行内式行内式即在标记的style属性中设定CSS样式，这种方式本质上没有体现出CSS的优势，因此不推荐使用。例如：<h1 style=“color:white; background-color:blue”>这是一行文本</h1>(2)嵌入式：即内部样式表嵌入式将对页面中各种元素的设置写在<head></head>之间。例如：<style type="text/css">h1 color:white; background-color:blue</style>(3) 链接式:外部样式表 最常用的方式例：<link href="mystyle.css" rel="stylesheet" type="text/css" />小结：v CSS概述v 行内式v 内嵌式v 外链式作业：超星作业课程名称WEB前端开发（1）课次11任务、项目、课题名称CSS选择器（1）课时2学时教学内容CSS选择器：标记选择器、类选择器、ID选择器 教学目标掌握CSS选择器：标记选择器、类选择器、ID选择器教学重点CSS选择器：标记选择器、类选择器、ID选择器教学难点CSS选择器的使用方法教学活动及主要环节复习演示：如何通过外链式进行样式设置？（操作演示）导入新课：什么是CSS选择器呢？新授：1.标记选择器 （body,h1,h2,h6,p,ul,ol,dl,table,td,tr.）h1属性：值;属性：值;属性：值;属性：值;h2属性：值;属性：值;属性：值;属性：值;p属性：值;属性：值;属性：值;属性：值;2.类别选择器（类选择器）.class属性：值;属性：值;Class为选择器类别的名称（名称不能是中文，最好是英文单词或拼音）<title>CSS类别选择器</title><style type="text/css">.title1 background-color:#0CF; color:#fff;.title2 background-color:#9C0; color:#f00;</style></head><body><p class="title1">这是第一段的内容。</p><p class="title2">这是第二段的内容。</p></body></html>3.ID选择器(代表唯一)<style type="text/css">#one background-color:#0CF; color:#fff; width:200px; height:200px;#two background-color:#9C0; color:#f00; width:200px; height:200px;</style></head><body><div id="one">这是第一个块的内容。</div><div id="two">这是第二个块的内容。</div></body></html>注意：CSS样式的优先规则：行内样式 > ID样式 > 类别样式 > 标记样式小结：v 标记选择器v 类选择器v ID选择器作业：课下巩固复习课程名称WEB前端开发（1）课次12任务、项目、课题名称CSS选择器（2）课时2学时教学内容CSS选择器：交集选择器、并集择器、后代选择器、通配符选择器 教学目标掌握CSS选择器：交集选择器、并集择器、后代选择器、通配符选择器 教学重点CSS选择器：交集选择器、并集择器、后代选择器、通配符选择器 教学难点CSS选择器的使用方法教学活动及主要环节复习演示：类选择器如何进行样式的书写？（操作演示）导入新课：上节课学习了基本的CSS选择器，除了这些选择器还有哪些选择器呢？新授：（操作课本案例，在操作的过程中，更好理解选择器的意义）一、交集选择器交集选择器由两个选择器构成，第一个是标记选择器，第二个是类选择器，表示二者各自元素范围的交集。两个选择器之间不能有空格。其语法格式如下：标记名称.类名称属性：属性值； 属性：属性值；.二、并集选择器如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式，并集选择器由各个选择器通过逗号连接而成，任何形式的选择器（标记选择器、类选择器、ID选择器等），都可以作为并集选择器的一部分。h1,h2,pfont-size:24px; color:blue;三、后代选择器后代选择器也叫包含选择器，用于对容器对象中的子对象进行控制，使其他容器对象中的同名子对象不受影响。后代选择器书写时将容器对象写在前面，子对象写在后面，中间用空格分隔。若容器对象有多层时，则分层依次书写。p strongfont-size:24px; color:red; 四、通配符选择器通配符选择器用“*”表示，它是所有选择器作用范围最广的，能匹配页面中的所有元素。其基本语法格式如下：*属性：属性值； 属性：属性值；.小结：v 交集选择器v 并集选择器v 后代选择器v 通配符选择器作业：超星作业课程名称WEB前端开发（1）课次13任务、项目、课题名称CSS常用文本属性课时2学时教学内容CSS常用文本属性：字体、字号、粗细、倾斜、文本装饰、颜色、对齐方式、首行缩进、行高 教学目标掌握CSS常用文本属性及使用方法教学重点CSS常用文本属性：字体、字号、粗细、倾斜、文本装饰、颜色、对齐方式、首行缩进、行高 教学难点CSS常用文本属性的应用教学活动及主要环节复习演示：后代选择器如何进行样式的书写？（操作演示）导入新课：学习HTML时，可以使用文本样式标记及其属性控制文本的显示样式，但是这种方式繁琐且不利于代码的共享和移植。为此，CSS提供了相应的文本设置属性。使用CSS可以更轻松方便的控制文本样式。新授：（案例演示）1 CSS字体样式属性（通过案例将字体样式属性进行演示）（1）font-size:字号大小font-size属性用于设置字号，一般用像素（px）表示。(2)font-family:字体 font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等。可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。（3）font-weight:字体粗细 font-weight属性用于定义字体的粗细。(4) font-style:字体风格font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：² normal：默认值，浏览器会显示标准的字体样式。² italic：浏览器会显示斜体的字体样式。² oblique：浏览器会显示倾斜的字体样式。2 CSS文本外观属性（通过案例将字体外观属性进行演示）使用HTML可以对文本外观进行简单的控制，但是效果并不理想。为此CSS提供了一系列的文本外观样式属性，具体如下：(1)color:文本颜色color属性用于定义文本的颜色，其取值方式有如下3种：² 预定义的颜色值，如red，green，blue等。² 十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，最常用。² RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。(2) letter-spacing:字间距letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的数值，允许使用负值，默认为normal。(3) word-spacing:单词间距word-spacing属性用于定义英文单词之间的间距，对中文字符无效。和letter-spacing一样，其属性值可为不同单位的数值，允许使用负值，默认为normal。(4) line-height:行间距，即行高。line-height属性用于设置行间距，所谓行间距就是行与行之间的距离，即字符的垂直间距，一般称为行高。(5) text-transform:文本转换text-transform属性用于控制英文字符的大小写，其可用属性值如下：² none：不转换（默认值）。² capitalize：首字母大写。² uppercase：全部字符转换为大写。² lowercase：全部字符转换为小写。(6) text-decoration:文本装饰text-decoration属性用于设置文本的下划线，上划线，删除线等装饰效果，其可用属性值如下：² none：没有装饰（正常文本默认值）。² underline：下划线。² overline：上划线。² line-through：删除线。(7) text-align:水平对齐方式text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下：² left：左对齐（默认值）² right：右对齐。² center：居中对齐。(8) text-indent:首行缩进text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。(9) white-space:空白符处理使用HTML制作网页时，不论源代码中有多少空格，在浏览器中只会显示一个字符的空白。在CSS中，使用white-space属性可设置空白
