1# CSS语法参考
2
3
4CSS是描述HML页面结构的样式语言。所有组件均存在系统默认样式，也可在页面CSS样式文件中对组件、页面自定义不同的样式。
5
6
7## 样式导入
8
9为了模块化管理和代码复用，CSS样式文件支持 \@import 语句，导入 CSS 文件。
10
11
12## 声明样式
13
14每个页面目录下存在一个与布局hml文件同名的css文件，用来描述该hml页面中组件的样式，决定组件应该如何显示。
15
161. 内部样式，支持使用style、class属性来控制组件的样式。例如：
17
18   ```html
19   <!-- index.hml -->
20   <div class="container">
21     <text style="color: red">Hello World</text>
22   </div>
23   ```
24
25
26   ```css
27   /* index.css */
28   .container {
29     justify-content: center;
30   }
31   ```
32
332. 文件导入，合并外部样式文件。例如，在common目录中定义样式文件style.css，并在index.css文件首行中进行导入：
34
35   ```css
36   /* style.css */
37   .title {
38     font-size: 50px;
39   }
40   ```
41
42
43   ```css
44   /* index.css */
45   @import '../../common/style.css';
46   .container {
47     justify-content: center;
48   }
49   ```
50
51
52## 选择器
53
54css选择器用于选择需要添加样式的元素，支持的选择器如下表所示：
55
56| 选择器    | 样例                    | 样例描述                                  |
57| ------ | --------------------- | ------------------------------------- |
58| .class | .container            | 用于选择class="container"的组件。             |
59| \#id   | \#titleId             | 用于选择id="titleId"的组件。                  |
60| ,      | .title,&nbsp;.content | 用于选择class="title"和class="content"的组件。 |
61
62示例：
63
64
65```html
66<!-- 页面布局xxx.hml -->
67<div id="containerId" class="container">
68  <text id="titleId" class="title">标题</text>
69  <div class="content">
70    <text id="contentId">内容</text>
71  </div>
72</div>
73```
74
75
76```css
77/* 页面样式xxx.css */
78/* 对class="title"的组件设置样式 */
79.title {
80  font-size: 30px;
81}
82/* 对id="contentId"的组件设置样式 */
83#contentId {
84  font-size: 20px;
85}
86/* 对所有class="title"以及class="content"的组件都设置padding为5px */
87.title, .content {
88  padding: 5px;
89}
90
91```
92
93
94## 伪类
95
96css伪类是选择器中的关键字，用于指定要选择元素的特殊状态。
97
98
99
100| 名称       | 支持组件                                | 描述                                       |
101| -------- | ----------------------------------- | ---------------------------------------- |
102| :active  | <br/>input[type="button"]           | 表示被用户激活的元素，如：被用户按下的按钮。轻量级智能穿戴上伪类选择器上仅支持background-color&nbsp;和background-image&nbsp;的样式设置。 |
103| :checked | input[type="checkbox"、type="radio"] | 表示checked属性为true的元素。轻量级智能穿戴上伪类选择器上仅支持background-color&nbsp;和background-image&nbsp;的样式设置。 |
104
105伪类示例如下，设置按钮的:active伪类可以控制被用户按下时的样式：
106
107
108```html
109<!-- index.hml -->
110<div class="container">
111  <input type="button" class="button" value="Button"></input>
112</div>
113```
114
115
116```css
117/* index.css */
118.button:active {
119  background-color: #888888;/*按钮被激活时，背景颜色变为#888888 */
120}
121```
122
123
124## 样式预编译
125
126预编译提供了利用特有语法生成css的程序，可以提供变量、运算等功能，令开发者更便捷地定义组件样式，目前支持less、sass和scss的预编译。使用样式预编译时，需要将原css文件后缀改为less、sass或scss，如index.css改为index.less、index.sass或index.scss。
127
128- 当前文件使用样式预编译，例如将原index.css改为index.less：
129
130  ```css
131  /* index.less */
132  /* 定义变量 */
133  @colorBackground: #000000;
134  .container {
135    background-color: @colorBackground; /* 使用当前less文件中定义的变量 */
136  }
137  ```
138
139- 引用预编译文件，例如common中存在style.scss文件，将原index.css改为index.scss，并引入style.scss：
140
141  ```css
142  /* style.scss */
143  /* 定义变量 */
144  $colorBackground: #000000;
145  ```
146
147  在index.scss中引用：
148
149
150  ```css
151  /* index.scss */
152  /* 引入外部scss文件 */
153  @import '../../common/style.scss';
154  .container {
155    background-color: $colorBackground; /* 使用style.scss中定义的变量 */
156  }
157  ```
158
159
160  >  **说明：**
161  >
162  >  引用的预编译文件建议放在common目录进行管理。
163