HTML 中引入 CSS 的方式

4 種方式可以在 HTML 中引入 CSS。其中有 2 種方式是在 HTML 文件中直接添加 CSS 代碼，另外兩種是引入外部 CSS 文件。下面我們就來看看這些方式和它們的優(yōu)缺點(diǎn)。

內(nèi)聯(lián)方式

內(nèi)聯(lián)方式指的是直接在 HTML 標(biāo)簽中的 style 屬性中添加 CSS。

示例：

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

這通常是個(gè)很糟糕的書寫方式，它只能改變當(dāng)前標(biāo)簽的樣式，如果想要多個(gè) <div> 擁有相同的樣式，你不得不重復(fù)地為每個(gè) <div> 添加相同的樣式，如果想要修改一種樣式，又不得不修改所有的 style 中的代碼。很顯然，內(nèi)聯(lián)方式引入 CSS 代碼會(huì)導(dǎo)致 HTML 代碼變得冗長，且使得網(wǎng)頁難以維護(hù)。

嵌入方式

嵌入方式指的是在 HTML 頭部中的 <style> 標(biāo)簽下書寫 CSS 代碼。

示例：

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

嵌入方式的 CSS 只對(duì)當(dāng)前的網(wǎng)頁有效。因?yàn)?CSS 代碼是在 HTML 文件中，所以會(huì)使得代碼比較集中，當(dāng)我們寫模板網(wǎng)頁時(shí)這通常比較有利。因?yàn)椴榭茨０宕a的人可以一目了然地查看 HTML 結(jié)構(gòu)和 CSS 樣式。因?yàn)榍度氲?CSS 只對(duì)當(dāng)前頁面有效，所以當(dāng)多個(gè)頁面需要引入相同的 CSS 代碼時(shí)，這樣寫會(huì)導(dǎo)致代碼冗余，也不利于維護(hù)。

鏈接方式

鏈接方式指的是使用 HTML 頭部的 <head> 標(biāo)簽引入外部的 CSS 文件。

示例：

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

這是最常見的也是最推薦的引入 CSS 的方式。使用這種方式，所有的 CSS 代碼只存在于單獨(dú)的 CSS 文件中，所以具有良好的可維護(hù)性。并且所有的 CSS 代碼只存在于 CSS 文件中，CSS 文件會(huì)在第一次加載時(shí)引入，以后切換頁面時(shí)只需加載 HTML 文件即可。

導(dǎo)入方式

導(dǎo)入方式指的是使用 CSS 規(guī)則引入外部 CSS 文件。

示例：

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

比較鏈接方式和導(dǎo)入方式

鏈接方式（下面用 link 代替）和導(dǎo)入方式（下面用 @import 代替）都是引入外部的 CSS 文件的方式，下面我們來比較這兩種方式，并且說明為什么不推薦使用 @import。

link 屬于 HTML，通過 <link> 標(biāo)簽中的 href 屬性來引入外部文件，而 @import 屬于 CSS，所以導(dǎo)入語句應(yīng)寫在 CSS 中，要注意的是導(dǎo)入語句應(yīng)寫在樣式表的開頭，否則無法正確導(dǎo)入外部文件；
@import 是 CSS2.1 才出現(xiàn)的概念，所以如果瀏覽器版本較低，無法正確導(dǎo)入外部樣式文件；
當(dāng) HTML 文件被加載時(shí)，link 引用的文件會(huì)同時(shí)被加載，而 @import 引用的文件則會(huì)等頁面全部下載完畢再被加載；

小結(jié)：我們應(yīng)盡量使用 <link> 標(biāo)簽導(dǎo)入外部 CSS 文件，避免或者少用使用其他三種方式。

天是2021.7.14,是個(gè)好日子.好久沒發(fā)布文章了.今天發(fā)布下如何在在html頁面中使用vue3.義縣游學(xué)電子科技一直以技術(shù)文章為主.以下是h5的頁面源碼:

<html>
<script src="https://unpkg.com/vue@next"></script>

<body>
<div id="vue">
<div v-html="rhtml"></div>
<props-demo-simple></props-demo-simple>

</div>

</body>
<script>
const htmls={
data(){
return{
rhtml:"<h1>html頁面中引用VUE3的演示頁面</h1>",
}
}
}

const app=Vue.createApp(htmls)

// 簡單語法注冊(cè)或獲取全局組件.注冊(cè)還會(huì)自動(dòng)使用給定的 id 設(shè)置組件的名稱
app.component('props-demo-simple', { data() {
return {
count: 0
}
},
props: ['size', 'myMessage'],template: `
<button v-on:click="count++">
You clicked me {{ count }} times.
</button>`
}

)
app.mount("#vue")
</script>
</html>

分析下:首先<script src="https://unpkg.com/vue@next"></script>,引入vue3的腳本地址. 然后在body下的<script>中書寫vue3的代碼即可. 下圖是運(yùn)行的結(jié)果效果

ss怎么引入html

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

1. 內(nèi)聯(lián)方式：直接在HTML標(biāo)簽中的style屬性中添加CSS，即采用行內(nèi)樣式。例如：<p style="color:red;">這是紅色文字</p>。這種方式的優(yōu)點(diǎn)是可以直接在HTML文件中看到效果，但缺點(diǎn)是不夠模塊化，不便于復(fù)用和維護(hù)。

2. 內(nèi)嵌樣式：使用<style>標(biāo)簽在HTML文檔頭部（<head>和<head>之間）定義CSS樣式。例如：

<head>

<style>

p {

color: red;

}

</style>

</head>

<body>

<p>這是紅色文字</p>

</body>

這種方式的優(yōu)點(diǎn)是可以將CSS樣式與HTML內(nèi)容分離，提高代碼可讀性，但同樣存在復(fù)用和維護(hù)的問題。

3. 鏈接式：使用<link>標(biāo)簽引入外部CSS樣式表文件。具體操作步驟如下：新建一個(gè)HTML文件和一個(gè)CSS文件，將新建的CSS文件保存在一個(gè)文件夾中，回到HTML文件中，在<title><title>下方添加<link>標(biāo)簽并設(shè)置其屬性為CSS文件的路徑，保存后便實(shí)現(xiàn)了引入外部CSS文件。這種方式的優(yōu)點(diǎn)是可以實(shí)現(xiàn)代碼的復(fù)用和維護(hù)，但需要提前準(zhǔn)備好CSS文件。

4. 導(dǎo)入式：使用@import命令導(dǎo)入外部CSS樣式表。例如：<style type="text/css"> @import"mystyle.css"; </style>。需要注意的是，這里的路徑需要是正確的。這種方式可以在同一個(gè)HTML文件中引入多個(gè)CSS文件，但瀏覽器對(duì)@import的支持程度不同，可能會(huì)出現(xiàn)兼容性問題。

在線咨詢

上一篇：簡單網(wǎng)頁設(shè)計(jì)模板html
下一篇：箭頭非常漂亮的LT箭頭，環(huán)保通行意境特別喜歡......

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

HTML 中引入 CSS 的方式

您的項(xiàng)目需求