HTML 中引入 CSS 的方式

4 种方式可以在 HTML 中引入 CSS。其中有 2 种方式是在 HTML 文件中直接添加 CSS 代码，另外两种是引入外部 CSS 文件。下面我们就来看看这些方式和它们的优缺点。

内联方式

内联方式指的是直接在 HTML 标签中的 style 属性中添加 CSS。

示例：

<div style="background: red"></div>

这通常是个很糟糕的书写方式，它只能改变当前标签的样式，如果想要多个 <div> 拥有相同的样式，你不得不重复地为每个 <div> 添加相同的样式，如果想要修改一种样式，又不得不修改所有的 style 中的代码。很显然，内联方式引入 CSS 代码会导致 HTML 代码变得冗长，且使得网页难以维护。

嵌入方式

嵌入方式指的是在 HTML 头部中的 <style> 标签下书写 CSS 代码。

示例：

<head>
 <style>
 .content {
 background: red;
 }
 </style>
</head>

嵌入方式的 CSS 只对当前的网页有效。因为 CSS 代码是在 HTML 文件中，所以会使得代码比较集中，当我们写模板网页时这通常比较有利。因为查看模板代码的人可以一目了然地查看 HTML 结构和 CSS 样式。因为嵌入的 CSS 只对当前页面有效，所以当多个页面需要引入相同的 CSS 代码时，这样写会导致代码冗余，也不利于维护。

链接方式

链接方式指的是使用 HTML 头部的 <head> 标签引入外部的 CSS 文件。

示例：

<head>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>

这是最常见的也是最推荐的引入 CSS 的方式。使用这种方式，所有的 CSS 代码只存在于单独的 CSS 文件中，所以具有良好的可维护性。并且所有的 CSS 代码只存在于 CSS 文件中，CSS 文件会在第一次加载时引入，以后切换页面时只需加载 HTML 文件即可。

导入方式

导入方式指的是使用 CSS 规则引入外部 CSS 文件。

示例：

<style>
 @import url(style.css);
</style>

比较链接方式和导入方式

链接方式（下面用 link 代替）和导入方式（下面用 @import 代替）都是引入外部的 CSS 文件的方式，下面我们来比较这两种方式，并且说明为什么不推荐使用 @import。

link 属于 HTML，通过 <link> 标签中的 href 属性来引入外部文件，而 @import 属于 CSS，所以导入语句应写在 CSS 中，要注意的是导入语句应写在样式表的开头，否则无法正确导入外部文件；
@import 是 CSS2.1 才出现的概念，所以如果浏览器版本较低，无法正确导入外部样式文件；
当 HTML 文件被加载时，link 引用的文件会同时被加载，而 @import 引用的文件则会等页面全部下载完毕再被加载；

小结：我们应尽量使用 <link> 标签导入外部 CSS 文件，避免或者少用使用其他三种方式。

ss怎么引入html

在HTML中引入CSS的方法主要有四种：

1. 内联方式：直接在HTML标签中的style属性中添加CSS，即采用行内样式。例如：<p style="color:red;">这是红色文字</p>。这种方式的优点是可以直接在HTML文件中看到效果，但缺点是不够模块化，不便于复用和维护。

2. 内嵌样式：使用<style>标签在HTML文档头部（<head>和<head>之间）定义CSS样式。例如：

<head>

<style>

p {

color: red;

}

</style>

</head>

<body>

<p>这是红色文字</p>

</body>

这种方式的优点是可以将CSS样式与HTML内容分离，提高代码可读性，但同样存在复用和维护的问题。

3. 链接式：使用<link>标签引入外部CSS样式表文件。具体操作步骤如下：新建一个HTML文件和一个CSS文件，将新建的CSS文件保存在一个文件夹中，回到HTML文件中，在<title><title>下方添加<link>标签并设置其属性为CSS文件的路径，保存后便实现了引入外部CSS文件。这种方式的优点是可以实现代码的复用和维护，但需要提前准备好CSS文件。

4. 导入式：使用@import命令导入外部CSS样式表。例如：<style type="text/css"> @import"mystyle.css"; </style>。需要注意的是，这里的路径需要是正确的。这种方式可以在同一个HTML文件中引入多个CSS文件，但浏览器对@import的支持程度不同，可能会出现兼容性问题。

SS文本属性

CSS text（文本）属性就是设置文本的外观，比如字体颜色、对齐方式、缩进、行间距等。

文本颜色

属性名：color。

属性值：

