CSS引入HTML的三种方式，实例在线编辑

CSS引入HTML的三种方式

CSS引入HTML文档之中以对HTML进行样式设置的方法这里介绍三种，分别是引入外部.css后缀的文件、通过style标签进行引入，以及通过元素的style属性进行设置，一般又被称为链接式、嵌入式和行内式。下面将对着三种方式进行一一地介绍。

外部引入CSS文件，链接式

从外部引入css文件到HTML是比较常用的引入css文件的方式，好处在于便于修改和维护CSS样式，而且网页加载完成后浏览器会对该CSS文件进行缓存，下载再浏览该网页或浏览使用同样CSS文件的网页的时候，就可以减少一些加载的时间。从外部引入css文件的语法：

其中filepath一般情况下为当前文件相对于css文件的相对路径。

从外部引入CSS文件实例代码，及在线编辑器

<!--<link rel="stylesheet" href="../../static/css/bootstrap-3.4.1-dist/css/bootstrap.min.css">-->
<!-- 这里使用的是bootstrap前端框架的css，之所以进行注释，是因为该网页的前面已经引入该文件了，不必重复引入。其中，第一个按钮使用了类选择器添加了bootstrap中的btn和btn-default样式，第二个按钮则没有添加任何其它的样式。-->
<button class='btn btn-default'>Say Hello</button><br><br>
<button>Say Hello</button>

<style>标签引入CSS样式，嵌入式

通过<sytle>标签引入的CSS样式一般情况下只能用于当前网页，而不能像引入.css文件那样可以让不同的网页进行应用，实例如下：

<p id='p1'>笨鸟工具，x1y1z1.com</p>
<p id='p2'>python全栈，这里是前端的CSS</p>
<style>
  #p1{font-size:2.5em;color:blue}
  #p2{color:skyblue}
</style>

元素style属性设置样式，行内式

鄙人在web前端的开发阶段，一般情况下会将HTML的层叠样式直接设置在元素的style属性当中，因为是开发的阶段，便于调试，待到正式上线的时候，如果是很多网页都会用到的样式，一般又会将其写进css文件当中，然后通过外部链接的方式进行引入。

<p style='color:blue;font-size:1.5em'>笨鸟工具，x1y1z1.com，python全栈</p>

hot：热门