正文

css怎么引入html（css怎么引入圖片）

發(fā)布時間：2023-04-06 18:29:06 稿源：創(chuàng)意嶺閱讀： 57

大家好！今天讓小編來大家介紹下關(guān)于css怎么引入html的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀的企業(yè)，服務(wù)客戶遍布全球各地，相關(guān)業(yè)務(wù)請撥打電話：175-8598-2043，或添加微信：1454722008

文章目錄列表:

1、HTML中怎么導(dǎo)入css？
2、怎么將css文件鏈接到html
3、HTML中怎么導(dǎo)入css？
4、css 如何嵌入 HTML 中

css怎么引入html（css怎么引入圖片）

一、HTML中怎么導(dǎo)入css？

參考以下html導(dǎo)入css的方式：

HTML 中引入 CSS 的方式

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

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

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

示例：

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

嵌入方式

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

示例：

<head>

<style>

.content {

background: red;

}

</style>

</head>

嵌入方式的 CSS 只對當前的網(wǎng)頁有效。因為 CSS 代碼是在 HTML 文件中，所以會使得代碼比較集中，當我們寫模板網(wǎng)頁時這通常比較有利。因為查看模板代碼的人可以一目了然地查看 HTML 結(jié)構(gòu)和 CSS 樣式。因為嵌入的 CSS 只對當前頁面有效，所以當多個頁面需要引入相同的 CSS 代碼時，這樣寫會導(dǎo)致代碼冗余，也不利于維護。

鏈接方式

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

示例：

<head>

</head>

這是最常見的也是最推薦的引入 CSS 的方式。使用這種方式，所有的 CSS 代碼只存在于單獨的 CSS 文件中，所以具有良好的可維護性。并且所有的 CSS 代碼只存在于 CSS 文件中，CSS 文件會在第一次加載時引入，以后切換頁面時只需加載 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> 標簽中的 href 屬性來引入外部文件，而 @import 屬于 CSS，所以導(dǎo)入語句應(yīng)寫在 CSS 中，要注意的是導(dǎo)入語句應(yīng)寫在樣式表的開頭，否則無法正確導(dǎo)入外部文件；

@import 是 CSS2.1 才出現(xiàn)的概念，所以如果瀏覽器版本較低，無法正確導(dǎo)入外部樣式文件；

當 HTML 文件被加載時，link 引用的文件會同時被加載，而 @import 引用的文件則會等頁面全部下載完畢再被加載；

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

二、怎么將css文件鏈接到html

CSS的引入方式共有三種：行內(nèi)樣式、內(nèi)部樣式表、外部樣式表。

一、行內(nèi)樣式

使用style屬性引入CSS樣式。

示例：

<h1 style="color:red;">style屬性的應(yīng)用</h1>

<p style="font-size:14px;color:green;">直接在HTML標簽中設(shè)置的樣式</p>

實際在寫頁面時不提倡使用，在測試的時候可以使用。

例如：

<!DOCTYPE>

<html>

<head>

</head>

<body>

<h1 style="color:red;">Leaping Above The Water</h1>

<p style="color:red;font-size:30px;">我是p標簽</p>

</body>

</html>

二、內(nèi)部樣式表

在style標簽中書寫CSS代碼。style標簽寫在head標簽中。

示例：

<head>

h4{

color:red;

}

</style>

</head>

例如：

<!DOCTYPE>

<html>

<head>

div{

background: green;

}

</style>

</head>

<body>

<div>我是DIV</div>

</body>

</html>

三、外部樣式表

CSS代碼保存在擴展名為.css的樣式表中

HTML文件引用擴展名為.css的樣式表，有兩種方式：鏈接式、導(dǎo)入式。

語法：

1、鏈接式

2、導(dǎo)入式

@import url("css文件路徑");

</style>

例如：

<!DOCTYPE>

<html>

<head>

<title>外部樣式表</title>

