diff --git a/public/docs/ts/latest/guide/component-styles.jade b/public/docs/ts/latest/guide/component-styles.jade index c2ae7b575f..4912234655 100644 --- a/public/docs/ts/latest/guide/component-styles.jade +++ b/public/docs/ts/latest/guide/component-styles.jade @@ -19,11 +19,13 @@ block includes 在本章中,我们将学到如何加载和使用这些*组件样式*。 ## Table Of Contents + # 目录 * [Using component styles](#using-component-styles) [使用组件样式](#using-component-styles) + * [Special selectors](#special-selectors) [特殊的选择器](#special-selectors) @@ -82,6 +84,8 @@ block includes This is a big improvement in modularity compared to how CSS traditionally works. + 这种模块化相对于 CSS 的传统工作方式是一个巨大的改进。 + * You can use the CSS class names and selectors that make the most sense in the context of each component. 可以使用对每个组件最有意义的 CSS 类名和选择器。 @@ -117,7 +121,7 @@ a(id="special-selectors") [W3C](https://www.w3.org) site). The following sections describe these selectors. - 组件样式中有一些从[影子 DOM 样式范围 (Shadow DOM style scoping)](https://www.w3.org/TR/css-scoping-1) 领域引入的特殊*选择器*: + 组件样式中有一些从影子(Shadow) DOM 样式范围领域(记录在[W3C](https://www.w3.org)的[CSS Scoping Module Level 1](https://www.w3.org/TR/css-scoping-1)中) 引入的特殊*选择器*: ### :host @@ -274,7 +278,9 @@ a(id='loading-styles') If you use module bundlers like Webpack, you can also use the `styles` attribute to load styles from external files at build time. You could write: - 像 Webpack 这类模块打包器的用户可能会使用`styles`属性来在构建时从外部文件中加载样式。它们可能这样写:`styles: [require('my.component.css')]` + 像 Webpack 这类模块打包器的用户可能会使用`styles`属性来在构建时从外部文件中加载样式。它们可能这样写: + + `styles: [require('my.component.css')]` Set the `styles` property, notthe `styleUrls` property. The module bundler loads the CSS strings, not Angular. @@ -314,6 +320,7 @@ a(id='loading-styles') application root, not the component file. 像`styleUrls`标签一样,这个 link 标签的`href`指向的 URL 也是相对于应用的根目录的,而不是组件文件。 + +makeExample('component-styles/ts/src/app/hero-team.component.ts', 'stylelink') :marked @@ -350,7 +357,7 @@ a#view-encapsulation Choose from the following modes: 通过在组件的元数据上设置*视图封装模式*,我们可以分别控制*每个组件*的封装模式。 - 可选的封装模式一共有三种: + 可选的封装模式一共有如下几种: * `Native` view encapsulation uses the browser's native shadow DOM implementation (see [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM) @@ -465,7 +472,9 @@ a#relative-urls .l-main-section :marked ## Appendix 2: Loading styles with relative URLs + ## 附录 2:使用相对 URL 加载样式 + It's common practice to split a component's code, HTML, and CSS into three separate files in the same directory: 把组件的代码 (ts/js)、HTML 和 CSS 分别放到同一个目录下的三个不同文件,是一个常用的实践: