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.rhkb.cn/news/385801.html

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

相关文章

6.6 使用dashboard商城搜索导入模板

6.6 使用dashboard商城搜索导入模板

本节重点介绍 : 模板商城中搜索模板导入模板修改模板 大盘模板商城地址 免费的 地址 https://grafana.com/grafana/dashboards 搜索模板技巧 详情 导入dashboard 两种导入模式 url导入id导入json文件导入 导入 node_exporter模板 https://grafana.com/grafana/dashboa…
阅读更多...
“葫芦娃”竟上了SCI论文！当童年碰上科研，你还会觉得科研枯燥吗？

“葫芦娃”竟上了SCI论文！当童年碰上科研，你还会觉得科研枯燥吗？

本周投稿推荐 SCI • 能源电力类&#xff0c;1.5-2.0&#xff08;25天来稿即录&#xff09; • 1区计算机类&#xff0c;3.5-4.0&#xff08;1个月录用&#xff09; • CCF推荐&#xff0c;1区-Top&#xff08;3天初审&#xff09; EI • 各领域沾边均可&#xff08;2天录…
阅读更多...
[CISCN2019 华东南赛区]Web11

[CISCN2019 华东南赛区]Web11

进来先做信息收集&#xff0c;右上角显示当前ip&#xff0c;然后有api的调用地址和请求包的格式以及最重要的是最下面的smarty模版&#xff0c;一看到这个就得想到smarty模版注入 测试了一下两个api都无法访问 直接切到数据包看看能不能通过XFF来修改右上角ip 成功修改&#x…
阅读更多...
Flink笔记整理（四）

Flink笔记整理（四）

Flink笔记整理&#xff08;四&#xff09; 文章目录 Flink笔记整理&#xff08;四&#xff09;六、Flink中的时间和窗口6.1 窗口&#xff08;Window&#xff09;窗口的概念窗口的分类窗口API概览窗口分配器窗口函数&#xff08;Window Functions&#xff09; 6.2 时间语义&…
阅读更多...
Windows电脑如何启动RTSP服务实现本地摄像头数据共享

Windows电脑如何启动RTSP服务实现本地摄像头数据共享

技术背景 提起Windows共享本地摄像头&#xff0c;好多人想到的是通过ffmepg或vlc串流到服务器&#xff0c;实际上&#xff0c;用轻量级RTSP服务更简单&#xff0c;本文就介绍下&#xff0c;如何用大牛直播SDK的Windows轻量级RTSP服务&#xff0c;采集摄像头&#xff0c;生成本…
阅读更多...
React Router-v6.25.1

React Router-v6.25.1

以下例子是根据vitereactts构建的&#xff0c;使用路由前先安装好这些环境&#xff01;&#xff01;&#xff01;&#xff01; 1、路由的简单使用 首先要创建一个浏览器路由器并配置我们的第一个路由。这将为我们的 Web 应用启用客户端路由。 该main.jsx文件是入口点。打开它…
阅读更多...
什么是大型语言模型 (LLM)

什么是大型语言模型 (LLM)

本章探讨下&#xff0c;人工智能如何彻底改变我们理解和与语言互动的方式 大型语言模型 (LLM) 代表了人工智能的突破&#xff0c;它采用具有广泛参数的神经网络技术进行高级语言处理。 本文探讨了 LLM 的演变、架构、应用和挑战&#xff0c;重点关注其在自然语言处理 (NLP) 领…
阅读更多...
Unity XR Interaction Toolkit设置或监听手柄按键事件（三）

Unity XR Interaction Toolkit设置或监听手柄按键事件（三）

提示&#xff1a;文章有错误的地方&#xff0c;还望诸位大神不吝指教&#xff01; 文章目录 前言一、XRI Default Input Actions1.导入官方案例2.设置控制器绑定&#xff0c;如手柄、主/辅助按钮、操纵杆等1.要设置控制器绑定&#xff0c;如左右手 手柄、主/辅助按钮、操纵杆等…
阅读更多...
UART编程框架详解

UART编程框架详解

1. UART介绍 UART&#xff1a;通用异步收发传输器&#xff08;Universal Asynchronous Receiver/Transmitter)&#xff0c;简称串口。 调试&#xff1a;移植u-boot、内核时&#xff0c;主要使用串口查看打印信息 外接各种模块 1.1 硬件知识_UART硬件介绍 UART的全称是Unive…
阅读更多...
微信小程序教程001：小程序简介

微信小程序教程001：小程序简介

文章目录 学习目标小程序简介1、小程序和普通网页开发的区别2、注册小程序账号3、获取小程序的AppID4、安装开发者工具4.1 了解开发者工具4.2 下载开发工具 5、设置开发者工具外观 学习目标 如何创建小程序项目小程序项目的基本组成结构小程序页面由几部分组成小程序常见的组件…
阅读更多...
小模型狂飙！6家巨头争相发布小模型，Andrej Karpathy：大语言模型的尺寸竞争正在倒退...

