update docs

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>

en/application-dev/ui/js-framework-resource-restriction.md

@@ -25,7 +25,7 @@ The name of a resource qualifier consists of one or more qualifiers that represe
 
 | Data Type | Description and Value Range |
 | -------- | -------- |
-| Screen density | Indicates the screen density of the device, in dpi. The value can be:<br/>- ldpi: low-density screen (~120 dpi) (0.75 x Reference density)<br/>- mdpi: medium-density screen (~160 dpi) (reference density)<br/>- hdpi: high-density screen (~240 dpi) (1.5 x Reference density)<br/>- xhdpi: extra high-density screen (~320 dpi) (2.0 x Reference density)<br/>- xxhdpi: extra extra high-density screen (~480 dpi) (3.0 x Reference density)<br/>- xxxhdpi: extra extra extra high-density screen (~640 dpi) (4.0 x Reference density) |
+| Screen density | Indicates the screen density of the device, in dpi. The value can be:<br/>- ldpi: low-density screen (\~120 dpi) (0.75 x Reference density)<br/>- mdpi: medium-density screen (\~160 dpi) (reference density)<br/>- hdpi: high-density screen (\~240 dpi) (1.5 x Reference density)<br/>- xhdpi: extra high-density screen (\~320 dpi) (2.0 x Reference density)<br/>- xxhdpi: extra extra high-density screen (\~480 dpi) (3.0 x Reference density)<br/>- xxxhdpi: extra extra extra high-density screen (\~640 dpi) (4.0 x Reference density) |
 
 
 ## Rules for Matching Qualifiers Files and Device Resources
@@ -41,7 +41,7 @@ You can use the $r syntax in the application development files .hml and .js to f
 
 | Attribute | Type | Description |
 | -------- | -------- | -------- |
-| $r | (key: string) => string | Obtains the resource content that matches the specific qualifiers, for example, this.$r('strings.hello loaded).<br/>Parameter description:<br/>- key: key value defined in the resource qualifier file, for example, strings.hello. |
+| $r | (key: string) => string | Obtains the resource content that matches the specific qualifiers, for example, this.$r('strings.hello loaded).<br/>Parameter description:<br/>- key: key value defined in the resource qualifier file, for example, strings.hello.<br/> |
 
 Example of res-defaults.json:<br/>
 

en/application-dev/ui/ts-component-based-styles.md

 # @Styles
 
 
-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.
+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 included.
 
 
 
@@ -36,11 +35,10 @@ struct FancyUse {
 }
 ```
 
-
-@Styles can also be used inside the StateStyles attribute to assign state-specific attributes to components.
+**@Styles** can also be used inside the **StateStyles** attribute to assign state-specific attributes to components.
 
 
-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.
+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.
 
 
 
@@ -53,22 +51,22 @@ In StateStyles, styles defined outside the component can be directly called. How
 @Entry
 @Component
 struct FancyUse {
-  @Styles function componentFancy() {
+  @Styles componentFancy() {
     .width(50)
     .height(50)
   }
   build() {
     Row({ space: 10 }) {
       Button() {
-	Text("Fancy")
+      	Text("Fancy")
       }
       .stateStyles({
-	normal: {
-	  .width(80)
-	  .height(80)
-	},
-	disabled: this.componentFancy,
-	pressed: globalFancy
+      	normal: {
+      	  .width(80)
+      	  .height(80)
+      	},
+      	disabled: this.componentFancy,
+      	pressed: globalFancy
       })
     }
   }