如何把css導入html

1、html引入css文件之直接在div中使用css樣式制作div+css網(wǎng)頁

創(chuàng)新互聯(lián)公司成立于2013年，公司以網(wǎng)站設(shè)計、做網(wǎng)站、系統(tǒng)開發(fā)、網(wǎng)絡(luò)推廣、文化傳媒、企業(yè)宣傳、平面廣告設(shè)計等為主要業(yè)務(wù)，適用行業(yè)近百種。服務(wù)企業(yè)客戶上千多家，涉及國內(nèi)多個省份客戶。擁有多年網(wǎng)站建設(shè)開發(fā)經(jīng)驗。為企業(yè)提供專業(yè)的網(wǎng)站建設(shè)、創(chuàng)意設(shè)計、宣傳推廣等服務(wù)。 通過專業(yè)的設(shè)計、獨特的風格，為不同客戶提供各種風格的特色服務(wù)。

div style="border:1px red solid;"html引入css文件/div

說明：html引入css文件的這種方法不建議使用，因為會讓頁面的標簽很多，看起來很累贅，體現(xiàn)不了css的優(yōu)勢，當然如果你非常想用這種方法，在不經(jīng)常更改的地方可以用一用，但是還是不推薦。

2、html引入css文件之html中使用style自帶式

直接在header 里面寫css

style type="text/css"

div{margin: 0;padding: 0;border:1px red solid;}

/style

說明：html引入css文件的這種方法適合在頁面較少的情況下使用。優(yōu)點：速度 快，所有的css控制都是針對本頁面標簽的，沒有多余的css命令；再者不用外鏈css文件。直接在html文檔中讀取樣式。缺點如果頁面較多改版會很麻煩，單個頁 面顯得臃腫，css不能被其他html引用造成代碼量相對較多，維護也麻煩些。但是采用這種方法的公司大多有錢，對他們來說用戶量是關(guān)鍵，他們不缺人進 行復雜的維護工作。

3、html引入css文件之使用@import引用外部CSS文件

將一個獨立的.css文件引入HTML文件中，導入式使用css規(guī)則引入外部css文件，style標記也是寫在head標記中，使用的語法如下：

style type="text/css"

@import"mystyle.css"; 此處要注意.css文件的路徑

/style

4、html引入css文件之使用link引用外部CSS文件

在網(wǎng)頁的head/head標簽對中使用link標記來引入外部樣式表文件，使用html規(guī)則引入外部css。

link href="./mystyle.css" rel="stylesheet" type="text/css"/

說明：html引入css文件的這種方法就不需要style標簽，而是直接通過link一個樣式來引用外部樣式，推薦使用link來引用外部的css樣式方法。

HTML中怎么導入css？

1

新建一個html文件，命名為test.html，用于講解html中如何導入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標簽導入test.css樣式文件，href為css路徑。

請點擊輸入圖片描述

7

在瀏覽器打開test.html文件，查看實現(xiàn)的效果。

在html下導入css

html引用css方法如下

1、直接在HTML標簽中內(nèi)嵌css樣式

2、html中使用style自帶式

3、使用@import引用外部CSS文件

4、使用link引用外部CSS文件 推薦此方法

方法說明：

1、直接在html標簽元素內(nèi)嵌入css樣式

我是div css測試內(nèi)容

效果如下圖

1.jpg

2、在html頭部head部分內(nèi)style聲明插入

代碼如下：

!--

