html中引入CSS樣式表的3種方式

2021-10-02 21:19:35 字數 1084 閱讀 3613

樣式表

優點缺點

使用情況

控制範圍

行內樣式表

書寫方便,權重高

沒有實現樣式和結構相分離

較少控制乙個標籤(少)

內部樣式表

部分結構和樣式相分離

沒有徹底分離

較多控制乙個頁面(中)

外部樣式表

完全實現結構和樣式相分離

需要引入

最多,強烈推薦

控制整個站點(多)

《標籤名

style

="屬性1

:屬性值1;

屬性2:屬性值2;

屬性3:屬性值3;

">

內容 標籤名

>

實際上任何html標籤都擁有style屬性,用來設定行內式。

"color: red; font-size: 12px;">青春不常在,抓緊談戀愛

缺點:

>

type

="text/css"

>

選擇器(選擇的標籤)

style

>

head

>

缺點:沒有徹底分離

>

rel=

"stylesheet"

type

="text/css"

href

="css檔案路徑"

>

head

>

屬性

作用rel

定義當前文件與被鏈結文件之間的關係,在這裡需要指定為「stylesheet」,表示被鏈結的文件是乙個樣式表檔案。

type

定義所鏈結文件的型別,在這裡需要指定為「text/css」,表示鏈結的外部檔案為css樣式表。我們都可以省略

href

定義所鏈結外部樣式表檔案的url,可以是相對路徑,也可以是絕對路徑。

CSS建立(樣式表引入)

一 如何插入樣式表 1.外部樣式表 2.內部樣式表 3.內聯樣式 二 外部樣式表詳解 每個頁面使用標籤鏈結到樣式表,標籤在 文件的 頭部。瀏覽器會從檔案mystyle.css中讀到樣式宣告,並格式化檔案。外部樣式表mystyle.css注意事項 1 檔案不能包含任何html標籤。2 樣式表應該以.c...

css樣式表的引入方式

一般來說,css 有兩種樣式表的引入方式,在這裡我記錄一下,比較這兩種引入方式的區別 link rel stylesheet type text css href css檔案 import css檔案 顯然第一種方式似乎是更常見的。事實上,使用這兩種方式引入css檔案的效果都是一致的,區別在於是ht...

css筆記之引入css樣式表

css cascading style sheets css通常稱為css樣式表或層疊樣式表 級聯樣式表 主要用於設定html頁面中的文字內容 字型 大小 對齊方式等 的外形 寬高 邊框樣式 邊距等 以及版面的布局等外觀顯示樣式。css以html為基礎,提供了豐富的功能,如字型 顏色 背景的控制及整...