层叠样式表 (CSS) 用于控制网站和应用的样式与布局。在 Google 应用制作工具中,您可以使用 CSS 指定微件的颜色、字体和边框等,从而自定义应用的外观。
在页面编辑器右侧菜单中的样式标签中添加您的 CSS。例如,如需将名为 Button1
的按钮变为橙色,您可以在页面中选择该按钮,然后在样式标签页中添加以下代码:
.app-NewPage-Button1 {
background-color: orange;
}
基本 CSS
字体
效果 | CSS/样式 | 原始 | 应用样式后 | 可能的值 |
---|---|---|---|---|
粗体 | font-weight: bold; | sample text | sample text | normal、bold |
斜体 | font-style:italic; | sample text | sample text | normal、italic |
删除线 | text-decoration: line-through; | sample text | sample text | underline、line-through、overline |
文本颜色 | color: red; color: #ff0000; |
sample text | sample text | 颜色名称或 HTML 颜色代码 |
文本大小 | font-size:20px; | sample text | sample text | 像素大小或 em 单位 |
文本对齐方式 | text-align: right; | sample text | sample text | left、center、right |
面板和按钮等
边框
效果 | CSS/样式 | 原始 | 应用样式后 |
---|---|---|---|
添加或更改边框 | border: 1px red solid; | ||
移除边框 | border: none; |
圆角边框
效果 | CSS/样式 | 原始 | 应用样式后 |
---|---|---|---|
将所有角设置为圆角 | border-radius:5px; | ||
分别将角设置为圆角 | border-top-right-radius: 0px; border-top-left-radius: 5px; border-bottom-left-radius: 10px; border-bottom-right-radius: 15px; |
sample text |
sample text |
背景颜色
效果 | CSS/样式 | 原始 | 应用样式后 |
---|---|---|---|
**添加或更改颜色** | background-color: lightgreen; | ||
去除颜色 | background: none; |
光标
效果 | CSS/样式 | 原始 | 应用样式后 |
---|---|---|---|
指针(可点击元素) | cursor: pointer; | sample text | sample text |
箭头(不可点击元素) | cursor: default; | 示例链接 | 示例链接 |
处理溢出内容
有时,应用的内容对于其容器而言过大。无论是对于标签微件而言过长的文本,还是一组不完全适合面板的微件,CSS 都可以在内容溢出容器时定义应用的响应方式。
隐藏溢出内容
效果 | CSS/样式 | 原始 | 应用样式后 |
---|---|---|---|
剪裁掉溢出内容 |
overflow: hidden; | CSS IS AWESOME |
|
启用滚动 |
overflow: auto; | CSS IS AWESOME |
CSS IS AWESOME |
剪切掉过宽的内容 |
overflow-x: hidden; | CSS IS AWESOME |
|
为过长的内容启用滚动 |
overflow-y: auto; | CSS IS AWESOME |
CSS IS AWESOME |
使用省略号表示溢出文本
效果 | CSS/样式 | 原始 | 应用样式后 |
---|---|---|---|
省略号 | overflow: hidden; text-overflow: ellipsis; |
Internationalization |
更改标准浏览器效果
您的浏览器可以通过标准方式显示大多数互动元素。例如,您已访问的链接通常会显示为带下划线,且颜色为紫色。您可以使用 CSS 伪选择器重新定义这些样式。
悬停
将鼠标放在元素上方称为悬停。按钮和链接具有内置的悬停效果,但您可以向任何应用制作工具微件(包括输入字段和面板)添加悬停效果。
CSS/样式 | 原始 | 应用样式后 |
---|---|---|
.blueButton {background-color: blue;} .blueButton:hover {background-color: pink;} |
||
.testClass {} .testClass:hover {background-color: #FFA500;} |
sample text |
sample text |
聚焦和 !important 修饰符
与元素互动可使其处于聚焦状态。例如,在您点击输入框后,会显示一个文本光标。使用聚焦意味着来自键盘的所有输入都将直接输入到聚焦的元素。
有时,您的样式会与浏览器或 Google 应用制作工具主题背景定义的样式冲突。如果您的 CSS 无法呈现,请尝试向样式添加 !important 修饰符,以确保它不会被浏览器或主题背景样式替换。尽量不要过于广泛地应用此修饰符;这可能会替换重要的内置样式。
CSS/样式 | 原始 | 应用样式后 |
---|---|---|
.inputClass {} .inputClass:focus {border:1px solid red;} |
||
.inputClass1 {} .inputClass1:focus {border:1px solid red !important;} |