@import url("css/style.css");

</style>

</head>

<body>

<ol>

</ol>

</html>

鏈接式和導(dǎo)入式的區(qū)別

<link>

1、屬于XHTML

2、優(yōu)先加載CSS文件到頁面

@import

1、屬于CSS2.1

2、先加載HTML結(jié)構(gòu)在加載CSS文件。

四、CSS中的優(yōu)先級

1、樣式優(yōu)先級

行內(nèi)樣式>內(nèi)部樣式>外部樣式(后兩者是就近原則)

例如：

行內(nèi)樣式和內(nèi)部樣式比較優(yōu)先級：

<!DOCTYPE>

<html>

<head>

<title>行內(nèi)樣式和內(nèi)部樣式表的優(yōu)先級</title>

color: blue;

}

</style>

</head>

<body>

<p style="color: red;">我是p段落</p>

</html>

瀏覽器運行效果：

css怎么引入html（css怎么引入圖片）

結(jié)論：行內(nèi)樣式優(yōu)先級高于內(nèi)部樣式表。

內(nèi)部樣式表和外部樣式表比較優(yōu)先級：

a、內(nèi)部樣式表在外部樣式表上面

<!DOCTYPE>

<html>

<head>

<title>內(nèi)部樣式表和外部樣式表的優(yōu)先級</title>

color: blue;

}

</style>

</head>

<body>

<p>我是p段落</p>

<div>我是div</div>

<ol>

</ol>

</html>

瀏覽器運行效果：

css怎么引入html（css怎么引入圖片）

b、外部樣式表在內(nèi)部樣式表上面

<!DOCTYPE>

<html>

<head>

<title>內(nèi)部樣式表和外部樣式表的優(yōu)先級</title>

color: blue;

}

</style>

</head>

<body>

<p>我是p段落</p>

<div>我是div</div>

<ol>

</ol>

</html>

瀏覽器運行效果：

css怎么引入html（css怎么引入圖片）

結(jié)論：內(nèi)部樣式表和外部樣式表使用就近原則，即誰寫在下面以誰為準。

注意：導(dǎo)入式和鏈接式的優(yōu)先級也是使用就近原則。

2、選擇器優(yōu)先級

優(yōu)先級：ID選擇器>類選擇器>標簽選擇器

<!DOCTYPE>

<html>

<head>

<title>選擇器的優(yōu)先級</title>

#a{

color: green;

}

.b{

color: yellow;

}

h4{

color: red;

}

</style>

</head>

<body>

</html>

瀏覽器運行效果：

css怎么引入html（css怎么引入圖片）

三、HTML中怎么導(dǎo)入css？

1
新建一個html文件，命名為test.html，用于講解html中如何導(dǎo)入css。
請點擊輸入圖片描述
2
在test.html文件內(nèi)，使用div創(chuàng)建一個模塊，下面將對該div進行css樣式的定義。
請點擊輸入圖片描述
3
在test.html文件內(nèi)，設(shè)置div的class屬性為mydiv，主要用于css文件對該類名進行樣式定義。
請點擊輸入圖片描述
4
新建一個css文件夾，在文件夾內(nèi)創(chuàng)建一個css文件，命名為test.css，用于編寫css樣式。
請點擊輸入圖片描述
5
在test.css文件內(nèi)，使用div的類名進行樣式定義，設(shè)置div的寬度、高度均為200px，背景顏色為黃色。
請點擊輸入圖片描述
6
在test.html文件內(nèi)，使用link標簽導(dǎo)入test.css樣式文件，href為css路徑。
請點擊輸入圖片描述
7
在瀏覽器打開test.html文件，查看實現(xiàn)的效果。

四、css 如何嵌入 HTML 中

有三種方法：

1.內(nèi)部引用

所謂內(nèi)部引用就是運用style標簽引用在同HTML頁內(nèi)<HEAD></HEAD>部分的css定義。如：

