diff --git a/files/es/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md b/files/es/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md index 554dd3a5b134db..e4fbdce5a98717 100644 --- a/files/es/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md +++ b/files/es/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md @@ -26,7 +26,8 @@ Las propiedades que veremos en esta guía son las siguientes. También descubriremos cómo se pueden usar los márgenes automáticos para la alineación en flexbox -> **Nota:** Nota: Las propiedades de alineación en Flexbox se han colocado en su propia especificación — [CSS Box Alignment Level 3](https://www.w3.org/TR/css-align-3/). Se espera que esta especificación finalmente reemplace las propiedades tal como se definen en Flexbox Nivel Uno. +> [!NOTE] +> Las propiedades de alineación en Flexbox se han colocado en su propia especificación — [CSS Box Alignment Level 3](https://www.w3.org/TR/css-align-3/). Se espera que esta especificación finalmente reemplace las propiedades tal como se definen en Flexbox Nivel Uno. ## El eje transversal @@ -100,7 +101,8 @@ Una vez mas podemos cambiar nuestra `flex-direction` a `column` para ver como es {{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content-column.html", '100%', 860)}} -> **Nota:** El valor `space-evenly` no está definido en las especificaciones de flexbox y la ultima adiccion a las especificaciones de Alineacion de cajas Box Alignment . El soporte del navegador para este valor no es tan bueno como el de los valores definidos en la especificación de flexbox. +> [!NOTE] +> El valor `space-evenly` no está definido en las especificaciones de flexbox y la ultima adiccion a las especificaciones de Alineacion de cajas Box Alignment . El soporte del navegador para este valor no es tan bueno como el de los valores definidos en la especificación de flexbox. Revise la [documentacion para `justify-content` en MDN](/es/docs/Web/CSS/justify-content) para encontrar más detalles de todos sus valores y el soporte de los navegadores. diff --git a/files/es/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md b/files/es/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md index 200abf30e1ba4c..53cd2ccc864bc0 100644 --- a/files/es/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md +++ b/files/es/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md @@ -141,7 +141,8 @@ Así como la propiedad `flex-grow` se encarga de añadir espacio sobre el eje pr El tamaño mínimo del ítem tendrá que ser considerado cuando se determine un valor de contracción que pueda funcionar, esto significa que flex-shrink tiene el potencial de comportarse menos consistentemente que flex-grow . Por lo tanto, haremos una revisión más detallada de cómo este algoritmo trabaja en el artículo Controlling Ratios de los ítems sobre el eje principal. -> **Nota:** Nótese que los valores de `flex-grow` y `flex-shrink` son proporciones. Típicamente si pusiéramos todos los ítems flex: `1 1 200px` y luego quisiéramos que un ítem creciera al doble, deberíamos ponerlo con flex: `2 1 200px`. Aunque igualmente podemos colocar flex: `10 1 200px` y flex: `20 1 200px` si quisiéramos. +> [!NOTE] +> Nótese que los valores de `flex-grow` y `flex-shrink` son proporciones. Típicamente si pusiéramos todos los ítems flex: `1 1 200px` y luego quisiéramos que un ítem creciera al doble, deberíamos ponerlo con flex: `2 1 200px`. Aunque igualmente podemos colocar flex: `10 1 200px` y flex: `20 1 200px` si quisiéramos. ### Valores abreviados para las propiedades flex diff --git a/files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md b/files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md index 0ac4a29f6381db..c935c0e7392677 100644 --- a/files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md +++ b/files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md @@ -429,7 +429,8 @@ Las canaletas o callejones entre las celdas de la cuadrícula se pueden crear us } ``` -> **Nota:** Los navegadores más antigüos tienen {{cssxref("column-gap")}}, {{cssxref("row-gap")}} y {{cssxref("gap")}} prefijadas con el prefijo `grid-` como {{cssxref("grid-column-gap")}}, {{cssxref("grid-row-gap")}} y {{cssxref("grid-gap")}} respectivamente. +> [!NOTE] +> Los navegadores más antigüos tienen {{cssxref("column-gap")}}, {{cssxref("row-gap")}} y {{cssxref("gap")}} prefijadas con el prefijo `grid-` como {{cssxref("grid-column-gap")}}, {{cssxref("grid-row-gap")}} y {{cssxref("grid-gap")}} respectivamente. ```html
@@ -542,7 +543,8 @@ En este caso, la cuadrícula anidada no tiene ninguna relación con el padre. Co En la especificación de grid de nivel 1 hay una característica llamada _subgrid_ que nos permitiría crear cuadrículas anidadas que usan la definición de la vía de la cuadrícula padre. -> **Nota:** Las Subgrids aún no están implementadas en ningún navegador y la especificación está sujeta a cambio. +> [!NOTE] +> Las Subgrids aún no están implementadas en ningún navegador y la especificación está sujeta a cambio. En la especificación actual, editaríamos el ejemplo de cuadrícula anidada arriba para usar `display: subgrid` en lugar de `display: grid`, y luego eliminar la definición de vía. La cuadrícula anidada utilizará las vías de la cuadrícula principal para posicionar los elementos. diff --git a/files/es/web/css/css_grid_layout/relationship_of_grid_layout_with_other_layout_methods/index.md b/files/es/web/css/css_grid_layout/relationship_of_grid_layout_with_other_layout_methods/index.md index 8c76c592ffa81b..82a055bf8fc0d0 100644 --- a/files/es/web/css/css_grid_layout/relationship_of_grid_layout_with_other_layout_methods/index.md +++ b/files/es/web/css/css_grid_layout/relationship_of_grid_layout_with_other_layout_methods/index.md @@ -5,7 +5,8 @@ slug: Web/CSS/CSS_grid_layout/Relationship_of_grid_layout_with_other_layout_meth CSS Grid Layout ha sido diseñado para trabajar junto con otros elementos de CSS, como parte de un sistema completo para hacer el diseño. En esta guía explicaré cómo se ajusta _Grid_ junto con otras técnicas que ya se estén usando. -> **Nota:** Las traducciones posibles a la palabra Grid en este contexto son: Grilla, Rejilla, Cuadrícula, Malla. Para efecto del contenido será _Grid_. +> [!NOTE] +> Las traducciones posibles a la palabra Grid en este contexto son: Grilla, Rejilla, Cuadrícula, Malla. Para efecto del contenido será _Grid_. ## Grid y flexbox diff --git a/files/es/web/css/css_logical_properties_and_values/basic_concepts_of_logical_properties_and_values/index.md b/files/es/web/css/css_logical_properties_and_values/basic_concepts_of_logical_properties_and_values/index.md index 300dfa58a340b9..86ef6169b4b452 100644 --- a/files/es/web/css/css_logical_properties_and_values/basic_concepts_of_logical_properties_and_values/index.md +++ b/files/es/web/css/css_logical_properties_and_values/basic_concepts_of_logical_properties_and_values/index.md @@ -51,7 +51,8 @@ Las Propiedades y Valores lógicos pueden ser considerados como un par de grupos Hay otro grupo de estas propiedades lógicas que no tienen una asignación directa con las propiedades físicas existentes. Estas son abreviaturas posibles gracias al hecho de que podemos referirnos a ambos bordes del bloque o dimensión en línea a la vez. Un ejemplo sería {{CSSxRef("margin-block")}}, que es una abreviación de {{CSSxRef("margin-block-start")}} y {{CSSxRef("margin-block-end")}}. Actualmente, estas propiedades no tiene soporte en navegadores. -> **Nota:** CSS Working Group está intentando decidir qué hacer con los valores abreviados de cuatro valores para las propiedades lógicas, por ejemplo, los equivalentes para configurar cuatro propiedades físicas a la vez, como márgenes con la propiedad {{CSSxRef("margin")}}. Necesitaríamos algún tipo de modificador si tuviéramos que reutilizar el margen para las propiedades relativas al flujo. Si deseas leer las sugerencias o comentarlas, el problema relevante de GitHub es [#1282](https://github.com/w3c/csswg-drafts/issues/1282). +> [!NOTE] +> CSS Working Group está intentando decidir qué hacer con los valores abreviados de cuatro valores para las propiedades lógicas, por ejemplo, los equivalentes para configurar cuatro propiedades físicas a la vez, como márgenes con la propiedad {{CSSxRef("margin")}}. Necesitaríamos algún tipo de modificador si tuviéramos que reutilizar el margen para las propiedades relativas al flujo. Si deseas leer las sugerencias o comentarlas, el problema relevante de GitHub es [#1282](https://github.com/w3c/csswg-drafts/issues/1282). ### Pruebas para el soporte en navegadores diff --git a/files/es/web/css/css_logical_properties_and_values/floating_and_positioning/index.md b/files/es/web/css/css_logical_properties_and_values/floating_and_positioning/index.md index bef2e02e7f86bd..6b5d74ac021f3e 100644 --- a/files/es/web/css/css_logical_properties_and_values/floating_and_positioning/index.md +++ b/files/es/web/css/css_logical_properties_and_values/floating_and_positioning/index.md @@ -60,7 +60,8 @@ Al igual que con otras propiedades en la especificación, tenemos algunas propie - {{cssxref("inset-inline")}} — pone los dos en línea juntos. - {{cssxref("inset-block")}} — pone los dos bloques juntos. -> **Nota:** Los navegadores que han implementado la especificación de propiedades lógicas han implementado hasta ahora las asignaciones directas y no las abreviaturas nuevas. Consulte la sección de datos de compatibilidad del navegador en cada referencia de página de propiedades para obtener más detalles. +> [!NOTE] +> Los navegadores que han implementado la especificación de propiedades lógicas han implementado hasta ahora las asignaciones directas y no las abreviaturas nuevas. Consulte la sección de datos de compatibilidad del navegador en cada referencia de página de propiedades para obtener más detalles. ## Ejemplo: Valores lógicos para text-align diff --git a/files/es/web/css/css_logical_properties_and_values/margins_borders_padding/index.md b/files/es/web/css/css_logical_properties_and_values/margins_borders_padding/index.md index 182f209b29c65e..f669cb9381dc8b 100644 --- a/files/es/web/css/css_logical_properties_and_values/margins_borders_padding/index.md +++ b/files/es/web/css/css_logical_properties_and_values/margins_borders_padding/index.md @@ -87,7 +87,8 @@ En un modo de escritura horizontal este CSS aplicaría un margen de 5px arriba d } ``` -> **Nota:** Las propiedades abreviadas `margin-inline` y `margin-block` se enviaron en Firefox 66. Como hay nuevas propiedades, mira el soporte en el navegador antes de usarlas. +> [!NOTE] +> Las propiedades abreviadas `margin-inline` y `margin-block` se enviaron en Firefox 66. Como hay nuevas propiedades, mira el soporte en el navegador antes de usarlas. ## Ejemplos para rellenos (Paddings) @@ -113,7 +114,8 @@ En un modo de escritura horizontal este CSS aplicaría un relleno de 5px arriba } ``` -> **Nota:** Las abreviaciones de las propiedades `padding-inline` y `padding-block` se enviaron en Firefox 66. Como hay nuevas propiedades, mira el soporte en el navegador antes de usarlas. +> [!NOTE] +> Las abreviaciones de las propiedades `padding-inline` y `padding-block` se enviaron en Firefox 66. Como hay nuevas propiedades, mira el soporte en el navegador antes de usarlas. ## Ejemplos para bordes @@ -136,7 +138,8 @@ Hay valores abreviados de dos valores para establecer el ancho, el estilo y el c } ``` -> **Nota:** Estas dos abreviaciones fueron enviadas en Firefox 66, mira el soporte en los navegadores antes de usar estas propiedades ya que puede que en otros navegadores aún no estén implementadas. +> [!NOTE] +> Estas dos abreviaciones fueron enviadas en Firefox 66, mira el soporte en los navegadores antes de usar estas propiedades ya que puede que en otros navegadores aún no estén implementadas. ### Flujo de propiedades relativas del border-radius diff --git a/files/es/web/css/css_media_queries/using_media_queries/index.md b/files/es/web/css/css_media_queries/using_media_queries/index.md index fd1c69d2b41c18..d2192fb763b8c7 100644 --- a/files/es/web/css/css_media_queries/using_media_queries/index.md +++ b/files/es/web/css/css_media_queries/using_media_queries/index.md @@ -12,7 +12,8 @@ Las _media queries_ se utilizan para lo siguiente: - Para segmentar medios específicos para {{HTMLElement("style")}}, {{HTMLElement("link")}}, {{HTMLElement("source")}} y otros [HTML](/es/docs/Web/HTML) con el atributo `media=`. - Para [probar y monitorear los estados de los medios](/es/docs/Web/CSS/Media_Queries/Testing_media_queries) usando los métodos {{domxref("Window.matchMedia()")}} y {{domxref("EventTarget.addEventListener()")}}. -> **Nota:** Los ejemplos en esta página usan `@media` de CSS con fines ilustrativos, pero la sintaxis básica sigue siendo la misma para todos los tipos de consultas de medios. +> [!NOTE] +> Los ejemplos en esta página usan `@media` de CSS con fines ilustrativos, pero la sintaxis básica sigue siendo la misma para todos los tipos de consultas de medios. ## Sintaxis @@ -65,7 +66,8 @@ Las consultas de medios no distinguen entre mayúsculas y minúsculas. Una _media query_ se calcula como `true` cuando el tipo de medio (si se especifica) coincide con el dispositivo en el que se muestra un documento y todas las expresiones de características de medios se computan como verdaderas. Las consultas que involucran tipos de medios desconocidos siempre son falsas. -> **Nota:** Una hoja de estilo con una _media query_ adjunta a su etiqueta {{HTMLElement("link")}} [se descargará](https://scottjehl.github.io/CSS-Download-Tests/) incluso si la consulta devuelve `false`, la descarga se realizará pero la prioridad de la descarga será mucho menor. +> [!NOTE] +> Una hoja de estilo con una _media query_ adjunta a su etiqueta {{HTMLElement("link")}} [se descargará](https://scottjehl.github.io/CSS-Download-Tests/) incluso si la consulta devuelve `false`, la descarga se realizará pero la prioridad de la descarga será mucho menor. > No obstante, su contenido no se aplicará a menos que y hasta que el resultado de la consulta cambie a `true`. > Puede leer por qué sucede esto en el blog de Tomayac [Por qué el navegador descarga hojas de estilo con consultas de medios que no coinciden](https://medium.com/@tomayac/why-browsers-download-stylesheets-with-non-matching-media-consultas-eb61b91b85a2). @@ -136,7 +138,8 @@ En el ejemplo anterior, ya vimos el operador `and` usado para agrupar un _tipo_ El operador `and` también puede combinar múltiples características de medios en una sola _media query_. Mientras tanto, el operador `not` niega una _media query_, básicamente invirtiendo su significado normal. El operador `only` evita que los navegadores antiguos apliquen los estilos. -> **Nota:** En la mayoría de los casos, el tipo de medios `all` se usa de forma predeterminada cuando no se especifica ningún otro tipo. +> [!NOTE] +> En la mayoría de los casos, el tipo de medios `all` se usa de forma predeterminada cuando no se especifica ningún otro tipo. > Sin embargo, si usa los operadores `not` u `only`, debe especificar explícitamente un tipo de medio. ### Combinación de múltiples tipos o características @@ -233,7 +236,8 @@ _No tiene efecto en los navegadores modernos._ La especificación Media Queries Level 4 incluye algunas mejoras de sintaxis para hacer que las _media queries_ utilicen características que tienen un tipo de "rango", por ejemplo, ancho o alto, menos detallado. El nivel 4 agrega un _contexto de rango_ para escribir tales consultas. Por ejemplo, usando la funcionalidad `max-` para el ancho, podríamos escribir lo siguiente: -> **Nota:** La especificación Media Queries Level 4 tiene un soporte razonable en los navegadores modernos, pero algunas características multimedia no son compatibles. +> [!NOTE] +> La especificación Media Queries Level 4 tiene un soporte razonable en los navegadores modernos, pero algunas características multimedia no son compatibles. > Consulte la [tabla de compatibilidad del navegador de `@media`](/es/docs/Web/CSS/@media#browser_compatibility) para obtener más detalles. ```css diff --git a/files/es/web/css/css_positioned_layout/understanding_z-index/stacking_context/index.md b/files/es/web/css/css_positioned_layout/understanding_z-index/stacking_context/index.md index 52d585b06e3ebe..a1e59cda437df8 100644 --- a/files/es/web/css/css_positioned_layout/understanding_z-index/stacking_context/index.md +++ b/files/es/web/css/css_positioned_layout/understanding_z-index/stacking_context/index.md @@ -35,7 +35,8 @@ En resumen: - Cada contexto de apilamiento es completamente independiente de sus hermanos: solo los elementos descendientes son considerados cuando el apilamiento es procesado. - Cada contexto de apilamiento es auto contenido: luego que los contenidos del elemento son apilados, el elemento completo es considerado en el orden de apilamiento del contexto del padre. -> **Nota:** La jerarquía de apilar contextos es un sub conjunto de la jerarquía de elementos HTML, porque solo ciertos elementos crean contextos de apilamiento. Podemos decir que los elementos que no crean sus propios contextos de apilamiento son asimilados por el contexto de apilamiento padre. +> [!NOTE] +> La jerarquía de apilar contextos es un sub conjunto de la jerarquía de elementos HTML, porque solo ciertos elementos crean contextos de apilamiento. Podemos decir que los elementos que no crean sus propios contextos de apilamiento son asimilados por el contexto de apilamiento padre. ## El ejemplo @@ -55,7 +56,7 @@ En este ejemplo cada elemento posicionado crea su propio contexto de apilamiento Es importante notar que el DIV #4, DIV #5 y el DIV #6 son hijos del DIV #3, así que el apilamiento de esos elementos es completamente resuelto dentro del DIV#3. Una vez que el apilamiento y el renderizado dentro del DIV#3 ha sido completado, todo el elemento DIV#3 es apilado en el elemento raíz con respecto a sus DIV hermanos. -> **Nota:** +> [!NOTE] > > - DIV #4 es renderizado debajo de DIV #1 porque el z-index (5) de DIV #1 es válido dentro del contexto de apilamiento del elemento raiz, mientras que el z-index (6) de DIV #4 es válido dentro del contexto de apilamiento de DIV #3. Así que DIV #4 está debajo de DIV #1, porque DIV #4 pertenece a DIV #3, que tiene un valor z-index menor. > - Por la misma razón DIV #2 (z-index 2) es renderizado bajo DIV#5 (z-index 1) porque DIV #5 pertenece a DIV #3, que tiene un valor z-index mayor. diff --git a/files/es/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_1/index.md b/files/es/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_1/index.md index 037ed070e45b7f..23a61c12509fff 100644 --- a/files/es/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_1/index.md +++ b/files/es/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_1/index.md @@ -30,7 +30,8 @@ En términos de contextos de apilamiento, el DIV #1 y el DIV #3 son simplemente - DIV #2 (z-index 1) - DIV #4 (z-index 2) -> **Nota:** El DIV #1 y el DIV #3 no son translúcidos. Es importante recordar que asignar una opacidad menor a 1 a un elemento posicionado implica la creación de un contexto de apilamiento, como ocurre cuando se añade un valor z-index. Y este ejemplo muestra que ocurre cuando un elemento padre no crea un contexto de apilamiento. +> [!NOTE] +> El DIV #1 y el DIV #3 no son translúcidos. Es importante recordar que asignar una opacidad menor a 1 a un elemento posicionado implica la creación de un contexto de apilamiento, como ocurre cuando se añade un valor z-index. Y este ejemplo muestra que ocurre cuando un elemento padre no crea un contexto de apilamiento. ## Ejemplo diff --git a/files/es/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_2/index.md b/files/es/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_2/index.md index 48524210e14bef..23542138063897 100644 --- a/files/es/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_2/index.md +++ b/files/es/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_2/index.md @@ -22,7 +22,8 @@ Para entender mejor esta situación, esta es la jerarquía del contexto de apila - DIV #4 (z-index 10) -> **Nota:** Vale la pena recordar que en general la jerarquía HTML es diferente de la jerarquía del contexto de apilamiento. En la jerarquía del contexto de apilamiento, los elementos que no crean un contexto de apilamiento son colapsados en sus padres. +> [!NOTE] +> Vale la pena recordar que en general la jerarquía HTML es diferente de la jerarquía del contexto de apilamiento. En la jerarquía del contexto de apilamiento, los elementos que no crean un contexto de apilamiento son colapsados en sus padres. ### Código fuente de ejemplo diff --git a/files/es/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_3/index.md b/files/es/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_3/index.md index ccfaa1572507fe..5fcbdee35b0d48 100644 --- a/files/es/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_3/index.md +++ b/files/es/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_3/index.md @@ -41,7 +41,8 @@ Para entender mejor la situación, esta es la jerarquía del contexto de apilami Este problema puede ser evitado al remover la superposición entre menus de diferentes niveles, o usando valores z-index individuales (y diferentes) asignados a través del selector id en lugar de un selector de clase, o aplanando la jerarquía HTML. -> **Nota:** En el código fuente vas a ver que los menus de segundo y tercer nivel están hechos de varios DIVs contenidos en un contenedor con posición absoluta. Esto es útil para agrupar y posicionarlos todos a la vez. +> [!NOTE] +> En el código fuente vas a ver que los menus de segundo y tercer nivel están hechos de varios DIVs contenidos en un contenedor con posición absoluta. Esto es útil para agrupar y posicionarlos todos a la vez. ### Código fuente de ejemplo diff --git a/files/es/web/css/css_positioned_layout/understanding_z-index/stacking_floating_elements/index.md b/files/es/web/css/css_positioned_layout/understanding_z-index/stacking_floating_elements/index.md index 74333363146675..08cb7d4be4687c 100644 --- a/files/es/web/css/css_positioned_layout/understanding_z-index/stacking_floating_elements/index.md +++ b/files/es/web/css/css_positioned_layout/understanding_z-index/stacking_floating_elements/index.md @@ -24,7 +24,8 @@ Este comportamiento puede ser explicado con una versión mejorada de la lista pr 4. Descendientes en línea en el flujo normal 5. Elementos posicionados descendentemente , en orden de aparición (en HTML) -> **Nota:** En el ejemplo debajo, todos los bloques excepto el no posicionado son translúcidos para mostrar el orden de apilamiento. Si la opacidad del bloque no posicionado (DIV #4) es reducida, entonces algo extraño ocurre: el fondo y el borde de ese bloque sobresale por encima de los bloques flotantes, pero aun debajo de los bloques posicionados. Yo no pude entender si esto es un bug o una interpretación peculiar de la especificación. (Aplicar opacidad debería crear implícitamente un contexto de apilamiento.) +> [!NOTE] +> En el ejemplo debajo, todos los bloques excepto el no posicionado son translúcidos para mostrar el orden de apilamiento. Si la opacidad del bloque no posicionado (DIV #4) es reducida, entonces algo extraño ocurre: el fondo y el borde de ese bloque sobresale por encima de los bloques flotantes, pero aun debajo de los bloques posicionados. Yo no pude entender si esto es un bug o una interpretación peculiar de la especificación. (Aplicar opacidad debería crear implícitamente un contexto de apilamiento.) ## Código fuente de ejemplo diff --git a/files/es/web/css/css_positioned_layout/understanding_z-index/stacking_without_z-index/index.md b/files/es/web/css/css_positioned_layout/understanding_z-index/stacking_without_z-index/index.md index 1cf752b59b150f..1bd5e29be57946 100644 --- a/files/es/web/css/css_positioned_layout/understanding_z-index/stacking_without_z-index/index.md +++ b/files/es/web/css/css_positioned_layout/understanding_z-index/stacking_without_z-index/index.md @@ -15,7 +15,7 @@ Cuando ningún elemento tiene z-index, los elementos son apilados en este orden En el siguiente ejemplo, los bloques con posiciones absolutas y relativas son apropiadamente dimensionados y posicionados para ilustrar las reglas de apilamiento. -> **Nota:** +> [!NOTE] > > - Dado un grupo homogéneo de elementos sin propiedad z-index, tales como los bloques posicionados (DIV #1 al #4) en el ejemplo, el orden de apilamiento de los elementos es su orden en la jerarquía HTML, independientemente de su posición. > - Bloques estándar (DIV #5) en el flujo normal, sin ninguna propiedad de posicionamiento, siempre son renderizados antes de los elementos posicionados y aparecen debajo de los mismos, incluso si están después en la jerarquía HTML. diff --git a/files/es/web/css/css_positioned_layout/understanding_z-index/using_z-index/index.md b/files/es/web/css/css_positioned_layout/understanding_z-index/using_z-index/index.md index 098b4d3e151647..f920ce3f02aa7a 100644 --- a/files/es/web/css/css_positioned_layout/understanding_z-index/using_z-index/index.md +++ b/files/es/web/css/css_positioned_layout/understanding_z-index/using_z-index/index.md @@ -13,7 +13,7 @@ El primer ejemplo, [Apilando sin z-index](/es/docs/Web/CSS/CSS_Positioning/enten Esta propiedad es asignada con un valor entero (positivo o negativo), el cuál representa la posición del elemento en el eje-Z. Si no estás familiarizado con el eje-Z, imagina que la página tiene muchas capas una encima de la otra. Cada capa es numerada. Una capa con un número mayor es renderizada encima de las capas con números menores. -> **Advertencia:** z-index solo tiene efecto si un elemento es [posicionado](/es/CSS/position). +> **Advertencia:** `z-index` solo tiene efecto si un elemento es [posicionado](/es/CSS/position). - _bottom: el más lejano al observador_ - ... @@ -27,7 +27,7 @@ Esta propiedad es asignada con un valor entero (positivo o negativo), el cuál r - ... - _top: el más cercano al observador_ -> **Nota:** +> [!NOTE] > > - Cuando la propiedad z-index no ha sido especificada, los elementos son renderizados en la capa de renderizado por defecto 0 (cero). > - Si varios elementos comparten el mismo valor z-index (_i.e._ están situados en la misma capa), las reglas de apilamiento explicadas en la sección [Apilando sin z-index](/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index) son aplicadas. diff --git a/files/es/web/css/css_transitions/using_css_transitions/index.md b/files/es/web/css/css_transitions/using_css_transitions/index.md index c15cbb958ee274..bbc1241cc176fb 100644 --- a/files/es/web/css/css_transitions/using_css_transitions/index.md +++ b/files/es/web/css/css_transitions/using_css_transitions/index.md @@ -7,7 +7,8 @@ slug: Web/CSS/CSS_transitions/Using_CSS_transitions Las transiciones CSS, parte del borrador de la especificación CSS3, proporcionan una forma de animar los cambios de las propiedades CSS, en lugar de que los cambios surtan efecto de manera instantánea. Por ejemplo, si cambias el color de un elemento de blanco a negro, normalmente el cambio es instantáneo. Al habilitar las transiciones CSS, el cambio sucede en un intervalo de tiempo que puedes especificar, siguiendo una curva de aceleración que puedes personalizar. -> **Nota:** como la especificación de las transiciones CSS todavía se encuentra en fase de borrador, a todas las propiedades asociadas con ellas se les añade el prefijo "-moz-" para usarse en Gecko. Para la compatibilidad con WebKit, se aconseja usar también el prefijo "-webkit-" y para la compatibilidad con Opera, el prefijo "-o-". Es decir, por ejemplo, la propiedad de transición se especificaría como `-moz-transition`, `-webkit-transition` y `-o-transition`. +> [!NOTE] +> Como la especificación de las transiciones CSS todavía se encuentra en fase de borrador, a todas las propiedades asociadas con ellas se les añade el prefijo "-moz-" para usarse en Gecko. Para la compatibilidad con WebKit, se aconseja usar también el prefijo "-webkit-" y para la compatibilidad con Opera, el prefijo "-o-". Es decir, por ejemplo, la propiedad de transición se especificaría como `-moz-transition`, `-webkit-transition` y `-o-transition`. ## Las propiedades de transición CSS @@ -39,13 +40,15 @@ Como es habitual, puedes usar el método {{ domxref("element.addEventListener()" el.addEventListener("transitionend", updateTransition, true); ``` -> **Nota:** el evento "transitionend" no se dispara si la transición se anula debido a que el valor de la propiedad de animación es modificado antes de que la transición se complete. +> [!NOTE] +> El evento "transitionend" no se dispara si la transición se anula debido a que el valor de la propiedad de animación es modificado antes de que la transición se complete. ## Propiedades que pueden ser animadas Las transiciones y las animaciones CSS pueden usarse para animar las siguientes propiedades. -> **Nota:** el conjunto de propiedades que puede animarse está sujeto a cambios, por lo tanto se recomienda evitar incluir cualquier propiedad en la lista que no anime porque en un futuro podría provocar resultados inesperados. +> [!NOTE] +> El conjunto de propiedades que puede animarse está sujeto a cambios, por lo tanto se recomienda evitar incluir cualquier propiedad en la lista que no anime porque en un futuro podría provocar resultados inesperados. | Propiedad | Tipo de valor | | --------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- | @@ -377,7 +380,8 @@ Los valores de color aquí se han cambiado para hacer que los colores de fondo y Una vez que hemos establecido los extremos de la secuencia de animación, lo que tenemos que hacer es iniciar la animación. Podemos hacerlo fácilmente usando JavaScript. -> **Nota:** una vez que [la compatibilidad para las animaciones](http://dev.w3.org/csswg/css3-animations/) CSS esté disponible, el código JavaScript no será necesario para lograr este efecto. +> [!NOTE] +> Una vez que [la compatibilidad para las animaciones](http://dev.w3.org/csswg/css3-animations/) CSS esté disponible, el código JavaScript no será necesario para lograr este efecto. En primer lugar, la función `runDemo()` que se llama cuando el documento se carga para inicializar la secuencia de animación: diff --git a/files/es/web/css/flex-basis/index.md b/files/es/web/css/flex-basis/index.md index 0e29c77d7c87d0..e39629789b23c1 100644 --- a/files/es/web/css/flex-basis/index.md +++ b/files/es/web/css/flex-basis/index.md @@ -42,9 +42,11 @@ flex-basis: unset; - : Indica el dimensionamiento automático, basado en el contenido del elemento flexible. - > **Nota:** Tenga en cuenta que éste valor no fue presentado en el lanzamiento inicial del Diseño de Caja Flexible, así que no será soportado por algunas implementaciones antiguas. El efecto equivalente puede tenerlo usando `auto` junto con un tamaño principal ([width](https://drafts.csswg.org/css2/visudet.html#propdef-width) o [height](https://drafts.csswg.org/css2/visudet.html#propdef-height)) en auto. + > [!NOTE] + > Tenga en cuenta que éste valor no fue presentado en el lanzamiento inicial del Diseño de Caja Flexible, así que no será soportado por algunas implementaciones antiguas. El efecto equivalente puede tenerlo usando `auto` junto con un tamaño principal ([width](https://drafts.csswg.org/css2/visudet.html#propdef-width) o [height](https://drafts.csswg.org/css2/visudet.html#propdef-height)) en auto. - > **Nota:** Breve historia + > [!NOTE] + > Breve historia > > - Originalmente, "flex-basis:auto" significa "observa mi propiedad width o height". > - Después, flex-basis:auto fue cambiado a automatic-sizing, y fue introducido "main-size" como palabra clave "observa mi propiedad width o height". Ésto fue implementado en [bug 1032922](https://bugzilla.mozilla.org/show_bug.cgi?id=1032922). diff --git a/files/es/web/css/font-variant-alternates/index.md b/files/es/web/css/font-variant-alternates/index.md index 32d6bfd7d1a78d..79b93c214c6b0d 100644 --- a/files/es/web/css/font-variant-alternates/index.md +++ b/files/es/web/css/font-variant-alternates/index.md @@ -50,7 +50,8 @@ font-variant-alternates: unset; - : Esta función habilita la muestra de ornamentas, que son [florones](http://en.wikipedia.org/wiki/Fleuron_%28typography%29) y otros glifos de estilo dingbat. El parámetro es un nombre específico de fuente mapeado a un número. Corresponde al valor de OpenType `ornm`, como `ornm 2`. - > **Nota:** para manteneer la semántica de la fuente, se invita a los diseñadores de fuentes a incluir ornamentas qoe no coincidan con caracteres zingbat de Unicode como variantes de ornamenta al caracter de viñeta (U+2022). Las fuentes bien diseñadas lo harán, aunque muchas otras fuentes no. + > [!NOTE] + > Para manteneer la semántica de la fuente, se invita a los diseñadores de fuentes a incluir ornamentas qoe no coincidan con caracteres zingbat de Unicode como variantes de ornamenta al caracter de viñeta (U+2022). Las fuentes bien diseñadas lo harán, aunque muchas otras fuentes no. - `annotation()` - : Esta función habilita la muestra de anotaciones, como dígitos circulares o caracteres invertidos. El parámetro es un nombre de fuente específico mapeado a un número. Corresponde al valor de OpenType `nalt`, como `nalt 2`. diff --git a/files/es/web/css/grid-auto-columns/index.md b/files/es/web/css/grid-auto-columns/index.md index 947da6f2152caa..42a993c35659ea 100644 --- a/files/es/web/css/grid-auto-columns/index.md +++ b/files/es/web/css/grid-auto-columns/index.md @@ -83,7 +83,8 @@ grid-auto-columns: unset; - : Es una palabra reservada -o keyword- que es idéntica a contenido máximo si es un máximo. Como mínimo representa el máximo valor mínimo aceptado (según lo especificado por{{cssxref("min-width")}}/{{cssxref("min-height")}}) de los elementos de la cuadrícula que ocupan el espacio de la cuadrícula. - > **Nota:** Note: Los valores de tamaño `auto` (y solo los `auto`) pueden ser estirados por las propiedades {{cssxref("align-content")}} y {{cssxref("justify-content")}} . + > [!NOTE] + > Los valores de tamaño `auto` (y solo los `auto`) pueden ser estirados por las propiedades {{cssxref("align-content")}} y {{cssxref("justify-content")}} . ### Sintaxis Formal diff --git a/files/es/web/css/grid-auto-rows/index.md b/files/es/web/css/grid-auto-rows/index.md index 9fd24f4c8edec3..5fb1ea3787ef9a 100644 --- a/files/es/web/css/grid-auto-rows/index.md +++ b/files/es/web/css/grid-auto-rows/index.md @@ -73,7 +73,8 @@ Si el elemento de una grilla es ubicado en una fila que no tiene un tamaño expl - : Es una palabra clave que es identica a contenido máximo si es un máximo. Como mínimo representa el valor mínimo más grande (como esté especificado por {{cssxref("min-width")}}/{{cssxref("min-height")}}) de los elementos de la grilla que ocupan la pista de la grilla. - > **Nota:** Nota: los tamaños de la pista `auto` (y sólo los tamaños de la pista `auto`) pueden ser estirados por las propiedades {{cssxref("align-content")}} y {{cssxref("justify-content")}}. + > [!NOTE] + > Los tamaños de la pista `auto` (y sólo los tamaños de la pista `auto`) pueden ser estirados por las propiedades {{cssxref("align-content")}} y {{cssxref("justify-content")}}. ### Formal syntax diff --git a/files/es/web/css/grid-template-columns/index.md b/files/es/web/css/grid-template-columns/index.md index d6b0346a5d8e3f..2017c0bf42c1db 100644 --- a/files/es/web/css/grid-template-columns/index.md +++ b/files/es/web/css/grid-template-columns/index.md @@ -63,7 +63,8 @@ grid-template-columns: unset; - : Es una palabra clave que es idéntica al contenido máximo si es un máximo. Como un mínimo representa el mínimo más grande (según lo especificado por {{cssxref("min-width")}}/{{cssxref("min-height")}}) de los elementos de la cuadrícula ocupando la vía. - > **Nota:** Nota: Los tamaños de vía `auto` (y sólo los tamaños de vía `auto` ) pueden ser estirados por las propiedades {{cssxref("justify-content")}}. + > [!NOTE] + > Los tamaños de vía `auto` (y sólo los tamaños de vía `auto` ) pueden ser estirados por las propiedades {{cssxref("justify-content")}}. - `{{cssxref("fit-content", "fit-content( [ <length> | <percentage> ] )")}}` - : Representa la fórmula `min(max-content, max(auto, argument))`, que se calcula de forma similar a `auto` (es decir, `minmax(auto, max-content)`), excepto que el tamaño de la vía se fija a _argument_ si es mayor que el mínimo. diff --git a/files/es/web/css/grid-template-rows/index.md b/files/es/web/css/grid-template-rows/index.md index 6c6194bd2859e4..70ffc4e38df8c2 100644 --- a/files/es/web/css/grid-template-rows/index.md +++ b/files/es/web/css/grid-template-rows/index.md @@ -70,7 +70,8 @@ Esta propiedad puede especificarse como: - : Es una palabra clave que es idéntica al contenido máximo si es un máximo. Como un mínimo representa el mínimo más grande (según lo especificado por {{cssxref("min-width")}}/{{cssxref("min-height")}}) de los elementos de la cuadrícula ocupando la vía. - > **Nota:** Nota: Los tamaños de vía `auto` (y sólo los tamaños de vía `auto` ) pueden ser estirados por las propiedades {{cssxref("align-content")}} and {{cssxref("justify-content")}}. + > [!NOTE] + > Los tamaños de vía `auto` (y sólo los tamaños de vía `auto` ) pueden ser estirados por las propiedades {{cssxref("align-content")}} and {{cssxref("justify-content")}}. - {{cssxref("fit-content", "fit-content( [ <length> | <percentage> ] )")}} - : Representa la fórmula `min(max-content, max(auto, argument))`, que se calcula de forma similar a `auto` (es decir, `minmax(auto, max-content)`), excepto que el tamaño de la vía se fija a _argument_ si es mayor que el mínimo `auto`. @@ -79,7 +80,8 @@ Esta propiedad puede especificarse como: - [subgrid](/es/docs/Web/CSS/CSS_Grid_Layout/Subgrid) - : El valor `subgrid` indica que la cuadrícula adoptara la porción que ocupa su cuadrícula principal (padre) en ese eje. En lugar de ser indicado de forma explícita, los tamaños de la las filas y columnas de la cuadrícula se tomarán de la definición de la cuadrícula superior. -> **Advertencia:** El valor subgrid es del Nivel 2 de la especificación Grid y actualmente sólo tiene implementaciones en Firefox 71 y posteriores. +> [!WARNING] +> El valor subgrid es del Nivel 2 de la especificación Grid y actualmente sólo tiene implementaciones en Firefox 71 y posteriores. ### Sintaxis formal diff --git a/files/es/web/css/grid/index.md b/files/es/web/css/grid/index.md index 153a4f974ea319..1c155b3b4e53da 100644 --- a/files/es/web/css/grid/index.md +++ b/files/es/web/css/grid/index.md @@ -37,7 +37,8 @@ grid: initial; grid: unset; ``` -> **Nota:** Sólo se pueden especificar las propiedades explícitas **_o bien_** las propiedades implícitas en una sola declaración `grid`. Las sub-propiedades que no se especifican se definen a su valor inicial, como es normal para shorthands. También, las propiedades relativas a gutter se redefinen mediante este shorthand, incluso cuando no pueden ser definidas mediante el mismo. +> [!NOTE] +> Sólo se pueden especificar las propiedades explícitas **_o bien_** las propiedades implícitas en una sola declaración `grid`. Las sub-propiedades que no se especifican se definen a su valor inicial, como es normal para shorthands. También, las propiedades relativas a gutter se redefinen mediante este shorthand, incluso cuando no pueden ser definidas mediante el mismo. {{cssinfo}} diff --git a/files/es/web/css/hyphens/index.md b/files/es/web/css/hyphens/index.md index c7410317009db1..6077e67b29e9ed 100644 --- a/files/es/web/css/hyphens/index.md +++ b/files/es/web/css/hyphens/index.md @@ -7,7 +7,8 @@ slug: Web/CSS/hyphens Las reglas de separación silábica son específicas del idioma. En HTML, el idioma es determinado por el atributo [`lang`](/es/docs/Web/HTML/Global_attributes/lang) y los navegadores separarán únicamente si este atributo está presente y si existe un diccionario de separación silábica adecuado. En XML debe usarse el atributo `xml:lang.` -> **Nota:** Las reglas que definen cómo se realiza la separación de sílabas no están explícitamente definidas por la especificación, por lo que esta puede variar de un navegador a otro. +> [!NOTE] +> Las reglas que definen cómo se realiza la separación de sílabas no están explícitamente definidas por la especificación, por lo que esta puede variar de un navegador a otro. ## Sintaxis @@ -34,7 +35,8 @@ La propiedad `hyphens` se especifica con una única palabra de la lista a contin - `auto` - : El navegador es libre de separar palabras en puntos de separación apropiados, siguiendo cualquiera de las reglas elegidas. Sin embargo, las oportunidades de separación de línea (ver [Sugiriendo oportunidades de separación de línea](#sugiriendo_oportunidades_de_separación_de_línea) más abajo) anularán la separación automática cuando exista. -> **Nota:** El comportamiento del valor `auto` dependerá de que el idioma esté bien etiquetado de manera que las reglas de separación silábica puedan ser seleccionadas. Se debe especificar el idioma con el atributo `lang` de HTML de cara a garantizar que la separación silábica automática se aplique en ese idioma. +> [!NOTE] +> El comportamiento del valor `auto` dependerá de que el idioma esté bien etiquetado de manera que las reglas de separación silábica puedan ser seleccionadas. Se debe especificar el idioma con el atributo `lang` de HTML de cara a garantizar que la separación silábica automática se aplique en ese idioma. ### Sintaxis formal diff --git a/files/es/web/css/image-rendering/index.md b/files/es/web/css/image-rendering/index.md index 1fd70950748dd1..ed29aa9e7982e3 100644 --- a/files/es/web/css/image-rendering/index.md +++ b/files/es/web/css/image-rendering/index.md @@ -21,7 +21,8 @@ image-rendering: unset; Esta propiedad aplica tanto al elemento mismo, como a cualquier imagen provista en otra propiedad del elemento. No tiene efecto alguno en imágenes no-escaladas. Por ejemplo, si el tamaño natural de una imágen es _100×100px pero el autor de la página especifica sus dimenciones como_ `200×200px` (o `50×50px`), entonces la imágen se escalará (en cualquiér dirección) a sus nuevas dimensiones usando el algoritmo especificado. El escalado podría también aplicar por interacción del usuario (cambiando la escala). -> **Nota:** Un Canvas puede proveer una [solución de respaldo para crisp-edge/optimize-contrast](http://phrogz.net/tmp/canvas_image_zoom.html) a través de la manipulación manual de datos de la imagen. +> [!NOTE] +> Un Canvas puede proveer una [solución de respaldo para crisp-edge/optimize-contrast](http://phrogz.net/tmp/canvas_image_zoom.html) a través de la manipulación manual de datos de la imagen. {{cssinfo}} @@ -39,7 +40,8 @@ Esta propiedad aplica tanto al elemento mismo, como a cualquier imagen provista - **`pixelated`** - : Al escalar la imagen, se debe usar el algoritmo de vecino más cercano, de modo que la imagen parezca estar compuesta de píxeles grandes. Cuando se reduce la escala, esto es lo mismo que 'auto'. -> **Nota:** Los valores `optimizeQuality` y `optimizeSpeed` presentes en un borrador anterior (y proviniendo de su contraparte SVG) son definidos como sinónimos del valor `auto`. +> [!NOTE] +> Los valores `optimizeQuality` y `optimizeSpeed` presentes en un borrador anterior (y proviniendo de su contraparte SVG) son definidos como sinónimos del valor `auto`. ### Formal syntax diff --git a/files/es/web/css/image/index.md b/files/es/web/css/image/index.md index 52ed8e6cd0beb5..b8af4908d954d8 100644 --- a/files/es/web/css/image/index.md +++ b/files/es/web/css/image/index.md @@ -34,7 +34,8 @@ El tamaño concreto del objeto es calculado usando los siguientes algoritmos: Las imágenes pueden ser usadas en numerosas propiedades CSS, como {{cssxref("background-image")}}, {{cssxref("border-image")}}, {{cssxref("content")}}, {{cssxref("list-style-image")}} o {{cssxref("cursor")}}. -> **Nota:** No todos los navegadores soportan algun tipo de imagen o alguna propiedad. Vea la sección de [compatibilidad de navegadores](#Compatibilidad_de_navegadores) para una lista detallada. +> [!NOTE] +> No todos los navegadores soportan algun tipo de imagen o alguna propiedad. Vea la sección de [compatibilidad de navegadores](#Compatibilidad_de_navegadores) para una lista detallada. ## Sintáxis diff --git a/files/es/web/css/justify-content/index.md b/files/es/web/css/justify-content/index.md index fb38d769d0b0a9..147a04c2db5840 100644 --- a/files/es/web/css/justify-content/index.md +++ b/files/es/web/css/justify-content/index.md @@ -11,7 +11,8 @@ La propiedad [CSS](/es/docs/CSS) **`justify-content`** define cómo el navegador El alineamiento se produce luego de que las longitudes y márgenes automáticos son aplicados, lo que significa que, si existe al menos un elemento flexible con {{cssxref("flex-grow")}} diferente a 0, no tendrá efecto ya que no habrá espacio disponible. -> **Nota:** No se debe asumir que esta propiedad sólo se aplicará a contenedores flex en el futuro y por lo tanto no ocultarla simplemente estableciendo otro valor para {{cssxref("display")}}. El CSSWG está trabajano para [extender su uso a cualquier elemento en bloque](http://dev.w3.org/csswg/css3-align/#justify-content). La especificación preliminar se encuentra en una etapa muy temprana y aún no está implementada. +> [!NOTE] +> No se debe asumir que esta propiedad sólo se aplicará a contenedores flex en el futuro y por lo tanto no ocultarla simplemente estableciendo otro valor para {{cssxref("display")}}. El CSSWG está trabajano para [extender su uso a cualquier elemento en bloque](http://dev.w3.org/csswg/css3-align/#justify-content). La especificación preliminar se encuentra en una etapa muy temprana y aún no está implementada. {{cssinfo}} diff --git a/files/es/web/css/layout_cookbook/index.md b/files/es/web/css/layout_cookbook/index.md index 2b130fa14f3fcc..18185e29e17e78 100644 --- a/files/es/web/css/layout_cookbook/index.md +++ b/files/es/web/css/layout_cookbook/index.md @@ -7,7 +7,8 @@ slug: Web/CSS/Layout_cookbook El libro de recetas de maquetación CSS tiene como objetivo reunir recetas para patrones de diseño comunes, cosas que podrías necesitar para implementar en tus propios sitios. Además de proporcionar código que puedes utilizar como punto de partida en tus proyectos, estas recetas resaltan las diferentes formas en que se pueden utilizar las especificaciones de diseño y las opciones que puedes tomar como desarrollador. -> **Nota:** Si es nuevo en el diseño de CSS, es posible que primero quiera echar un vistazo a nuestro [módulo de aprendizaje de diseño CSS](/es/docs/Learn/CSS/CSS_layout), ya que esto le dará la base básica que necesita para hacer aquí uso de las recetas. +> [!NOTE] +> Si es nuevo en el diseño de CSS, es posible que primero quiera echar un vistazo a nuestro [módulo de aprendizaje de diseño CSS](/es/docs/Learn/CSS/CSS_layout), ya que esto le dará la base básica que necesita para hacer aquí uso de las recetas. ## Las recetas diff --git a/files/es/web/css/layout_mode/index.md b/files/es/web/css/layout_mode/index.md index 07b693094d9bf3..2015d375fee066 100644 --- a/files/es/web/css/layout_mode/index.md +++ b/files/es/web/css/layout_mode/index.md @@ -14,7 +14,8 @@ Un **modo de diseño** [CSS](/es/docs/Web/CSS)(CSS layout mode), a veces simplem - El _[flexible box layout](/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Conceptos_Basicos_de_Flexbox)_, diseñado para presentar páginas complejas que pueden redimensionarse de forma fluida. - El _[grid layout](/es/docs/Web/CSS/CSS_Grid_Layout)_, diseñado para presentar elementos relativos a una cuadrícula fija (fixed grid). -> **Nota:** No todas las [propiedades CSS](/es/docs/Web/CSS/Referencia_CSS) aplican a todos los _**modos de diseño**_. La mayoría de ellos aplican a uno o dos de ellos y no tienen efecto si se configuran en un elemento que es parte de otro modo de diseño. +> [!NOTE] +> No todas las [propiedades CSS](/es/docs/Web/CSS/Referencia_CSS) aplican a todos los _**modos de diseño**_. La mayoría de ellos aplican a uno o dos de ellos y no tienen efecto si se configuran en un elemento que es parte de otro modo de diseño. ## Ver También diff --git a/files/es/web/css/length/index.md b/files/es/web/css/length/index.md index 4cb24a8d67f95c..b8c2716f790b2c 100644 --- a/files/es/web/css/length/index.md +++ b/files/es/web/css/length/index.md @@ -27,7 +27,8 @@ Los valores de tipo `` pueden ser interpolados para permitir animaciones - : Esta unidad representa el tamaño calculado de fuente ({{Cssxref("font-size")}}) del elemento. Si se usa dentro de la propiedad {{Cssxref("font-size")}}, representa el tamaño de fuente _heredado_ por el elemento. - > **Nota:** Esta unidad se usa por lo general para crear interfaces escalables, que mantengan el [ritmo vertical de la página](http://24ways.org/2006/compose-to-a-vertical-rhythm), aun cuando el usuario cambie el tamaño de las fuentes. Las propiedades CSS {{cssxref("line-height")}}, {{cssxref("font-size")}}, {{cssxref("margin-bottom")}} y {{cssxref("margin-top")}} generalemente tienen valores expresados en **em**. + > [!NOTE] + > Esta unidad se usa por lo general para crear interfaces escalables, que mantengan el [ritmo vertical de la página](http://24ways.org/2006/compose-to-a-vertical-rhythm), aun cuando el usuario cambie el tamaño de las fuentes. Las propiedades CSS {{cssxref("line-height")}}, {{cssxref("font-size")}}, {{cssxref("margin-bottom")}} y {{cssxref("margin-top")}} generalemente tienen valores expresados en **em**. - `ex` - : Esta unidad representa la [altura de la x](https://es.wikipedia.org/wiki/Altura_de_la_x) de la fuente ({{Cssxref("font")}}) del elemento. En fuentes que incluyen la letra 'x', es generalmente la altura de letras minúsculas en la fuente; `1ex ≈ 0.5em` en muchas fuentes. @@ -37,7 +38,8 @@ Los valores de tipo `` pueden ser interpolados para permitir animaciones - : Esta unidad representa el tamaño ({{Cssxref("font-size")}}) del elemento raíz (p.ej. el tamaño de fuente del elemento {{HTMLElement("html")}}). Cuando se aplica a {{Cssxref("font-size")}} del elemento raíz, representa su valor inicial. - > **Nota:** Esta unidad es práctica para crear interfaces perfectamente escalables. Si no es soportada por los navegadores, se puede recurrir a unidades **em**, aunque estas son ligeramente más complejas. + > [!NOTE] + > Esta unidad es práctica para crear interfaces perfectamente escalables. Si no es soportada por los navegadores, se puede recurrir a unidades **em**, aunque estas son ligeramente más complejas. #### Longitudes de porcentaje del viewport @@ -64,7 +66,8 @@ Para dispositivos de ppp bajo, la unidad **px** representa el _píxel de referen Para dispositivos de alto ppp, las pulgadas (`in`), centrímetros (`cm`), milímetros (`mm`) son definidos como su contraparte física. De esta forma, la unidad **px** es definida con relación a ellas (1/96 de 1 pulgada). -> **Nota:** Los usuarios pueden incrementar el tamaño de fuente por razones de accesibilidad. Para permitir interfaces usables sin importar el tamao de fuente, use únicamente unidades de longitud absolutas cuando las características físicas del medio de salida son conocidas, como imágenes de mapa de bits. Al establecer longitudes relacionadas al tamaño de fuente, es preferible usar unidades relativas, como `em` o `rem`. +> [!NOTE] +> Los usuarios pueden incrementar el tamaño de fuente por razones de accesibilidad. Para permitir interfaces usables sin importar el tamao de fuente, use únicamente unidades de longitud absolutas cuando las características físicas del medio de salida son conocidas, como imágenes de mapa de bits. Al establecer longitudes relacionadas al tamaño de fuente, es preferible usar unidades relativas, como `em` o `rem`. - `px` - : Relativa al dispositivo de visualización. @@ -87,7 +90,8 @@ Para dispositivos de alto ppp, las pulgadas (`in`), centrímetros (`cm`), milím ## Unidades CSS y puntos por pulgada (dots-per-inch) -> **Nota:** La unidad `in` no representa una pulgada física en pantalla, sino `96px`. Esto significa que sin importar la densidad de píxeles real en pantalla, se asume que serán `96ppp`. En dispositivos con mayor densidad de píxeles, `1in` será menor que una pulgada física. De forma similar, `mm`, `cm`, y `pt` no son longitudes absolutas. +> [!NOTE] +> La unidad `in` no representa una pulgada física en pantalla, sino `96px`. Esto significa que sin importar la densidad de píxeles real en pantalla, se asume que serán `96ppp`. En dispositivos con mayor densidad de píxeles, `1in` será menor que una pulgada física. De forma similar, `mm`, `cm`, y `pt` no son longitudes absolutas. Algunos ejemplos específicos: diff --git a/files/es/web/css/max-block-size/index.md b/files/es/web/css/max-block-size/index.md index 3d5681d370e648..cfc5a760c9c176 100644 --- a/files/es/web/css/max-block-size/index.md +++ b/files/es/web/css/max-block-size/index.md @@ -65,9 +65,11 @@ Los valores de `writing-mode` afectan al mapeo de `max-block-size` a `max-width` | `horizontal-tb`, `lr` {{deprecated_inline}}, `lr-tb` {{deprecated_inline}}, `rl` {{deprecated_inline}}, `rb` {{deprecated_inline}}, `rb-rl` {{deprecated_inline}} | {{cssxref("max-height")}} | | `vertical-rl`, `vertical-lr`, `sideways-rl` {{experimental_inline}}, `sideways-lr` {{experimental_inline}}, `tb` {{deprecated_inline}}, `tb-rl` {{deprecated_inline}} | {{cssxref("max-width")}} | -> **Nota:** Los valores de `writing-mode`: `sideways-lr` y `sideways-rl`, fueron eliminados de la especificación de escritura de nivel 3 de CSS en el proceso de diseño de sucesión. Pueden ser restaurados en el nivel 4. +> [!NOTE] +> Los valores de `writing-mode`: `sideways-lr` y `sideways-rl`, fueron eliminados de la especificación de escritura de nivel 3 de CSS en el proceso de diseño de sucesión. Pueden ser restaurados en el nivel 4. -> **Nota:** Los modos de escritura `lr`, `lr-tb`, `rl`, `rb`, y `rb-tl` ya no están permitidos en contextos {{Glossary("HTML")}}; sólo se pueden usar en contextos 1.x {{Glossary("SVG")}}. +> [!NOTE] +> Los modos de escritura `lr`, `lr-tb`, `rl`, `rb`, y `rb-tl` ya no están permitidos en contextos {{Glossary("HTML")}}; sólo se pueden usar en contextos 1.x {{Glossary("SVG")}}. ## Definición formal diff --git a/files/es/web/css/overflow-y/index.md b/files/es/web/css/overflow-y/index.md index 83f64f07999654..b2291b5a6be31d 100644 --- a/files/es/web/css/overflow-y/index.md +++ b/files/es/web/css/overflow-y/index.md @@ -7,7 +7,8 @@ slug: Web/CSS/overflow-y La propiedad [CSS](/es/docs/Web/CSS) **`overflow-y`** define qué se debe mostrar cuando el contenido se desborda de los extremos superior e inferior de un elemento en bloque. -> **Nota:** Si {{cssxref("overflow-x")}} es `hidden`, `scroll` o `auto` y esta propiedad es `visible` (por defecto) se calculará implícitamente como `auto`. +> [!NOTE] +> Si {{cssxref("overflow-x")}} es `hidden`, `scroll` o `auto` y esta propiedad es `visible` (por defecto) se calculará implícitamente como `auto`. {{EmbedInteractiveExample("pages/css/overflow-y.html")}} diff --git a/files/es/web/css/padding/index.md b/files/es/web/css/padding/index.md index 15fc90ea162b75..61492bbeb27377 100644 --- a/files/es/web/css/padding/index.md +++ b/files/es/web/css/padding/index.md @@ -13,7 +13,8 @@ La [propiedad abreviada](/es/docs/Web/CSS/Shorthand_properties) de [CSS](/es/doc El área de relleno de un elemento es el espacio entre su contenido y su borde. -> **Nota:** El relleno crea espacio adicional dentro de un elemento. Por el contrario, {{cssxref("margin")}} crea espacio extra _alrededor_ de un elemento. +> [!NOTE] +> El relleno crea espacio adicional dentro de un elemento. Por el contrario, {{cssxref("margin")}} crea espacio extra _alrededor_ de un elemento. ## Propiedades constituyentes diff --git a/files/es/web/css/percentage/index.md b/files/es/web/css/percentage/index.md index 6a723318451656..396bb598f77ff6 100644 --- a/files/es/web/css/percentage/index.md +++ b/files/es/web/css/percentage/index.md @@ -11,7 +11,8 @@ Los tipos de dato `` de [CSS](/en/CSS) representan un valor en forma Varias propriedades de longitud usan porcentajes, tales como `width, margin` y `padding`. Los porcentajes tambien se pueden ver en `font-size`, donde el tamaño del texto esta directamente relacionado al tamaño de su elemento padre. -> **Nota:** Solo los valores calculados son heredados. Entonces, incluso si un valor porcentual es usado en en la propiedad padre, un valor real, como una anchura en pixeles para un valor `,`sera accesible en la propiedad heredada, no el valor porcentual. +> [!NOTE] +> Solo los valores calculados son heredados. Entonces, incluso si un valor porcentual es usado en en la propiedad padre, un valor real, como una anchura en pixeles para un valor `,`sera accesible en la propiedad heredada, no el valor porcentual. ## Interpolación diff --git a/files/es/web/css/pseudo-classes/index.md b/files/es/web/css/pseudo-classes/index.md index 51faf080c6a2f1..2b439285e158f9 100644 --- a/files/es/web/css/pseudo-classes/index.md +++ b/files/es/web/css/pseudo-classes/index.md @@ -15,7 +15,8 @@ div:hover { Las pseudoclases, junto con los pseudoelementos, permiten aplicar un estilo a un elemento no sólo en relación con el contenido del árbol de documento, sino también en relación a factores externos como el historial del navegador ({{ cssxref(":visited") }}, por ejemplo), el estado de su contenido (como {{ cssxref(":checked") }} en algunos elementos de formulario), o la posición del ratón (como {{ cssxref(":hover") }} que permite saber si el ratón está encima de un elemento o no). -> **Nota:** En lugar de usar pseudoclases, {{cssxref("pseudo-elements")}} puede usarse para dar estilo a una _parte específica_ de un elemento. +> [!NOTE] +> En lugar de usar pseudoclases, {{cssxref("pseudo-elements")}} puede usarse para dar estilo a una _parte específica_ de un elemento. ## Sintaxis diff --git a/files/es/web/css/pseudo-elements/index.md b/files/es/web/css/pseudo-elements/index.md index 5895c775e29179..a5033ec3e4562d 100644 --- a/files/es/web/css/pseudo-elements/index.md +++ b/files/es/web/css/pseudo-elements/index.md @@ -34,7 +34,8 @@ De vez en cuando se utilizan dos puntos dobles (::) en vez de solo uno (:). Esto > **Nota:** `::selection` siempre se escribe con dos puntos dobles (::). -> **Nota:** Solo se puede usar un pseudo-elemento por selector. Debe aparecer después del selector simple. +> [!NOTE] +> Solo se puede usar un pseudo-elemento por selector. Debe aparecer después del selector simple. diff --git a/files/es/web/css/reference/index.md b/files/es/web/css/reference/index.md index 2d166600960850..d7b5bd248493e0 100644 --- a/files/es/web/css/reference/index.md +++ b/files/es/web/css/reference/index.md @@ -48,7 +48,8 @@ Debido a que éstas tienen formatos de estructura variados, revise la sección [ ## Índice de palabras clave -> **Nota:** Los nombres de propiedad en este índice **no** incluyen los [nombres de JavaScript](/es/docs/Web/CSS/CSS_Properties_Reference) donde difieren de los nombres estándar de CSS. +> [!NOTE] +> Los nombres de propiedad en este índice **no** incluyen los [nombres de JavaScript](/es/docs/Web/CSS/CSS_Properties_Reference) donde difieren de los nombres estándar de CSS. {{CSS_Ref}} diff --git a/files/es/web/css/specificity/index.md b/files/es/web/css/specificity/index.md index aa2434fb2d4907..d261ce65676e65 100644 --- a/files/es/web/css/specificity/index.md +++ b/files/es/web/css/specificity/index.md @@ -11,7 +11,8 @@ La **especificidad** es la manera mediante la cual los navegadores deciden qué La especificidad es un peso (importancia o valor) que se le asigna a una declaración CSS dada, determinada por el número correspondiente de cada [tipo de selector](/es/docs/Web/CSS/Especificidad#Tipos_de_selectores). Cuando varias declaraciones tienen igual especificidad, se aplicará al elemento la última declaración encontrada en el CSS. La especificidad solo se aplica cuando el mismo elemento es objetivo de múltiples declaraciones. Según las reglas de CSS, en caso de que un elemento sea objeto de una [declaración directa](/es/docs/Web/CSS/Especificidad#Elementos_objetivos_de_una_declaración_directa_vs_estilos_heredados), esta siempre tendrá preferencia sobre las reglas heredadas de su ancestro. -> **Nota:** La **proximidad de elementos** en el árbol del documento no tiene efecto en la especificidad. +> [!NOTE] +> La **proximidad de elementos** en el árbol del documento no tiene efecto en la especificidad. ### Tipos de selectores diff --git a/files/es/web/css/syntax/index.md b/files/es/web/css/syntax/index.md index 6d39c4a133a1de..f175e492340db5 100644 --- a/files/es/web/css/syntax/index.md +++ b/files/es/web/css/syntax/index.md @@ -30,7 +30,8 @@ Esos bloques son naturalmente llamados **bloques de declaraciones** y las declar ![css syntax - declarations block.png](css_syntax_-_declarations_block.png) -> **Nota:** El contenido de un bloque de declaración CSS, que es una lista de declaraciones separadas por un punto y coma, sin las llaves de apertura y cierre, pueden ser colocadas dentro del atributo `style de HTML`. +> [!NOTE] +> El contenido de un bloque de declaración CSS, que es una lista de declaraciones separadas por un punto y coma, sin las llaves de apertura y cierre, pueden ser colocadas dentro del atributo `style de HTML`. ## Sets de reglas CSS @@ -42,7 +43,8 @@ CSS permite esto asociando condiciones con bloques de declaraciones. Cada declar Debido a que un elemento de la página puede ser seleccionado por varios selectores, y, por lo tanto, por varias reglas que pueden contener la misma propiedad más de una vez, con diferentes valores, el estandar CSS define cuál regla tiene precedencia por sobre las otras y debe ser aplicada: esto se conoce como el algoritmo [cascada](/es/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance). -> **Nota:** Es importante resaltar que si un set de reglas formado por un grupo de selectores es un atajo que reemplaza varios sets de reglas con un solo selector cada una, esto no aplica a la validez del set de reglas en sí. +> [!NOTE] +> Es importante resaltar que si un set de reglas formado por un grupo de selectores es un atajo que reemplaza varios sets de reglas con un solo selector cada una, esto no aplica a la validez del set de reglas en sí. > > Esto tiene una consecuencia importante: si algún selector básico es inválido, como cuando se usa un pseudo-elemento o pseudo-clase inválida, el _selector_ entero es inválido y, por lo tanto, el set de reglas completo es ignorado (por ser inválido también). diff --git a/files/es/web/css/text-decoration/index.md b/files/es/web/css/text-decoration/index.md index 3eabe12d16b0f7..04b033aa2bc79d 100644 --- a/files/es/web/css/text-decoration/index.md +++ b/files/es/web/css/text-decoration/index.md @@ -9,7 +9,8 @@ La propiedad CSS **`text-decoration`** se usa para establecer el formato de text Las decoraciones de texto se dibujan a través de los elementos descendientes. Esto significa que no es posible deshabilitar la decoración en un descendiente si la propiedad se especifica en un elemento ancestro. Por ejemplo, en el código `

Este texto tiene algunas palabras enfatizadas en él.

`, la regla de estilos `p { text-decoration: underline; }` causará que el párrafo entero tenga subrayado. La regla `em { text-decoration: none; }` no causará ningún cambio; el párrafo entero seguirá subrayado. Sin embargo, la regla `em { text-decoration: overline; }` causará una segunda decoración que aparecerá sobre "algunas palabras enfatizadas". -> **Nota:** El Nivel 3 de Decoraciones de Texto transformó esta propiedad en la forma reducida de las tres propiedades nuevas {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, y {{cssxref("text-decoration-style")}}. Como en cualquier otra propiedad reducida, esto significa que restaura sus valores a los predeterminados si no son definidos explícitamente en la propiedad. +> [!NOTE] +> El Nivel 3 de Decoraciones de Texto transformó esta propiedad en la forma reducida de las tres propiedades nuevas {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, y {{cssxref("text-decoration-style")}}. Como en cualquier otra propiedad reducida, esto significa que restaura sus valores a los predeterminados si no son definidos explícitamente en la propiedad. {{cssinfo}} diff --git a/files/es/web/css/text-shadow/index.md b/files/es/web/css/text-shadow/index.md index 99939f777c23dd..23f2b00435127a 100644 --- a/files/es/web/css/text-shadow/index.md +++ b/files/es/web/css/text-shadow/index.md @@ -48,7 +48,8 @@ text-shadow: unset; - : Opcional. Puede ser especificado antes o después de los valores de offset. Si el color no es especificado, se usa el predeterminado del agente usuario. - > **Nota:** Para asegurar consistencia entre navegadores, se recomienda especificar un color explícito. + > [!NOTE] + > Para asegurar consistencia entre navegadores, se recomienda especificar un color explícito. - \ \ - : Requeridos. Estos valores `length` especifican el ófset de la sombra del texto. `` especifica la distancia horizontal; un valor negativo pone la sombra a la izquierda del texto. `` especifica la distancia vertical; un valor negativo pone la sombra encima del texto. Si ambos valores son `0`, la sombra es colocada detrás del texto (y puede generar un efecto de difuminado cuando se define el valor ``). diff --git a/files/es/web/css/text-transform/index.md b/files/es/web/css/text-transform/index.md index a3e6c9a3f131d0..56a28cf69d9cdc 100644 --- a/files/es/web/css/text-transform/index.md +++ b/files/es/web/css/text-transform/index.md @@ -49,7 +49,8 @@ text-transform: unset; - : Es una palabra clave que fuerza a que la primera _letra_ de cada palabra sea convertida a mayúscula. EL resto de caracteres no es modificado; eso significa que mantienen su tamaño original, como haya sido escrito en el texto del elemento. Una letra es cualquier caracter Unicode que sea parte de la categoría general de Letras o Números {{experimental_inline}}: esto excluye cualquier signo de puntuación o símbolos al principio de la palabra. - > **Nota:** Los autores no deben esperar que `capitalize` siga las convenciones de título específicas del lenguaje (como lo es en inglés el excluir artículos). + > [!NOTE] + > Los autores no deben esperar que `capitalize` siga las convenciones de título específicas del lenguaje (como lo es en inglés el excluir artículos). - `uppercase` - : Es una palabra clave que fuerza a todos los caracteres a ser convertidos a mayúsculas. diff --git a/files/es/web/css/time/index.md b/files/es/web/css/time/index.md index b519d45220c88f..df178a37f1051e 100644 --- a/files/es/web/css/time/index.md +++ b/files/es/web/css/time/index.md @@ -11,7 +11,8 @@ El [tipo de dato](/es/docs/Web/CSS/CSS_Types) **`