css筆記 HTML文件中應用css樣式的方法總結

2021-08-01 18:48:54 字數 2823 閱讀 1950

標籤:class

使用si

ithtml

在html文件中應用css樣式大致有三種方法:1.link標籤鏈結外部樣式表;2.使用style元素包含樣式表;3.使用style屬性,即內聯樣式

一.link標籤鏈結外部樣式表

先看一條較為標準的link標記語句:

link標記必須放在head元素中,且不能放在其他元素(如title)內部。至於其屬性,rel 代表「關係「(relation),在這裡,關係為stylesheet,即文件的外部樣式表,至於其他值以及含義詳情見  。type總是設定為text/css,描述了使用link標記載入的資料的型別。href那麼簡單的就不多說了。media 屬性規定被鏈結文件將顯示在什麼裝置上。當然,link標記還有其他的一些屬性,比如title(除了說的這五個,其他的屬性貌似都沒啥作用了),接下來就說聊到這個title屬性的作用。

外部樣式表之候選樣式表:將rel屬性設定為alternate stylesheet 時,就可以定義候選樣式表,只有在使用者選擇這個樣式表時才會用於文件表現。例如:

1

<

link

rel="stylesheet"

type

="text/css"

href

="sheet1.css"

title

="default"

/>

2<

link

rel="alternate stylesheet"

type

="text/css"

href

="bigtext.css"

tile

="bigtext"

/>

3<

link

rel="alternate stylesheet"

type

="text/css"

href

="crazy.css"

tile

="crazytext"

/>

貌似目前chrome還不支援這種候選樣式表,我也沒有找到chrome的選單欄,不過ie、ff均支援此功能(切換樣式表的方法:按下alt鍵開啟選單欄->檢視->樣式->選擇樣式表)。注意:①這些樣式表只有乙個會用於文件顯示,不會發生重疊;②並且每個樣式表都得有title屬性,不然選單欄裡面沒有顯示;③預設樣式表(也叫首選樣式表)是rel為stylesheet的樣式表,與title屬性的值沒有關係。

還可以為候選樣式表指定同樣的title,把它們分組在一起。例如:

1

<

link

rel="stylesheet"

type

="text/css"

href

="sheet1.css"

title

="default"

media

="screen"

/>

2<

link

rel="stylesheet"

type

="text/css"

href

="print-sheet1.css"

title

="default"

media

="print"

/>

3<

link

rel="alternate stylesheet"

type

="text/css"

href

="bigtext.css"

title

="bigtext"

media

="screen"

/>

4<

link

rel="alternate stylesheet"

type

="text/css"

href

="print-bigtext.css"

title

="bigtext"

media

="print"

/>

這樣以來使用者就可以在螢幕和列印**中為**選擇不同的樣式表。

二.使用style元素包含樣式表

style標記之間的樣式稱為文件樣式表,或巢狀樣式表。注意:①一定要使用type屬性,其值為"text/css",也可以指定media屬性;

在這裡介紹乙個@import指令,它用於指示web瀏覽器載入乙個外部樣式表,不過這條指令要放在其他css規則之前,否則不起作用。例如:

1

<

style

type

="text/css"

>

2@import url(main.css);

3@import url(sheet1.css) all;

4@import url(print.css) print;5h1

6style

>

@import指令的乙個顯著作用就是:如果有乙個外部樣式表,它需要使用其他外部樣式表中的樣式時就可以在開頭使用這條指令匯入其他樣式表。

三.內聯樣式

除了在body外部出現的標記,style屬性可以與任何其他html標記關聯來設定其內聯樣式。注意:①不能在style屬性中使用@import指令。

html文件中應用css樣式的方法總結

標籤:class

使用si

ithtml

如何在html中應用css

css cascading style sheets 層疊樣式表,是乙個用於修飾文件 可以是標記語言html,也可以是xml或者svn 的語言,可以將文件以更優雅的形式呈現給使用者。css語言的核心功能就是為特定的屬性設定特點的值,css引擎通過計算出宣告的每個屬性來顯示元素。css的屬性和值都是大...

為乙個HTML文件應用CSS的方法

為html文件應用css,有三種方法可供選擇。下面對這三種方法進行了概括。我們建議你對第三種方法 即外部樣式表 予以關注。為html應用css的一種方法是使用html屬性style。我們在上例的基礎之上,通過行內樣式表將頁面背景設為紅色 這個頁面是紅色的 為html應用css的另一種方法是採用htm...

在HTML文件內引入CSS

通過css可以為html頁面新增豐富的效果,下面就來說說把css新增到html頁面中的方式,讓二者連線起來。一 link標籤 外部樣式表 示例 一 link標籤的位置 link標籤只能出現在之間,它在之間可出現無數次。比如 二 link標籤的屬性 1.href href屬性定義外部資源 也就是樣式表...