docs: update translation

Author: xiaoyu2er

apps/docs/content/zh-hans/docs/01-app/01-getting-started/06-css.mdx

@@ -1,12 +1,12 @@
 ---
-source-updated-at: 2025-05-19T22:31:51.000Z
-translation-updated-at: 2025-05-19T23:06:25.929Z
+source-updated-at: 2025-05-25T15:16:02.000Z
+translation-updated-at: 2025-05-25T20:26:25.233Z
 title: 如何在应用中使用 CSS
 nav_title: CSS
 description: 了解在应用中添加 CSS 的不同方式，包括 CSS 模块 (CSS Modules)、全局 CSS (Global CSS)、Tailwind CSS 等。
 related:
-  title: 下一步
-  description: 进一步了解在应用中使用 CSS 的其他方式。
+  title: 后续步骤
+  description: 进一步了解在应用中使用 CSS 的其他替代方案。
   links:
     - app/guides/tailwind-css
     - app/guides/sass
@@ -24,13 +24,13 @@ Next.js 提供了多种在应用中使用 CSS 的方式，包括：
 
 ## CSS 模块 (CSS Modules)
 
-CSS 模块 (CSS Modules) 通过生成唯一的类名来实现 CSS 的局部作用域。这允许你在不同文件中使用相同的类名而无需担心命名冲突。
+CSS 模块通过生成唯一的类名来实现 CSS 的局部作用域，这样您可以在不同文件中使用相同的类名而无需担心命名冲突。
 
 <AppOnly>
 
-要开始使用 CSS 模块 (CSS Modules)，创建一个扩展名为 `.module.css` 的文件，并将其导入到 `app` 目录下的任意组件中：
+要开始使用 CSS 模块，请创建一个扩展名为 `.module.css` 的新文件，并将其导入到 `app` 目录中的任意组件：
 
-```css filename="app/blog/styles.module.css"
+```css filename="app/blog/blog.module.css"
 .blog {
   padding: 24px;
 }