.ceshi {font-size:14px; color:#FF0000;}/*這里是設(shè)置CSS的樣式內(nèi)容*/

--

我是div css測試內(nèi)容

效果同上。

3、使用@import引用外部CSS文件方法

HTML代碼：

css引用方法實例

!--

@import url(wcss.css);/*這里是通過@import引用CSS的樣式內(nèi)容*/

--

我是div css測試內(nèi)容

Wcss.css文件內(nèi)代碼.ceshi {font-size:14px; color:#FF0000;}

4、使用link來調(diào)用外部的css文件

在head放置

來調(diào)用外部的wcss.css文件來實現(xiàn)html引用css文件

此方法就不需要style標簽，而是直接通過link一個樣式來引用外部樣式，一般推薦使用link來引用外部的css樣式方法。

在html里可以使用什么方法引入css

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

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標簽/p

/body

/html

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

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

示例：

head

style type="text/css"

h3{

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代碼保存在擴展名為.css的樣式表中

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

語法：

1、鏈接式

link type="text/css" rel="styleSheet"? href="CSS文件路徑" /

2、導入式

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" /

!--導入式--

style type="text/css"

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

/style

/head

body

ol

li1111/li

li2222/li

/ol

/html

鏈接式和導入式的區(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

meta charset="utf-8" /

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

!--內(nèi)部部樣式表--

style type="text/css"

p{

color: blue;

}

/style

/head

body

!--行內(nèi)樣式--

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

/html

瀏覽器運行效果：

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

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

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

!DOCTYPE

html

head

meta charset="utf-8" /

title內(nèi)部樣式表和外部樣式表的優(yōu)先級/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

li1111/li

li2222/li

/ol

/html

瀏覽器運行效果：

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

!DOCTYPE

html

head

meta charset="utf-8" /

title內(nèi)部樣式表和外部樣式表的優(yōu)先級/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

li1111/li

li2222/li

/ol

/html

瀏覽器運行效果：

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

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

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

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

!DOCTYPE

html

head

meta charset="utf-8" /

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

style type="text/css"

#a{

color: green;

}

.b{

color: yellow;

}

h2{

color: red;

}

/style

/head

body

h2111/h2 !--紅色--

h2 id="a" class="b"222/h2 !--綠色--

h2 class="b"333/h2!--黃色--

/html

瀏覽器運行效果：

html中如何導入css

1、使用鏈接式

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

2、使用導入式

style type="text/css"

@import "style.css"

/style

擴展資料：

二者的區(qū)別

導入式和鏈接式的目的都是將一個獨立的css文件引入一個文件中，二者的區(qū)別不大，事實上，二者最大的區(qū)別在于鏈接式使用html的標記引入外部css文件，而使用導入式則是使用css規(guī)則引入外部css文件，因此它們的語法也不同。

采用這兩種方式后的現(xiàn)實效果也略有區(qū)別。使用鏈接式時，會在裝載頁面主體部分 之前裝載css文件，這樣現(xiàn)實出來的頁面從一開始就是帶有樣式效果的，而使用導入式時，會在整個頁面裝載完成之后再裝載css文件，

對于有的瀏覽器來說， 在一些情況下，如果頁面文件的體積比較大，則會出現(xiàn)先現(xiàn)實無樣式的頁面，閃爍一下之后再出現(xiàn)設(shè)置樣式的效果。從瀏覽者的感受來說，這是使用導入式的一個缺陷。

在HTML中使用CSS樣式的幾種方式

在html網(wǎng)頁中引入引入css主要有以下四種方式：

（1）行內(nèi)式

網(wǎng)頁中css的導入方式

（2）嵌入式

嵌入式一般寫在head中，對于單個頁面來說，這種方式很方便。

（3）導入式

!-- 導入外部樣式：在內(nèi)部樣式表的標記之間導入一個外部樣式表，導入時用@import。 --

（4）鏈接式

導入式和鏈接式差不多，都是從外部引入css文件。但是鏈接式對于客戶端用戶瀏覽網(wǎng)站時，效果會好些。

新聞名稱：html導入css樣式表的簡單介紹
轉(zhuǎn)載注明：http://chinadenli.net/article33/dsieeps.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動態(tài)網(wǎng)站、品牌網(wǎng)站建設(shè)、網(wǎng)站設(shè)計公司、標簽優(yōu)化、用戶體驗、面包屑導航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)