#应用样式

层叠样式表（Cascading Style Sheet，CSS）用于为 Lynx 页面设置样式和进行布局。例如更改内容的字体、颜色、大小和位置，将内容拆分为多列，或者添加动画及其他装饰性元件，通过这些来使你的页面更生动有趣。此外，Lynx 中还提供了众多以 -x- 开头的特有属性来辅助你更轻松地实现样式设计。 下面的教程将会展示如何通过 CSS 将样式添加到元件上。

#选择器和内联样式

你可以通过选择器来将样式属性的集合应用到对应元件上。

比如通过类选择器和 class 属性的组合：

<Go/>

csssrc/class_guide/index.tsx

Code

预览

也可以通过 style 内联样式属性直接定义元件的样式，例如上面的例子中的 8 ~ 15 行通过内联样式定义了元件的宽、高、和位置等。

• 学习更多属性相关内容
• 查看属性 API 参考
• 查看选择器 API 参考

#嵌套

使用嵌套语法，很多时候可以简化对 CSS 类的定义，使用 Sass 或者是通过其他 PostCSS 插件如 postcss-nesting 处理。

.a {
  background: red;
  &-b {
    border-radius: 30px;
  }
}

/* 等效于 */

.a {
  background: red;
}

.a-b {
  border-radius: 30px;
}

#CSS 层叠

当多个选择器同时选中了同一个元件时，如果其中含有相同的属性，CSS 层叠规范定义了它们生效的优先级。 比如，通过元件上的样式属性（style）设置的样式会覆盖通过样式规则（style rule, 比如类选择器）匹配到的样式; 权重（specificity）高的选择器中的样式覆盖权重低的；在文档中后出现的样式规则覆盖先出现的等。

<Go/>

csssrc/cascade_guide/index.css

Code

预览

在上面的例子中，类选择器 bg-gradient 和 bg-color 都选中了这一 <view> 元件，他们都通过 background 属性设置了背景填充样式。根据级联的优先级，在 CSS 文档中后定义的生效，因此在表现上，是一个红色的矩形。

#CSS 变量与选择性继承

Lynx 支持 CSS 自定义属性（CSS 变量）和可选择的 CSS 继承，用于动态样式和主题化。

CSS 变量默认可继承，常规（非自定义）CSS 属性需显式配置。详见主题化指南：

• 使用 CSS 后代选择器切换主题
• 使用 CSS 变量切换主题
• 配置 CSS 继承