CSS的三種引入方式

2021-09-29 11:31:56 字數 941 閱讀 5478

1,行內式

直接寫在html標籤中,控制當前標籤,對其他標籤不起作用

我是盒子

2,內嵌式

一般寫在head標籤中,但理論上寫在什麼位置都可以,可以控制整個頁面的樣式

<

!doctype html>

"en"

>

"utf-8"

>

document<

/title>

#pink

<

/style>

<

/head>

"pink"

>我是盒子<

/div>

<

/body>

<

/html>

3,外鏈式

css樣式全部放在擴充套件名為css的檔案中,只要通過link標籤引入這個頁面,這個css樣式檔案就可以控制當前頁面,由此可推,外鏈式不僅可以控制乙個頁面,也可以用來控制整個站點

link標籤放在head標籤內,具有三個屬性

1,rel,指定當前頁面和被鏈結檔案的關係,rel=「stylesheet」就表示鏈結的檔案是當前頁面的樣式表檔案

2,type,指定被鏈結的檔案為什麼型別,type=「text/css」,表示被了解檔案是乙個css樣式表,可以省略

3,href,定義外部樣式表的路徑,具體是絕對路徑還是相對路徑,據實際情況而定

4,三種引入css方式的區別

引入方式

特點行內式

權重是最高的,但沒有實現樣式和結構的分離,且只能控制當前標籤,如果全部頁面都使用行內式,會造成**的冗餘

內嵌式沒有完全實現樣式和結構的分離,控制當前頁面的樣式

外鏈式權重和內嵌式一樣,實現了樣式和結構的完全分離,可以控制整個站點的樣式

css三種引入方式

行內 標籤內部 head內 style標籤 link 引入外部 href rel stylesheet style type import url style 選擇類 選擇id 一 三種css樣式規則的定義語法 名稱 語法 使用方式 1 標記選擇器 標記名稱 p2 id選擇器 id名稱 3 類選擇器...

CSS的三種引入方式

內聯css也稱為行內css或者行級css,它直接在標籤內引入。優點 便捷 高效 缺點 不能夠重用樣式,行數多的時候不建議使用 頁級css也稱為內部css,整體放在head標籤裡面,在style標籤裡面定義樣式,作用範圍僅限於本頁面。缺點 可維護性差 外聯css也稱為外部css,在實際專案中通常使用此...

CSS引入的三種方式

目的 為了把樣式和內容分開,並且使網頁元素更加豐富,引入了css css頁面引入有三種方式 1 內聯式 比較不常用,因為內容和樣式仍然在一起,不方便。示例 傳統布局 使用table來做整體頁面的布局 總結 這種方式來製作頁面現在也不是很多了,感覺並不是很高效。需要先用photoshop量出頁面布局具...