小模型狂飙！6家巨头争相发布小模型，Andrej Karpathy：大语言模型的尺寸竞争正在倒退...

过去一周&#xff0c;可谓是小模型战场最疯狂的一周&#xff0c;商业巨头改变赛道&#xff0c;向大模型say byebye~。 OpenAI、Apple、Mistral等“百花齐放”&#xff0c;纷纷带着自家性能优越的轻量化小模型入场。 小模型(SLM)&#xff0c;是相对于大语言模型&#xff08;LLM…
阅读更多...
sql注入详解【从数据库架构分析】

sql注入详解【从数据库架构分析】

文章目录 简介数据库的架构sql注入概念正常语句正常回显页面在页面中使用sql语句 跨库查询sql文件读写影响条件复现读写的路径的问题 sql注入请求分类sql注入请求类型sql注入请求方式&#xff1a;sql注入数据请求格式 数据库的增删改查数据库查询数据库添加数据库删除数据库修改…
阅读更多...
拓扑排序+dp（消除主观臆断）

拓扑排序+dp（消除主观臆断）

这题一开始写错的原因就是搞错了&#xff0c;处于西边的节点的编号不一定小&#xff0c;不能直接dp&#xff0c;要先进行拓扑排序 写到一般我才发现&#xff0c;其实可以一边dp&#xff0c;一边进行dp #define _CRT_SECURE_NO_WARNINGS #include<bits/stdc.h> using name…
阅读更多...
GPT-4o mini 震撼登场：开发者的新机遇与挑战

GPT-4o mini 震撼登场：开发者的新机遇与挑战

GPT-4o mini 震撼登场&#xff1a;开发者的新机遇与挑战 一、引言二、GPT-4o mini 模型的卓越性能三、极具竞争力的价格优势四、开发者的探索与实践五、提升开发效率和创新能力的策略六、面临的挑战与应对措施七、未来展望八、总结 在科技的浪潮中&#xff0c;OpenAI 最新推出的…
阅读更多...
论文快过（图像配准|Coarse_LoFTR_TRT）|适用于移动端的LoFTR算法的改进分析 1060显卡上45fps

论文快过（图像配准|Coarse_LoFTR_TRT）|适用于移动端的LoFTR算法的改进分析 1060显卡上45fps

项目地址&#xff1a;https://github.com/Kolkir/Coarse_LoFTR_TRT 创建时间&#xff1a;2022年 相关训练数据&#xff1a;BlendedMVS LoFTR [19]是一种有效的深度学习方法&#xff0c;可以在图像对上寻找合适的局部特征匹配。本文报道了该方法在低计算性能和有限内存条件下的…
阅读更多...
改进智能优化算法中的一个常见错误

改进智能优化算法中的一个常见错误

声明&#xff1a;文章是从本人公众号中复制而来&#xff0c;因此&#xff0c;想最新最快了解各类智能优化算法及其改进的朋友&#xff0c;可关注我的公众号&#xff1a;强盛机器学习&#xff0c;不定期会有很多免费代码分享~ ​昨天看到网上有一个流传很广的改进鲸鱼优化算法M…
阅读更多...
vue3 使用Mock

vue3 使用Mock

官网: http://mockjs.com/ 安装 npm install mockjs -Dsteps1: main.js 文件引入 import /api/mock.jssteps2: src/api/mock.js import Mock from mockjs import homeApi from ./mockData/home /*** 1.拦截的路径:mock拦截了正常NetWork/网络请求,数据正常响应* 2.方法* …
阅读更多...
货架管理a

货架管理a

路由->vue的el标签->Api->call方法里calljs的api接口->数据声明const xxxData-> 编辑按钮:点击跳出页面并把这一行的数据给到表单formDataba2 保存按钮:formDataba2改过的数据->xxApi发送->查询Api 跳转仓库:把tableData.value数据清空->callXxxAp…
阅读更多...
传输层协议——TCP

传输层协议——TCP

TCP协议 TCP全称为“传输控制协议”&#xff0c;要对数据的传输进行一个详细的控制。 特点 面向连接的可靠性字节流 TCP的协议段格式 源/目的端口&#xff1a;表示数据从哪个进程来&#xff0c;到哪个进程4位首部长度&#xff1a;表示该TCP头部有多少字节&#xff08;注意它…
阅读更多...
前后端分离项目部署，vue--nagix发布部署，.net--API发布部署。

前后端分离项目部署，vue--nagix发布部署，.net--API发布部署。

目录 Nginx免安装部署文件包准备一、vue前端部署1、修改http.js2、npm run build 编译项目3、解压Nginx免安装，修改nginx.conf二、.net后端发布部署1、编辑appsetting.json，配置跨域请求2、配置WebApi，点击发布3、配置文件发布到那个文件夹4、配置发布相关选项5、点击保存，…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023