<html>

<head>

.cssstyle { font:12px;

color:#339966;

border:1px #e1763d solid;

}

</head>

<body>

<div class="cssstyle"> THIS IS A PARTS OF TEXT WHICH LINK CSS STYLE IN HEAD PART</div>

</body>

</html>

2.外部引用

外部引用就是用<link>標簽引用外部CSS文件中的樣式。如欲實現(xiàn)上述效果，可將CSS做成單獨文件。

文件CSSSTYLE.CSS

.cssstyle { font:12px;

color:#339966;

border:1px #e1763d solid;

}

然后在HTML引用它：

<html>

<head>

</head>

<body>

<div class="cssstyle"> THIS IS A PARTS OF TEXT WHICH LINK CSS STYLE IN HEAD PART</div>

</body>

</html>

使用這種方法引用要確保CSS文件和HTML文件的相對路徑完整無誤，要不然HTML文檔是不會找到CSS樣式的。

3.內(nèi)聯(lián)引用

內(nèi)聯(lián)引用其實就是在應(yīng)用CSS樣式的HTML部分直接在所做用的標簽上定義CSS樣式，這種方法最直接，但是缺點也最明顯，最大的問題就是代碼繁冗，作用域也僅僅在定義的標簽的作用范圍。如：

<p>I AM NOT GREY, WHAT COLOR AM I? :)</p>

綜上所述，CSS應(yīng)用與HTML中共有三種基本方法。在CSS學(xué)習(xí)之初，大家就必須明確這三種方法，并且形成良好的編程習(xí)慣。筆者建議大家使用外部調(diào)用的方法來引用CSS文件，這樣不僅可以提高代碼的可讀性和可維護性，還更利于搜索引擎的收錄和引用。

上述的 3 種 CSS，可以同時并用，也可以擇您所好，單一或成雙地利用。若是各 CSS 間的論述相沖突，則內(nèi)在界說的 CSS 會蓋過外在連結(jié)的 CSS ，字里行間的 CSS 會蓋過內(nèi)在界說的 CSS 。

以上就是小編對于css怎么引入html問題和相關(guān)問題的解答了，如有疑問，可撥打網(wǎng)站上的電話，或添加微信。

為何亞馬遜不建議做手機殼（亞馬遜做手機殼怎么樣）

詳情頁排版順序（詳情頁排版順序怎么設(shè)置）

電子商務(wù)設(shè)計師報考條件（電子商務(wù)設(shè)計師報考條件是什么）

三球logo（三球logoman）

產(chǎn)品包裝設(shè)計找哪家（產(chǎn)品包裝設(shè)計找哪家公司好）

設(shè)計集團有限公司（銘揚工程設(shè)計集團有限公司）

電商需要什么技術(shù)（電商需要什么技術(shù)要求）

學(xué)ui設(shè)計要什么基礎(chǔ)

QQjson卡片消息代碼（qqjson卡片發(fā)送器）

問大家

網(wǎng)頁設(shè)計懂點設(shè)計和html+css怎么發(fā)展好呢？

抖音在新加坡可以直播嗎？新加坡如何開通抖音海外直播方法

我在成都，想問一下在成都做主播簽什么公司好？

紹興和風(fēng)室外庭院設(shè)計公司有哪些？哪家公司比較靠譜點？

讓品牌有溫度、有情感
專注品牌策劃15年

css怎么引入html（css怎么引入圖片）

猜你喜歡

問大家

推薦專題

相關(guān)主題

創(chuàng)意嶺品牌策劃

提交需求1對1免費咨詢

讓品牌有溫度、有情感 專注品牌策劃15年

css怎么引入html（css怎么引入圖片）

猜你喜歡

問大家

推薦專題

相關(guān)主題

創(chuàng)意嶺品牌策劃

提交需求1對1免費咨詢

讓品牌有溫度、有情感
專注品牌策劃15年