颜色英文单词：color：red;

16进制颜色值：color：#000000;

RGB代码：color: rgb(255,255,255)或rgb(100%,0%,0%)

一般在开发中常用的是十六进制写法。

代码示例：

<head>
  <style>
  		/* 文本颜色属性 */
        .red {
            color: red;
        }
        .colorNum {
            color: #f00;
        }
        .colorRgb{
            color: rgb(255, 0, 0);
        }
  </style>  
</head>
<body>
     <!-- 文本颜色属性 -->
    <p class="red">我是文本属性的单词颜色设置</p>
    <p class="colorNum">我是文本属性的16进制颜色设置</p>
    <p class="colorRgb">我说文本属性的rgb颜色设置</p>
</body>

代码运行界面

文本对齐方式

属性名：text-align。

属性值：

“text-align: left”：默认值，文本左对齐。

“text-align：center”：文本居中对齐。

“text-align：right”：文本右对齐。

代码示例：

<head>
  <style>
  		/* 文本对齐方式 */
        .l {
            text-align: left;
        }
        .cen {
            text-align: center;
        }
        .ri {
            text-align: right;
        }
  </style>  
</head>
<body>
    <!-- 文本对齐方式 -->
    <p class="l">文本左对齐</p>
    <p class="cen">文本居中对齐</p>
    <p class="ri">文本右对齐</p>
</body>

运行界面：

文本装饰

属性：text-decoration。

属性值：

“text-decoration：none”：默认值，没有装饰线。

“text-decoration：underline”：给文本添加下划线。

注意：a标签中自带下划线，可以使用默认值属性去除a标签的下划线。

“text-decoration：overline”：给文本添加上划线。

“text-decoration：line-through”：给文本添加删除线。

代码示例：

<head>
  <style>
  		/* 文本装饰线 */
        .nor {
            text-decoration: none;
        }
        .underl {
            text-decoration: underline;
        }
        .upl {
            text-decoration: overline;
        }
        .lineTh {
            text-decoration: line-through;
        }
  </style>  
</head>
<body>
    <!-- 文本装饰 -->
    <p class="nor">文本装饰线：默认状态</p>
    <p class="underl">文本装饰线：文本添加下划线</p>
    <p class="lineTh">文本装饰线：文本添加删除线</p>
    <p class="upl">文本装饰线：文本添加上划线</p>
    <a href="#">我是超链接标签，文本自带下划线</a><br>
    <a href="#" class="nor">我是超链接标签，文本自带下划线。使用默认值属性，可去除文本下划线</a>
</body>

运行界面：

文本缩进

属性名：text-indent。通常指段落首行缩进。

属性值：px或em。

em是一个相对单位，

如果当前元素已经设置文字大小，就按照当前元素1个文字的大小显示缩进。

如果当前元素中没有设置，则按照父元素的1个文字大小，即1个em=16px显示缩进。

代码示例：

<head>
  <style>
  		/* 文本缩进 */
        .indEm {
            text-indent: 2em;
            /* em是一个相对单位，
            在没有设置文字大小时，按照默认字体大小，即16px显示。
            设置了文字大小，则按照设置的文字大小，几个em就是几个文字大小进行显示。
            */
        }
        .indPx {
            /* 像素是绝对单位，设置几就是几 */
            text-indent: 32px;
        }
  </style>  
</head>
<body>
    <!-- 文本缩进 -->
    <p class="indPx">我是段落标签，试试首行缩进属性。一般指的是首行缩进，段落的第一行进行缩进。
        我是段落标签，试试首行缩进属性。一般指的是首行缩进，段落的第一行进行缩进。
        我是段落标签，试试首行缩进属性。一般指的是首行缩进，段落的第一行进行缩进。
        我是段落标签，试试首行缩进属性。一般指的是首行缩进，段落的第一行进行缩进。
        我是段落标签，试试首行缩进属性。一般指的是首行缩进，段落的第一行进行缩进。
        我是段落标签，试试首行缩进属性。一般指的是首行缩进，段落的第一行进行缩进。
        我是段落标签，试试首行缩进属性。一般指的是首行缩进，段落的第一行进行缩进。
    </p>
    <p class="indEm">我是段落标签，试试首行缩进属性。一般指的是首行缩进，段落的第一行进行缩进。
        我是段落标签，试试首行缩进属性。一般指的是首行缩进，段落的第一行进行缩进。
        我是段落标签，试试首行缩进属性。一般指的是首行缩进，段落的第一行进行缩进。
        我是段落标签，试试首行缩进属性。一般指的是首行缩进，段落的第一行进行缩进。
        我是段落标签，试试首行缩进属性。一般指的是首行缩进，段落的第一行进行缩进。
        我是段落标签，试试首行缩进属性。一般指的是首行缩进，段落的第一行进行缩进。
        我是段落标签，试试首行缩进属性。一般指的是首行缩进，段落的第一行进行缩进。
    </p>
