1. 背景

在上一篇博客中，我們通過使用SAPUI5提供的CSS類實現(xiàn)元素間距的調(diào)整。在本篇博客中，讓我們看一下如何實現(xiàn)自定義的CSS樣式。

2. 背景知識

2.1 CSS基礎(chǔ)語法

CSS，全稱為級聯(lián)樣式表（Cascading Style Sheets），是一種用來描述HTML或XML（包括如SVG、XHTML等各類XML分支語言）文檔樣式的計算機語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進行格式化。

CSS（層疊樣式表）的基礎(chǔ)語法由選擇器（selector）、屬性（property）和屬性值（value）組成?；镜恼Z法格式如下：

selector {  property: value;  
}  

組成部分：

• 選擇器：用于指定要應(yīng)用樣式的HTML元素?？梢允窃孛?、類名、ID或其他屬性。
• 屬性：是你要設(shè)置的樣式特征，比如字體、顏色、邊距等。
• 屬性值：是你要賦給該屬性的具體值。

示例：

/* 選擇所有的 <h1> 元素，并設(shè)置顏色為藍色 */  
h1 {  color: blue;  
}  /* 選擇 class 為 "myClass" 的元素，并設(shè)置字體大小為 16px */  
.myClass {  font-size: 16px;  
}  /* 選擇 id 為 "myId" 的元素，并設(shè)置背景顏色為灰色 */  
#myId {  background-color: gray;  
}  

示例解釋：

• 在第一個示例中，選擇器h1表示所有的<h1>標(biāo)簽，樣式是將其文本顏色設(shè)置為藍色。

• 第二個例子中，選擇器 .myClass 選擇所有包含 class="myClass" 的元素，設(shè)置其字體大小為 16px。

• 第三個例子中，選擇器 #myId 選擇具有 id="myId" 的元素，設(shè)置其背景顏色為灰色。

CSS的這種結(jié)構(gòu)，可以很方便地為不同的HTML元素應(yīng)用樣式。

2.2 常見的CSS選擇器

在CSS中，選擇器用于選擇你想要樣式化的HTML元素。以下是一些常見的CSS選擇器類型及其示例：

1. 元素選擇器：選擇HTML文檔中的特定類型的元素。

p {color: red;
}

在這個例子中，所有的 <p> 元素都將被設(shè)置為紅色。

2. 類選擇器：選擇具有特定類屬性的元素。它用于選擇一個或多個具有特定類名的HTML元素，并對這些元素應(yīng)用樣式規(guī)則。類選擇器以點（.）開頭，后跟類名。

類選擇器的主要優(yōu)點是可以重復(fù)使用，這意味著你可以在多個HTML元素上使用同一個類，以應(yīng)用相同的樣式。此外，一個HTML元素也可以有多個類，這使得你可以組合多個樣式。

.red-text {color: red;
}.large-text {font-size: 2em;
}

<p class="red-text">這段文字是紅色的。</p>
<p class="large-text">這段文字的字體很大。</p>
<p class="red-text large-text">這段文字是紅色的，而且字體很大。</p>

在這個例子中，.red-text 和 .large-text 是CSS類。第一段 <p> 元素使用了 red-text 類，所以它的文字是紅色的。第二段 <p> 元素使用了 large-text 類，所以它的文字字體很大。第三段 <p> 元素同時使用了這兩個類，所以它的文字既是紅色的，又很大。

3. ID選擇器：選擇具有特定ID屬性的元素。ID選擇器以 # 開頭。

#main-content {font-size: 1.5em;
}

在這個例子中，ID為 main-content 的元素字體大小將被設(shè)置為1.5em。

4. 屬性選擇器：選擇具有特定屬性的元素。

input[type="text"] {width: 200px;
}

在這個例子中，所有類型為 text 的 <input> 元素寬度將被設(shè)置為200px。

5. 偽類選擇器：選擇處于特定狀態(tài)的元素，例如鼠標(biāo)懸停狀態(tài)。

a:hover {color: orange;
}

