首頁 web前端 css教學 jsp頁面如何加入css樣式

jsp頁面如何加入css樣式

Dec 23, 2020 pm 12:14 PM
css樣式 jsp頁面

jsp頁面加入css樣式的方法:1、在jsp頁面中使用「<link>」標籤連結css樣式表;2、在jsp頁面中使用「<style>」標籤在文件頭部定義內部樣式表;3、在jsp頁面的標籤元素中使用style屬性包含任何css樣式。

jsp頁面如何加入css樣式

本教學操作環境:Windows7系統、CSS3版本,Dell G3電腦。

推薦:css影片教學

JSP頁面插入CSS樣式有三種方法,且其優先順序不同。具體如下:外部樣式,內部樣式,內聯樣式。優先依序增高!


【1】外部樣式 
當樣式需要套用到許多頁面時,外部樣式表將是理想的選擇。在使用外部樣式表的情況下,你可以透過改變一個檔案來改變整個網站的外觀。每個頁面使用<link>標籤連結到樣式表。

1

<link rel="stylesheet" type="text/css" href="<%=uiPath%>hwtt_ui/skins/<%=skinName%>/css/login.css" />

登入後複製

rel屬性規定目前文件與被連結文件之間的關係,在該例子中rel 屬性指示被連結的文件是一個樣式表。


【2】內部樣式 
當單一文件需要特殊的樣式時,就應該使用內部樣式表。可以使用<style>標籤在文件頭部定義內部樣式表。

1

2

3

4

5

6

7

8

9

<style type="text/css">

    .loginBtn{

        display:block;

        cursor: pointer;

        height: 32px;

        margin-bottom: 1px;

        width: 100px;

    }

</style>

登入後複製

【3】內嵌樣式 
由於要將表現和內容混雜在一起,內聯樣式會損失掉樣式表的許多優點。請慎用這種方法,例如當樣式只需要在一個元素上套用一次時。要使用內聯樣式,你需要在相關的標籤內使用樣式(style)屬性。 Style屬性可以包含任何CSS屬性。

1

<input type="text" name="authCode" style="vertical-align: middle" />

登入後複製

更多程式相關知識,請造訪:程式設計學習! !

以上是jsp頁面如何加入css樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

如何使用HTML和CSS建立一個幻燈片佈局頁面 如何使用HTML和CSS建立一個幻燈片佈局頁面 Oct 16, 2023 am 09:07 AM

如何使用HTML和CSS建立一個幻燈片佈局頁面

如何使用:nth-child(-n+5)偽類選擇器選擇位置小於等於5的子元素的CSS樣式 如何使用:nth-child(-n+5)偽類選擇器選擇位置小於等於5的子元素的CSS樣式 Nov 20, 2023 am 11:52 AM

如何使用:nth-child(-n+5)偽類選擇器選擇位置小於等於5的子元素的CSS樣式

如何使用HTML和CSS實作一個簡單的聊天頁面佈局 如何使用HTML和CSS實作一個簡單的聊天頁面佈局 Oct 18, 2023 am 08:42 AM

如何使用HTML和CSS實作一個簡單的聊天頁面佈局

如何使用HTML和CSS實作一個詳細頁面佈局 如何使用HTML和CSS實作一個詳細頁面佈局 Oct 20, 2023 am 09:54 AM

如何使用HTML和CSS實作一個詳細頁面佈局

如何使用HTML和CSS建立響應式卡片牆佈局 如何使用HTML和CSS建立響應式卡片牆佈局 Oct 25, 2023 am 10:42 AM

如何使用HTML和CSS建立響應式卡片牆佈局

如何使用HTML和CSS建立響應式音樂播放器佈局 如何使用HTML和CSS建立響應式音樂播放器佈局 Oct 19, 2023 am 10:02 AM

如何使用HTML和CSS建立響應式音樂播放器佈局

PHP正規表示式實戰:匹配CSS樣式 PHP正規表示式實戰:匹配CSS樣式 Jun 22, 2023 pm 06:31 PM

PHP正規表示式實戰:匹配CSS樣式

HTML嵌入CSS樣式的方法 HTML嵌入CSS樣式的方法 Sep 20, 2023 am 11:37 AM

HTML嵌入CSS樣式的方法

See all articles