Cascading Style Sheets (CSS) is a language used to describe the HML page structure. All HML components have default styles. You can customize styles for these components using CSS to design various pages.
Cascading Style Sheets (CSS) is a language used to describe the HML page structure. All HML components have default styles. You can customize styles for these components using CSS to design various pages. For details, see [Universal Styles](../reference/arkui-js/js-components-common-styles.md).
## Size Unit
1. Logical px set by <length>:
1. The default logical screen width is 720 px (for details, see the "window" section in [config.json](js-framework-js-tag.md)). Your page will be scaled to fit the actual width of the screen. For example, on a screen with the actual width of 1440 physical px, 100 px is displayed on 200 physical px, with all sizes doubled from 720 px to 1440 px.
2. If you set autoDesignWidth to true (for details, see the "window" section in [config.json](js-framework-js-tag.md)), the logical px are scaled based on the screen density. For example, if the screen density is 3x, 100 px will be rendered on 300 physical px. This approach is recommended when your application needs to adapt to multiple devices.
- Logical px set by \<length>:
- The default logical screen width is 720 px (for details, see the "window" section in [config.json](js-framework-js-tag.md)). Your page will be scaled to fit the actual width of the screen. For example, on a screen with the actual width of 1440 physical px, 100 px is displayed on 200 physical px, with all sizes doubled from 720 px to 1440 px.
- If you set autoDesignWidth to true (for details, see the "window" section in [config.json](js-framework-js-tag.md)), the logical px are scaled based on the screen density. For example, if the screen density is 3x, 100 px will be rendered on 300 physical px. This approach is recommended when your application needs to adapt to multiple devices.
2. Percentage set by <percentage>: The component size is represented by its percentage of the parent component size. For example, if the width <percentage> of a component is set to 50%, the width of the component is half of its parent component's width.
- Percentage set by <percentage>: The component size is represented by its percentage of the parent component size. For example, if the width <percentage> of a component is set to 50%, the width of the component is half of its parent component's width.
## Style Import
...
...
@@ -23,7 +23,7 @@ The .css file with the same name as the .hml file in each page directory describ
1. Internal style: The style and class attributes can be used to specify the component style. Example:
```
```html
<!-- index.hml -->
<divclass="container">
<textstyle="color: red">Hello World</text>
...
...
@@ -31,7 +31,7 @@ The .css file with the same name as the .hml file in each page directory describ
```
```
```css
/* index.css */
.container{
justify-content:center;
...
...
@@ -40,7 +40,7 @@ The .css file with the same name as the .hml file in each page directory describ
2. External style files: You need to import the files. For example, create a style.css file in the common directory and import the file at the beginning of index.css.
```
```css
/* style.css */
.title{
font-size:50px;
...
...
@@ -48,7 +48,7 @@ The .css file with the same name as the .hml file in each page directory describ
```
```
```css
/* index.css */
@import'../../common/style.css';
.container{
...
...
@@ -67,12 +67,12 @@ A CSS selector is used to select elements for which styles need to be added to.
| \#id | \#titleId | Selects all components whose id is titleId. |
| tag | text | Selects all <text> components. |
| , | .title, .content | Selects all components whose class is title or content. |
| \#id .class tag | \#containerId .content text | Selects all grandchild <text> components whose grandparent components are identified as containerId and whose parent components are of the content class. To select child components, use > to replace the space between \#id and .class, for example, \#containerId>.content. |
| \#id .class tag | \#containerId .content text | Selects all grandchild **\<text>** components whose grandparent components are identified as containerId and whose parent components are of the content class. To select child components, use > to replace the space between **\#id** and **.class**, for example, **\#containerId>.content**. |
The following is an example:
```
```html
<!-- Page layoutxxx.hml -->
<divid="containerId"class="container">
<textid="titleId"class="title">Title</text>
...
...
@@ -83,9 +83,9 @@ The following is an example:
```
```
```css
/* Page style xxx.css */
/* Set the style for all <div> components. */
/\*Setthestyleforall<div>components.\*/
div{
flex-direction:column;
}
...
...
@@ -101,15 +101,13 @@ div {
.title,.content{
padding:5px;
}
/* Set the style for all texts of components whose class is container.
@@ -132,44 +130,44 @@ A CSS pseudo-class is a keyword added to a selector that specifies a special sta
In addition to a single pseudo-class, a combination of pseudo-classes is supported. For example, :focus:checked selects the element whose focus and checked attributes are both set to true. The following table lists the supported single pseudo-class in descending order of priority.
| Pseudo-class | Available Components | Description |
| Pseudo-class | Available Components | Description |
| -------- | -------- | -------- |
| :disabled | Components that support the disabled attribute | Selects the element whose disabled attribute is changed to true (unavailable for animation attributes). |
| :focus | Components that support the focusable attribute | Selects the element that takes focus (unavailable for animation attributes). |
| :active | Components that support the click event<br/> | Selects the element activated by a user. For example, a pressed button or a selected tab-bar (unavailable for animation attributes). |
| :waiting | button | Selects the element whose waiting attribute is true (unavailable for animation attributes). |
| :disabled | Components that support the disabled attribute | Selects the element whose disabled attribute is changed to true (unavailable for animation attributes). |
| :focus | Components that support the focusable attribute | Selects the element that takes focus (unavailable for animation attributes). |
| :active | Components that support the click event | Selects the element activated by a user. For example, a pressed button or a selected tab-bar (unavailable for animation attributes). |
| :waiting | button | Selects the element whose waiting attribute is true (unavailable for animation attributes). |
| :checked | input[type="checkbox", type="radio"], and switch | Selects the element whose checked attribute is true (unavailable for animation attributes). |
| :hover<sup>6+</sup> | Components that support the mouseover event | Selects the element that the cursor is on. |
The following is an example for you to use the :active pseudo-class to control the style when a user presses the button.
The following is an example for you to use the **:active** pseudo-class to control the style when a user presses the button.
> Pseudo-classes are not supported for the <popup> component and its child components, including <popup>, <dialog>, <menu>, <option>, and <picker>.
> **NOTE**
>
> Pseudo-classes are not supported for the **\<popup>** component and its child components, including **\<popup>**, **\<dialog>**, **\<menu>**, **\<option>**, and **\<picker>**.
## Precompiled Styles
Precompilation is a program that uses specific syntax to generate CSS files. It provides variables and calculation, helping you define component styles more conveniently. Currently, Less, Sass, and Scss are supported. To use precompiled styles, change the suffix of the original .css file. For example, change index.css to index.less, index.sass, or index.scss.
Precompilation is a program that uses specific syntax to generate CSS files. It provides variables and calculation, helping you define component styles more conveniently. Currently, Less, Sass, and Scss are supported. To use precompiled styles, change the suffix of the original .css file. For example, change **index.css** to **index.less**, **index.sass**, or **index.scss**.
- The following index.less file is changed from index.css.
```
```less
/* index.less */
/* Define a variable. */
@colorBackground: #000000;
...
...
@@ -178,18 +176,18 @@ Precompilation is a program that uses specific syntax to generate CSS files. It
}
```
- Reference a precompiled style file. For example, if the style.scss file is located in the common directory, change the original index.css file to index.scss and import style.scss.
- Reference a precompiled style file. For example, if the **style.scss** file is located in the common directory, change the original index.css file to **index.scss** and import **style.scss**.
```
```scss
/* style.scss */
/* Define a variable. */
$colorBackground:#000000;
```
Reference the precompiled style file in index.scss:
Reference the precompiled style file in **index.scss**:
```
```scss
/* index.scss */
/* Import style.scss. */
@import'../../common/style.scss';
...
...
@@ -199,7 +197,8 @@ Precompilation is a program that uses specific syntax to generate CSS files. It
A struct decorated by @Component has the componentization capability and can serve as an independent component. This type of component is also called a custom component, and its UI structure is described in the build method. Custom components have the following features:
A struct decorated by **@Component** has the componentization capability and can serve as an independent component. This type of component is also called a custom component, and its UI structure is described in the **build** method. Custom components have the following features:
- Composability: Custom components can be used with preset or other components, as well as common attributes and methods.
- Chain call<sup>9+</sup>: Universal attributes can be invoked in chain call mode to change the component style.
- Reusable: Custom components can be reused by other components and used as different instances in different parent components or containers.
- Lifecycle: Custom components provide callbacks for service logic processing throughout the lifecycle.
- Data-driven update: The UI of custom components can be automatically updated based on the data of state variables.
For details about componentization, see [About @Component](ts-custom-component-initialization.md).
> **NOTE**
>
> - The **build** method must be defined for a custom component.
> **NOTE**
>
> - Custom constructors are prohibited for custom components.
> - The **build** method must be defined for a custom component.
>- Custom constructors are prohibited for custom components.
The following code illustrates how to create a custom component named **MyComponent**:
```
```ts
@Component
structMyComponent{
build(){
...
...
@@ -38,12 +35,13 @@ struct MyComponent {
```
The **build** method of **MyComponent** is executed during initial rendering. When the component status changes, the build method will be executed again.
The **build** method of **MyComponent** is executed during initial rendering. When the component status changes, the **build** method will be executed again.
The following code illustrates how to use **MyComponent**:
```
```ts
@Component
structParentComponent{
build(){
...
...
@@ -56,9 +54,11 @@ struct ParentComponent {
}
```
**MyComponent** can be applied multiple times and reused in different components, as shown in the code below:
```
```ts
@Component
structParentComponent{
build(){
...
...
@@ -85,3 +85,38 @@ struct ParentComponent {
}
}
```
Universal attributes can be invoked in chain call mode to diversify component styles.
> **NOTE**
>
> This feature is supported since API version 9.
>
> The chain call for custom components does not support trailing closures in the following scenario: When the custom component is initialized, the component name is followed by a pair of braces ({}) to form a trailing closure (as in `Index(){}`). You can consider a trailing closure as a container and add content to it, as in `{Column(){Text("content")}`.
The **@Styles** decorator adds new attribute functions to basic components, such as **\<Text>**, **\<Column>**, and **\<Button>**. Currently, **@Styles** supports only universal attributes. You can use the **@Styles** decorator to quickly define and reuse the custom styles of a component.
**@Styles** can be defined inside or outside a component. When it is defined outside a component, the keyword function must be included.
**@Styles** can be defined inside or outside a component. When it is defined outside a component, the keyword **function** must be added before the API name.
```
```ts
// xxx.ets
@StylesfunctionglobalFancy(){
.backgroundColor(Color.Red)
}
...
...
@@ -40,9 +41,8 @@ struct FancyUse {
In **StateStyles**, styles defined outside the component can be directly called. However, the keyword **this** must be used to call styles defined in the component.
@@ -76,22 +76,22 @@ In this section, we will develop an infographic food details page, by building c
1. The width and height of the image are not set.
2. The default attribute of **objectFit** of the image is **ImageFit.Cover**, that is, the image is zoomed in or zoomed out to fill the entire display boundary with the aspect ratio locked.
