HTML中CSS外部样式表

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外部样式表文件引入成功。

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外部样式如何调用？

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一个样式来引用外部样式。

css行间样式,内部样式,外部样式的区别和优势各是什么?

外部样式表: 当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 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样式表

链接外部样式文件

外部引入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去控制的。

CSS外部样式链接

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;

}

效果图

标题名称：CSS外接样式,css链接外部样式表
文章位置：http://pwwzsj.com/article/dssdpei.html