SAPUI5基础知识18 - 自定义CSS和主题色

1. 背景

在上一篇博客中，我们通过使用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 选择所有包含 class="myClass" 的元素，设置其字体大小为 16px。

  • 第三个例子中，选择器 #myId 选择具有 id="myId" 的元素，设置其背景颜色为灰色。

CSS的这种结构，可以很方便地为不同的HTML元素应用样式。

2.2 常见的CSS选择器

在CSS中，选择器用于选择你想要样式化的HTML元素。以下是一些常见的CSS选择器类型及其示例：

  1. 元素选择器：选择HTML文档中的特定类型的元素。
p {color: red;
}

在这个例子中，所有的 <p> 元素都将被设置为红色。

  1. 类选择器：选择具有特定类属性的元素。它用于选择一个或多个具有特定类名的HTML元素，并对这些元素应用样式规则。类选择器以点（.）开头，后跟类名。

类选择器的主要优点是可以重复使用，这意味着你可以在多个HTML元素上使用同一个类，以应用相同的样式。此外，一个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> 元素同时使用了这两个类，所以它的文字既是红色的，又很大。

  1. ID选择器：选择具有特定ID属性的元素。ID选择器以 # 开头。
#main-content {font-size: 1.5em;
}

在这个例子中，ID为 main-content 的元素字体大小将被设置为1.5em。

  1. 属性选择器：选择具有特定属性的元素。
input[type="text"] {width: 200px;
}

在这个例子中，所有类型为 text 的 <input> 元素宽度将被设置为200px。

  1. 伪类选择器：选择处于特定状态的元素，例如鼠标悬停状态。
a:hover {color: orange;
}

在这个例子中，鼠标悬停在 <a> 元素上时，元素的颜色将变为橙色。

  1. 伪元素选择器：选择元素的特定部分，例如元素的第一行。
p::first-line {font-weight: bold;
}

在这个例子中，所有 <p> 元素的第一行将被设置为粗体。

  1. 组合选择器：选择满足多个条件的元素。
div.highlight {background-color: yellow;
}

在这个例子中，所有 <div> 元素且类名为 highlight 的元素背景色将被设置为黄色。

  1. 后代选择器：选择特定元素的后代元素。
div p {color: blue;
}

在这个例子中，所有 <div> 元素内的 <p> 元素文本颜色将被设置为蓝色。

选择器可以单独使用，也可以组合使用，以选择满足多个条件的元素。

3. 练习

接下来，在前序练习的基础上，让我们通过自定义的CSS样式，来改变页面元素的格式。

3.1 创建自定义的css样式文件

首先，让我们创建一个css文件夹，用于包含css文件。然后，创建style.css文件，用于定义CSS样式。改动后的项目文件夹结构如下：
在这里插入图片描述

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代码包含了三个样式规则，每个规则都使用了不同的选择器。通过自定义类和自定义命名空间类（.myAppDemoWT），可以确保样式只应用于我们应用程序中使用的控件上。

第一个样式规则：

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

这个规则使用了属性选择器和后代选择器的组合。

  • 它选择了HTML元素的 dir 属性值为 ltr（从左到右的文本方向），并且是 .myAppDemoWT 类的后代元素，且这个后代元素又是 .myCustomButton 和 .sapMBtn 类的元素。对于这些元素，它设置了右边距（margin-right）为 0.125rem。

第二个样式规则：

html[dir="rtl"] .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: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类，实现了对于Button控件和文本控件格式的调整。

注意，本文展示了使用自定义的CSS类来更改SAPUI5控件样式的可能性，但在正式开发中，更推荐使用SAPUI5标准的CSS类实现布局和样式的调整；在颜色调整方面，应使用与SAPUI5主题相关的颜色，不要使用自定义的颜色。

4. 小结

本文展示了如何使用自定义的CSS类来调整SAPUI5的展示样式，并通过一个实际的例子，展示了其用法。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/51093.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【更新2023】省级农林牧渔业产值面板数据 含分项 1949-2023

【更新2023】省级农林牧渔业产值面板数据 含分项 1949-2023

省级农林牧渔业产值面板数据是研究农业经济和区域发展的重要资源。这些数据可以被用来分析不同省份间农业产值的时空变化及其影响因素&#xff0c;探讨政策对农业发展的影响&#xff0c;评估农业现代化和可持续发展水平&#xff0c;以及比较不同地区农业产值的竞争力和效率。此…
阅读更多...
python学习笔记——字符串

python学习笔记——字符串

