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

news2024/11/18 23:55:12

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:View
    controllerName="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>
                        <Panel
                            headerText="{i18n>helloPanelTitle}"
                            class="sapUiResponsiveMargin"
                            width="auto"
                        >
                            <content>
                                <Button
                                    text="{i18n>showHelloButtonText}"
                                    press=".onShowHello"
                                    class="myCustomButton"
                                />
                                <Input
                                    value="{/recipient/name}"
                                    valueLiveUpdate="true"
                                    width="60%"
                                />
                                <FormattedText
                                    htmlText="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.coloradmin.cn/o/1955015.html

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

相关文章

0801波形脉冲产生与变换 单稳态触发器

0801波形脉冲产生与变换 单稳态触发器

阅读更多...
搭建自己的金融数据源和量化分析平台（三）：读取深交所股票列表

搭建自己的金融数据源和量化分析平台（三）：读取深交所股票列表

深交所的股票信息读取比较简单&#xff1a; 看上图&#xff0c;爬虫读取到下载按钮的链接之后发起请求&#xff0c;得到XLS文件后直接解析就可以了。 这里放出深交所爬虫模块的代码&#xff1a; # -*- coding: utf-8 -*- # 深圳交易所爬虫 import osimport pandas as pd imp…
阅读更多...
关于Buffer和Channel的注意事项和细节

关于Buffer和Channel的注意事项和细节

