You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: aio/content/guide/component-styles.md
+33-44
Original file line number
Diff line number
Diff line change
@@ -1,22 +1,22 @@
1
1
# Estilos de componentes
2
2
3
-
Las aplicaciones de Angular son estilizadas con CSS estandar. Esto significa que puedes aplicar todo lo que sabes sobre hojas de estilo CSS, selectores, reglas y media queries directamente a las aplicaciones de Angular.
3
+
Las aplicaciones de Angular son estilizadas con CSS estandar. Esto significa que usted puede aplicar todo lo que sabe sobre hojas de estilo CSS, selectores, reglas y media queries directamente a las aplicaciones de Angular.
4
4
5
5
Adicionalmente, Angular puede agrupar _estilos de componentes_ con componentes,
6
6
permitiendo un diseño mas modular que las hojas de estilo regulares.
7
7
8
8
Esta página describe como cargar y aplicar estos estilos de componentes.
9
9
10
-
Puedes ejecutar el <live-example></live-example> en Stackblitz y descargar el codigo desde ahí.
10
+
Puede ejecutar el <live-example></live-example> en Stackblitz y descargar el codigo desde ahí.
11
11
12
12
## Usando estilos de componentes
13
13
14
-
Para cada componente Angular que escribes, puedes definir no solo una plantilla HTML, sino también los estilos CSS que van con esa plantilla,
15
-
especificando los selectores, reglas y media queries que necesites.
14
+
Para cada componente Angular que escribe, puede definir no solo una plantilla HTML, sino también los estilos CSS que van con esa plantilla,
15
+
especificando los selectores, reglas y media queries que necesite.
16
16
17
17
Una forma de hacer esto es estableciendo la propiedad `styles` en la metadata del componente.
18
18
La propiedad `styles` toma un array de strings que contiene el codigo CSS.
19
-
Usualmente tu le das una cadena de caracteres, como en el siguiente ejemplo:
19
+
Usualmente usted le da una cadena de caracteres, como en el siguiente ejemplo:
@@ -35,91 +35,80 @@ no al `HeroMainComponent` anidado ni a las etiquetas `<h1>` en cualquier otro lu
35
35
36
36
Esta restricción de alcance es una **_característica modular de estilo_**.
37
37
38
-
-Puedes utilizar los selectores nombres de clase CSS que tengan más sentido en el contexto de cada componente.
38
+
-Puede utilizar los selectores nombres de clase CSS que tengan más sentido en el contexto de cada componente.
39
39
40
40
- Los nombres de clase y los selectores son locales del componente y no chocan con
41
41
clases y selectores utilizados en otras partes de la aplicación.
42
42
43
43
- Los cambios de estilos en otras partes de la aplicación no afectan los estilos del componente.
44
44
45
-
-Puedes ubicar el código CSS de cada componente con el código TypeScript y HTML del componente,
45
+
-Puede ubicar el código CSS de cada componente con el código TypeScript y HTML del componente,
46
46
lo que conduce a una estructura de proyecto ordenada y limpa.
47
47
48
-
-Puedes cambiar o eliminar el código CSS del componente sin buscar en el
48
+
-Puede cambiar o eliminar el código CSS del componente sin buscar en el
49
49
toda la aplicación para encontrar en dónde más se usa el código.
50
50
51
51
{@a special-selectors}
52
52
53
53
## Selectores especiales
54
54
55
-
Component styles have a few special _selectors_ from the world of shadow DOM style scoping
56
-
(described in the [CSS Scoping Module Level 1](https://www.w3.org/TR/css-scoping-1) page on the
57
-
[W3C](https://www.w3.org) site).
58
-
The following sections describe these selectors.
55
+
Los estilos de componentes tienen algunos _selectores_ especiales del mundo del alcance de estilos DOM de sombra (Shadow DOM)
56
+
(descritos en la página [CSS Scoping Module Level 1](https://www.w3.org/TR/css-scoping-1) en el sitio [W3C](https://www.w3.org))
59
57
58
+
Las siguientes secciones describen estos selectores.
60
59
### :host
61
60
62
-
Use the `:host` pseudo-class selector to target styles in the element that _hosts_ the component (as opposed to
63
-
targeting elements _inside_ the component's template).
61
+
Utilice el selector de pseudo clase `:host` para seleccionar estilos en el elemento que _aloja_ el componente (opuesto a los elementos seleccionados _dentro_ de la plantilla del componente).
The `:host` selector is the only way to target the host element. You can't reach
68
-
the host element from inside the component with other selectors because it's not part of the
69
-
component's own template. The host element is in a parent component's template.
65
+
El selector `:host` es la unica manera de seleccionar el elemento anfitrión. No puede alcanzar el elemento anfitrión desde adentro del componente con otros selectores porque no es parte de la propia plantilla del componente. El elemento anfitrión está en la plantilla de un componente principal.
70
66
71
-
Use the _function form_ to apply host styles conditionally by
72
-
including another selector inside parentheses after `:host`.
67
+
Utilice el _formulario de función_ para aplicar estilos de anfitrión condicionalmente incluyendo otro selector entre paréntesis después de `:host`
73
68
74
-
The next example targets the host element again, but only when it also has the `active` CSS class.
69
+
El siguiente ejemplo selecciona el elemento anfitrión otra vez, pero solo cuando también tiene la clase CSS `active`.
Sometimes it's useful to apply styles based on some condition _outside_ of a component's view.
81
-
For example, a CSS theme class could be applied to the document `<body>` element, and
82
-
you want to change how your component looks based on that.
75
+
A veces es útil aplicar estilos basados en una condición _fuera_ de la vista de un componente.
76
+
Por ejemplo, una clase de tema CSS puede ser aplicada al elemento del documento `<body>`, y usted quiere cambiar como su componente se ve en base a eso.
83
77
84
-
Use the `:host-context()` pseudo-class selector, which works just like the function
85
-
form of `:host()`. The `:host-context()` selector looks for a CSS class in any ancestor of the component host element,
86
-
up to the document root. The `:host-context()` selector is useful when combined with another selector.
78
+
Utilice el selector de la pseudo-clase `:host-context()`, el cual trabaja como la función de forma de `:host()`. El selector `:host-context()` busca una clase CSS en cualquier antepasado del elemento host del componente,
79
+
hasta la raíz del documento. El selector `: host-context ()` es útil cuando se combina con otro selector.
87
80
88
-
The following example applies a `background-color` style to all `<h2>` elements _inside_ the component, only
89
-
if some ancestor element has the CSS class `theme-light`.
81
+
El siguiente ejemplo aplica un estilo `background-color` a todos los elementos `<h2>`_dentro_ del componente, solo si algún elemento ancestro tiene la clase CSS `theme-light`.
Component styles normally apply only to the HTML in the component's own template.
87
+
Los estilos de componentes normalmente aplican solo al HTML en la propia plantilla del componente.
96
88
97
-
Applying the `::ng-deep` pseudo-class to any CSS rule completely disables view-encapsulation for
98
-
that rule. Any style with `::ng-deep` applied becomes a global style. In order to scope the specified style
99
-
to the current component and all its descendants, be sure to include the `:host` selector before
100
-
`::ng-deep`. If the `::ng-deep` combinator is used without the `:host` pseudo-class selector, the style
101
-
can bleed into other components.
89
+
La acplicación de la pseudo-clase `::ng-deep` a cualquier regla de CSS deshabilita completamente la encapsulación de vistas para esa regla. Cualquier estilo con `::ng-deep` aplicado se convierte en un estilo global. Para alcanzar el estilo especificado al componente actual y todos sus descendientes, asegúrese de incluir el selector `:host` antes de `::ng-deep`. Si el combinador `:: ng-deep` se usa sin el selector de pseudoclase`: host`, el estilo puede salirse a otros componentes.
102
90
103
-
The following example targets all `<h3>` elements, from the host element down
104
-
through this component to all of its child elements in the DOM.
91
+
El siguiente ejemplo apunta a todos los elementos `<h3>`, desde el elemento host hacia abajo
92
+
a través de este componente a todos sus elementos hijos en el DOM.
Utilice`/deep/`, `>>>`y`::ng-deep`solo con la encapsulación de vista _emulada_.
101
+
102
+
Emulada es la encapsulación de vista predeterminada y más utilizada. Para obtener más información, consulte la sección [Controlar la encapsulación de vistas](guide/component-styles#view-encapsulation)
115
103
116
104
</div>
117
105
118
106
<divclass="alert is-important">
119
107
120
-
The shadow-piercing descendant combinator is deprecated and [support is being removed from major browsers](https://www.chromestatus.com/features/6750456638341120) and tools.
121
-
As such we plan to drop support in Angular (for all 3 of `/deep/`, `>>>` and `::ng-deep`).
122
-
Until then `::ng-deep` should be preferred for a broader compatibility with the tools.
108
+
El combinador descendiente que perfora las sombras está en desuso y se está eliminando el [soporte de los principales navegadores](https://www.chromestatus.com/features/6750456638341120) y herramientas.
109
+
110
+
Como tal, planeamos eliminar el soporte en Angular (para los 3 de `/ deep /`, `>>>` y `:: ng-deep`).
111
+
Hasta entonces, se debería preferir `:: ng-deep` para una compatibilidad más amplia con las herramientas.
0 commit comments