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引入方式

您的項目需求