diff --git a/en/application-dev/ui/figures/en-us_image_0000001063148757.gif b/en/application-dev/ui/figures/en-us_image_0000001063148757.gif new file mode 100644 index 0000000000000000000000000000000000000000..f59b87e0afc79eafbddef8de2a264cf2f41b97c7 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001063148757.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001071134933.png b/en/application-dev/ui/figures/en-us_image_0000001071134933.png new file mode 100644 index 0000000000000000000000000000000000000000..d39e5026790f8d85866b0e293f6b53ad455ff1c4 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001071134933.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001217168141.gif b/en/application-dev/ui/figures/en-us_image_0000001217168141.gif new file mode 100644 index 0000000000000000000000000000000000000000..75abb6f81315b55e677acd8c4d943b2f22d76fff Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001217168141.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001220635011.gif b/en/application-dev/ui/figures/en-us_image_0000001220635011.gif new file mode 100644 index 0000000000000000000000000000000000000000..0be34d5b9598c7e03132b08e030fd71d977886b5 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001220635011.gif differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001223127724.png b/en/application-dev/ui/figures/en-us_image_0000001223127724.png deleted file mode 100644 index 5000709da6dfadee24e10fdbd679b3a28e46578b..0000000000000000000000000000000000000000 Binary files a/en/application-dev/ui/figures/en-us_image_0000001223127724.png and /dev/null differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001223127752.gif b/en/application-dev/ui/figures/en-us_image_0000001223127752.gif deleted file mode 100644 index d669cf40b97891ba3853be28574dceae172fe138..0000000000000000000000000000000000000000 Binary files a/en/application-dev/ui/figures/en-us_image_0000001223127752.gif and /dev/null differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001223287696.gif b/en/application-dev/ui/figures/en-us_image_0000001223287696.gif deleted file mode 100644 index 2283e46371317539004c0007886500c1a81dd83a..0000000000000000000000000000000000000000 Binary files a/en/application-dev/ui/figures/en-us_image_0000001223287696.gif and /dev/null differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001267647889.gif b/en/application-dev/ui/figures/en-us_image_0000001267647889.gif deleted file mode 100644 index f470f5261becb6c2d7b30f691a0794db2b1feb93..0000000000000000000000000000000000000000 Binary files a/en/application-dev/ui/figures/en-us_image_0000001267647889.gif and /dev/null differ diff --git a/en/application-dev/ui/js-framework-syntax-css.md b/en/application-dev/ui/js-framework-syntax-css.md index 46fcc170df8f4688da555b6874a6842c1c6806e8..29ae5f820d24313982afda37f47ff0d613da256f 100644 --- a/en/application-dev/ui/js-framework-syntax-css.md +++ b/en/application-dev/ui/js-framework-syntax-css.md @@ -1,28 +1,27 @@ # CSS - 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 -- Logical px set by \: - - 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. +- Logical px set by **\**: + + - 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. -- 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 **\**: The component size is represented by its percentage of the parent component size. For example, if the width **\** of a component is set to **50%**, the width of the component is half of its parent component's width. ## Style Import -CSS files can be imported using the @import statement. This facilitates module management and code reuse. +CSS files can be imported using the **@import** statement. This facilitates module management and code reuse. ## Style Declaration -The .css file with the same name as the .hml file in each page directory describes the styles of components on the HML page, determining how the components will be displayed. +The **.css** file with the same name as the **.hml** file in each page directory describes the styles of components on the HML page, determining how the components will be displayed. -1. Internal style: The style and class attributes can be used to specify the component style. Example: - +1. Internal style: The **style** and **class** attributes can be used to specify the component style. Example: ```html
@@ -30,7 +29,6 @@ The .css file with the same name as the .hml file in each page directory describ
``` - ```css /* index.css */ .container { @@ -38,8 +36,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. - +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 { @@ -47,7 +44,6 @@ The .css file with the same name as the .hml file in each page directory describ } ``` - ```css /* index.css */ @import '../../common/style.css'; @@ -61,19 +57,18 @@ The .css file with the same name as the .hml file in each page directory describ A CSS selector is used to select elements for which styles need to be added to. The following table lists the supported selectors. -| Selector | Example | Description | -| -------- | -------- | -------- | -| .class | .container | Selects all components whose class is container. | -| \#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 **\** 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: +| Selector | Example | Description | +| ------------------------- | ------------------------------------- | ---------------------------------------- | +| .class | .container | Selects all components whose **class** is **container**. | +| \#id | \#titleId | Selects all components whose **id** is **titleId**. | +| tag | text | Selects all **\** components. | +| , | .title, .content | Selects all components whose **class** is **title** or **content**. | +| \#id .class tag | \#containerId .content text | Selects all grandchild **\** 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**.| +Example: ```html - +
Title
@@ -82,18 +77,17 @@ The following is an example:
``` - ```css -/* Page style xxx.css */ +/* Pagestyleexample.css */ /* Set the style for all
components. */ div { flex-direction: column; } -/* Set the style for the component whose class is title.*/ +/* Set the style for the components whose class is title. */ .title { font-size: 30px; } -/* Set the style for the component whose id is contentId. */ +/* Set the style for the components whose id is contentId. */ #contentId { font-size: 20px; } @@ -101,12 +95,12 @@ div { .title, .content { padding: 5px; } -/* Set the style for all texts of components whose class is container.*/ +/* Set the style for all texts of components whose class is container. */ .container text { - color: \#007dff; + color: #007dff; } -/* Set the style for direct descendant texts of components whose class is container.*/ -.container > text { +/* Set the style for direct descendant texts of components whose class is container. */ +.container > text { color: #fa2a2d; } ``` @@ -115,31 +109,29 @@ The above style works as follows: ![en-us_image_0000001267607889](figures/en-us_image_0000001267607889.png) -In the preceding example, .container text sets title and content to blue, and .container > text sets title to red. The two styles have the same priority, but .container > text declares the style later and overwrites the former style. (For details about the priority, see [Selector Specificity](#selector-specificity).) +In the preceding example, **.container text** sets title and content to blue, and **.container > text** sets title to red. The two styles have the same priority, but **.container > text** declares the style later and overwrites the former style. For details about the priority, see [Selector Specificity](#selector-specificity). ## Selector Specificity -The specificity rule of the selectors complies with the W3C rule, which is only available for inline styles, id, class, tag, grandchild components, and child components. (Inline styles are those declared in the style attribute.) +The specificity rule of the selectors complies with the W3C rule, which is only available for inline styles, **id**, **class**, **tag**, grandchild components, and child components. (Inline styles are those declared in the **style** attribute.) -When multiple selectors point to the same element, their priorities are as follows (in descending order): inline style > id > class > tag. +When multiple selectors point to the same element, their priorities are as follows (in descending order): inline style > **id** > **class** > **tag**. ## Pseudo-classes -A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, :disabled can be used to select the element whose disabled attribute is true. - -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. - +A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected elements. For example, **:disabled** can be used to select the element whose **disabled** attribute is **true**. -| 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). | -| :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). | +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. -The following is an example for you to use the **:active** pseudo-class to control the style when a user presses the button. +| 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). | +| :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"], switch | Selects the element whose **checked** attribute is **true** (unavailable for animation attributes). | +The following is an example for you to use the **:active** pseudo-class to control the style when a user presses the button. ```html @@ -151,32 +143,29 @@ The following is an example for you to use the **:active** pseudo-class to contr ```css /* index.css */ .button:active { - background-color: #888888;/* After the button is activated, the background color is changed to #888888. */ + background-color: #888888;/* After the button is activated, the background color is changed to #888888. */ } ``` > **NOTE** -> -> Pseudo-classes are not supported for the **\** component and its child components, including **\**, **\**, **\**, **\