在HTML文件內引入CSS

2021-09-29 18:11:43 字數 1147 閱讀 4230

通過css可以為html頁面新增豐富的效果,下面就來說說把css新增到html頁面中的方式,讓二者連線起來。

一、link標籤——外部樣式表

示例:

(一)link標籤的位置

link標籤只能出現在之間,它在之間可出現無數次。

比如:

(二)link標籤的屬性

1.href

href屬性定義外部資源(也就是樣式表)的位置,href屬性的值可以是相對url,也可以是絕對url。

相對url:

絕對url:

2.rel

rel屬性定義外部文件 與 當前文件的 關係,由於外部文件是當前文件的樣式表,所以rel屬性的值為stylesheet。

3.type和media

type屬性定義外部文件的mime型別,其值是text/css。

media屬性定義外部樣式表要用在何種**上。media屬性涉及到**查詢,這個知識點目前還不熟悉,暫時掛起。

二、style標籤——文件樣式表

通過style標記可以新增文件樣式表,文件樣式表中的樣式只在當前html文件生效。

示例:

(一)style標籤的位置

style標籤需要出現在head標籤內。

(二)style標籤的type屬性

style標籤的type屬性,其值是text/css,代表樣式表的 mime 型別是css。

三、html標籤的style屬性——內聯樣式

css樣式也可以通過html標籤的style屬性來設定,但這些標籤必須是出現在內部的標籤,比如titile、head就不能新增。 如:

style屬性——內聯樣式

CSS樣式在HTML中引入

css樣式在html中引入 第一種方式在html的頭資訊中定義css 示例 doctype html html head meta charset utf 8 title insert title here title style type text css 我是css 注釋 p style hea...

在HTML中引入CSS的方式

有 4 種方式可以在 html 中引入 css。其中有 2 種方式是在 html 檔案中直接新增 css 另外兩種是引入 外部 css 檔案。內聯方式 內聯方式指的是直接在 html 標籤中的 style 屬性中新增 css。嵌入方式 嵌入方式指的是在 html 頭部中的 標籤下書寫 css 鏈結方...

CSS3 在HTML中引入CSS樣式

html code style color tomato 微微一笑很傾城h1 style font size 32px color tomato 微微一笑很傾城p 這種方式不能使內容與樣式相分離,本質上沒有體現出css的優勢,因此不推薦使用。html code charset utf 8 內部樣式表...