5 lines
21 KiB
JSON
5 lines
21 KiB
JSON
|
{
|
||
|
|
"id": "guide/component-styles",
|
||
|
|
"title": "Component styles",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/component-styles.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n<div class=\"content\">\n <h1 id=\"component-styles\">Component styles<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/component-styles#component-styles\"><i class=\"material-icons\">link</i></a></h1>\n<p>Angular applications are styled with standard CSS. That means you can apply\neverything you know about CSS stylesheets, selectors, rules, and media queries\ndirectly to Angular applications.</p>\n<p>Additionally, Angular can bundle <em>component styles</em>\nwith components, enabling a more modular design than regular stylesheets.</p>\n<p>This page describes how to load and apply these component styles.</p>\n<p>You can run the <live-example></live-example> in Stackblitz and download the code from there.</p>\n<h2 id=\"using-component-styles\">Using component styles<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/component-styles#using-component-styles\"><i class=\"material-icons\">link</i></a></h2>\n<p>For every Angular component you write, you may define not only an HTML template,\nbut also the CSS styles that go with that template,\nspecifying any selectors, rules, and media queries that you need.</p>\n<p>One way to do this is to set the <code>styles</code> property in the component metadata.\nThe <code>styles</code> property takes an array of strings that contain CSS code.\nUsually you give it one string, as in the following example:</p>\n<code-example path=\"component-styles/src/app/hero-app.component.ts\" header=\"src/app/hero-app.component.ts\">\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'app-root',\n template: `\n <h1>Tour of Heroes</h1>\n <app-hero-main [hero]=\"hero\"></app-hero-main>\n `,\n styles: ['h1 { font-weight: normal; }']\n})\nexport class HeroAppComponent {\n/* . . . */\n}\n\n</code-example>\n<h2 id=\"style-scope\">Style scope<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/component-styles#style-scope\"><i class=\"material-icons\">link</i></a></h2>\n<div class=\"alert is-critical\">\n<p>The styles specified in <code>@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a></code> metadata <em>apply only within the template of that component</em>.</p>\n</div>\n<p>They are <em>not inherited</em> by any components nested within the template nor by any content projected into the component.</p>\n<p>In this example, the <code>h1</code> style applies only to the <code>HeroAppComponent</code>,\nnot to the nested <code>HeroMainComponent</code> nor to <code><h1></code> tags anywhere else in the application.</p>\n<p>This scoping restriction is a <strong><em>styling modularity feature</em></strong>.</p>\n<ul>\n<li>You can use the CSS class names and selectors that make the most sense in the context of each component.</li>\n</ul>\n<ul>\n<li>Class names and selectors are local to the component and don't collide with\nclasses and selectors used elsewhere in the application.</li>\n</ul>\n<ul>\n<li>Changes to styles elsewhere in the application don't affect the component's styles.</li>\n</ul>\n<ul>\n<li>You can co-locate the CSS code of each component with the TypeScript and HTML code of the component,\nwhich leads to a neat and tidy project structure.</li>\n</ul>\n<ul>\n<li>You can change or remove component CSS code without searching through the\nwhole application to find where else the code is used.</li>\n</ul>\n<a id=\"special-selectors\"></a>\n<h2 id=\"special-selectors\">Special selectors<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/component-styles#special-selectors\"><i class=\"material-icons\">link</i></a></h2>\n<p>Component
|
||
|
|
}
|