在线做视频网站,wordpress产品展示插件,古典水墨网站,梧州论坛热门主题1. 背景
在上一篇博客中#xff0c;我们通过使用SAPUI5提供的CSS类实现元素间距的调整。在本篇博客中#xff0c;让我们看一下如何实现自定义的CSS样式。
2. 背景知识
2.1 CSS基础语法
CSS#xff0c;全称为级联样式表#xff08;Cascading Style Sheets#xff09;我们通过使用SAPUI5提供的CSS类实现元素间距的调整。在本篇博客中让我们看一下如何实现自定义的CSS样式。
2. 背景知识
2.1 CSS基础语法
CSS全称为级联样式表Cascading Style Sheets是一种用来描述HTML或XML包括如SVG、XHTML等各类XML分支语言文档样式的计算机语言。CSS不仅可以静态地修饰网页还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS层叠样式表的基础语法由选择器selector、属性property和属性值value组成。基本的语法格式如下
selector { property: value;
} 组成部分
选择器用于指定要应用样式的HTML元素。可以是元素名、类名、ID或其他属性。属性是你要设置的样式特征比如字体、颜色、边距等。属性值是你要赋给该属性的具体值。
示例
/* 选择所有的 h1 元素并设置颜色为蓝色 */
h1 { color: blue;
} /* 选择 class 为 myClass 的元素并设置字体大小为 16px */
.myClass { font-size: 16px;
} /* 选择 id 为 myId 的元素并设置背景颜色为灰色 */
#myId { background-color: gray;
} 示例解释 在第一个示例中选择器h1表示所有的h1标签样式是将其文本颜色设置为蓝色。 第二个例子中选择器 .myClass 选择所有包含 classmyClass 的元素设置其字体大小为 16px。 第三个例子中选择器 #myId 选择具有 idmyId 的元素设置其背景颜色为灰色。
CSS的这种结构可以很方便地为不同的HTML元素应用样式。
2.2 常见的CSS选择器
在CSS中选择器用于选择你想要样式化的HTML元素。以下是一些常见的CSS选择器类型及其示例
元素选择器选择HTML文档中的特定类型的元素。
p {color: red;
}在这个例子中所有的 p 元素都将被设置为红色。
类选择器选择具有特定类属性的元素。它用于选择一个或多个具有特定类名的HTML元素并对这些元素应用样式规则。类选择器以点.开头后跟类名。
类选择器的主要优点是可以重复使用这意味着你可以在多个HTML元素上使用同一个类以应用相同的样式。此外一个HTML元素也可以有多个类这使得你可以组合多个样式。
.red-text {color: red;
}.large-text {font-size: 2em;
}p classred-text这段文字是红色的。/p
p classlarge-text这段文字的字体很大。/p
p classred-text large-text这段文字是红色的而且字体很大。/p在这个例子中.red-text 和 .large-text 是CSS类。第一段 p 元素使用了 red-text 类所以它的文字是红色的。第二段 p 元素使用了 large-text 类所以它的文字字体很大。第三段 p 元素同时使用了这两个类所以它的文字既是红色的又很大。
ID选择器选择具有特定ID属性的元素。ID选择器以 # 开头。
#main-content {font-size: 1.5em;
}在这个例子中ID为 main-content 的元素字体大小将被设置为1.5em。
属性选择器选择具有特定属性的元素。
input[typetext] {width: 200px;
}在这个例子中所有类型为 text 的 input 元素宽度将被设置为200px。
伪类选择器选择处于特定状态的元素例如鼠标悬停状态。
a:hover {color: orange;
}在这个例子中鼠标悬停在 a 元素上时元素的颜色将变为橙色。
伪元素选择器选择元素的特定部分例如元素的第一行。
p::first-line {font-weight: bold;
}在这个例子中所有 p 元素的第一行将被设置为粗体。
组合选择器选择满足多个条件的元素。
div.highlight {background-color: yellow;
}在这个例子中所有 div 元素且类名为 highlight 的元素背景色将被设置为黄色。
后代选择器选择特定元素的后代元素。
div p {color: blue;
}在这个例子中所有 div 元素内的 p 元素文本颜色将被设置为蓝色。 选择器可以单独使用也可以组合使用以选择满足多个条件的元素。 3. 练习
接下来在前序练习的基础上让我们通过自定义的CSS样式来改变页面元素的格式。
3.1 创建自定义的css样式文件
首先让我们创建一个css文件夹用于包含css文件。然后创建style.css文件用于定义CSS样式。改动后的项目文件夹结构如下
style.css文件代码如下
html[dirltr] .myAppDemoWT .myCustomButton.sapMBtn {margin-right: 0.125rem
}html[dirrtl] .myAppDemoWT .myCustomButton.sapMBtn {margin-left: 0.125rem
}.myAppDemoWT .myCustomText {display: inline-block;font-weight: bold;
}
这段CSS代码包含了三个样式规则每个规则都使用了不同的选择器。通过自定义类和自定义命名空间类.myAppDemoWT可以确保样式只应用于我们应用程序中使用的控件上。
第一个样式规则
html[dirltr] .myAppDemoWT .myCustomButton.sapMBtn {margin-right: 0.125rem;
}这个规则使用了属性选择器和后代选择器的组合。
它选择了HTML元素的 dir 属性值为 ltr从左到右的文本方向并且是 .myAppDemoWT 类的后代元素且这个后代元素又是 .myCustomButton 和 .sapMBtn 类的元素。对于这些元素它设置了右边距margin-right为 0.125rem。
第二个样式规则
html[dirrtl] .myAppDemoWT .myCustomButton.sapMBtn {margin-left: 0.125rem;
}这个规则与第一个规则类似但是它选择的是HTML元素的 dir 属性值为 rtl从右到左的文本方向的元素比如阿拉伯语当应用程序显示颠倒时需要设置左外边距并重置右外边距。如果你只使用标准的SAPUI5控件你不需要关心这个在我们使用自定义CSS的情况下你必须添加这个信息。
对于这些元素它设置了左边距margin-left为 0.125rem。
第三个样式规则
.myAppDemoWT .myCustomText {display: inline-block;font-weight: bold;
}这个规则使用了后代选择器。它选择了 .myAppDemoWT 类的后代元素且这个后代元素是 .myCustomText 类的元素。对于这些元素它设置了显示方式display为 inline-block并且字体粗细ont-weight为粗体 bold。
3.2 修改manifest.json
定义好css样式后我们需要让SAPUI5框架在程序运行时加载此资源。这可动作通过修改manifest.json完成。
在sap.ui5命名空间的resources部分可以加载应用程序的其他资源。可以通过指定CSS资源的相对路径来加载CSS样式。
SAPUI5将会让该文件作为link标记添加到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中使用样式
接下来让我们将样式应用到屏幕元素上。在App.view.xml文件中修改App,Button,FormattedText控件的CSS样式类。 在App控件上指定自定义的CSS命名空间类myAppDemoWT。在CSS的定义中使用它来定义具体的CSS选择器通过在在App控件上指定myAppDemoWT保证在myAppDemoWT类下面定义的具体的样式选择器仅对这个应用程序有效。 向Button控件添加自定义CSS类myCustomButton用于定义按钮和输入框之间的间距。通过自定义的样式类我们实现了面板内容布局的像素级控制。 为了突出显示输出文本我们使用了FormattedText控件该控件可以使用自定义CSS或HTML代码单独设置样式。我们添加了自定义CSS类myCustomText并添加了一个依赖于主题的CSS类来设置主题中定义的高亮颜色。 文本的实际颜色取决于所选择的主题这确保了颜色总是与主题保持一致。有关可用CSS类名的完整列表请参阅CSS Classes中的主题参数。 改动后的App.view.xml文件内容如下
mvc:ViewcontrollerNamezsapui5.test.controller.Appxmlnssap.mxmlns:mvcsap.ui.core.mvcdisplayBlocktrue
!--在视图中想要使用的库的命名空间列表--ShellApp classmyAppDemoWTpagesPage title{i18nhomePageTitle}contentPanelheaderText{i18nhelloPanelTitle}classsapUiResponsiveMarginwidthautocontentButtontext{i18nshowHelloButtonText}press.onShowHelloclassmyCustomButton/Inputvalue{/recipient/name}valueLiveUpdatetruewidth60%/FormattedTexthtmlTextHello {/recipient/name}classsapUiSmallMargin sapThemeHighligh-asColor myCustomText//content/Panel/content/Page/pages/App/Shell
/mvc:View
3.4 运行程序
运行改动后的程序效果如下
改动前
改动后 可以看到我们通过自定义的CSS类实现了对于Button控件和文本控件格式的调整。 注意本文展示了使用自定义的CSS类来更改SAPUI5控件样式的可能性但在正式开发中更推荐使用SAPUI5标准的CSS类实现布局和样式的调整在颜色调整方面应使用与SAPUI5主题相关的颜色不要使用自定义的颜色。 4. 小结
本文展示了如何使用自定义的CSS类来调整SAPUI5的展示样式并通过一个实际的例子展示了其用法。
