CSS3的引入方式码动未来教案篇

在对CSS有大致了解之后，我们知道CSS通过作用于HTML来规定网页样式。那么，本节探讨一下，总共有多少种方式，让HTML和CSS结合起来呢？每种方式如何开发?最实用的方式是什么？
外部导入方式
技能目标
通过本小节的学习，掌握CSS外部引入方式的基本使用方法，初步理解外部引入方式，并能结合需求使用外部引入方式，在页面中完成开发。
语法格式
link rel=“stylesheet” type=“text/css” href=“xxx.css”>
格式说明
link是XHTML标签，这里用于引入CSS文件。rel: 规定当前文档与被链接文档之间的关系，目前只有stylesheet和icon支持的比较好，stylesheet指样式表。href: 连接的外部文档的位置。type: 规定被链接文档的 MIME 类型。最常见的 MIME 类型是 “text/css”。
案例演示
需求：使用link>标记引入外部CSS文件。根据上述功能，新建一个名称为h2_2_1.html的文件，新建一个名称为h2_2_2.css的文件
!DOCTYPE html>
html lang=“en”>
head>
meta charset=“UTF-8”>
link rel=“stylesheet” type=“text/css” href=“h2_2_1.css”/>
/head>
body>
div>外部引入/div>
/body>
/html>
div{ color:red}
案例实践
新建一个页面，引入外部CSS文件，用CSS代码规定本页元素显示效果。
扩展知识
外部导入方式，是CSS样式表使用频率最高的方式。其好处在于：第一，实现HTML页面与CSS样式分离。第二，前期开发便于分工。第三，后期维护便于管理。第四，同一个CSS文件可以链接到多个HTML文件中，这样CSS代码便于复用。
头部内嵌方式
技能目标
通过本小节的学习，掌握CSS头部内嵌的基本使用方法，初步理解头部内嵌方式，并能结合需求使用头部内嵌方式，在页面中完成开发。
语法格式
style type=“text/css”>div{color:red}/style>
格式说明
style> 标签用于为 HTML 文档定义样式信息。在 style 中，您可以规定在浏览器中如何呈现 HTML 文档。type 属性是必需的，定义 style 元素的内容。唯一可能的值是 “text/css”。style 元素位于 head 部分中。
案例演示
需求：使用style>标记头部内嵌CSS代码。根据上述功能，新建一个名称为h2_2_3.html的文件，
!DOCTYPE html>
html lang=“en”>
head>
meta charset=“UTF-8”>
style>
div{color:red}
/style>
/head>
body>
div>头部嵌入CSS代码/div>
/body>
/html>
案例实践
新建一个页面，在头部开发style>标签，在标签内部开发CSS代码。用该CSS代码完成对页面元素样式的设置。
扩展知识
在页面中，除了这两种最常用的CSS代码引入方式，还有一种元素属性方式，例如：element style=“attr:value;attr:value”>。事实上，这种方式并不陌生，简而言之就是把CSS代码写在html元素的style属性值位置上。
更多内容请添加微信：madongweikai，或扫描下方二维码添加