在這個例子中，鼠標(biāo)懸停在 <a> 元素上時，元素的顏色將變?yōu)槌壬?/p>

6. 偽元素選擇器：選擇元素的特定部分，例如元素的第一行。

p::first-line {font-weight: bold;
}

在這個例子中，所有 <p> 元素的第一行將被設(shè)置為粗體。

7. 組合選擇器：選擇滿足多個條件的元素。

div.highlight {background-color: yellow;
}

在這個例子中，所有 <div> 元素且類名為 highlight 的元素背景色將被設(shè)置為黃色。

8. 后代選擇器：選擇特定元素的后代元素。

div p {color: blue;
}

在這個例子中，所有 <div> 元素內(nèi)的 <p> 元素文本顏色將被設(shè)置為藍色。

選擇器可以單獨使用，也可以組合使用，以選擇滿足多個條件的元素。

3. 練習(xí)

接下來，在前序練習(xí)的基礎(chǔ)上，讓我們通過自定義的CSS樣式，來改變頁面元素的格式。

3.1 創(chuàng)建自定義的css樣式文件

首先，讓我們創(chuàng)建一個css文件夾，用于包含css文件。然后，創(chuàng)建style.css文件，用于定義CSS樣式。改動后的項目文件夾結(jié)構(gòu)如下：

style.css文件代碼如下：

html[dir="ltr"] .myAppDemoWT .myCustomButton.sapMBtn {margin-right: 0.125rem
}html[dir="rtl"] .myAppDemoWT .myCustomButton.sapMBtn {margin-left: 0.125rem
}.myAppDemoWT .myCustomText {display: inline-block;font-weight: bold;
}

這段CSS代碼包含了三個樣式規(guī)則，每個規(guī)則都使用了不同的選擇器。通過自定義類和自定義命名空間類（.myAppDemoWT），可以確保樣式只應(yīng)用于我們應(yīng)用程序中使用的控件上。

第一個樣式規(guī)則：

html[dir="ltr"] .myAppDemoWT .myCustomButton.sapMBtn {margin-right: 0.125rem;
}

這個規(guī)則使用了屬性選擇器和后代選擇器的組合。

• 它選擇了HTML元素的 dir 屬性值為 ltr（從左到右的文本方向），并且是 .myAppDemoWT 類的后代元素，且這個后代元素又是 .myCustomButton 和 .sapMBtn 類的元素。對于這些元素，它設(shè)置了右邊距（margin-right）為 0.125rem。

第二個樣式規(guī)則：

html[dir="rtl"] .myAppDemoWT .myCustomButton.sapMBtn {margin-left: 0.125rem;
}

這個規(guī)則與第一個規(guī)則類似，但是它選擇的是HTML元素的 dir 屬性值為 rtl（從右到左的文本方向）的元素（比如阿拉伯語，當(dāng)應(yīng)用程序顯示顛倒時，需要設(shè)置左外邊距并重置右外邊距。如果你只使用標(biāo)準(zhǔn)的SAPUI5控件，你不需要關(guān)心這個，在我們使用自定義CSS的情況下，你必須添加這個信息）。

對于這些元素，它設(shè)置了左邊距（margin-left）為 0.125rem。

第三個樣式規(guī)則：

.myAppDemoWT .myCustomText {display: inline-block;font-weight: bold;
}

這個規(guī)則使用了后代選擇器。它選擇了 .myAppDemoWT 類的后代元素，且這個后代元素是 .myCustomText 類的元素。對于這些元素，它設(shè)置了顯示方式（display）為 inline-block，并且字體粗細（ont-weight）為粗體 bold。

3.2 修改manifest.json

定義好css樣式后，我們需要讓SAPUI5框架在程序運行時，加載此資源。這可動作通過修改manifest.json完成。

在sap.ui5命名空間的resources部分，可以加載應(yīng)用程序的其他資源?？梢酝ㄟ^指定CSS資源的相對路徑，來加載CSS樣式。

