引入css的幾種方式

2021-09-07 15:10:16 字數 2367 閱讀 3745

a.外部樣式

說明:

link標籤的rel屬性用於規定當前文件與被鏈結文件之間的關係;

只有rel屬性的"stylesheet"值得到了所有瀏覽器的支援,指示被鏈結的文件是乙個樣式表。

a2.匯入式

<

style

type

="text/css"

>

@import url(path+*.css);

style

>

區別:鏈結式-先載入css樣式,後載入頁面(先布局,後載入內容),匯入式-先載入頁面,後載入css樣式(先載入內容,後布局)

b.內部樣式

在標籤體內,宣告:    

<

style

type

="text/css"

>

/*設定css樣式

*/div

style

>

c.行內樣式

直接在標籤上宣告style屬性  

<

span

style

="color:yellow;"

>css設定字型顏色

span

>

小結:

="本網頁內容描述"

>

<

title

>請輸入網頁標題

title

>

<

link

href

="css樣式檔案url"

type

="text/css"

rel="stylesheet"

/>

<

style

type

="text/css"

>

*style

>

head

>

<

body

>

<

div

style

="width:500px;height:500px;border:1px solid red;"

>css行內樣式

div>

body

>

html

>

綜合運用:

在jsp頁面上,使用el表示式獲取後台資料,根據不同的值引用不同的css檔案 

<

c:choose

>

<

c:when

test

="$"

>

<

c:set

var="theme"

value

="$"

/>

<

link

id="themestyle"

type

="text/css"

rel="stylesheet"

href

="/commons/theme/$/style.css"

/>

" />

c:when

>

<

c:otherwise

>

<

c:set

var="theme"

value

="default"

/>

<

link

id="themestyle"

type

="text/css"

rel="stylesheet"

href

="/commons/theme/default/style.css"

/>

" />

c:otherwise

>

c:choose

>

注:關於css樣式優先順序的說明請移步至文章:css知識點集錦

css的幾種引入方式!

1 inline 即行內樣式 this is inline style sheets 2 embedded internal 即內嵌式 內嵌式就是將css樣式寫在head tag中的style tag中。3 external 即鏈結式 將.css檔案引入到html檔案中,在head tag 中插入l...

引入css的幾種方式

a.外部樣式 說明 link標籤的rel屬性用於規定當前文件與被鏈結文件之間的關係 只有rel屬性的 stylesheet 值得到了所有瀏覽器的支援,指示被鏈結的文件是乙個樣式表。a2.匯入式 style type text css import url path css style 區別 鏈結式 ...

引入css的幾種方式

a.外部樣式 說明 link標籤的rel屬性用於規定當前文件與被鏈結文件之間的關係 只有rel屬性的 stylesheet 值得到了所有瀏覽器的支援,指示被鏈結的文件是乙個樣式表。a2.匯入式 style type text css import url path css style 區別 鏈結式 ...