1、首先我们我们新建一个记事本，并将记事本的名字改为“引入外部css文件和外部js文件.html”，并回车键确定，以使文件转化为浏览器可以打开的html网页文件。
五河网站制作公司哪家好，找创新互联！从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设等网站项目制作，到程序开发，运营维护。创新互联自2013年创立以来到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联。
2、我们编写一个html5的声明标签— !DOCTYPE html, 以使浏览器能认识到我们的文档是一个html5的文件，这样就可以快速的正确解读，以提高浏览的体验。
3、我们写一个title的标签，将网页的题目写入进去，让网页的标题显示为“引入外部css文件和外部js文件”。
4、我们用meta标签设置字符的编码格式为：UTF-8，以使浏览器能够正确的显示我们的网页。
5、我们写一个body标签，用来包含网页的主体部分。
6、我们写几个标签以便在外部css文件样式表中，为其设置样式。
7、我们新建一个css文件，把txt的文件后缀名改为css即可，之后打开就可以写入css代码了。
8、我们用标签选择器为p标签、div标签和span标签的内容设置样式。
9、我们使用,link标签将我们编写的css文件样式表文件其引入到我们当前的html文件中来。
10、我们鼠标右击在弹出的下拉菜单中，我们选择“在浏览器中打开”这一项。
11、我们看到我们编写的样式被应用到了标签中文字上，说明我们的css外部样式表文件引入成功。
外联式样式（属于外部样式表）
特征：
1、有一个单独的CSS文件存在！[如：001.css]
2、首先，通过【格式】→【样式表连接】与CSS文件[001.css]建立连接！
3、在合适的地方使用 class="样式名" 调用具体的样式效果！
如：link href="001.css" type="text/css" rel="Stylesheet"/
嵌入式样式（属于内部样式表）
特征：
1、样式的属性内容以代码的形式[放在 ]写在网页代码中！
2、首先，通过【格式】→【样式】设置样式的属性内容！
3、在合适的地方使用 class="样式名" 调用具体的样式效果！
如： style type="text/css"
.main{ width:1002px; margin:0 auto;}
/style
内联式样式（属于内部样式表）
特征：
1、样式的属性内容直接跟在将要修饰的文字标记里[如：
2、具体格式： style="font-size:10px;font-color:#ff0000"
例如：修饰单元格里的文字
3. 嵌入式
最初级的 CSS 写法即把代码直接添加于所修饰的标记元素。示例代码如下：
div style="font-family:Arial,Helvetica,sans-serif;"芒果/div
这样做虽然更为直观，但很大程度上加大了页面体积，不符合结构与表现分离的设计思想。
总体而言，外联和内联各有优点，可综合实际情况选择适合的级联方式。
扩展资料：
编程工具
记事本：使用Windows系统自带的记事本可以编辑网页。只需要在保存文档时，以.html为后缀名进行保存即可。
Dreamweaver：它与Flash、Fireworks并称网页三剑客。Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别开发的视觉化网页开发工具，利用它可以轻而易举地制作出充满动感的网页。
语言特点
CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。
总体来说，CSS具有以下特点：
丰富的样式定义
CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。
易于使用和修改
CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。
另外，可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。如果要修改样式，我们只需要在样式列表中找到相应的样式声明进行修改。
多页面应用
CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。
层叠
简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。
这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果。
页面压缩
在使用HTML定义页面效果的网站中，往往需要大量或重复的表格和font元素形成各种规格的文字样式，这样做的后果就是会产生大量的HTML标签，从而使页面文件的大小增加。
而将样式的声明单独放到CSS样式表中，可以大大的减小页面的体积，这样在加载页面时使用的时间也会大大的减少。另外，CSS样式表的复用更大程序的缩减了页面的体积，减少下载的时间。
参考资料：百度百科-CSS
css外部样式如何调用方法如下：
1、直接在div中使用css样式制作div+css网页
2、html中使用style自带式
3、使用@import引用外部CSS文件
4、使用link引用外部CSS文件 推荐此方法
接下来将逐个讲解html引用css方法的例子
1、直接在html标签元素内嵌入css样式，如div style="font-size:14px; color:#FF0000;"我是div css测试内容-支持/div 效果如下图
2、在html头部head部分内style声明插入代码如下：
style type="text/css"
!--
.ceshi {font-size:14px; color:#FF0000;}/*这里是设置CSS的样式内容*/
--
/style
具体方法如下图：
3、使用@import引用外部CSS文件方法
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
titlecss引用方法实例-测试实例/title
style type="text/css"
!--
@import url(wcss.css);/*这里是通过@import引用CSS的样式内容*/
--
/style
/head
body
div class="ceshi"我是div css测试内容支持/div
/body
/html
Wcss.css文件内代码.ceshi {font-size:14px; color:#FF0000;}
效果如下图：
可以看出使用此方法和使用自带式引用css样式表方法有相同处，都是需要在html的head内使用style标签引用外部css。
4、使用link来调用外部的css文件
在head放置link rel="stylesheet" href="wcss.css" type="text/css" /来调用外部的wcss.css文件来实现html引用css文件
详细如下图
此方法就不需要style标签，而是直接通过link一个样式来引用外部样式。
外部样式表: 当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 link 标签链接到样式表。link 标签在（文档的）头部：head link rel="stylesheet" type="text/css" href="mystyle.css" / /head浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
内部样式表: 当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 style 标签在文档头部定义内部样式表，就像这样:head style type="text/css" hr {color: sienna;} p {margin-left: 20px;}
内联样式: 由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。要使用内联样式，你需要在相关的标签内使用样式（style）属性。
链接外部样式文件
外部引入CSS样式文件是通过link标签实现的，它只能位于HTML文档的head标签内，且必须有href属性，该属性用于指定需要引入的CSS文件的路径。
写法：link rel="stylesheet" href="CSS样式文件的绝对地址"
link元素中type用于规定链接文档的MIME类型，rel属性用于规定被链接文档与当前文档之间的关系，如alternate用于定义交替出现的链接，appendix定义文档的附加信息等，此外还有一些可选属性，用于做一些除加载CSS文件的其他事情。link元素是XHMTL中的标签，当HTML页面被渲染时，link引用的CSS文件会被同时加载，我们也可以通过JavaScript控制DOM去改变link元素的CSS内容。
导入外部样式
导入外部样式单的功能与链接外部样式的功能差不多，都能实现一样的功能，但是它们之间还是存在一定的差别的，导入外部样式主要通过@import方式导入CSS文件。
写法：
@import 'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别@import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不识别@import url(style.css) //Windows NS4, Macintosh NS4不识别@import url('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别@import url("style.css") //Windows NS4, Macintosh NS4不识别
由上分析知道，@import url(style.css) 和@import url("style.css")是最优的选择，兼容的浏览器最多。从字节优化的角度来看@import url(style.css)最值得推荐。
本段摘自：
添加css的方式：link与@import区别 - Wayne-Zhu - 博客园
@import是css2里面提出来的，低版本的浏览器不支持，注意它是css中属性，如果要使用它，可以在style标签中书写。但在CSS文件中再导入CSS文件，会给服务器造成太大的文件请求压力，最好不要这样做。
style
@import url(css/style.css);
/style
@import是由CSS提供的一种导入样式的方式，当页面被加载时，@import会等到页面全部被加载完成时再加载CSS样式，所以在页面还未加载完成期间，页面还没有CSS样式效果，会导致“屏闪”，通过@import导入的CSS样式是无法用DOM去控制的。
HTML文档使用link .../元素来引入外部样式文件, link .../要放在head元素里
href="文件地址"
结合题目: style/css.css 就是表示在html所在目录里有个文件夹style. 该文件夹里有一个css文档, 该css文档名字叫css
type="文件类型"
常见的有text/css表示层叠样式表
text/javascript 表示 javascript脚本
rel="外部文件和HTML文档的关系"
stylesheet: 表示外部文件是该HTML的样式表
参考代码 HTML文件
!DOCTYPE html
html
head
link href="style/css.css" type="text/css" rel="stylesheet"/
meta charset="utf-8"
titleTest/title
/head
body
h3 id="title"标题/h3
p class="myp"风云/p
p class="myp"雷电/p
/body
/html
参考CSS文件(注意该文件,在html所在目录的style文件夹里, 详细看前面的图)
#title{
color:#f00;
}
.myp{
background:#999;
}
效果图
