CSS 参考

层叠样式表 (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
CSS IS AWESOME
启用滚动
 overflow: auto;
CSS IS AWESOME
CSS IS AWESOME
剪切掉过宽的内容
 overflow-x: hidden;
CSS IS AWESOME
CSS IS AWESOME
为过长的内容启用滚动
 overflow-y: auto;
CSS IS AWESOME
CSS IS AWESOME

使用省略号表示溢出文本

效果 CSS/样式 原始 应用样式后
省略号 overflow: hidden;
text-overflow: ellipsis;
Internationalization
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;}

后续步骤