一、创建字符串 1.我们可以使用引号( 或 " )来创建字符串。创建字符串很简单&#xff0c;只要为变量分配一个值即可。 var1 Hello World! var2 "Runoob" 二、访问字符串中的值 1.Python 访问子字符串&#xff0c;可以使用方括号 [] 来截取字符串。…
阅读更多...
在Android上实现汉字笔顺动画效果——HanZiWriter

在Android上实现汉字笔顺动画效果——HanZiWriter

序&#xff0c;万般皆是命&#xff0c;半点不由人。 Hanzi Writer 是 javascript 免费开源库&#xff0c;根据汉字书写时按照笔画顺序的特征&#xff0c;可以播放正确笔画顺序的描边动画和练习测试。支持简体字和繁体字。可以让全球用户能够通过手绘模仿的方式来学习和练习书写…
阅读更多...
Python网络爬虫详解：实战豆瓣电影信息采集

Python网络爬虫详解：实战豆瓣电影信息采集

文章目录 前言一、爬虫是什么&#xff1f;二、常用库及其作用1.Requests2.BeautifulSoup3. lxml4. Scrapy5. Selenium6. PyQuery7. Pandas8. JSON9. Time 三、实现步骤步骤一&#xff1a;环境准备步骤二&#xff1a;数据采集步骤三&#xff1a;数据处理步骤四&#xff1a;数据存…
阅读更多...
算法日记day 19（找树左下角的值|路径总和）

算法日记day 19（找树左下角的值|路径总和）

一、找树左下角的值 题目&#xff1a; 给定一个二叉树的 根节点 root&#xff0c;请找出该二叉树的 最底层 最左边 节点的值。 假设二叉树中至少有一个节点。 示例 1: 输入: root [2,1,3] 输出: 1示例 2: 输入: [1,2,3,4,null,5,6,null,null,7] 输出: 7 思路&#xff1a;…
阅读更多...
[Windows CMD] 检测网络连通性 ping

[Windows CMD] 检测网络连通性 ping

ping 是一个非常常用的网络工具&#xff0c;用于测试网络连接的可达性和测量网络延迟。它通过发送 ICMP (Internet Control Message Protocol) Echo Request 数据包到目标主机&#xff0c;并等待接收回显应答 (Echo Reply) 来工作。ping 命令可以帮助您快速检测网络问题&#x…
阅读更多...
2021真题-架构师案例（四）

2021真题-架构师案例（四）

问题1&#xff08;16分&#xff09; 针对该系统功能&#xff0c;赵工建议解释器架构风格&#xff0c;李工建议管道过滤架构风格&#xff0c;王工则建议饮食调用&#xff0c;该系统从灵活性和可扩展性考虑&#xff0c;应采用哪种&#xff1f; 解析&#xff1a; 管道-过滤器&am…
阅读更多...
lua 游戏架构 之 游戏 AI （九）ai_mgr Ai管理

lua 游戏架构 之 游戏 AI （九）ai_mgr Ai管理

定义ai_mgr的类&#xff0c;用于管理游戏中实体的AI组件。 先定义 AI行为枚举和优先级&#xff1a; lua 游戏架构 之 游戏 AI &#xff08;八&#xff09;ai_tbl 行为和优先级-CSDN博客https://blog.csdn.net/heyuchang666/article/details/140712839?spm1001.2014.3001.55…
阅读更多...
[原理] 可变性卷积(deformable convolution)原理及代码解释

[原理] 可变性卷积(deformable convolution)原理及代码解释

文章目录 前言提出问题核心思想代码理解模块初始化forward过程self.p_convself._get_pself._get_x_qself._reshape_x_offset 参考文献 前言 代码见&#xff1a;https://github.com/4uiiurz1/pytorch-deform-conv-v2/blob/master/deform_conv_v2.py 论文&#xff1a;https://ar…
阅读更多...
【数据结构】使用栈实现综合计算器

【数据结构】使用栈实现综合计算器

首先初始化两个栈&#xff0c;数栈&#xff08;numStack&#xff09;用于存放数据&#xff0c;符号栈&#xff08;operStack&#xff09;用于存放运算符 计算思路 1.通过一个index值&#xff08;索引&#xff09;来遍历表达式 2.如果发现扫描到一个数字&#xff0c;就直接入数栈…
阅读更多...
Python | TypeError: ‘function’ object is not subscriptable

Python | TypeError: ‘function’ object is not subscriptable

Python | TypeError: ‘function’ object is not subscriptable 在Python编程中&#xff0c;遇到“TypeError: ‘function’ object is not subscriptable”这一错误通常意味着你尝试像访问列表、元组、字典或字符串等可订阅&#xff08;subscriptable&#xff09;对象那样去…
阅读更多...
Javascript面试基础6（下）

Javascript面试基础6（下）

获取页面所有checkbox 怎样添加、移除、移动、复制、创建和查找节点 在JavaScript中&#xff0c;操作DOM&#xff08;文档对象模型&#xff09;是常见的任务&#xff0c;包括添加、移除、移动、复制、创建和查找节点。以下是一些基本的示例&#xff0c;说明如何执行这些操作&a…
阅读更多...
Java语言程序设计——篇九（2）

Java语言程序设计——篇九（2）

&#x1f33f;&#x1f33f;&#x1f33f;跟随博主脚步&#xff0c;从这里开始→博主主页&#x1f33f;&#x1f33f;&#x1f33f; 枚举类型 枚举类型的定义枚举类型的方法实战演练 枚举在switch中的应用实战演练 枚举类的构造方法实战演练 枚举类型的定义 [修饰符] enum 枚举…
阅读更多...
医院影像平台源码，C/S体系结构的C#语言PACS系统全套商业源代码

医院影像平台源码，C/S体系结构的C#语言PACS系统全套商业源代码

医学学影像临床信息系统具有图像采集、显示、存储、传输和管理等功能&#xff0c;支持DICOM影像设备和非DICOM影像设备&#xff0c;可以识别CT、MR、CR/DR、X光、DSA、B超、NM、SC等设备的图像类型&#xff0c;可对数字影像进行无损压缩和有损压缩处理。C/S体系结构的多媒体数据…
阅读更多...
湖仓一体架构解析：数仓架构选择（第48天）

湖仓一体架构解析：数仓架构选择（第48天）

系列文章目录 1、Lambda 架构 2、Kappa 架构 3、混合架构 4、架构选择 5、实时数仓现状 6、湖仓一体架构 7、流批一体架构 文章目录 系列文章目录前言1、Lambda 架构2、Kappa 架构3、混合架构4、架构选择5、实时数仓现状6、湖仓一体架构7、流批一体架构 前言 本文解析了Lambd…
阅读更多...
Verilog语言和C语言的本质区别是什么？

Verilog语言和C语言的本质区别是什么？

在开始前刚好我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「C语言的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共享给大家&#xff01;&#xff01;&#xff01; 用老石的一句话其实很好说…
阅读更多...
ssm框架整合，异常处理器和拦截器（纯注解开发）

ssm框架整合，异常处理器和拦截器（纯注解开发）

目录 ssm框架整合 第一步&#xff1a;指定打包方式和导入所需要的依赖 打包方法&#xff1a;war springMVC所需依赖 解析json依赖 mybatis依赖 数据库驱动依赖 druid数据源依赖 junit依赖 第二步&#xff1a;导入tomcat插件 第三步&#xff1a;编写配置类 SpringCon…
阅读更多...
【AI绘画】Midjourney V6初学者完全指南 参数篇

【AI绘画】Midjourney V6初学者完全指南 参数篇

本文我们将详细介绍对图像生成结果产生重大影响的"参数"。 1. 什么是参数? 参数是一种添加到提示末尾以调整图像生成输出设置的方法。 它们用两个连字符"–“和特定字符串表示,如”–ar"、“–chaos”、"–r"等。 您也可以同时使用多个参数…
阅读更多...
java项目中添加SDK项目作为依赖使用（无需上传Maven）

java项目中添加SDK项目作为依赖使用（无需上传Maven）

需求&#xff1a; 当需要多次调用某个函数或算法时&#xff0c;不想每次调用接口都自己编写&#xff0c;可以将该项目打包&#xff0c;以添加依赖的方式实现调用 适用于&#xff1a; 无需上线的项目&#xff0c;仅公司或团队内部使用的项目 操作步骤&#xff1a; 以下面这…
阅读更多...
菜鸟从0学微服务——MyBatis-Plus

菜鸟从0学微服务——MyBatis-Plus

关于“菜鸟从0学微服务” 针对有编程基础&#xff0c;开始学习微服务的同学&#xff0c;我们陆续推出从0学微服务的笔记分享。力求从各个中间件的使用来反思这些中间件的作用和优势。 会分享的比较快&#xff0c;会记录demo演算和中间件的使用过程&#xff0c;至于细节的理论…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023