-
讓品牌有溫度、有情感
專(zhuān)注品牌策劃15年
-
當(dāng)前位置：首頁(yè) > 創(chuàng)意學(xué)院 > 景觀設(shè)計(jì) > 專(zhuān)題列表 > 正文
1
新建一個(gè)html文件，命名為test.html，用于講解html中如何導(dǎo)入css。
請(qǐng)點(diǎn)擊輸入圖片描述
2
在test.html文件內(nèi)，使用div創(chuàng)建一個(gè)模塊，下面將對(duì)該div進(jìn)行css樣式的定義。
請(qǐng)點(diǎn)擊輸入圖片描述
3
在test.html文件內(nèi)，設(shè)置div的class屬性為mydiv，主要用于css文件對(duì)該類(lèi)名進(jìn)行樣式定義。
請(qǐng)點(diǎn)擊輸入圖片描述
4
新建一個(gè)css文件夾，在文件夾內(nèi)創(chuàng)建一個(gè)css文件，命名為test.css，用于編寫(xiě)css樣式。
請(qǐng)點(diǎn)擊輸入圖片描述
5
在test.css文件內(nèi)，使用div的類(lèi)名進(jìn)行樣式定義，設(shè)置div的寬度、高度均為200px，背景顏色為黃色。
請(qǐng)點(diǎn)擊輸入圖片描述
6
在test.html文件內(nèi)，使用link標(biāo)簽導(dǎo)入test.css樣式文件，href為css路徑。
請(qǐng)點(diǎn)擊輸入圖片描述
7
在瀏覽器打開(kāi)test.html文件，查看實(shí)現(xiàn)的效果。
css怎么引入html（css怎么引入圖片）
發(fā)布時(shí)間：2023-04-06 18:29:06
稿源：
創(chuàng)意嶺 閱讀：
57
大家好！今天讓小編來(lái)大家介紹下關(guān)于css怎么引入html的問(wèn)題，以下是小編對(duì)此問(wèn)題的歸納整理，讓我們一起來(lái)看看吧。
創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀的企業(yè)，服務(wù)客戶遍布全球各地，相關(guān)業(yè)務(wù)請(qǐng)撥打電話：175-8598-2043，或添加微信：1454722008
文章目錄列表:
一、HTML中怎么導(dǎo)入css？
參考以下html導(dǎo)入css的方式：
HTML 中引入 CSS 的方式
有 4 種方式可以在 HTML 中引入 CSS。其中有 2 種方式是在 HTML 文件中直接添加 CSS 代碼，另外兩種是引入 外部 CSS 文件。下面我們就來(lái)看看這些方式和它們的優(yōu)缺點(diǎn)。
內(nèi)聯(lián)方式
內(nèi)聯(lián)方式指的是直接在 HTML 標(biāo)簽中的 style 屬性中添加 CSS。
示例：
<div style="background: red"></div>
這通常是個(gè)很糟糕的書(shū)寫(xiě)方式，它只能改變當(dāng)前標(biāo)簽的樣式，如果想要多個(gè) <div> 擁有相同的樣式，你不得不重復(fù)地為每個(gè) <div>添加相同的樣式，如果想要修改一種樣式，又不得不修改所有的 style 中的代碼。很顯然，內(nèi)聯(lián)方式引入 CSS 代碼會(huì)導(dǎo)致 HTML 代碼變得冗長(zhǎng)，且使得網(wǎng)頁(yè)難以維護(hù)。
嵌入方式
嵌入方式指的是在 HTML 頭部中的 <style> 標(biāo)簽下書(shū)寫(xiě) CSS 代碼。
示例：
<head>
<style>
.content {
background: red;
}
</style>
</head>
嵌入方式的 CSS 只對(duì)當(dāng)前的網(wǎng)頁(yè)有效。因?yàn)?CSS 代碼是在 HTML 文件中，所以會(huì)使得代碼比較集中，當(dāng)我們寫(xiě)模板網(wǎng)頁(yè)時(shí)這通常比較有利。因?yàn)椴榭茨０宕a的人可以一目了然地查看 HTML 結(jié)構(gòu)和 CSS 樣式。因?yàn)榍度氲?CSS 只對(duì)當(dāng)前頁(yè)面有效，所以當(dāng)多個(gè)頁(yè)面需要引入相同的 CSS 代碼時(shí)，這樣寫(xiě)會(huì)導(dǎo)致代碼冗余，也不利于維護(hù)。
鏈接方式
鏈接方式指的是使用 HTML 頭部的 <head> 標(biāo)簽引入外部的 CSS 文件。
示例：
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
這是最常見(jiàn)的也是最推薦的引入 CSS 的方式。使用這種方式，所有的 CSS 代碼只存在于單獨(dú)的 CSS 文件中，所以具有良好的可維護(hù)性。并且所有的 CSS 代碼只存在于 CSS 文件中，CSS 文件會(huì)在第一次加載時(shí)引入，以后切換頁(yè)面時(shí)只需加載 HTML 文件即可。
導(dǎo)入方式
導(dǎo)入方式指的是使用 CSS 規(guī)則引入外部 CSS 文件。
示例：
<style>
@import url(style.css);
</style>
比較鏈接方式和導(dǎo)入方式
鏈接方式（下面用 link 代替）和導(dǎo)入方式（下面用 @import 代替）都是引入外部的 CSS 文件的方式，下面我們來(lái)比較這兩種方式，并且說(shuō)明為什么不推薦使用 @import。
link 屬于 HTML，通過(guò) <link> 標(biāo)簽中的 href 屬性來(lái)引入外部文件，而 @import 屬于 CSS，所以導(dǎo)入語(yǔ)句應(yīng)寫(xiě)在 CSS 中，要注意的是導(dǎo)入語(yǔ)句應(yīng)寫(xiě)在樣式表的開(kāi)頭，否則無(wú)法正確導(dǎo)入外部文件；
@import 是 CSS2.1 才出現(xiàn)的概念，所以如果瀏覽器版本較低，無(wú)法正確導(dǎo)入外部樣式文件；
當(dāng) HTML 文件被加載時(shí)，link 引用的文件會(huì)同時(shí)被加載，而 @import 引用的文件則會(huì)等頁(yè)面全部下載完畢再被加載；
小結(jié)：我們應(yīng)盡量使用 <link> 標(biāo)簽導(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標(biāo)簽中設(shè)置的樣式</p>
實(shí)際在寫(xiě)頁(yè)面時(shí)不提倡使用，在測(cè)試的時(shí)候可以使用。
例如：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>行內(nèi)樣式</title>
</head>
<body>
<!--使用行內(nèi)樣式引入CSS-->
<h1 style="color:red;">Leaping Above The Water</h1>
<p style="color:red;font-size:30px;">我是p標(biāo)簽</p>
</body>
</html>
二、內(nèi)部樣式表
在style標(biāo)簽中書(shū)寫(xiě)CSS代碼。style標(biāo)簽寫(xiě)在head標(biāo)簽中。
示例：
<head>
<style type="text/css">
h4{
color:red;
}
</style>
</head>
例如：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>內(nèi)部樣式表</title>
<!--使用內(nèi)部樣式表引入CSS-->
<style type="text/css">
div{
background: green;
}
</style>
</head>
<body>
<div>我是DIV</div>
</body>
</html>
三、外部樣式表
CSS代碼保存在擴(kuò)展名為.css的樣式表中
HTML文件引用擴(kuò)展名為.css的樣式表，有兩種方式：鏈接式、導(dǎo)入式。
語(yǔ)法：
1、鏈接式
<link type="text/css" rel="styleSheet" href="CSS文件路徑" />
2、導(dǎo)入式
<style type="text/css">
@import url("css文件路徑");
</style>
例如：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>外部樣式表</title>
<!--鏈接式:推薦使用-->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--導(dǎo)入式-->
<style type="text/css">
@import url("css/style.css");
</style>
</head>
<body>
<ol>
<li>1111</li>
<li>2222</li>
</ol>
</html>
鏈接式和導(dǎo)入式的區(qū)別
<link>
1、屬于XHTML
2、優(yōu)先加載CSS文件到頁(yè)面
@import
1、屬于CSS2.1
2、先加載HTML結(jié)構(gòu)在加載CSS文件。
四、CSS中的優(yōu)先級(jí)
1、樣式優(yōu)先級(jí)
行內(nèi)樣式>內(nèi)部樣式>外部樣式(后兩者是就近原則)
例如：
行內(nèi)樣式和內(nèi)部樣式比較優(yōu)先級(jí)：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>行內(nèi)樣式和內(nèi)部樣式表的優(yōu)先級(jí)</title>
<!--內(nèi)部部樣式表-->
<style type="text/css">
p{
color: blue;
}
</style>
</head>
<body>
<!--行內(nèi)樣式-->
<p style="color: red;">我是p段落</p>
</html>
瀏覽器運(yùn)行效果：
結(jié)論：行內(nèi)樣式優(yōu)先級(jí)高于內(nèi)部樣式表。
內(nèi)部樣式表和外部樣式表比較優(yōu)先級(jí)：
a、內(nèi)部樣式表在外部樣式表上面
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>內(nèi)部樣式表和外部樣式表的優(yōu)先級(jí)</title>
<!--內(nèi)部部樣式表-->
<style type="text/css">
p{
color: blue;
}
</style>
<!--外部樣式表-->
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<p>我是p段落</p>
<div>我是div</div>
<ol>
<li>1111</li>
<li>2222</li>
</ol>
</html>
瀏覽器運(yùn)行效果：
b、外部樣式表在內(nèi)部樣式表上面
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>內(nèi)部樣式表和外部樣式表的優(yōu)先級(jí)</title>
<!--外部樣式表-->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--內(nèi)部部樣式表-->
<style type="text/css">
p{
color: blue;
}
</style>
</head>
<body>
<p>我是p段落</p>
<div>我是div</div>
<ol>
<li>1111</li>
<li>2222</li>
</ol>
</html>
瀏覽器運(yùn)行效果：
結(jié)論：內(nèi)部樣式表和外部樣式表使用就近原則，即誰(shuí)寫(xiě)在下面以誰(shuí)為準(zhǔn)。
注意：導(dǎo)入式和鏈接式的優(yōu)先級(jí)也是使用就近原則。
2、選擇器優(yōu)先級(jí)
優(yōu)先級(jí)：ID選擇器>類(lèi)選擇器>標(biāo)簽選擇器
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>選擇器的優(yōu)先級(jí)</title>
<style type="text/css">
#a{
color: green;
}
.b{
color: yellow;
}
h4{
color: red;
}
</style>
</head>
<body>
<h4>111</h4> <!--紅色-->
<h4 id="a" class="b">222</h4> <!--綠色-->
<h4 class="b">333</h4><!--黃色-->
</html>
瀏覽器運(yùn)行效果：
三、HTML中怎么導(dǎo)入css？
四、css 如何嵌入 HTML 中
有三種方法：
1.內(nèi)部引用
所謂內(nèi)部引用就是運(yùn)用style標(biāo)簽引用在同HTML頁(yè)內(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>標(biāo)簽引用外部CSS文件中的樣式。如欲實(shí)現(xiàn)上述效果，可將CSS做成單獨(dú)文件。
文件CSSSTYLE.CSS
.cssstyle { font:12px;
color:#339966;
border:1px #e1763d solid;
}
然后在HTML引用它：
<html>
<head>
<link rel="stylesheet" type="text/css" href="cssstyle.css">
</head>
<body>
<div class="cssstyle"> THIS IS A PARTS OF TEXT WHICH LINK CSS STYLE IN HEAD PART</div>
</body>
</html>
使用這種方法引用要確保CSS文件和HTML文件的相對(duì)路徑完整無(wú)誤，要不然HTML文檔是不會(huì)找到CSS樣式的。
3.內(nèi)聯(lián)引用
內(nèi)聯(lián)引用其實(shí)就是在應(yīng)用CSS樣式的HTML部分直接在所做用的標(biāo)簽上定義CSS樣式，這種方法最直接，但是缺點(diǎn)也最明顯，最大的問(wèn)題就是代碼繁冗，作用域也僅僅在定義的標(biāo)簽的作用范圍。如：
<p style="color:#ccc">THIS TEXT IS GREY</p>
<p>I AM NOT GREY, WHAT COLOR AM I? :)</p>
綜上所述，CSS應(yīng)用與HTML中共有三種基本方法。在CSS學(xué)習(xí)之初，大家就必須明確這三種方法，并且形成良好的編程習(xí)慣。筆者建議大家使用外部調(diào)用的方法來(lái)引用CSS文件，這樣不僅可以提高代碼的可讀性和可維護(hù)性，還更利于搜索引擎的收錄和引用。
上述的 3 種 CSS，可以同時(shí)并用，也可以擇您所好，單一或成雙地利用。若是各 CSS 間的論述相沖突，則內(nèi)在界說(shuō)的 CSS 會(huì)蓋過(guò)外在連結(jié)的 CSS ，字里行間的 CSS 會(huì)蓋過(guò) 內(nèi)在界說(shuō)的 CSS 。
以上就是小編對(duì)于css怎么引入html問(wèn)題和相關(guān)問(wèn)題的解答了，如有疑問(wèn)，可撥打網(wǎng)站上的電話，或添加微信。
推薦閱讀：
長(zhǎng)安cs75插上u盤(pán)為啥不能聽(tīng)歌（長(zhǎng)安cs75插優(yōu)盤(pán)放不出歌）
猜你喜歡
產(chǎn)品詳情頁(yè)一般分為幾個(gè)板塊（產(chǎn)品詳情頁(yè)一般分為幾個(gè)板塊構(gòu)成）
為何亞馬遜不建議做手機(jī)殼（亞馬遜做手機(jī)殼怎么樣）
詳情頁(yè)排版順序（詳情頁(yè)排版順序怎么設(shè)置）
電子商務(wù)設(shè)計(jì)師報(bào)考條件（電子商務(wù)設(shè)計(jì)師報(bào)考條件是什么）
產(chǎn)品包裝設(shè)計(jì)找哪家（產(chǎn)品包裝設(shè)計(jì)找哪家公司好）
設(shè)計(jì)集團(tuán)有限公司（銘揚(yáng)工程設(shè)計(jì)集團(tuán)有限公司）
贛公網(wǎng)安備 50019002502384號(hào)