1.举例 package org.example.demo;import java.io.FileNotFoundException; import java.io.IOException; import java.io.RandomAccessFile; import java.nio.MappedByteBuffer; import java.nio.channels.FileChannel; import java.util.RandomAccess;/*** MappedByteBuffer可…
阅读更多...
mqtt：测试eclipse paho qos=1的数据重发的功能

mqtt：测试eclipse paho qos=1的数据重发的功能

# 测试程序 【pom.xml】 <dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId><version>2.3.12.RELEASE</version></dependency><dependency…
阅读更多...
DNS服务器搭建练习

DNS服务器搭建练习

练习要求&#xff1a; 3、搭建一个dns服务器&#xff0c;客户端可以使用该服务器解析域名www.haha.com为web服务器的 4、将客户端的ip地址中的域名解析服务器地址修改为第3题的dnt服务器的p&#xff0c;使用ping命令ping www.haha.com看能否ping通&#xff0c;用curl命令访问c…
阅读更多...
【PyQt5】一文向您详细介绍 setPlaceholderText() 的作用

【PyQt5】一文向您详细介绍 setPlaceholderText() 的作用

【PyQt5】一文向您详细介绍 setPlaceholderText() 的作用 下滑即可查看博客内容 &#x1f308; 欢迎莅临我的个人主页 &#x1f448;这里是我静心耕耘深度学习领域、真诚分享知识与智慧的小天地&#xff01;&#x1f387; &#x1f393; 博主简介&#xff1a;985高校的普通…
阅读更多...
两种方法在MATLAB中实现共享参数拟合的源代码【MATLAB pk 1stopt】

两种方法在MATLAB中实现共享参数拟合的源代码【MATLAB pk 1stopt】

有伙伴在巴山学长交流群中询问有关如何在matlab中实现共享参数拟合的问题&#xff0c;感觉这个问题挺有意思的&#xff0c;故拿出来与大家分享。咱也根据伙伴的提问在网上进行了相关搜索&#xff0c;发现这个共享参数拟合的问题基本上都跟国产拟合优化神器1stopt这款软件有关。…
阅读更多...
Vue基础2

Vue基础2

1.监视属性 先推荐大家安装第一个vscode常用插件 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><title>天气案例_监视简写</title><!-- 引入Vue --><script type"text/javascript"…
阅读更多...
Linux环境下（DeepinV20+）安装并配置jdk和maven

Linux环境下（DeepinV20+）安装并配置jdk和maven

一、jdk下载 Oracle的JDK开始收费了&#xff0c;如非必要&#xff0c;请勿使用&#xff01;&#xff01;&#xff01; jdk下载地址1&#xff08;推荐&#xff09;https://github.com/graalvm/graalvm-ce-builds/releases jdk下载地址2&#xff08;可选&#xff09;&#xff1a;…
阅读更多...
PsExec横向：IPCPTHPTT

PsExec横向：IPCPTHPTT

一.IPC下的PsExec 二.PTH下的psexec&#xff08;CS操作&#xff09; 三.PTT下的psexec PsExec工具&#xff1a; psexec 是 windows 下非常好的一款远程命令行工具。psexec的使用不需要对方主机开方3389端口&#xff0c;只需要对方开启admin$共享和ipc$ (该共享默认开启&#…
阅读更多...
8. 运行时数据区-堆

8. 运行时数据区-堆

一般Java程序中堆内存是空间最大的一块内存区域。创建出来的对象都存在于堆上。栈上的局部变量表中&#xff0c;可以存放堆上对象的引用。静态变量也可以存放堆对象的引用&#xff0c;通过静态变量就可以实现对象在线程之间共享。 堆内存的调优 堆空间有三个需要关注的值&…
阅读更多...
自编码器（autoencoder）

自编码器（autoencoder）

1.自编码器的由来 最初的自编码器是用来降维的&#xff0c;后来也逐渐用于去噪、生成任务。 2.自编码器的基本结构 自编码器&#xff08;autoencoder&#xff09;内部有一个隐藏层 h&#xff0c;可以产生编码&#xff08;code&#xff09;表示输入。该网络可以看作由两部分组…
阅读更多...
yolo模型训练出的.pt文件过大

yolo模型训练出的.pt文件过大

当我们使用yolov8训练时候&#xff0c;保存的模型变大&#xff0c;如下图&#xff1a; 原模型 训练出来的模型 经过仔细调查&#xff0c;发现是保存的模型中多了很多数据。 原模型 训练出来的模型 只需要把文件中.pt文件读取&#xff0c;重写一遍保存。 from ultralytics im…
阅读更多...
【RabbitMQ】MQ相关概念

【RabbitMQ】MQ相关概念

一、MQ的基本概念 定义&#xff1a;MQ全称为Message Queue&#xff0c;是一种提供消息队列服务的中间件&#xff0c;也称为消息中间件。它允许应用程序通过读写队列中的消息来进行通信&#xff0c;而无需建立直接的连接。作用&#xff1a;主要用于分布式系统之间的通信&#x…
阅读更多...
[工具]GitHub + PicGo 搭建免费博客图床

[工具]GitHub + PicGo 搭建免费博客图床

文章目录 起因GitHub新建GitHub仓库新建token授予picgo权限 PicGOPicGO上传失败原因 起因 还是觉得个人博客记录最好还是不要money&#x1f625;&#xff0c;所以还是想白嫖&#xff0c;找到了GitHub PicGO的方式&#xff0c;记录一下。 GitHub 过程和搭建博客链接类似&…
阅读更多...
【C++】红黑树的应用（封装map和set）

【C++】红黑树的应用（封装map和set）

✨ 青山一道同云雨&#xff0c;明月何曾是两乡 &#x1f30f; &#x1f4c3;个人主页&#xff1a;island1314 &#x1f525;个人专栏&#xff1a;C学习 &#x1f680; 欢迎关注&#xff1a;&#x1f44d;点赞 &…
阅读更多...
SpringBoot3 JDK21 Vue3开源后台RBAC管理系统 | 2024年好用的开源RBAC管理系统 | 数据权限的探索

SpringBoot3 JDK21 Vue3开源后台RBAC管理系统 | 2024年好用的开源RBAC管理系统 | 数据权限的探索

序言 项目现已全面开源&#xff0c;商业用途完全免费&#xff01; 当前版本&#xff1a;v0.7.2。 如果喜欢这个项目或支持作者&#xff0c;欢迎Star、Fork、Watch 一键三连 &#x1f680;&#xff01;&#xff01; 在构建此代码框架的过程中&#xff0c;我已投入了大量精力&…
阅读更多...
51单片机嵌入式开发：20、STC89C52R基于C51嵌入式点阵广告屏的设计

51单片机嵌入式开发：20、STC89C52R基于C51嵌入式点阵广告屏的设计

STC89C52R基于C51嵌入式点阵广告屏的设计 1 概述2 LED点阵介绍2.1 特点和优势2.2 工作原理&#xff1a;2.3 使用方法&#xff1a; 3 LED点阵原理3.1 Led点阵内部电路3.2 原理图电路3.3 74HC595 4 软件实现点阵图案的滑动4.1 软件工程代码4.2 Protues仿真 5 总结 配套示例程序 1…
阅读更多...
寻找事业伴侣：男人如何找到匹配自己事业的女人

寻找事业伴侣：男人如何找到匹配自己事业的女人

寻找事业伴侣&#xff1a;男人如何找到匹配自己事业的女人 前言 在攀登事业的征途上&#xff0c;每位男士都渴望有一位能够并肩作战的伴侣。她不仅要理解你的抱负&#xff0c;还要支持你的每一个决定。但现实中&#xff0c;找到这样的女人并非易事。 以下是一些深入的建议&a…
阅读更多...
Linux信号上

Linux信号上

信号 概念 信号是由于进程产生&#xff0c;但是由内核调度传递给另一个进程&#xff1a; 产生信号 按键产生信号: Ctrc --> 2)SIGINT(终止/中断) Ctrz --> 20)SIGTSTOP(终端暂停) Ctr\ --> 3)SIGQUIT(退出) 系统调用产生: kill(2), raise, abort软件条件产生: 如定…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023