@@ -56,7 +56,7 @@ export default function Layout() {
 
 <PagesOnly>
 
-要开始使用 CSS 模块 (CSS Modules)，创建一个扩展名为 `.module.css` 的文件，并将其导入到 `pages` 目录下的任意组件中：
+要开始使用 CSS 模块，请创建一个扩展名为 `.module.css` 的新文件，并将其导入到 `pages` 目录中的任意组件：
 
 ```css filename="/styles/blog.module.css"
 .blog {
@@ -84,11 +84,11 @@ export default function Page() {
 
 ## 全局 CSS (Global CSS)
 
-你可以使用全局 CSS (Global CSS) 在整个应用中应用样式。
+您可以使用全局 CSS 来为整个应用应用样式。
 
 <AppOnly>
 
-创建一个 `app/global.css` 文件，并在根布局中导入它，以将样式应用到应用中的**每个路由**：
+创建一个 `app/global.css` 文件并将其导入根布局 (root layout)，这样样式将应用到应用中的**每个路由**：
 
 ```css filename="app/global.css"
 body {
@@ -99,7 +99,7 @@ body {
 ```
 
 ```tsx filename="app/layout.tsx" switcher
-// 这些样式会应用到应用中的每个路由
+// 这些样式将应用到应用中的每个路由
 import './global.css'
 
 export default function RootLayout({
@@ -116,7 +116,7 @@ export default function RootLayout({
 ```
 
 ```jsx filename="app/layout.js" switcher
-// 这些样式会应用到应用中的每个路由
+// 这些样式将应用到应用中的每个路由
 import './global.css'
 
 export default function RootLayout({ children }) {
@@ -128,13 +128,13 @@ export default function RootLayout({ children }) {
 }
 ```
 
-> **须知：** 全局样式可以导入到 `app` 目录下的任何布局、页面或组件中。但由于 Next.js 使用 React 内置的样式表支持来与 Suspense 集成，目前这不会在路由切换时移除样式表，可能导致冲突。我们建议将全局样式用于**真正**全局的 CSS，而使用 [CSS 模块 (CSS Modules)](#css-modules) 来限定 CSS 作用域。
+> **须知：** 全局样式可以导入到 `app` 目录中的任何布局、页面或组件。但由于 Next.js 使用 React 内置的样式表支持来与 Suspense 集成，目前在不同路由之间导航时不会移除样式表，这可能导致冲突。我们建议将全局样式用于**真正**全局的 CSS，而对于局部作用域的 CSS 使用 [CSS 模块 (CSS Modules)](#css-modules)。
 
 </AppOnly>
 
 <PagesOnly>
 
-在 `pages/_app.js` 文件中导入样式表，以将样式应用到应用中的**每个路由**：
+将样式表导入 `pages/_app.js` 文件，这样样式将应用到应用中的**每个路由**：
 
 ```tsx filename="pages/_app.js"
 import '@/styles/global.css'
@@ -144,11 +144,11 @@ export default function MyApp({ Component, pageProps }) {
 }
 ```
 
-由于样式表的全局性质，为避免冲突，你应该在 [`pages/_app.js`](/docs/pages/building-your-application/routing/custom-app) 中导入它们。
+由于样式表的全局性质，为避免冲突，您应该在 [`pages/_app.js`](/docs/pages/building-your-application/routing/custom-app) 中导入它们。
 
 </PagesOnly>
 
-## 外部样式表 (External stylesheets)
+## 外部样式表 (External Stylesheets)
 
 <AppOnly>
 
@@ -188,13 +188,13 @@ export default function RootLayout({ children }) {
 
 <PagesOnly>
 
-Next.js 允许你从 JavaScript 文件中导入 CSS 文件。这是因为 Next.js 扩展了 [`import`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import) 的概念，使其不仅限于 JavaScript。
+Next.js 允许您从 JavaScript 文件导入 CSS 文件。这是可能的，因为 Next.js 扩展了 [`import`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import) 的概念，使其不仅限于 JavaScript。
 
 ### 从 `node_modules` 导入样式
 
 自 Next.js **9.5.4** 起，允许从 `node_modules` 导入 CSS 文件到应用中的任何位置。
 
-对于全局样式表，如 `bootstrap` 或 `nprogress`，你应该在 `pages/_app.js` 中导入文件。例如：
+对于全局样式表，如 `bootstrap` 或 `nprogress`，您应该在 `pages/_app.js` 中导入文件。例如：
 
 ```jsx filename="pages/_app.js"
 import 'bootstrap/dist/css/bootstrap.css'
@@ -204,7 +204,7 @@ export default function MyApp({ Component, pageProps }) {
 }
 ```
 
-对于第三方组件所需的 CSS，你可以在组件中导入。例如：
+对于第三方组件所需的 CSS，您可以在组件中导入。例如：
 
 ```jsx filename="components/example-dialog.js"
 import { useState } from 'react'
@@ -219,13 +219,13 @@ function ExampleDialog(props) {
 
   return (
     <div>
-      <button onClick={open}>Open Dialog</button>
+      <button onClick={open}>打开对话框</button>
       <Dialog isOpen={showDialog} onDismiss={close}>
         <button className="close-button" onClick={close}>
-          <VisuallyHidden>Close</VisuallyHidden>
+          <VisuallyHidden>关闭</VisuallyHidden>
           <span aria-hidden>×</span>
         </button>
-        <p>Hello there. I am a dialog</p>
+        <p>你好，我是一个对话框</p>
       </Dialog>
     </div>
   )
@@ -236,7 +236,7 @@ function ExampleDialog(props) {
 
 ## 排序与合并 (Ordering and Merging)
 
-Next.js 在生产构建时会通过自动分块（合并）样式表来优化 CSS。**CSS 的顺序**取决于**你在代码中导入样式的顺序**。
+Next.js 在生产构建时会通过自动分块（合并）样式表来优化 CSS。**CSS 的顺序**取决于**您在代码中导入样式的顺序**。
 
 例如，`base-button.module.css` 会排在 `page.module.css` 之前，因为 `<BaseButton>` 在 `page.module.css` 之前导入：
 
@@ -280,15 +280,15 @@ export function BaseButton() {
 
 - 尽量将 CSS 导入限制在单个 JavaScript 或 TypeScript 入口文件中
 - 在应用的根目录中导入全局样式和 Tailwind 样式表
-- 对于嵌套组件，使用 CSS 模块 (CSS Modules) 而非全局样式
-- 为 CSS 模块使用一致的命名约定，例如使用 `<name>.module.css` 而非 `<name>.tsx`
+- 对于嵌套组件，使用 CSS 模块而非全局样式
+- 为 CSS 模块使用一致的命名约定。例如，使用 `<name>.module.css` 而非 `<name>.tsx`
 - 将共享样式提取到共享组件中以避免重复导入
 - 关闭自动排序导入的 linter 或格式化工具，如 ESLint 的 [`sort-imports`](https://eslint.org/docs/latest/rules/sort-imports)
-- 你可以在 `next.config.js` 中使用 [`cssChunking`](/docs/app/api-reference/config/next-config-js/cssChunking) 选项来控制 CSS 的分块方式
+- 您可以在 `next.config.js` 中使用 [`cssChunking`](/docs/app/api-reference/config/next-config-js/cssChunking) 选项来控制 CSS 的分块方式
 
 ## 开发与生产环境 (Development vs Production)
 
 - 在开发环境 (`next dev`) 中，CSS 更新会通过 [快速刷新 (Fast Refresh)](/docs/architecture/fast-refresh) 即时应用
 - 在生产环境 (`next build`) 中，所有 CSS 文件会自动合并为**多个经过压缩和代码拆分**的 `.css` 文件，确保为路由加载最少数量的 CSS
-- 在生产环境中，即使禁用 JavaScript，CSS 仍会加载，但在开发环境中需要 JavaScript 以实现快速刷新 (Fast Refresh)
+- 在生产环境中，即使禁用 JavaScript，CSS 仍会加载，但在开发环境中需要 JavaScript 来实现快速刷新
 - CSS 顺序在开发环境中可能表现不同，请务必检查构建 (`next build`) 以验证最终的 CSS 顺序