</body>

运行界面：

行间距

属性名：ling-height。用于设置文本的行高。即行与行之间的距离。

行间距=文本高度+上间距+下间距。（上间距=下间距）

行间距调整就是设置的上下间距的高

属性值：px或em。

代码示例：

<head>
  <style>
  		/* 行间距 */
        .lH {
            line-height: 3em;
        }
  </style>  
</head>
<body>
    <!-- 行间距 -->
    <p class="lH">
        我是段落标签，测试行间距属性。我是段落标签，测试行间距属性。我是段落标签，测试行间距属性。
        我是段落标签，测试行间距属性。我是段落标签，测试行间距属性。我是段落标签，测试行间距属性。
        我是段落标签，测试行间距属性。我是段落标签，测试行间距属性。我是段落标签，测试行间距属性。
        我是段落标签，测试行间距属性。我是段落标签，测试行间距属性。我是段落标签，测试行间距属性。
         我是段落标签，测试行间距属性。我是段落标签，测试行间距属性。我是段落标签，测试行间距属性。
          我是段落标签，测试行间距属性。我是段落标签，测试行间距属性。我是段落标签，测试行间距属性。
    </p>
</body>

运行界面：

CSS引入方式

分为三类：行内样式表（行内式）、内部样式表（内嵌式）、外部样式表（链接式）

行内样式表：

位置：直接写在元素的开始标签中。

特点：书写内容少，权重级别高，只能控制一个标签，结构样式混乱。

语法：style=”color: red;”

注意：多个属性之间使用空格分隔。

代码示例：

<p style="color: red;">行内样式表：在使用属性的元素开始标签中直接设置属性。如给字体设置红色属性。</p>

<p style="color: red; font-size:28px;">行内样式表：在使用属性的元素开始标签中直接设置属性。如给字体设置红色属性和字体28px。</p>

内部样式表（内嵌式）

位置：在head标签下，和title标签并列。样式属性均包含在style标签中。

特点：部分结构与样式相分离，还是在同一html文件上。

语法：

<style>
p {
color: red;
font-size: 28px;
}
</style>

代码示例：

<head>
 	<title></title>
	<style>
        .styleP {
            color: red;
            font-size: 32px;;
        }
	</style>
</head>
<body>
	<!-- 内部样式表 -->
    <p class="styleP">内部样式表：样式属性写在同一个html文件中的head标签里，和title标签并列。</p>
</body>

外部样式表（链接式）

第一步：创建index.css文件，在文件中输入样式属性，不用任何标签。

第二步：在html文件的head标签中，添加link标签，引入css文件。

第三步：给html文件中需要添加属性的元素添加选择器名称。

特点：结构和样式全局分离，一个css文件可以控制多个html页面。

注意：在css文件中只有样式没有标签，即直接书写标签器和属性，不要写style标签。

代码示例：

第一步：新建index.css文件，设置样式属性。

* {
    margin: 0;
    padding: 0;
}
.linC {
    font-size: 32px;
    color: blue;
}

第二步：在html文件的head标签中添加link标签引用css文件。

<head>
  	<title>CSS样式引入方式</title>
    <!-- 外部样式表 -->
    <link rel="stylesheet" href="./index.css">
</head>

第三步：在标签中调用属性。

<body>
   	<!-- 外部样式表 -->
    <p class="linC">
        外部样式表：<br>
        第一步：新建一个css文件，文件中直接编辑样式属性，不需要添加style标签。<br>
        第二步：使用css文件的html文档，应该在其head标签中添加link标签选择css文件的存储位置,<br>
        第三步：调用css文件中的样式。
    </p>
</body>

运行界面：

以上就是今天学习的内容，明天继续学习CSS的相关内容，今天就到这里了，各位晚安！

在线咨询

上一篇：vbs代码教程讲解：及好玩的vbs代码脚本
下一篇：Vue 3 进阶用法：Provide / Inject 机制

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML 中引入 CSS 的方式

SS文本属性

CSS引入方式

您的项目需求