SAPUI5將會讓該文件作為<link>標(biāo)記添加到HTML頁面的頭部，就像普通的Web頁面一樣，這樣瀏覽器就會自動加載它。

改動后的manifest.json文件如下：

{"_version": "1.58.0","sap.app": {"id": "zsapui5.test","i18n": "i18n/i18n.properties","title": "{{appTitle}}","description": "{{appDescription}}","type": "application","applicationVersion": {"version": "1.0.0"}},"sap.ui": {"technology": "UI5","deviceTypes": {"desktop": true,"tablet": true,"phone": true}},"sap.ui5": {"dependencies": {"minUI5Version": "1.108.0","libs": {"sap.ui.core": {},"sap.m": {}}},"models": {"i18n": {"type": "sap.ui.model.resource.ResourceModel","settings": {"bundleName": "zsapui5.test.i18n.i18n","supportedLocales": [""],"fallbackLocale": ""}}},"rootView": {"viewName": "zsapui5.test.view.App","type": "XML","id": "app"},"resources": {"css": [{"uri": "css/style.css"}]}}}

3.3 在App.view.xml中使用樣式

接下來，讓我們將樣式應(yīng)用到屏幕元素上。在App.view.xml文件中，修改<App>,<Button>,<FormattedText>控件的CSS樣式類。

• 在<App>控件上，指定自定義的CSS命名空間類myAppDemoWT。在CSS的定義中，使用它來定義具體的CSS選擇器，通過在在<App>控件上指定myAppDemoWT，保證在myAppDemoWT類下面定義的具體的樣式選擇器，僅對這個應(yīng)用程序有效。

• 向<Button>控件添加自定義CSS類myCustomButton，用于定義按鈕和輸入框之間的間距。通過自定義的樣式類，我們實現(xiàn)了面板內(nèi)容布局的像素級控制。

• 為了突出顯示輸出文本，我們使用了FormattedText控件，該控件可以使用自定義CSS或HTML代碼單獨設(shè)置樣式。我們添加了自定義CSS類myCustomText，并添加了一個依賴于主題的CSS類來設(shè)置主題中定義的高亮顏色。

文本的實際顏色取決于所選擇的主題，這確保了顏色總是與主題保持一致。有關(guān)可用CSS類名的完整列表，請參閱CSS Classes中的主題參數(shù)。

改動后的App.view.xml文件內(nèi)容如下：

<mvc:ViewcontrollerName="zsapui5.test.controller.App"xmlns="sap.m"xmlns:mvc="sap.ui.core.mvc"displayBlock="true"
><!--在視圖中想要使用的庫的命名空間列表--><Shell><App class="myAppDemoWT"><pages><Page title="{i18n>homePageTitle}"><content><PanelheaderText="{i18n>helloPanelTitle}"class="sapUiResponsiveMargin"width="auto"><content><Buttontext="{i18n>showHelloButtonText}"press=".onShowHello"class="myCustomButton"/><Inputvalue="{/recipient/name}"valueLiveUpdate="true"width="60%"/><FormattedTexthtmlText="Hello {/recipient/name}"class="sapUiSmallMargin sapThemeHighligh-asColor myCustomText"/></content></Panel></content></Page></pages></App></Shell>
</mvc:View>

3.4 運行程序

運行改動后的程序，效果如下：

改動前：

改動后：

可以看到，我們通過自定義的CSS類，實現(xiàn)了對于Button控件和文本控件格式的調(diào)整。

注意，本文展示了使用自定義的CSS類來更改SAPUI5控件樣式的可能性，但在正式開發(fā)中，更推薦使用SAPUI5標(biāo)準(zhǔn)的CSS類實現(xiàn)布局和樣式的調(diào)整；在顏色調(diào)整方面，應(yīng)使用與SAPUI5主題相關(guān)的顏色，不要使用自定義的顏色。

4. 小結(jié)

本文展示了如何使用自定義的CSS類來調(diào)整SAPUI5的展示樣式，并通過一個實際的例子，展示了其用法。