+
+
+
+
+
+ Sintaxis formal
+### Sintaxis formal {{csssyntax}} -Ejemplo
+## Ejemplo -Contenido HTML
+Contenido HTML -<div id="grid"> - <div></div> - <div></div> - <div></div> - <div></div> - <div></div> - <div></div> - <div></div> - <div></div> - <div></div> -</div>+```html +
+
+
+
+
+
+
+
+
+
+
+```
-Contenido CSS
+CSS -#grid {
+```css
+#grid {
display: grid;
height: 200px;
grid-template: repeat(3, 1fr) / repeat(3, 1fr);
grid-gap: 20px 5px;
}
-#grid > div {
+#grid > div {
background-color: lime;
}
-
-
-{{EmbedLiveSample("Example", "100%", "200px")}}
- -Especificaciones
- -| Especificación | -Estado | -Comentario | -
|---|---|---|
| {{SpecName("CSS3 Grid", "#propdef-grid-gap", "grid-gap")}} | -{{Spec2("CSS3 Grid")}} | -definición inicial | -
Compatibilidad del navegador
+``` + +{{EmbedLiveSample("Example", "100%", "200px")}} + +## Especificaciones + +| Especificación | Estado | Comentario | +| ---------------------------------------------------------------------------- | ---------------------------- | ------------------ | +| {{SpecName("CSS3 Grid", "#propdef-grid-gap", "grid-gap")}} | {{Spec2("CSS3 Grid")}} | definición inicial | + +## Compatibilidad del navegador {{Compat("css.properties.gap")}} -See also
+## See also --
-
- Related CSS properties: {{cssxref("grid-row-gap")}}, {{cssxref("grid-column-gap")}} -
- Grid Layout Guide: Basic concepts of grid layout - Gutters -
-
diff --git a/files/es/web/css/general_sibling_combinator/index.html b/files/es/web/css/general_sibling_combinator/index.html
deleted file mode 100644
index a2730ec4d12e94..00000000000000
--- a/files/es/web/css/general_sibling_combinator/index.html
+++ /dev/null
@@ -1,70 +0,0 @@
----
-title: Selectores de hermanos generales
-slug: Web/CSS/General_sibling_combinator
-tags:
- - CSS
- - NeedsMobileBrowserCompatibility
- - Referencia CSS
- - Selectores
-translation_of: Web/CSS/General_sibling_combinator
-original_slug: Web/CSS/Selectores_hermanos_generales
----
-
- Linear gradients(gradiente lineal), generados por la función {{cssxref("linear-gradient", "linear-gradient()")}}, donde el color se desvanece suavemente a lo largo de una línea imaginaria.
-
-
A rainbow made from a gradient -
- -body { -background: -moz-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet); -background: -webkit-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet); -background: -ms-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet); -background: -o-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet); -background: linear-gradient(to right,red,orange,yellow, green, blue,indigo,violet); -}- -{{ EmbedLiveSample('linear-gradient', 600, 20) }}
-
- - Radial gradient (gradientes radiales), generados por la función {{cssxref("radial-gradient", "radial-gradient()")}}. Cuanto más lejos de un origen sea un punto, más lejos del color original será.
-
Radial gradient -
- -body { -background: -moz-radial-gradient(red, yellow, rgb(30, 144, 255)) repeat scroll 0% 0% transparent; -background: radial-gradient(red, yellow, rgb(30, 144, 255)); -} -- -{{ EmbedLiveSample('radial-gradient', 600, 20) }}
-
- - Repeating gradient (gradientes de repetición), donde se repiten gradientes lineales o radiales tanto como sea necesario para llenar toda la caja.
-
Repeating gradient -
- -body { -background: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px); -background: repeating-linear-gradient(to top left, red, red 5px, white 5px, white 10px); -}- -{{ EmbedLiveSample('repeating-gradient', 600, 20) }}
-
- - Usando Gradientes CSS, {{cssxref("<gradient>")}}, {{cssxref("linear-gradient", "linear-gradient()")}}, {{cssxref("radial-gradient", "radial-gradient()")}}, {{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}} -
<length>
- - Es una longitud no negativa. -
<percentage>
- - Es un valor no negativo {{cssxref("percentage", "<percentage>")}} en relación con el tamaño del bloque del contenedor de la grilla. Si el tamaño de bloque del contenedor de cuadrícula es indefinido, el valor porcentual se trata como automático. -
<flex>
- - Es una dimensión -valor- no negativa con la unidad
frespecificando el 'factor flex' del espacio entre dos celdas. Si el espacio entre dos celdas está designado como<flex>tomará una porción del espacio remanente entre celdas en proporción a su 'factor flex' - o flex factorfr-.
- - Si aparece en una función
minmax()implica un mínimo automático (ejemplo:minmax(auto, <flex>)).
- max-content
- - Es una keyword o palabra clave que representa el contenido máximo de los items que ocupan el espacio de la grid o cuadrilla. -
min-content
- - Es una keyword o palabra clave que representa el contenido mínimo de los items que ocupan el espacio de la grid o cuadrilla. -
minmax(min, max)
- - Es una notación funcional (una función) que define un rango de tamaño mayor que o igual a min y menor que o igual a max. Si max es menor que min, entonces max será ignorado y la función será tratada como un min. Si establecemos un valor máximo como
<flex>, se define el 'factor flex' del espacio entre las celdas del grid. Si establecemos el valor mínimo como<flex>, se tratará como cero, o contenido mínimo si el contenedor de la grid/cuadrilla tiene la restricción de valor mínimo (min-content).
- fit-content(argument)
- - Representa la fórmula
min(max-content, max(auto, argument)), que se calcula similar aauto(por ejemplo:minmax(auto, max-content)), excepto que el track size o espacio entre celdas es mayor que el auto mínimo.
- auto
- - 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. -
-
-
Note: Los valores de tamaño
-auto(y solo losauto) pueden ser estirados por las propiedades {{cssxref("align-content")}} y {{cssxref("justify-content")}} .
- - Propiedades CSS relacionadas: {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-flow")}}, {{cssxref("grid")}} -
- Guía de Layout tipo Grid (en inglés): Auto-placement in grid layout - sizing rows in the implicit grid -
- Video tutorial (inglés): Introducing Grid auto-placement and order -
- CSS -
- Referencia a CSS -
- CSS Grid Layout -
- Guides
-
-
-
- Basics concepts of grid layout -
- Relationship to other layout methods -
- Line-based placement -
- Grid template areas -
- Layout using named grid lines -
- Auto-placement in grid layout -
- Box alignment in grid layout -
- Grids, logical values and writing modes -
- CSS Grid Layout and Accessibility -
- CSS Grid Layout and Progressive Enhancement -
- Realizing common layouts using grids -
- - Properties - - -
- Glossary
-
-
-
- Grid lines -
- Grid tracks -
- Grid cell -
- Grid areas -
- Gutters -
- Grid row -
- Grid column -
- - CSS +
- Referencia a CSS +
- CSS Grid Layout +
- Guides
+
-
+
- Basics concepts of grid layout +
- Relationship to other layout methods +
- Line-based placement +
- Grid template areas +
- Layout using named grid lines +
- Auto-placement in grid layout +
- Box alignment in grid layout +
- Grids, logical values and writing modes +
- CSS Grid Layout and Accessibility +
- CSS Grid Layout and Progressive Enhancement +
- Realizing common layouts using grids +
+ - Properties + + +
- Glossary
+
-
+
- Grid lines +
- Grid tracks +
- Grid cell +
- Grid areas +
- Gutters +
- Grid row +
- Grid column +
+ <length>
- - Es una medida no negativa. -
<percentage>
- - Es un {{cssxref("percentage", "<percentage>")}} no negativo relativo al tamaño del bloque del contenedor de la grilla. Si el tamaño del bloque del contenedor de la grilla es indefinido, el valor del porcentaje es tratado como
auto.
- <flex>
- - Es una dimensión no negativa con la unidad
frespecificando el factor flex de la pista (track). Cada pista con valor<flex>toma una parte del espacio restante en proporción con su factor flex. -Cuando aparece fuera de una notación
-minmax(), implica un mínimo automático (p.e.minmax(auto, <flex>)).
- max-content
- - representa el largo maximo del contenido de cada uno de los items de la pista en la cuadricula(grid) -
min-content
-minmax(minimo, maximo)
- - es una notacion funcional que define el rango del tamano, dicho tamano debe ser mayor o igual al (minimo) y menor o igual al (maximo). si el parametro (maximo) es mas pequeno que el parametro (minimo), entonces el parametro (maximo) es ignorado y la funcion se tratara con el parametro (minimo). De otra manera si, a valor
<flex>pone como minimo el factor flex de la pista, sera tratado como cero( or el contenido minimo, si el contenedor grid es inicializado con el tamano minimo permitido ).
- auto
- - 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: los tamaños de la pista
-auto(y sólo los tamaños de la pistaauto) pueden ser estirados por las propiedades {{cssxref("align-content")}} y {{cssxref("justify-content")}}.
- - Related CSS properties: {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-flow")}}, {{cssxref("grid")}} -
- Grid Layout Guide: Auto-placement in grid layout - sizing rows in the implicit grid -
- Video tutorial: Introducing Grid auto-placement and order -
none
- - El contenedor de la cuadrícula no define ningún nombre para las áreas de la cuadrícula. -
<string>+
- - Las filas se crean listando líneas de cadenas separadas, mientras que las columnas se reflejan en cada una de las celdas que aparecen en la cadena. Multiple named cell tokens within and between rows create a single named grid area that spans the corresponding grid cells. Unless those cells form a rectangle, the declaration is invalid. -
- Related CSS properties: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template")}} -
- Grid Layout Guide: Grid template areas -
- Video tutorial: Grid Template Areas -
none
- - Es una palabra clave que significa que no hay una cuadrícula explícita. Cualquier columna será generada implicitamente y su tamaño sera determinado por la propiedad {{cssxref("grid-auto-columns")}}. -
- {{cssxref("<length>")}} -
- Es una longitud no negativa. -
- {{cssxref("<percentage>")}} -
- Es un valor no negativo {{cssxref("percentage", "<percentage>")}}, relativo al tamaño del bloque del contenedor grid. Si el tamaño del contenedor de la cuadrícula depende del tamaño de sus vías, entonces el porcentaje debe de tratarse como
auto.
- Las contribuciones de tamaño intrínseco de la vía puede ser ajustado al tamaño del contenedor de la cuadrícula, e incrementar el tamaño final de la vía por la cantidad mínima que permita mantener el porcentaje.
- - {{cssxref("<flex>")}} -
- Es una dimensión no negativa con la unidad
frespecificando el factor de flexibilidad de la vía. Cada vía de tamaño-<flex>toma un trozo del espacio restante en proporción a su factor de flexibilidad. Cuando aparece en una notaciónminmax(), implica un mínimo automático (es decir,minmax(auto, <flex>)).
- max-content
- - Es una palabra clave representando la mayor contribución máxima de contenido de los elementos de la cuadrícula ocupando las vías de ésta. -
min-content
- - Es una palabra clave representando la mayor contribución mínima de contenido de los elementos de la cuadrícula ocupando las vías de ésta. -
- {{cssxref("minmax", "minmax(min, max)")}} -
- Es una notación funcional que define un rango de tamaño, mayor o igual que min, y menor o igual que max. Si max es menor a min, entonces max es ignorado y la función es tratada como min. Como un máximo, un valor
<flex>ajusta el factor de flexibilad de la vía. Es inválido utilizarlo como un mínimo.
- auto
- - 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: Los tamaños de vía
-auto(y sólo los tamaños de víaauto) 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 aauto(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.
- - {{cssxref("repeat", "repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )")}} -
- Representa un fragmento repetido de la lista de vías, permitiendo que un gran número de columnas que muestran un patrón recurrente se escriban de una manera más compacta. -
- Propiedades CSS relacionadas: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-template")}} -
- Guía de grid layout: Basic concepts of grid layout - Grid Tracks -
- Video tutorial: Defining a Grid -
- CSS -
- Referencia CSS -
- CSS Grid Layout -
- Guías
-
-
-
- Conceptos básicos de grid layout -
- Relación con otros métodos de layouts -
- Colocación en línea -
- Áreas de plantilla de cuadrícula -
- Layout utilizando líneas de cuadrícula nombradas -
- Auto-colocacion en grid layout -
- BAlineación de cajas en grid layout -
- Grids, valores lógicos y modos de escritura -
- CSS Grid Layout y Accesibilidad -
- CSS Grid Layout y Mejora Progresiva -
- Realizando layouts comunes con grids -
- - Propiedades - - -
- Glosario
-
-
-
- Grid lines -
- Grid tracks -
- Grid cell -
- Grid areas -
- Gutters -
- Grid row -
- Grid column -
- - CSS +
- Referencia CSS +
- CSS Grid Layout +
- Guías
+
-
+
- Conceptos básicos de grid layout +
- Relación con otros métodos de layouts +
- Colocación en línea +
- Áreas de plantilla de cuadrícula +
- Layout utilizando líneas de cuadrícula nombradas +
- Auto-colocacion en grid layout +
- BAlineación de cajas en grid layout +
- Grids, valores lógicos y modos de escritura +
- CSS Grid Layout y Accesibilidad +
- CSS Grid Layout y Mejora Progresiva +
- Realizando layouts comunes con grids +
+ - Propiedades + + +
- Glosario
+
-
+
- Grid lines +
- Grid tracks +
- Grid cell +
- Grid areas +
- Gutters +
- Grid row +
- Grid column +
+ - el valor de la palabra clave
none
- - o un valor de
<track-list>
- - o un valor de
<auto-track-list>.
- none
- - Es una palabra clave que significa que no hay una cuadrícula explícita. Cualquier fila será generada implicitamente y su tamaño sera determinado por la propiedad {{cssxref("grid-auto-rows")}}. -
- {{cssxref("<length>")}} -
- Es una longitud no negativa. -
- {{cssxref("<percentage>")}} -
- Es un valor no negativo {{cssxref("percentage", "<percentage>")}}, relativo al tamaño del bloque del contenedor grid. Si el tamaño del contenedor de la cuadrícula depende del tamaño de sus vías, entonces el porcentaje debe de tratarse como
auto.
- Las contribuciones de tamaño intrínseco de la vía puede ser ajustado al tamaño del contenedor de la cuadrícula, e incrementar el tamaño final de la vía por la cantidad mínima que permita mantener el porcentaje.
- - {{cssxref("<flex_value>","<flex>")}} -
- Es una dimensión no negativa con la unidad
frespecificando el factor de flexibilidad de la vía. Cada vía de tamaño-<flex>toma un trozo del espacio restante en proporción a su factor de flexibilidad. Cuando aparece en una notaciónminmax(), implica un mínimo automático (i.e.minmax(auto, <flex>)).
- max-content
- - Es una palabra clave representando la mayor contribución máxima de contenido de los elementos de la cuadrícula ocupando las vías de ésta. -
min-content
- - Es una palabra clave representando la mayor contribución mínima de contenido de los elementos de la cuadrícula ocupando las vías de ésta. -
- {{cssxref("minmax", "minmax(min, max)")}} -
- Es una notación funcional que define un rango de tamaño, mayor o igual que min, y menor o igual que max. Si max es menor a min, entonces max es ignorado y la función es tratada como min. Como un máximo, un valor
<flex>ajusta el factor de flexibilad de la vía. Es inválido utilizarlo como un mínimo.
- auto
- - 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: Los tamaños de vía
-auto(y sólo los tamaños de víaauto) 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 aauto(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ínimoauto.
- - {{cssxref("repeat", "repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )")}} -
- Representa un fragmento repetido de la lista de vías, permitiendo que un gran número de filas que muestran un patrón recurrente se escriban de una manera más compacta. -
- subgrid -
- El valor
subgridindica 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.
- - Propiedades CSS relacionadas: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-template")}} -
- Guía de grid layout: Basic concepts of grid layout - Grid Tracks -
- Video tutorial: Defining a Grid -
- CSS -
- CSS Reference -
- CSS Grid Layout -
- Guías
-
-
-
- Basics concepts of grid layout -
- Relationship to other layout methods -
- Line-based placement -
- Grid template areas -
- Layout using named grid lines -
- Auto-placement in grid layout -
- Box alignment in grid layout -
- Grids, logical values and writing modes -
- CSS Grid Layout and Accessibility -
- CSS Grid Layout and Progressive Enhancement -
- Realizing common layouts using grids -
- - Propiedades - - -
- Glosario
-
-
-
- Grid lines -
- Grid tracks -
- Grid cell -
- Grid areas -
- Gutters -
- Grid row -
- Grid column -
- - CSS +
- CSS Reference +
- CSS Grid Layout +
- Guías
+
-
+
- Basics concepts of grid layout +
- Relationship to other layout methods +
- Line-based placement +
- Grid template areas +
- Layout using named grid lines +
- Auto-placement in grid layout +
- Box alignment in grid layout +
- Grids, logical values and writing modes +
- CSS Grid Layout and Accessibility +
- CSS Grid Layout and Progressive Enhancement +
- Realizing common layouts using grids +
+ - Propiedades + + +
- Glosario
+
-
+
- Grid lines +
- Grid tracks +
- Grid cell +
- Grid areas +
- Gutters +
- Grid row +
- Grid column +
+ <'grid-template'>
- - Define el {{cssxref("grid-template")}} incluyendo {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-rows")}} y {{cssxref("grid-template-areas")}}. -
<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?
- - Implementa un auto-flow asignando los row tracks explícitamente mediante {{cssxref("grid-template-rows")}} (definiendo {{cssxref("grid-template-columns")}} en
none) y especificando como auto-repetir los column tracks mediante {{cssxref("grid-auto-columns")}} (definiendo {{cssxref("grid-auto-rows")}} enauto). {{cssxref("grid-auto-flow")}} es seteado encolumnen consecuencia, condensesi se especifica.
- Todas las otras sub-propiedades degridse redefinen a sus valores iniciales.
- [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>
- - Implementa un auto-flow asignando los column tracks explícitamente mediante {{cssxref("grid-template-columns")}} (definiendo {{cssxref("grid-template-rows")}} en
none) y especificando como auto-repetir los row tracks mediante {{cssxref("grid-auto-rows")}} (definiendo {{cssxref("grid-auto-columns")}} enauto). {{cssxref("grid-auto-flow")}} es seteado enrowen consecuencia, condensesi se especifica.
- Todas las otras sub-propiedades degridse redefinen a sus valores iniciales.
- - Propiedades CSS relacionadas: {{cssxref("grid-template")}}, {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-flow")}} -
- Grid Layout Guide: Line-based placement with CSS Grid -
- Grid Layout Guide: Grid template areas - Grid definition shorthands -
none
- - Las palabras no se separan en los finales de línea, incluso si las letras dentro de las palabras sobrepasan el final de la línea. Las líneas solo se distribuyen en el espacio en blanco. -
manual
- - Las palabras se separan para el ajuste de línea sólo cuando los caracteres dentro de la palabra sugieren oportunidades de salto de línea. Ver Sugiriendo oportunidades de separación de línea más abajo para detalle. -
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 más abajo) anularán la separación automática cuando exista. -
- U+2010 (HYPHEN) -
- El carácter "fuerte" de separación de línea indica una oportunidad de separación visible. Incluso si la línea no está realmente separada en ese momento, se muestra el guión. -
- U+00AD (SHY) -
- Un carácter invisible y "suave" de separación de línea. Este carácter no se renderiza de manera visible; en lugar de ello, indica la posición en la que el navegador debería separar la palabra en caso de requerir separación de línea. En HTML puedes usar
­para insertar una separación "suave".
- - {{Cssxref("content")}} -
none: sin separación; se desbordará si es preciso +Una extremadamente larga palabra
+
+ manual: separación sólo en ‐ o ­ (si fuera necesario) +Una extremadamente larga palabra
+
+ auto: separará donde decida el algoritmo (si fuera necesario) +Una extremadamente larga palabra
+
+auto
- - Valor predeterminado, la imagen debe escalarse con un algoritmo que maximice la apariencia de la imagen. En particular, son aceptables los algoritmos de escala que "suavizan" colores, como la interpolación bilinear. So propósito son imágenes de fotografías. Desde la versión 1.9 (Firefox 3.0), Gecko usa remuestreo bilinear (alta calidad). -
crisp-edges
- - La imagen se debe escalar con un algoritmo que preserve el contraste y los bordes de la imagen, y que no suavice los colores ni introduzca borrones en la imagen en el proceso. Los algoritmos adecuados incluyen algoritmos de escalamiento nearest-neighbor y otros algoritmos de escalabilidad tales como algoritmos 2×SaI y hqx-family. Este valor está destinado a imágenes pixel-art, como en juegos de navegador. -
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'. -
- imágenes con dimensiones intrínsecas, es decir, su tamaño natural, como una imagen jpeg que tiene dimensiones fijas. -
- imágenes con varias dimensiones intrínsecas, que coexisten en distintas versiones dentro de un archivo, com algunos formatos .ico. En ese caso, la dimensión intrínseca será la de la imagen con área más grande, y con la proporción más próxima al tamaño del contenedor. -
- imágenes sin dimensiones intrínsecas, pero con una relación de aspecto intrínseca, entre su anchura y altura, como algunas imágenes vectorizadas, en formato SVG, por ejemplo. -
- imágenes sin dimensiones intrínsecas, ni relación de aspecto intrínseca, como un degradado CSS, por ejemplo. -
- Si el tamaño específico define tanto anchura como altura, estos valores son usados como el tamaño concreto del objeto. -
- Si el tamaño específico define solo anchura o solo altura, el valor faltante es determinado usando la proporción intrínseca (si la hay), las dimensiones intrínsecas (si el valor especificado coincide), o usando el tamaño predeterminado del objeto para ese valor faltante. -
- Si el valor especificado no define anchura ni altura, el tamaño concreto del objeto será calculado de modo que coincida con la relación de aspecto intrínseca de las imágenes, pero sin exceder el tamaño predeterminado en cualquiera de sus dimensiones. Si la imagen no tiene relación de aspecto intrínseca, se usará la del objeto al que se está aplicando; si el objeto no tiene ninguna, la anchura o altura faltante se tomará del tamaño predeterminado del objeto. -
- Una imagen denotada por un tipo de dato {{cssxref("<uri>")}} y la función
url();
- - Un degradado CSS ({{cssxref("<gradient>")}}); -
- Una parte de la página, definida por la función {{cssxref("element", "element()")}}. -
- Degradados CSS, {{cssxref("<gradient>")}}, {{cssxref("linear-gradient","linear-gradient()")}}, {{cssxref("radial-gradient","radial-gradient()")}}, {{cssxref("repeating-linear-gradient","repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient","repeating-radial-gradient()")}} -
- {{cssxref("element", "element()")}} -
- {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("auto", "automático") }}
- Se aplica a: campos de texto.
- {{ Cssxref("inheritance", "Valor heredado") }}: no
- Porcentajes: N/A
- Media: {{ Xref_cssvisual() }}
- {{ Cssxref("computed value", "Valor calculado") }}: -
auto- No hay cambios en el estado actual del editor. Opción por defecto.
normal- El estado IME debería ser normal. Este valor puede ser usado en cualquier hoja de estilo del usuario para sobrescribir los parámetros de la página. Este valor no es soportado por Internet Explorer.
active- El editor de entradas, está inicialmente activo y usado para la entrada de datos, hasta que el usuario lo desactive específicamente. No soportado en Linux.
inactive- el editor de entradas está inicialmente inactivo, pero el usuario puede activarlo en cualquier momento. No soportado por Linux.
disabled- El editor de entradas está desactivado y no puede ser activado por el usuario. -
- Introducción a CSS
-
-
Si eres nuevo en el desarrollo web, asegúrate de leer nuestro artículo de conceptos básicos de CSS para saber qué es CSS y cómo usarlo.
-
- - Tutoriales CSS
-
Nuestra área de aprendizaje de CSS contiene una gran cantidad de tutoriales que te llevan desde el nivel de principiante hasta el nivel de competencia, cubriendo todos los aspectos fundamentales.
-
- - Referencia CSS
-
Nuestra exhaustiva referencia de CSS para desarrolladores web experimentados describe cada propiedad y concepto de CSS.
-
- - Primeros pasos en CSS -
- CSS es utilizado para diseñar y dar estilo a las páginas web, por ejemplo, alterando la fuente, color, tamaño y espaciado del contenido, dividirlo en múltiples columnas o agregar animaciones y otras características decorativas. Este módulo proporciona un suave comienzo hacia el dominio de CSS con los conceptos básicos acerca de su funcionamiento, la sintaxis y la manera en que puedes comenzar a utilizarlo para agregar estilos al HTML. -
- Bloques de construcción CSS. -
- Este módulo continúa a partir de donde dejó el módulo de primeros pasos de CSS. Ahora que has adquirido familiaridad con el lenguaje y su sintaxis, y has ganado cierta experiencia básica con su uso, es hora de profundizar un poco más. Este módulo analiza la cascada y la herencia, todos los tipos de selectores que tenemos disponibles, unidades, tamaño, estilo de fondos y bordes, depuración (debugging) y mucho más. -
- El propósito de este módulo es proporcionarte un set de herramientas para escribir CSS competente y ayudarte a entender todas la teoría esencial antes de avanzar hacia cuestiones más específicas como estilo de textos y diseño CSS. -
- Estilo de texto -
- Con los conceptos básicos del lenguaje CSS cubiertos, el siguiente tema de CSS en el que debes concentrarte es dar estilo al texto, una de las cosas más comunes que harás con CSS. Aquí veremos los fundamentos del estilo del texto, incluida la configuración de la fuente, negrita, cursiva, espaciado entre líneas y letras, sombras y otras características del texto. Terminaremos el módulo analizando la aplicación de fuentes personalizadas a tu página y en el estilo de listas y enlaces. -
- Diseño de CSS -
- En este punto ya hemos analizado los fundamentos de CSS, cómo dar estilo al texto y cómo diseñar y manipular las cajas en las que se encuentra el contenido. Ahora es el momento de ver cómo colocar sus cajas en el lugar correcto en relación con la pantalla del dispositivo y entre sí. Hemos cubierto los requisitos previos necesarios para que ahora puedas profundizar en el diseño de CSS, mirando diferentes configuraciones de pantalla, métodos de diseño tradicionales que implican flotación y posicionamiento, y nuevas herramientas de diseño como flexbox, grid y posicionamiento, asi como algunas técnicas de herencia que quizas desees conocer. -
- Uso de CSS para resolver problemas comunes -
- proporciona enlaces a secciones de contenido que explican cómo usar CSS para resolver problemas muy comunes al crear una página web. -
- Referencia CSS: Esta referencia exhaustiva para desarrolladores web experimentados describe cada propiedad y concepto de CSS. -
- Conceptos clave de CSS:
-
-
-
- La sintaxis y las formas del lenguaje -
- Especificidad, herencia y la cascada -
- Unidades y valores CSS -
- Modelo de caja y colapso de margen -
- El bloque contenedor -
- Contextos de apilamiento y formato de bloques -
- Valores iniciales, calculados, usados y actuales -
- Propiedades abreviadas de CSS -
- Diseño de caja flexible de CSS -
- Diseño de cuadrícula CSS (CSS Grid) -
- Media queries -
- Animaciones -
- - Puede usar el Servicio de Validación CSS de W3C para verificar si su CSS es válido. Esta es una herramienta de depuración de valor incalculable. -
- Las herramientas para desarrolladores de Firefox te permiten ver y editar el CSS de una página en vivo a través de las herramientas Inspector y Editor de estilos. -
- La extensión Web Developer para Firefox le permite rastrear y editar CSS en vivo en sitios vigilados. -
- La comunidad web ha creado varias herramientas CSS para que las uses. -
- Firefox: {{bug(1323667)}} -
- Demos de CSS: obtén un impulso creativo explorando ejemplos de las últimas tecnologías de CSS en acción. -
- Lenguajes web a los que se aplica CSS frecuentemente: HTML, SVG, MathML, XHTML y XML. -
- Tecnologías de Mozilla que hacen un amplio uso de CSS: extensiones y temas de Firefox y Thunderbird. -
- Lista de correo de Mozilla -
- Preguntas de Stackoverflow sobre CSS -
- CSS 2.1 -
- Las propiedades físicas mapeadas: {{cssxref("width")}} y {{cssxref("height")}} -
- {{cssxref("writing-mode")}} -
- Las propiedades que definen otras inserciones:: {{cssxref("inset-block-start")}}, {{cssxref("inset-inline-start")}}, y {{cssxref("inset-inline-end")}} -
- Las propiedades físicas mapeadas: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, y {{cssxref("left")}} -
- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} -
- Las propiedades que definen otras inserciones:: {{cssxref("inset-block-end")}}, {{cssxref("inset-inline-start")}}, y {{cssxref("inset-inline-end")}} -
- Las propiedades físicas mapeadas: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, y {{cssxref("left")}} -
- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} -
- Las propiedades físicas mapeadas: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, y {{cssxref("left")}} -
- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} -
- Las propiedades que definen otras inserciones:: {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}}, y {{cssxref("inset-inline-start")}} -
- Las propiedades físicas mapeadas: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, y {{cssxref("left")}} -
- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} -
- Las propiedades que definen otras inserciones: {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}}, y {{cssxref("inset-inline-end")}} -
- Las propiedades físicas mapeadas: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, y {{cssxref("left")}} -
- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} -
- Las propiedades físicas mapeadas: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, y {{cssxref("left")}} -
- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} -
- Las propiedades físicas mapeadas: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, y {{cssxref("left")}} -
- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} -
- {{ Cssxref("-moz-column-count") }} -
auto
- - Es un keyword que indica que un nuevo contexto de apilamiento debe ser creado solo si una de las propiedades aplicadas al elemento lo requiere. -
isolate
- - Es un keyword que indica que un nuevo contexto de apilamiento debe ser creado. -
- {{cssxref("<blend-mode>")}} -
- {{cssxref("mix-blend-mode")}}, {{cssxref("background-blend-mode")}} -
flex-start
- - Los items flex se colocan comenzando desde el comienzo principal. El margen del primer item es alineado al ras con el borde del comienzo principal de la línea y cada item siguiente es alineado al ras con el precedente. -
flex-end
- - Los items flex se colocan comenzando desde el final principal. El margen del último item es alineado al ras con el borde del final principal de la línea y cada item precedente es alineado al ras con el siguiente. -
center
- - Los items flex son colocados hacia el centro de la línea. Los items flex se alinean al ras entre sí y en torno al centro de la línea. El espacio entre el borde del comienzo principal de la línea y el primer item es el mismo que el espacio entre el borde del final principal y el último item de la línea. -
space-between
- - Los items flex se distribuyen uniformemente sobre la línea. El espaciamiento se hace de tal manera que el espacio adyacente entre dos items es el mismo. El borde del comienzo principal y el borde del final principal se alinean al ras con el borde del primer y último item respectivamente. -
space-around
- - Los items flex se alinean uniformemente de tal manera que el espacio entre dos items adyacentes es el mismo. El espacio vacío anterior al primer item y posterior al último item equivale a la mitad del espacio entre dos items adyacentes. -
- El block layout, diseñado para presentar documentos. El block layout contiene características de documento-centrado, como la capacidad de flotar(float) elementos o distribuirlos en múltiples columnas. -
- El inline layout, diseñado para presentar texto. -
- El table layout, diseñado para presentar tablas. -
- El positioned layout, diseñado para posicionar elementos sin demasiada interacción con otros elementos. -
- El flexible box layout, diseñado para presentar páginas complejas que pueden redimensionarse de forma fluida. -
- El grid layout, diseñado para presentar elementos relativos a una cuadrícula fija (fixed grid). -
- {{CSS_key_concepts}} -
- {{cssxref("<length>")}} -
- Una longitud, un valor negativo, cero, un valor positivo. -
- {{cssxref("<percentage>")}} -
- Un porcentaje del ancho del bloque contenedor. -
- {{ Cssxref("position") }}, {{ Cssxref("top") }}, {{ Cssxref("right") }}, {{ Cssxref("bottom") }} -
em
- - 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.
- Esta unidad se usa por lo general para crear interfaces escalables, que mantengan el ritmo vertical de la página, 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 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.5emen muchas fuentes.
- ch
- - Esta unidad representa la anchura, o más precisamente, la medida de avance, del glifo '0' (cero, de caracter Unicode U+0030) en la fuente ({{Cssxref("font")}}) del elemento. -
rem
- - 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.
- 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.-
-
vh
- - 1/100 de la altura del viewport. -
vw
- - 1/100 de la anchura del viewport. -
vmin
- - 1/100 del valor mínimo entre la altura y anchura del viewport. -
vmax
- - 1/100 del valor máximo entre la altura y anchura del viewport. -
px
- - Relativa al dispositivo de visualización.
- Para pantallas, generalmente es el tamaño de un píxel (punto) de la pantalla del dispositivo.
- Para impresoras y pantallas de muy alta resolución, un píxel CSS implica múltiples píxeles del dispositivo, de modo que el número de píxeles por pulgada se mantenga al rededor de 96.
- mm
- - Un milímetro. -
q
- - Un cuarto de milímetro (1/40° de centímetro). -
cm
- - Un centímetro (10 milímetros). -
in
- - Una pulgada (2.54 centímetros). -
pt
- - Un punto (1/72° de pulgada). -
pc
- - Una pica (12 puntos). -
mozmm{{non-standard_inline}}
- - Una unidad experimental que intenta generar exactamente un milímetro, sin importar el tamaño de resolución de la pantalla. Esto raramente será lo que se desea, pero podría ser útil para dispositivos móviles, en particular. -
1insiempre son96px,
- 3ptsiempre son4px,
- 25.4mmsiempre son96px.
-- {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("normal") }} -
- Aplicable a: todos los elementos. -
- {{ Cssxref("inheritance", "Valor heredado") }}: sí -
- Porcentajes: se refieren a tamaño de la fuente del elemento mismo. -
- Medio: {{ Xref_cssvisual() }} -
- {{ Cssxref("computed value", "Valor calculado") }}: para los valores <length> y <percentage>, el valor absoluto, en otro caso, como se especifica. -
normal
- -
-
Depende del agente del usuario. Los navegadores de escritorio (incluido Firefox) usan un valor por defecto de apenas 1.2, dependiendo del
-font-familydel elemento.
- <número>
- - El valor utilizado es este
<número>sin unidades multiplicado por el propio tamaño de fuente del elemento. El valor calculado es el mismo que el<número>especificado. En la mayoría de los casos, esta es la forma preferida de establecerline-heighty evitar resultados inesperados debido a la herencia.
- <longitud>
- - La <longitud> especificada se utiliza en el cálculo de la altura de la casilla encuadrada por líneas. Los valores dados en unidades
empueden producir resultados inesperados (ver ejemplo más abajo).
- <porcentaje>
- - En relación con el tamaño de fuente del elemento en sí. El valor calculado es este <porcentaje> multiplicado por el tamaño de letra del elemento calculado. Los valores porcentuales pueden producir resultados inesperados (ver el segundo ejemplo a continuación). -
- CSS 2.1 -
- {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("none", "ninguno") }} -
- Se aplica a: elementos con 'display: list-item' -
- {{ Cssxref("inheritance", "Valor heredado") }}: Sí -
- Porcentajes: n/a -
- Medio: {{ Cssxref("Media:Visual", "visual") }} -
- {{ Cssxref("computed value", "Valor calculado") }}: URI absoluta o
none
- uri
- - directorio donde se encuentra la imagen que se utilizará como marcador. -
- CSS 1 -
- CSS 2.1 -
- css3-lists -
- Item 1 +
- Item 2 +
- {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("outside", "outside (afuera)") }} -
- Se aplica a: elementos con 'display: list-item' -
- {{ Cssxref("inheritance", "Valor heredado") }}: Sí -
- Porcentajes: n/a -
- Medio: {{ Cssxref("Media:Visual", "visual") }} -
- {{ Cssxref("computed value", "Valor calculado") }}: como especificado -
outside
- - el marcador se encuentra fuera de la caja principal. -
inside
- - el marcador es la primera caja en línea dentro de la caja principal, después de la cual fluye el resto de los elementos. -
- CSS 1 -
- CSS 2.1 -
- css3-lists -
- List Item 1-1 +
- List Item 1-2 +
- List Item 1-3 +
- List Item 1-4 +
- List Item 2-1 +
- List Item 2-2 +
- List Item 2-3 +
- List Item 2-4 +
- List Item 3-1 +
- List Item 3-2 +
- List Item 3-3 +
- List Item 3-4 +
- {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("disc", "disco/punto") }} -
- Se aplica a: elementos con 'display: list-item' -
- {{ Cssxref("inheritance", "Valor heredado") }}: Sí -
- Porcentajes: n/a -
- Medio: {{ Cssxref("Media:Visual", "visual") }} -
- {{ Cssxref("computed value", "Valor calculado") }}: según se especificó -
- <std-list-style-name> -
- un nombre de estilo de lista estándar:
disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha
- disc
- - un disco. -
circle
- - un círculo. -
square
- - un cuadrado. -
decimal
- - números decimales empezando con 1. -
decimal-leading-zero
- - números decimales empezando eventualmente por ceros (por ejemplo: 01, 02, 03, ..., 98, 99). -
lower-roman
- - números romanos en minúscula (i, ii, iii, iv, v, etc.). -
upper-roman
- - números romanos en mayúscula (I, II, III, IV, V, etc.). -
lower-greek
- - letras griegas en minúscula alfa/α, beta/β, gamma/γ, ... -
lower-latin
- - letras ASCII en minúscula (a, b, c, ... z). -
upper-latin
- - letras ASCII en mayúscula (A, B, C, ... Z). -
armenian
- - numeración armenia tradicional (ayb/ayp, ben/pen, gim/keem, ...). -
georgian
- - numeración georgiana tradicional (an, ban, gan, ..., he, tan, in, in-an, ...). -
lower-alpha
- - es igual que
lower-latin.
- upper-alpha
- - es igual que
upper-latin.
- none
- - nada. -
- CSS 1 -
- CSS 2.1 -
- css3-lists -
- Hello +
- World +
- What's up? +
- Looks +
- Like +
- The +
- Same +
- {{ Cssxref("initial", "Valor inicial") }}: ver propiedades individuales -
- Se aplica a: elementos con 'display: list-item' -
- {{ Cssxref("inheritance", "Valor heredado") }}: no -
- Porcentajes: N/A -
- Medio: {{ Cssxref("Media:Visual", "visual") }} -
- {{ Cssxref("computed value", "Valor calculado") }}: ver propiedades individuales -
- ver {{ Cssxref("list-style-type", "list-style-type") }}. -
- ver {{ Cssxref("list-style-image", "list-style-image") }}. -
- ver {{ Cssxref("list-style-position", "list-style-position") }}. -
- CSS 1 (en) -
- CSS 2.1 (en) -
- css3-lists (en) -
- List Item1 +
- List Item2 +
- List Item3 +
- List Item A +
- List Item B +
- List Item C +
- Las propiedades físicas mapeadas: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, y {{cssxref("margin-left")}} -
- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} -
- Las propiedades físicas mapeadas: {{CSSxRef("margin-top")}}, {{CSSxRef("margin-right")}}, {{CSSxRef("margin-bottom")}}, y {{CSSxRef("margin-left")}} -
- {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}} -
<length>
- - Specifies a fixed width. See {{cssxref("<length>")}} for possible values. -
<percentage>
- - A {{cssxref("<percentage>")}} always relative to the width of the containing block. -
auto
- - See {{cssxref("margin")}}. -
- {{cssxref("margin-inline-start")}} -
- Las propiedades físicas mapeadas: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, y {{cssxref("margin-left")}} -
- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} -
- {{cssxref("margin-inline-end")}} -
- Las propiedades físicas mapeadas: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, y {{cssxref("margin-left")}} -
- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} -
- Las propiedades físicas mapeadas: {{CSSxRef("margin-top")}}, {{CSSxRef("margin-right")}}, {{CSSxRef("margin-bottom")}}, y {{CSSxRef("margin-left")}} -
- {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}} -
- Nota: Los valores negativos son permitidas. -
- Heredado: No. -
- Fuente: [] -
<length>
- - Especifica un ancho fijo. Valores negativos son permitidos. Mira {{cssxref("<length>")}} para conocer las posibles unidades. -
<percentage>
- - Un {{cssxref("<percentage>")}} relativo al ancho del bloque contenedor. Se permiten valores negativos. -
auto
- auto es reemplazado por algún valorapropiado. Por ejemplo, puede usarse para centrar horizontalmente un elemento bloque.
-div { width:50%; margin:0 auto; }centrará el div horizontalmente.
-- Un único valor aplicará para todos los cuatro lados. -
- Dos valores aplicarán: El primer valor para arriba y abajo, el segundo valor para izquierda y derecha. -
- Tres valores aplicarán: El primero para arriba, el segundo para izquierda y derecha, el tercero para abajo. -
- Cuatro valores aplicarán en sentido de las manecillas del reloj empezando desde arriba. (Arriba, derecha, abajo, izquierda) -
- <clip-style> -
border | padding | content | text
-- border -
Si se ha especificado border, la máscara de imagen se extiende hasta el borde del elemento.
- - padding -
- Si se ha especificado
padding, la imagen de máscara de extiendo hasta el padding (relleno) del elemento.
- - content -
- Si se ha espeficiado c
ontent, la imagen de máscara se recorta al tamaño del contenido del elemento.
- - text -
- Si se ha especificado
text, la imagen de máscara de recorta al tamaño del texto del elemento.
- - <uri> -
- La localización del recurso imagen que será utilizado como imagen de máscara. -
- <gradient> -
- La función
webkit-gradientque será usada como imagen de máscara.
- - none -
- Usado para especificar si un elemento no tiene imagen de máscara. -
- padding -
- Valor por defecto. La posición de la imagen de máscara es relativa al padding (relleno). (Para cajas solas "
0 0" es la esquina superior izquierda del límite del padding, "100% 100%" es la esquina inferior derecha.)
- - border -
- La posición de la imagen de máscara es relativa al borde. -
- content -
- La posición de la imagen de máscara es relativa al contenido. -
- Si sólo se especifica un valor, el segundo valor se supone que es center. -
- El primer valor representa la posición horizontal y el segundo la posición vertical (si al menos un valor no es una palabra clave). -
<percentage>
- - Con un par de valores 0% 0%, (es igual a 0 0) la esquina superior izquierda de la imagen se alinea con la esquina superior izquierda del borde del relleno del cuadro. Un valor par de 100% 100% coloca la esquina inferior derecha de la imagen en la esquina inferior derecha del zona del relleno. Con un par de valores de 14% 84%, el punto del 14% a lo largo y el 84% hacia abajo de la imagen son situados el punto del 14% a lo largo y el 84% del área del relleno. -
<length>
- - Con un par de valores 2cm 1cm, la esquina superior izquierda de la imagen se coloca a 2cm a la derecha y 1cm por debajo de la esquina superior izquierda del área del relleno. -
top
- - Equivalente al 0% para la posición vertical. -
right
- - Equivalente al 100% para la posición horizontal. -
bottom
- - Equivalente al 100% para la posición vertical. -
left
- - Equivalente al 0% para la posición horizontal. -
center
- - Equivalente al 50% para la posición horizontal si no se da otra forma, o 50% para la posición vertical si lo es. -
- repeat -
- La máscara de imagen se repite tanto vertical como horizontalmente. -
- repeat-x -
- La imagen de máscara de repite sólo horizontalmente. -
- repeat-y -
- La imagen de máscara de repite sólo verticalemente. -
- no-repeat -
- La máscara de imagen no se repite. Sólo se dibuja una copia suya. El resto del contenido del elemento con máscara no se muestra. -
- mask-image -
- Requierido.Ver {{Cssxref("-webkit-mask-image")}}. -
- mask-repeat -
- Opcional. Ver {{Cssxref("-webkit-mask-repeat")}}. -
- mask-attachment -
- Opcional Ver {{Cssxref("-webkit-mask-attachment")}}. -
- mask-position -
- Opcional. Ver {{Cssxref("-webkit-mask-position")}}. -
- mask-origin -
- Opcional. Ver {{Cssxref("-webkit-mask-origin")}}. -
- mask-clip -
- Opcional Ver {{Cssxref("-webkit-mask-clip")}}. -
- {{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-box-image")}}, {{cssxref("-webkit-mask-attachment")}}, {{cssxref("-webkit-mask-clip")}}, {{cssxref("-webkit-mask-image")}}, {{cssxref("-webkit-mask-composite")}}, {{cssxref("-webkit-mask-repeat")}} -
- {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("none", "ninguno") }} -
- Se aplica a : elementos de bloque o remplazados -
- {{ Cssxref("inheritance", "Valor heredado") }}: no -
- Porcentajes: se refiere a la altura del bloque contenedor. -
- Medio: {{ Xref_cssvisual() }} -
- {{ Cssxref("computed value", "Valor calculado") }}: -
- none : la {{ Cssxref("height", "altura") }} no tiene valor máxima. -
- length : puede ser en px, cm, in (píxel, centímetro o inches) -
- percentage : % especificado como un porcentaje de la altura del bloque contenedor. -
- CSS 2.1 -
- Las propiedades físicas mapeadas: {{cssxref("max-width")}} y {{cssxref("max-height")}} -
- {{cssxref("writing-mode")}} -
- {{cssxref("@import")}} -
- {{cssxref("@media")}} -
- Usando consultas de medios -
- Presenta las consultas de los medios, su sintaxis y los operadores y las funciones de los medios que se utilizan para construir expresiones de consulta de los medios. -
- Probando las consultas de medios programáticamente -
- Describe cómo usar las consultas de medios en su código de JavaScript para determinar el estado de un dispositivo, y para configurar escuchas que notifican su código cuando cambian los resultados de las consultas de medios (como cuando el usuario gira la pantalla o cambia el tamaño del navegador). -
- Usando consultas de medios en accesibilidad -
- Conozca cómo Media Queries puede ayudar a los usuarios a comprender mejor su sitio web. -
- Use {{cssxref ("@ apoya")}} para aplicar estilos que dependen del soporte del navegador para varias tecnologías CSS. -
- Aplicar estilos condicionales con las reglas-at {{cssxref("@media")}} e {{cssxref("@import")}} de CSS. -
- Indicar medios específicos en los elementos {{HTMLElement("link")}}, {{HTMLElement("source")}} y otros elementos HTML. -
- Testear y monitorizar los estados de los medios usando los métodos de javascript {{domxref("Window.matchMedia()")}} y {{domxref("MediaQueryList.addListener()")}}. -
all
- - Apto para todos los dispositivos. -
print
- - Destinado a material impreso y visualización de documentos en una pantalla en el modo de vista previa de impresión. -
screen
- - Destinado principalmente a las pantallas. -
speech
- - Destinado a sintetizadores de voz. -
windows-xp
- windows-vista
- windows-win7
- windows-win8
- windows-win10
-aero
- luna-blue
- luna-olive
- luna-silver
- royale
- generic
- zune
-- Especificación -
- Documentación -
- Documentación -
- Documentación -
- Las propiedades físicas mapeadas: {{cssxref("min-width")}} y {{cssxref("min-height")}} -
- {{cssxref("writing-mode")}} -
- length : puede ser en px, cm, in (píxel, centímetro o inches) -
- percentage : % especificado como un porcentaje de la altura del bloque contenedor. -
- CSS 2.1 -
- Las propiedades físicas mapeadas: {{cssxref("min-width")}} y {{cssxref("min-height")}} -
- {{cssxref("writing-mode")}} -
- {{ Xref_cssinitial() }}: 0 -
- Aplicable a: elementos de tipo bloque. -
- {{ Xref_cssinherited() }}: no -
- Porcentajes: se refieren a la anchura del bloque contenedor. -
- Media: {{ Xref_cssvisual() }} -
- {{ Xref_csscomputed() }}: -
- length : puede ser expresado en px, cm, in -
- percentage : expresado con "%" es un porcentaje del ancho del elemento contenedor. -
- -moz-max-content : el ancho intrínseco preferido -
- -moz-min-content : el ancho intrínseco mínimo -
- -moz-available : el ancho del contenedor menos el margen horizontal, borde y padding -
- -moz-fit-content : igual que
-moz-min-content
- - CSS 2.1 -
- Expresiones matematicas que involucran porcentajes para los anchos y altos en columnas de tabla, grupos de columnas de tabla, filas de tablas, y celdas de tablas en ambos layout fijo y tablas pueden ser tratados como si se hubiera especificado
auto
- - Es permitido anidar
max()y otros funcionesmin()como valores de expresiones. Las expresiones son completamente matematicas asi que puede usarse adicion directa, resta, multiplicacion y division sin usar la funcioncalc()en si.
- - La expresion pueden ser valores combinando los operadores de adicion ( + ), resta ( - ), multiplicacion ( * ) y division ( / ) , aplicando las reglas estandares de precedencia de operadores. Asegurese de poner un espacio en cada lado de los operandos de + y -. Los oprandos en la expresion pueden ser cualquier valor de sintaxis
<length>.
- - Usted puede (y con frecuencia necesitara) combinar los valores
min()ymax(), o usarmin()dentro de las funcionesclamp()ocalc().
- - Usted puede proveer mas de 2 argumentos, si tiene multiples restricciones para aplicar. -
- MDN Understanding WCAG, Guideline 1.4 explanations -
- Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0 -
- {{CSSxRef("calc", "calc()")}} -
- {{CSSxRef("clamp", "clamp()")}} -
- {{CSSxRef("max", "max()")}} -
- CSS Values -
- {{cssxref("<length>")}} -
- Una medida no negativa. -
- {{cssxref("<percentage>")}} -
- Un porcentaje no negativo, relativo al tamaño en línea del contenedor de la rejilla en bandas de columna y el tamaño de bloque del contenedor de rejilla en bandas de fila. Si el tamaño del contenedor de la rejilla depende del tamaño de sus bandas, entonces
<percentage>debe ser tratado comoauto. El {{glossary("user agent")}} puede ajustar las contribuciones del tamaño implícito de la banda al tamaño del contenedor de rejilla y así incrementar el tamaño final de la banda y así incrementar el tamaño final en la cantidad mínima que resultase al respetar el porcentaje.
- - {{cssxref("<flex>")}} -
- Una dimension no-negativa con la unidad
frespecificando el factor flex de la banda. Cada banda de tamaño<flex>toma una parte del espacio disponible en proporción a su factor flex.
- max-content
- - Representa la mayor contribución max-content de los elementos de rejilla que ocupan la banda. -
min-content
- - Representa la mayor contribución min-content de los elementos de rejilla que ocupan la banda. -
auto
- - Como un máximo, idéntico a
max-content. Como un mínimo representa el mayor tamaño mínimo (como se especifica en {{cssxref("min-width")}}/{{cssxref("min-height")}}) de los elementos de rejilla que ocupan la banda.
- - Guía de Grid Layout: Conceptos básicos del diseño con rejilla - tamaño de bandas con minmax() -
- Rejillas CSS, valores lógicos y modos de escritura -
-
-
Video tutorial: Presentando minmax()
-
- - CSS -
- Referencia CSS -
- CSS Grid Layout -
- Guías
-
-
-
- Conceptos básicos del diseño con rejillas -
- Relación a otros métodos de diseño -
- Posicionamiento basado en líneas -
- Grid template areas -
- Diseño usando lineas con nombre -
- Posicionamiento automático en el diseño con rejillas -
- Alineamiento de cajas en el diseño con rejillas -
- Rejillas, valores lógicos y modos de escritura -
- CSS Grid Layout y la Accesibilidad -
- CSS Grid Layout y una Mejora Progresiva -
- Elaborando diseños comunes utilizando rejillas -
- - Propiedades - - -
- Glosario
-
-
-
- Rejilla -
- Líneas de rejilla -
- Bandas de rejilla -
- Celdas de rejilla -
- Áreas de rejilla -
- Canaletes -
- Eje de rejilla -
- Fila -
- Columna -
- - {{cssxref("<blend-mode>")}} -
- El modo de mezcla que debería ser aplicado. -
- {{cssxref("<blend-mode>")}} -
- {{cssxref("background-blend-mode")}} -
- {{Cssxref("-moz-appearance")}} -
- {{Cssxref("-moz-background-inline-policy")}} -
- {{cssxref("box-sizing", "-moz-box-sizing")}} -
- {{Cssxref("clip-path")}} (aplicado en SVG y otros) -
- {{Cssxref("-moz-column-count")}} -
- {{Cssxref("-moz-column-fill")}} -
- {{Cssxref("-moz-column-gap")}} -
- {{Cssxref("-moz-column-width")}} -
- {{Cssxref("-moz-column-rule")}} -
- {{Cssxref("-moz-column-rule-width")}} -
- {{Cssxref("-moz-column-rule-style")}} -
- {{Cssxref("-moz-column-rule-color")}} -
- {{Cssxref("filter")}} (aplicado en SVG y otros) -
- {{Cssxref("-moz-font-feature-settings")}} -
- {{cssxref("-moz-font-language-override")}} -
- {{Cssxref("-moz-hyphens")}} -
- {{Cssxref("mask")}} (aplicado en SVG y otros) -
- {{Cssxref("pointer-events")}} (aplicado en SVG y otros) -
- {{cssxref("-moz-text-align-last")}} -
- {{Cssxref("text-decoration-color","-moz-text-decoration-color")}} -
- {{Cssxref("text-decoration-line","-moz-text-decoration-line")}} -
- {{Cssxref("text-decoration-style","-moz-text-decoration-style")}} -
- {{Cssxref("-moz-binding")}} -
- {{Cssxref("-moz-border-bottom-colors")}} -
- {{Cssxref("-moz-border-end")}} -
- {{Cssxref("-moz-border-end-color")}} -
- {{Cssxref("-moz-border-end-style")}} -
- {{Cssxref("-moz-border-end-width")}} -
- {{Cssxref("-moz-border-left-colors")}} -
- {{Cssxref("-moz-border-right-colors")}} -
- {{Cssxref("-moz-border-start")}} -
- {{Cssxref("-moz-border-start-color")}} -
- {{Cssxref("-moz-border-start-style")}} -
- {{Cssxref("-moz-border-start-width")}} -
- {{Cssxref("-moz-border-top-colors")}} -
- {{Cssxref("-moz-box-align")}} -
- {{Cssxref("-moz-box-direction")}} -
- {{Cssxref("-moz-box-flex")}} -
- {{Cssxref("-moz-box-ordinal-group")}} -
- {{Cssxref("-moz-box-orient")}} -
- {{Cssxref("-moz-box-pack")}} -
- {{Cssxref("-moz-float-edge")}} -
- {{Cssxref("-moz-force-broken-image-icon")}} -
- {{Cssxref("-moz-image-region")}} -
- {{Cssxref("-moz-margin-end")}} -
- {{Cssxref("-moz-margin-start")}} -
- {{cssxref("-moz-orient")}} -
- {{Cssxref("-moz-outline-radius")}} -
- {{Cssxref("-moz-outline-radius-bottomleft")}} -
- {{Cssxref("-moz-outline-radius-bottomright")}} -
- {{Cssxref("-moz-outline-radius-topleft")}} -
- {{Cssxref("-moz-outline-radius-topright")}} -
- {{Cssxref("-moz-padding-end")}} -
- {{Cssxref("-moz-padding-start")}} -
- {{Cssxref("-moz-script-level")}} -
- {{Cssxref("-moz-script-min-size")}} -
- {{Cssxref("-moz-script-size-multiplier")}} -
- {{Cssxref("-moz-stack-sizing")}} -
- {{Cssxref("-moz-user-focus")}} -
- {{Cssxref("-moz-user-input")}} -
- {{Cssxref("-moz-user-modify")}} -
- {{Cssxref("-moz-user-select")}} -
- {{Cssxref("-moz-window-shadow")}} -
- {{Cssxref("animation", "-moz-animation")}} [Aún se acepta la versión con prefijo] -
- {{Cssxref("animation-delay", "-moz-animation-delay")}} [Aún se acepta la versión con prefijo] -
- {{Cssxref("animation-direction", "-moz-animation-direction")}} [Aún se acepta la versión con prefijo] -
- {{Cssxref("animation-duration", "-moz-animation-duration")}} [Aún se acepta la versión con prefijo] -
- {{Cssxref("animation-fill-mode", "-moz-animation-fill-mode")}} [Aún se acepta la versión con prefijo] -
- {{Cssxref("animation-iteration-count", "-moz-animation-iteration-count")}} [Aún se acepta la versión con prefijo] -
- {{Cssxref("animation-name", "-moz-animation-name")}} [Aún se acepta la versión con prefijo] -
- {{Cssxref("animation-play-state", "-moz-animation-play-state")}} [Aún se acepta la versión con prefijo] -
- {{Cssxref("animation-timing-function","-moz-animation-timing-function")}} [Aún se acepta la versión con prefijo] -
- {{Cssxref("backface-visibility", "-moz-backface-visibility")}} [Aún se acepta la versión con prefijo] -
- {{Cssxref("background-clip", "-moz-background-clip")}} -
- {{Cssxref("background-origin", "-moz-background-origin")}} -
- {{Cssxref("background-size", "-moz-background-size")}} -
- {{Cssxref("border-image","-moz-border-image")}} -
- {{Cssxref("opacity","-moz-opacity")}} -
- {{Cssxref("outline","-moz-outline")}} -
- {{Cssxref("outline-color","-moz-outline-color")}} -
- {{Cssxref("outline-offset","-moz-outline-offset")}} -
- {{Cssxref("outline-style","-moz-outline-style")}} -
- {{Cssxref("outline-width","-moz-outline-width")}} -
- {{Cssxref("perspective", "-moz-perspective")}} [Aún se acepta la versión con prefijo] -
- {{Cssxref("perspective-origin","-moz-perspective-origin")}} [Aún se acepta la versión con prefijo] -
- {{Cssxref("transform", "-moz-transform")}} [Aún se acepta la versión con prefijo] -
- {{Cssxref("transform-origin", "-moz-transform-origin")}} [Aún se acepta la versión con prefijo] -
- {{Cssxref("transform-style", "-moz-transform-style")}} [Aún se acepta la versión con prefijo] -
- {{cssxref("transition", "-moz-transition")}} [Aún se acepta la versión con prefijo] -
- {{cssxref("transition-delay", "-moz-transition-delay")}} [Aún se acepta la versión con prefijo] -
- {{cssxref("transition-duration", "-moz-transition-duration")}} [Aún se acepta la versión con prefijo] -
- {{cssxref("transition-property", "-moz-transition-property")}} [Aún se acepta la versión con prefijo] -
- {{cssxref("transition-timing-function", "-moz-transition-timing-function")}} [Aún se acepta la versión con prefijo] -
- {{cssxref("initial","-moz-initial")}} -
button
- button-arrow-down
- button-arrow-next
- button-arrow-previous
- button-arrow-up
- button-bevel
- checkbox
- checkbox-container
- checkbox-label
- checkmenuitem
- dialog
- groupbox
- listbox
- menuarrow
- menucheckbox
- menuimage
- menuitem
- menuitemtext
- menulist
- menulist-button
- menulist-text
- menulist-textfield
- menupopup
- menuradio
- menuseparator
- -moz-mac-unified-toolbar
- -moz-win-borderless-glass
- -moz-win-browsertabbar-toolbox
- -moz-win-communications-toolbox
- -moz-win-glass
- -moz-win-media-toolbox
- -moz-window-button-box
- -moz-window-button-box-maximized
- -moz-window-button-close
- -moz-window-button-maximize
- -moz-window-button-minimize
- -moz-window-button-restore
- -moz-window-titlebar
- -moz-window-titlebar-maximized
- progressbar
- progresschunk
- radio
- radio-container
- radio-label
- radiomenuitem
- resizer
- resizerpanel
- scale-horizontal
- scalethumb-horizontal
- scalethumb-vertical
- scale-vertical
- scrollbarbutton-down
- scrollbarbutton-left
- scrollbarbutton-right
- scrollbarbutton-up
- scrollbar-small
- scrollbarthumb-horizontal
- scrollbarthumb-vertical
- scrollbartrack-horizontal
- scrollbartrack-vertical
- separator
- spinner
- spinner-downbutton
- spinner-textfield
- spinner-upbutton
- statusbar
- statusbarpanel
- tab
- tabpanels
- tab-scroll-arrow-back
- tab-scroll-arrow-forward
- textfield
- textfield-multiline
- toolbar
- toolbarbutton-dropdown
- toolbox
- tooltip
- treeheadercell
- treeheadersortarrow
- treeitem
- treetwisty
- treetwistyopen
- treeview
- window
-- Gradientes {{Gecko_minversion_inline("1.9.2")}}
-
-
-
- {{cssxref("-moz-linear-gradient")}} -
- {{cssxref("-moz-radial-gradient")}} -
- - Elementos {{gecko_minversion_inline("2.0")}}
-
-
-
- {{cssxref("-moz-element")}} -
- - Sub-imágenes
-
-
-
- {{cssxref("-moz-image-rect")}} {{gecko_minversion_inline("2.0")}} -
- -moz-use-text-color{{Deprecated_inline}} Usar {{Cssxref("currentColor")}}
--moz-bg-inset | -moz-bg-outset | -moz-bg-solid{{obsolete_inline}} abandonado en Gecko 1.9 (Firefox 3.0)
--moz-activehyperlinktext
- -moz-hyperlinktext
- -moz-visitedhyperlinktext
- -moz-buttondefault
- -moz-buttonhoverface
- -moz-buttonhovertext
- -moz-default-background-color{{Gecko_minversion_inline("5.0")}}
- -moz-default-color{{Gecko_minversion_inline("5.0")}}
- -moz-cellhighlight
- -moz-cellhighlighttext
- -moz-field
- -moz-fieldtext
- -moz-dialog
- -moz-dialogtext
- -moz-dragtargetzone
- -moz-mac-accentdarkestshadow
- -moz-mac-accentdarkshadow
- -moz-mac-accentface
- -moz-mac-accentlightesthighlight
- -moz-mac-accentlightshadow
- -moz-mac-accentregularhighlight
- -moz-mac-accentregularshadow
- -moz-mac-chrome-active{{Gecko_minversion_inline("1.9.1")}}
- -moz-mac-chrome-inactive{{Gecko_minversion_inline("1.9.1")}}
- -moz-mac-focusring
- -moz-mac-menuselect
- -moz-mac-menushadow
- -moz-mac-menutextselect
- -moz-menuhover
- -moz-menuhovertext
- -moz-win-communicationstext
- -moz-win-mediatext{{gecko_minversion_inline(1.9)}}
- -moz-nativehyperlinktext{{Gecko_minversion_inline("1.9.1")}}
--moz-box
- -moz-inline-block{{obsolete_inline}}
- -moz-inline-box
- -moz-inline-grid
- -moz-inline-stack
- -moz-inline-table{{obsolete_inline}}
- -moz-grid
- -moz-grid-group
- -moz-grid-line
- -moz-groupbox
- -moz-deck
- -moz-popup
- -moz-stack
- -moz-marker
--moz-show-background(valor por defecto en modo no estándar quirks mode)
--moz-button
- -moz-info
- -moz-desktop
- -moz-dialog(también un color)
- -moz-document
- -moz-workspace
- -moz-window
- -moz-list
- -moz-pull-down-menu
- -moz-field(también un color)
--moz-fixed
-- {{Cssxref("image-rendering","-moz-crisp-edges")}} {{Gecko_minversion_inline("1.9.2")}} -
- {{cssxref("-moz-calc")}} {{gecko_minversion_inline("2.0")}} -
-moz-arabic-indic
- -moz-bengali
- -moz-cjk-earthly-branch
- -moz-cjk-heavenly-stem
- -moz-devanagari
- -moz-ethiopic-halehame
- -moz-ethiopic-halehame-am
- -moz-ethiopic-halehame-ti-er
- -moz-ethiopic-halehame-ti-et
- -moz-ethiopic-numeric
- -moz-gujarati
- -moz-gurmukhi
- -moz-hangul
- -moz-hangul-consonant
- -moz-japanese-formal
- -moz-japanese-informal
- -moz-kannada
- -moz-khmer
- -moz-lao
- -moz-malayalam
- -moz-myanmar
- -moz-oriya
- -moz-persian
- -moz-simp-chinese-formal
- -moz-simp-chinese-informal
- -moz-tamil
- -moz-telugu
- -moz-thai
- -moz-trad-chinese-formal
- -moz-trad-chinese-informal
- -moz-urdu
-- {{Cssxref("-moz-scrollbars-none")}} {{obsolete_inline}} -
- {{Cssxref("-moz-scrollbars-horizontal")}} {{Deprecated_inline}} -
- {{Cssxref("-moz-scrollbars-vertical")}} {{Deprecated_inline}} -
- {{Cssxref("-moz-hidden-unscrollable")}} -
- {{Cssxref("text-align#Mozilla_Extensions","-moz-center")}} -
- {{Cssxref("text-align#Mozilla_Extensions","-moz-left")}} -
- {{Cssxref("text-align#Mozilla_Extensions","-moz-right")}} -
-moz-anchor-decoration
--moz-all
- -moz-none
--moz-min-content
- -moz-fit-content
- -moz-max-content
- -moz-available
-- {{Cssxref("::-moz-anonymous-block")}} eg@:- bug 331432 -
- {{Cssxref("::-moz-anonymous-positioned-block")}} -
- {{cssxref(":-moz-any")}} {{gecko_minversion_inline("2.0")}} -
- {{Cssxref(":-moz-any-link")}} (selecciona :link y :visited) -
- {{Cssxref(":-moz-bound-element")}} -
- {{Cssxref(":-moz-broken")}} {{gecko_minversion_inline("1.9")}} -
- {{Cssxref("::-moz-canvas")}} eg@:- resource://gre/res/ua.css -
- {{Cssxref("::-moz-cell-content")}} eg@:- bug 331432 -
- {{Cssxref(":-moz-drag-over")}} -
- {{Cssxref(":-moz-first-node")}} -
- {{cssxref("::-moz-focus-inner")}} -
- {{cssxref("::-moz-focus-outer")}} -
- {{cssxref(":-moz-focusring")}} {{gecko_minversion_inline("2.0")}} -
- {{cssxref(":-moz-full-screen")}} {{gecko_minversion_inline("9.0")}} -
- {{cssxref(":-moz-full-screen-ancestor")}} {{gecko_minversion_inline("10.0")}} -
- {{cssxref(":-moz-handler-blocked")}} {{gecko_minversion_inline("1.9.1")}} -
- {{cssxref(":-moz-handler-crashed")}} {{gecko_minversion_inline("2.0")}} -
- {{cssxref(":-moz-handler-disabled")}} {{gecko_minversion_inline("1.9.1")}} -
- {{Cssxref("::-moz-inline-table")}} eg@:- resource://gre/res/ua.css -
- {{Cssxref(":-moz-last-node")}} -
- {{Cssxref(":-moz-list-bullet")}} -
- {{cssxref(":-moz-list-number")}} -
- {{cssxref(":-moz-loading")}} {{gecko_minversion_inline("1.9")}} -
- {{Cssxref(":-moz-locale-dir(ltr)")}} {{gecko_minversion_inline("1.9.2")}} -
- {{Cssxref(":-moz-locale-dir(rtl)")}} {{gecko_minversion_inline("1.9.2")}} -
- {{Cssxref(":-moz-lwtheme")}} {{gecko_minversion_inline("1.9.2")}} -
- {{Cssxref(":-moz-lwtheme-brighttext")}} {{gecko_minversion_inline("1.9.2")}} -
- {{Cssxref(":-moz-lwtheme-darktext")}} {{gecko_minversion_inline("1.9.2")}} -
- {{Cssxref("::-moz-math-stretchy")}} -
- {{Cssxref(":-moz-only-whitespace")}} -
- {{Cssxref("::-moz-page")}} eg@:- resource://gre/res/ua.css -
- {{Cssxref("::-moz-page-sequence")}} eg@:- resource://gre/res/ua.css -
- {{Cssxref("::-moz-pagebreak")}} eg@:- resource://gre/res/ua.css -
- {{Cssxref("::-moz-pagecontent")}} eg@:- resource://gre/res/ua.css -
- {{Cssxref(":-moz-placeholder")}} {{gecko_minversion_inline("1.9")}} -
- {{cssxref("::-moz-placeholder")}} {{gecko_minversion_inline("19")}} -
- {{Cssxref("::-moz-progress-bar")}} -
- {{Cssxref("::-moz-range-thumb")}} -
- {{Cssxref("::-moz-range-track")}} -
- {{Cssxref(":-moz-read-only")}} -
- {{Cssxref(":-moz-read-write")}} -
- {{cssxref("::selection","::-moz-selection")}} -
- {{Cssxref("::-moz-scrolled-canvas")}} eg@:- resource://gre/res/ua.css -
- {{Cssxref("::-moz-scrolled-content")}} eg@:- bug 331432 -
- {{Cssxref("::-moz-scrolled-page-sequence")}} eg@:- bug 331432 -
- {{cssxref(":-moz-suppressed")}} {{gecko_minversion_inline("1.9")}} -
- {{cssxref(":-moz-submit-invalid")}} {{gecko_minversion_inline("2.0")}} -
- {{Cssxref("::-moz-svg-foreign-content")}} example at resource://gre/res/svg.css , *|*::-moz-svg-foreign-content {display: block !important;position: static !important;} -
- {{Cssxref(":-moz-system-metric(images-in-menus)")}} {{gecko_minversion_inline("1.9")}} -
- {{Cssxref(":-moz-system-metric(mac-graphite-theme)")}} {{gecko_minversion_inline("1.9.1")}} -
- {{Cssxref(":-moz-system-metric(scrollbar-end-backward)")}} {{gecko_minversion_inline("1.9")}} -
- {{Cssxref(":-moz-system-metric(scrollbar-end-forward)")}} {{gecko_minversion_inline("1.9")}} -
- {{Cssxref(":-moz-system-metric(scrollbar-start-backward)")}} {{gecko_minversion_inline("1.9")}} -
- {{Cssxref(":-moz-system-metric(scrollbar-start-forward)")}} -
- {{Cssxref(":-moz-system-metric(scrollbar-thumb-proportional)")}} {{gecko_minversion_inline("1.9")}} -
- {{Cssxref(":-moz-system-metric(touch-enabled)")}} {{gecko_minversion_inline("1.9.2")}} -
- {{Cssxref(":-moz-system-metric(windows-default-theme)")}} -
- {{Cssxref("::-moz-table")}} eg@:- resource://gre/res/ua.css -
- {{Cssxref("::-moz-table-cell")}} eg@:- resource://gre/res/ua.css -
- {{Cssxref("::-moz-table-column")}} eg@:- resource://gre/res/ua.css -
- {{Cssxref("::-moz-table-column-group")}} eg@:- resource://gre/res/ua.css -
- {{Cssxref("::-moz-table-outer")}} eg@:- resource://gre/res/ua.css -
- {{Cssxref("::-moz-table-row")}} eg@:- resource://gre/res/ua.css -
- {{Cssxref("::-moz-table-row-group")}} eg@:- resource://gre/res/ua.css -
- {{Cssxref(":-moz-tree-checkbox")}} -
- {{Cssxref(":-moz-tree-cell")}} -
- {{Cssxref(":-moz-tree-cell-text")}} -
- {{Cssxref(":-moz-tree-cell-text(hover)")}} {{gecko_minversion_inline("1.9")}} -
- {{Cssxref(":-moz-tree-column")}} -
- {{Cssxref(":-moz-tree-drop-feedback")}} -
- {{Cssxref(":-moz-tree-image")}} -
- {{Cssxref(":-moz-tree-indentation")}} -
- {{Cssxref(":-moz-tree-line")}} -
- {{Cssxref(":-moz-tree-progressmeter")}} -
- {{Cssxref(":-moz-tree-row")}} -
- {{Cssxref(":-moz-tree-row(hover)")}} {{gecko_minversion_inline("1.9")}} -
- {{Cssxref(":-moz-tree-separator")}} -
- {{Cssxref(":-moz-tree-twisty")}} -
- {{Cssxref(":-moz-ui-invalid")}}{{gecko_minversion_inline("2.0")}} -
- {{Cssxref(":-moz-ui-valid")}}{{gecko_minversion_inline("2.0")}} -
- {{cssxref(":-moz-user-disabled")}} {{gecko_minversion_inline("1.9")}} -
- {{Cssxref("::-moz-viewport")}} eg@:- resource://gre/res/ua.css -
- {{Cssxref("::-moz-viewport-scroll")}} eg@:- resource://gre/res/ua.css -
- {{cssxref(":-moz-window-inactive")}} {{gecko_minversion_inline("2.0")}} -
- {{Cssxref("::-moz-xul-anonymous-block")}} eg@:- resource://gre/res/ua.css -
- {{Cssxref("@-moz-document")}} -
- {{Cssxref("Media_queries#-moz-images-in-menus","-moz-images-in-menus")}} {{gecko_minversion_inline("1.9.2")}} -
- {{Cssxref("Media_queries#-moz-mac-graphite-theme","-moz-mac-graphite-theme")}} {{gecko_minversion_inline("1.9.2")}} -
- {{Cssxref("Media_queries#-moz-maemo-classic","-moz-maemo-classic")}} {{gecko_minversion_inline("1.9.2")}} -
- {{Cssxref("Media_queries#-moz-device-pixel-ratio","-moz-device-pixel-ratio")}} {{gecko_minversion_inline("2.0")}} -
- {{Cssxref("Media_queries#-moz-scrollbar-end-backward","-moz-scrollbar-end-backward")}} {{gecko_minversion_inline("1.9.2")}} -
- {{Cssxref("Media_queries#-moz-scrollbar-end-forward","-moz-scrollbar-end-forward")}} {{gecko_minversion_inline("1.9.2")}} -
- {{Cssxref("Media_queries#-moz-scrollbar-start-backward","-moz-scrollbar-start-backward")}} {{gecko_minversion_inline("1.9.2")}} -
- {{Cssxref("Media_queries#-moz-scrollbar-start-forward","-moz-scrollbar-start-forward")}} {{gecko_minversion_inline("1.9.2")}} -
- {{Cssxref("Media_queries#-moz-scrollbar-thumb-proportional","-moz-scrollbar-thumb-proportional")}} {{gecko_minversion_inline("1.9.2")}} -
- {{Cssxref("Media_queries#-moz-touch-enabled","-moz-touch-enabled")}} {{gecko_minversion_inline("1.9.2")}} -
- {{Cssxref("Media_queries#-moz-windows-classic","-moz-windows-classic")}} {{gecko_minversion_inline("1.9.2")}} -
- {{Cssxref("Media_queries#-moz-windows-compositor","-moz-windows-compositor")}} {{gecko_minversion_inline("1.9.2")}} -
- {{Cssxref("Media_queries#-moz-windows-default-theme","-moz-windows-default-theme")}} {{gecko_minversion_inline("1.9.2")}} -
- {{Cssxref("Media_queries#-moz-windows-theme","-moz-windows-theme")}} {{gecko_minversion_inline("2.0")}} -
- {{Cssxref("-moz-alt-content")}} ({{Bug("11011")}}) -
contain
- - El contenido reemplazado está dimensionado para mantener su relación de aspecto mientras se ajusta dentro del cuadro de contenido del elemento: su tamaño de objeto concreto se resuelve como una restricción de contenido contra el ancho y la altura utilizados del elemento. -
cover
- - El contenido reemplazado se dimensiona para mantener su relación de aspecto mientras llena el cuadro de contenido completo del elemento. Si la relación de aspecto del objeto no coincide con la relación de aspecto de su caja, entonces el objeto se recortará para que se ajuste. -
fill
- - Modifica el tamaño del elemento remplazado para llenar el cuadro de contenido. El objeto completo ocupará todo el espacio de la caja. Si el tamaño del elemento no concuerda con el de su caja, se estirará para llenarlo. -
none
- - El contenido reemplazado no se redimensiona. -
scale-down
- - El contenido se dimensiona como si
noneocontainestuvieran especificados, lo que resultaría en un tamaño de objeto concreto más pequeño.
- - Otras propiedades CSS relacionadas con imágenes: {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}. -
- {{cssxref("background-size")}} -
<position>
- - {{ cssxref("<position>") }}, este es un valor de cuatro que representa una posición en 2D con respecto a los bordes de la caja. Posiciones Relativas o absolutas pueden presentar compensaciones. Tenga en cuenta que la posición puede ser establecida fuera de la caja. -
- Other image-related CSS properties: {{cssxref("object-fit")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}. -
<alphavalue>
- - Es un número cuyo valor se encuentra entre 0.0 y 1.0, ambos incluidos. Este valor representa la opacidad. Si el valor se sale de la escala, será ajustado al valor válido más cercano.
-
- -
-- -valor -Significado -- -0El elemento es transparente (invisible). -- -Cualquier valor entre 0 y 1 -El elemento es translúcido. -- - -1El elemento es opaco (sólido). -
- <integer>
- - Representa el grupo ordinal al que el elemento flexible ha sido asignado. -
- Flexbox & the keyboard navigation disconnect — Tink -
- Source Order Matters | Adrian Roselli -
- MDN Understanding WCAG, Guideline 1.3 explanations -
- Understanding Success Criterion 1.3.2 | W3C Understanding WCAG 2.0 -
<length>
- - La anchura del espacio. Ver {{cssxref("<length>")}} para unidades posibles. Valores negativos colocan el borde dentro del elemento. -
- none -
- Sin contorno ({{Cssxref("outline-width")}} es
0).
- - dotted -
- Línea punteada. El contorno es una serie de puntos. -
- dashed -
- Línea discontinua. El contorno es una serie de segmentos de línea cortos. -
- solid -
- El contorno es una línea simple. -
- double -
- El contorno son dos líneas paralelas. El valor de {{Cssxref("outline-width")}} es la suma de los dos líneas y el espacio entre ellas. -
- groove -
- El contorno parece estar tallado dentro del lienzo. -
- ridge -
- Lo opuesto a
groove: el contorno parece salir del lienzo.
- - inset -
- El contorno hace a la caja verse como si estuviera embedida dentro del lienzo. -
- outset -
- Lo opuesto a
inset: el contorno hace a la caja verse como si estuviera saliendo del lienzo.
- thin
- - Depende del Agente Usuario. Generalmente 1px en navegadores de escritorio como Firefox. -
medium
- - Depende del Agente Usuario. Generalmente 3px en navegadores de escritorio como Firefox. -
thick
- - Depende del Agente Usuario. Generalmente 5px en navegadores de escritorio como Firefox. -
<length>
- - Ver valores {{cssxref("<length>")}}. -
- Los contornos no ocupan espacio, son dibujados por encima del elemento. Por lo tanto, su aparición u ocultamiento no causa un redibujado de las cajas. No suma en el tamaño de la caja y no hay movimiento o desplazamiento de los elementos como con {{cssxref("border")}}. -
- Los contornos pueden no ser rectangulares. Si el elemento se distribuye en varias líneas, el contorno no forma un rectágulo para encerrar a todo el elemento. A diferencia de los bordes, el contorno no está abierto en algunos lados:
-
Ejemplo: contorno aplicado a
- -
- varias líneasEjemplo: borde aplicado a
-
- varias líneas
- <outline-width>
- - Ver {{Cssxref("outline-width")}}. -
<outline-style>
- - Ver {{Cssxref("outline-style")}}. -
<outline-color>
- - Desde Gecko 1.9 (Firefox 3), es usado el valor de la propiedad {{Cssxref("color")}} del elemento (color de primer plano). Ver {{Cssxref("outline-color")}}. -
visible
- - El contenido no es recortado y puede ser visualizado fuera de los extremos superior e inferior del área de padding. -
hidden
- - El contenido es recortado, si es necesario, para que se ajuste verticalmente dentro del área de padding. No se dispone de las barras de desplazamiento. -
scroll
- - El contenido es recortado, si es necesario, para que se ajuste verticalmente dentro del área de padding. Los navegadores muestran las barras de desplazamiento independientemente de si el contenido se recorta o no (esto evita que las barras de desplazamiento aparezcan o desaparezcan cuando el contenido cambia). Las impresoras pueden imprimir el contenido desbordado. -
auto
- - Depende del cliente. Si el contenido se recorta dentro del área de padding, se vería igual que con la propiedad
visible, pero aún determinado por un contexto de formato de bloque. Los navegadores de escritorio proveen barras de desplazamiento si el contenido se desborda.
- - Propiedades CSS relacionadads: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow")}}, {{Cssxref("overflow-x")}}, {{Cssxref("clip")}}, {{Cssxref("display")}} -
overflow-y:hidden— Esconde el texto fuera de la caja ++ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ++
+
+ overflow-y:scroll— Agrega una barra scroll si se necesita ++ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ++
+
+ overflow-y:visible— Muestra el texto fuera de la caja si se necesita ++ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ++
+
+ overflow-y:auto— En la mayoría de los navegadores, equivalente ascroll++ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ++
+visible
- - Valor por defecto. El contenido no es recortado, podría ser dibujado fuera de la caja contenedora. -
hidden
- - El contenido es recortado y no se muestran barras de posición. -
scroll
- - El contenido es recortado y el navegador web usa las barras de desplazamiento, se haya recortado contenido o no. Esto previene cualquier problema con las barras de desplazamiento apareciendo o desapareciendo en un entorno dinámico. Puede que las impresoras impriman contenido excedente. -
auto
- - Depende del agente de usuario. Navegadores de escritorio como Firefox proveen barras de desplazamiento si hay contenido excedente. -
-moz-scrollbars-none{{ obsolete_inline() }}
- - Usar
overflow:hidden.
- -moz-scrollbars-horizontal{{ Deprecated_inline() }}
- - Es preferible el uso de {{ Cssxref("overflow-x") }} y {{ Cssxref("overflow-y") }}. -
-moz-scrollbars-vertical{{ Deprecated_inline() }}
- - Es preferible el uso de {{ Cssxref("overflow-x") }} y {{ Cssxref("overflow-y") }}. -
- -moz-hidden-unscrollable {{ non-standard_inline() }} -
- Es usada principalmente para uso interno y por temas. Deshabilita el desplazamiento en elementos XML root y
<html>,<body>usando las flechas del teclado o la rueda del ratón.
- - Propiedades CSS relacionadas: {{ cssxref("text-overflow") }}, {{ cssxref("white-space") }}, {{ Cssxref("overflow-x") }}, {{ Cssxref("overflow-y") }}, {{ Cssxref("clip") }}, {{ Cssxref("display") }} ( -
- Las propiedades físicas mapeadas: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, y {{cssxref("padding-left")}} -
- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} -
- Las propiedades físicas mapeadas: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, y {{cssxref("padding-left")}} -
- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} -
- Las propiedades físicas mapeadas: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, y {{cssxref("padding-left")}} -
- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} -
- <length> -
- Especifica un valor positivo fijo. Veáse {{cssxref("<length>")}} para más detalles. -
- <percentage> -
- Especifica un porcentaje con respecto al bloque que lo contiene. -
- Las propiedades físicas mapeadas: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, y {{cssxref("padding-left")}} -
- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} -
- Las propiedades físicas mapeadas: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, y {{cssxref("padding-left")}} -
- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} -
- Las propiedades físicas mapeadas: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, y {{cssxref("padding-left")}} -
- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} -
<length>
- - Especifica un valor positivo fijo. Veáse {{cssxref("<length>")}} para más detalles. -
<percentage>
- - Especifica un porcentaje con respecto al bloque que lo contiene. -
<length>
- - Especifica un ancho fijo no negativo. Ver más detalles {{ cssxref("<length>") }} . -
<percentage>
- - Con respecto a la anchura("width") del bloque que lo contiene. -
- Uno: un valor unico se aplica a los 4 lados. -
- Dos: el primer valor se aplica a arriba y abajo, el segundo valor se aplica a derecha e izquierda. -
- Tres: el primer valor se aplica a arriba, el segundo valor a derecha e izquierda y el tercer valor se aplica a abajo del elemento. -
- Cuatro: el primer valor se aplica a arriba, el segundo valor se aplica a la derecha, el tercer valor se aplica a abajo y el cuarto valor se aplica a la izquierda. -
- CSS Box Model -
none
- - Es una palabra clave que indica que ninguna transformación de perspectiva será aplicada. -
<length>
- - Es una {{cssxref("<length>")}} dando la distancia desde el usuario al plano z=0. Esta es usada para aplicar una transformación de perspectiva al elemento y su contenido. Si es 0 o un valor negativo, no se aplica una transformación de la perspectiva. -
- Un elemento posicionado es un elemento cuyo valor computado de
positionesrelative,absolute,fixed, osticky. (En otras palabras, cualquiera exceptostatic).
- - Un elemento posicionado relativamente es un elemento cuyo valor computado de
positionesrelative. Las propiedades {{Cssxref("top")}} y {{Cssxref("bottom")}} especifican el desplazamiento vertical desde su posición original; las propiedades {{Cssxref("left")}} y {{Cssxref("right")}} especifican su desplazamiento horizontal.
- - Un elemento posicionado absolutamente es un elemento cuyo valor computado de
positionesabsoluteofixed. Las propiedades {{Cssxref("top")}}, {{Cssxref("right")}}, {{Cssxref("bottom")}}, y {{Cssxref("left")}} especifican el desplazamiento desde los bordes del bloque contenedor del elemento. (El bloque contenedor es el ancestro relativo al cual el elemento está posicionado). Si el elemento tiene márgenes, se agregarán al desplazamiento. el elemento establece un nuevo contexto de formato de bloque para su contenido
- - Un elemento posicionado fijamente es un elemento cuyo valor de
positioncomputado essticky. Es tratado como un elemento posicionado relativamente hasta que su bloque contenedor cruza un límite establecido (como por ejemplo dando a {{Cssxref("top")}} cualquier valor distinto de auto), dentro de su flujo principal (o el contenedor dentro del cual se mueve), desde el cual es tratado como "fijo" hasta que alcance el borde opuesto de su bloque contenedor.
- - Si ambos,
topybottomestán especificados (técnicamente, noauto),topgana.
- - Si ambos,
leftyright, están especificados,leftgana cuando {{Cssref("direction")}} esltr(Inglés, japonés horizontal, etc.) yrightgana cuando {{Cssxref("direction")}} esrtl(Persa, árabe, hebreo, etc.).
- static
- - El elemento es posicionado de acuerdo al flujo normal del documento. Las propiedades {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, and {{cssxref("z-index")}} no tienen efecto. Este es el valor por defecto. -
relative
- - El elemento es posicionado de acuerdo al flujo normal del documento, y luego es desplazado con relación a sí mismo, con base en los valores de
top,right,bottom, andleft. El desplazamiento no afecta la posición de ningún otro elemento; por lo que, el espacio que se le da al elemento en el esquema de la página es el mismo como si la posición fuerastatic. Este valor crea un nuevo contexto de apilamiento, donde el valor dez-indexno esauto. El efecto que tienerelativesobre los elementostable-*-group,table-row,table-column,table-cell, ytable-captionno está definido.
- absolute
- - El elemento es removido del flujo normal del documento, sin crearse espacio alguno para el elemento en el esquema de la página. Es posicionado relativo a su ancestro posicionado más cercano, si lo hay; de lo contrario, se ubica relativo al bloque contenedor inicial. Su posición final está determinada por los valores de
top,right,bottom, yleft.
- - Este valor crea un nuevo contexto de apilamiento cuando el valor de
z-indexno esauto. Elementos absolutamente posicionados pueden tener margen, y no colapsan con ningún otro margen.
- fixed
- - El elemento es removido del flujo normal del documento, sin crearse espacio alguno para el elemento en el esquema de la página. Es posicionado con relación al bloque contenedor inicial establecido por el {{glossary("viewport")}}, excepto cuando uno de sus ancestros tiene una propiedad
transform,perspective, ofilterestablecida en algo que no seanone(ver CSS Transforms Spec), en cuyo caso ese ancestro se comporta como el bloque contenedor. (Notar que hay inconsistencias del navegador conperspectiveyfiltercontribuyendo a la formación del bloque contenedor.) Su posición final es determinada por los valores detop,right,bottom, yleft.
- - Estos valores siempre crean un nuevo contexto de apilamiento. En documentos impresos, el elemento se coloca en la misma posición en cada página. -
sticky{{experimental_inline}}
- - El elemento es posicionado de acuerdo al flujo normal del documento, y luego es desplazado con relación a su ancestro que se desplace más cercano y su bloque contenedor (ancestro en nivel de bloque más cercano) incluyendo elementos relacionados a tablas, basados en los valores de
top,right,bottom, yleft. El desplazamiento no afecta la posición de ningún otro elmento.
- - Estos valores siempre crean un nuevo contexto de apilamiento. Nótese que un elemento sticky se "adhiere" a su ancestro más cercano que tiene un "mecanismo de desplazamiento" (creado cuando el
overfloweshidden,scroll,auto, o bienoverlay), aún si ese ancestro no es el ancestro con desplazamiento más cercano. Esto inhibe efectivamente el comportamiento "sticky" (ver el Github issue en W3C CSSWG).
- - MDN entendiendo el WCAG, explicaciones de los lineamientos 1.4. -
- Presentación visual: Entendiendo SC 1.4.8 | Entendiendo WCAG 2.0 -
- A +
- Andrew W.K. +
- Apparat +
- Arcade Fire +
- At The Drive-In +
- Aziz Ansari +
- C +
- Chromeo +
- Common +
- Converge +
- Crystal Castles +
- Cursive +
- E +
- Explosions In The Sky +
- T +
- Ted Leo & The Pharmacists +
- T-Pain +
- Thrice +
- TV On The Radio +
- Two Gallants +
economy
- - Comportamiento normal. Los colores de fondo y las imágenes son sólo impresos si el usuario lo permite de manera explícita en el cuadro de diálogo de preferencias de impresión. -
exact
- - Los colores de fondo y las imágenes del elemento en el que se aplica esta reglar son siempre impresos, la configuración de la impresora del usuario es ignorada. -
- WebKit bug 64583: "WIP: Añade la propiedad CSS para controlar la impresión de fondos de elementos individuales" -
- CSSWG wiki: print-backgrounds - una propuesta para estandarizar esta propiedad -
- Módulo Color CSS Nivel 4: la propiedad
color-adjustuna propuesta más nueva para estandarizar esta propiedad
- - {{ Cssxref(":active") }} -
- {{ Cssxref(":checked") }} -
- {{ Cssxref(":default") }} -
- {{ Cssxref(":dir", ":dir()")}} -
- {{ Cssxref(":disabled") }} -
- {{ Cssxref(":empty") }} -
- {{ Cssxref(":enabled") }} -
- {{ Cssxref(":first") }} -
- {{ Cssxref(":first-child") }} -
- {{ Cssxref(":first-of-type") }} -
- {{ Cssxref(":fullscreen") }} -
- {{ Cssxref(":focus") }} -
- {{ Cssxref(":hover") }} -
- {{ Cssxref(":indeterminate") }} -
- {{ Cssxref(":in-range") }} -
- {{ Cssxref(":invalid") }} -
- {{ Cssxref(":lang", ":lang()") }} -
- {{ Cssxref(":last-child") }} -
- {{ Cssxref(":last-of-type") }} -
- {{ Cssxref(":left") }} -
- {{ Cssxref(":link") }} -
- {{ Cssxref(":not", ":not()") }} -
- {{ Cssxref(":nth-child", ":nth-child()") }} -
- {{ Cssxref(":nth-last-child", ":nth-last-child()") }} -
- {{ Cssxref(":nth-last-of-type", ":nth-last-of-type()") }} -
- {{ Cssxref(":nth-of-type", ":nth-of-type()") }} -
- {{ Cssxref(":only-child") }} -
- {{ Cssxref(":only-of-type") }} -
- {{ Cssxref(":optional") }} -
- {{ Cssxref(":out-of-range") }} -
- {{ Cssxref(":read-only") }} -
- {{ Cssxref(":read-write") }} -
- {{ Cssxref(":required") }} -
- {{ Cssxref(":right") }} -
- {{ Cssxref(":root") }} -
- {{ Cssxref(":scope") }} -
- {{ Cssxref(":target") }} -
- {{ Cssxref(":valid") }} -
- {{ Cssxref(":visited") }} -
- {{ Cssxref("::after") }} -
- {{ Cssxref("::before") }} -
- {{ Cssxref("::first-letter") }} -
- {{ Cssxref("::first-line") }} -
- {{ Cssxref("::selection") }} -
- {{ Cssxref("::backdrop") }} -
- {{ Cssxref("::placeholder") }} {{experimental_inline}} -
- {{ Cssxref("::marker") }} {{experimental_inline}} -
- {{ Cssxref("::spelling-error") }} {{experimental_inline}} -
- {{ Cssxref("::grammar-error") }} {{experimental_inline}} -
none
- - Los valores
open-quoteyclose-quotede la propiedad {{cssxref("content")}} no renderiza marcas de cita.
- [<string> <string>]+
- - Uno o más pares de valores {{cssxref("<string>")}} para
open-quoteyclose-quote. El primer par representa el nivel más externo de citación, el segundo par es para el primer nivel anidado, el siguiente par para el siguiente nivel, y así sucesivamente.
- - {{ Cssxref("content") }} -
- Selectores de tipo
elementname
- - Selectores de clase
.classname
- - Selectores de ID
#idname
- - Selectores universales
*,ns|*,*|*,|*
- - Selectores de atributo
[attr=value]
- - Selectores de hermanos adyacentes
A + B
- - Selectores de hermanos generales
A ~ B
- - Selectores de hijo
A > B
- - Selectores de descendiente
A B
- - {{ Cssxref(":active") }} -
- {{ Cssxref(':any')}} -
- {{ Cssxref(':any-link')}} -
- {{ Cssxref(":checked") }} -
- {{ Cssxref(":default") }} -
- {{ Cssxref(":defined") }} -
- {{ Cssxref(":dir", ":dir()")}} -
- {{ Cssxref(":disabled") }} -
- {{ Cssxref(":empty") }} -
- {{ Cssxref(":enabled") }} -
- {{ Cssxref(":first") }} -
- {{ Cssxref(":first-child") }} -
- {{ Cssxref(":first-of-type") }} -
- {{ Cssxref(":fullscreen") }} -
- {{ Cssxref(":focus") }} -
- {{ Cssxref(":focus-visible") }} -
- {{ Cssxref(":host") }} -
- {{ Cssxref(":host()") }} -
- {{ Cssxref(":host-context()") }} -
- {{ Cssxref(":hover") }} -
- {{ Cssxref(":indeterminate") }} -
- {{ Cssxref(":in-range") }} -
- {{ Cssxref(":invalid") }} -
- {{ Cssxref(":lang", ":lang()") }} -
- {{ Cssxref(":last-child") }} -
- {{ Cssxref(":last-of-type") }} -
- {{ Cssxref(":left") }} -
- {{ Cssxref(":link") }} -
- {{ Cssxref(":not", ":not()") }} -
- {{ Cssxref(":nth-child", ":nth-child()") }} -
- {{ Cssxref(":nth-last-child", ":nth-last-child()") }} -
- {{ Cssxref(":nth-last-of-type", ":nth-last-of-type()") }} -
- {{ Cssxref(":nth-of-type", ":nth-of-type()") }} -
- {{ Cssxref(":only-child") }} -
- {{ Cssxref(":only-of-type") }} -
- {{ Cssxref(":optional") }} -
- {{ Cssxref(":out-of-range") }} -
- {{ Cssxref(":read-only") }} -
- {{ Cssxref(":read-write") }} -
- {{ Cssxref(":required") }} -
- {{ Cssxref(":right") }} -
- {{ Cssxref(":root") }} -
- {{ Cssxref(":scope") }} -
- {{ Cssxref(":target") }} -
- {{ Cssxref(":valid") }} -
- {{ Cssxref(":visited") }} -
- {{ Cssxref("::after") }} -
- {{ Cssxref("::backdrop") }} -
- {{ Cssxref("::before") }} -
- {{ Cssxref("::cue") }} -
- {{ Cssxref("::first-letter") }} -
- {{ Cssxref("::first-line") }} -
- {{ Cssxref("::grammar-error") }} {{experimental_inline}} -
- {{ Cssxref("::marker") }} {{experimental_inline}} -
- {{ Cssxref("::placeholder") }} {{experimental_inline}} -
- {{ Cssxref("::selection") }} -
- {{ Cssxref("::spelling-error") }} {{experimental_inline}} -
- Sintaxis CSS -
- Reglas-at -
- Cascada -
- Comentarios -
- Descriptor -
- Herencia -
- Propiedades abreviadas -
- Especificidad -
- Sintaxis de definición de valor -
- Valor actual -
- Valor calculado -
- Valor inicial -
- Valor resuelto -
- Valor específico -
- Valor utilizado -
- Contexto de formato de bloque -
- Modelo de caja -
- Containing block -
- Modo de diseño -
- Margen colapsando -
- Elementos reemplazados -
- Contexto de apilamiento -
- Modelo de formato visual -
- document.styleSheets -
- styleSheets[i].cssRules -
- cssRules[i].cssText (selector y estilo) -
- cssRules[i].selectorText -
- elem.style -
- elem.style.cssText (solo estilo) -
- elem.className -
- elem.classList -
- {{domxref("CSSStyleSheet.insertRule")}} -
- {{domxref("CSSStyleSheet.deleteRule")}} -
- Uso de media queries con CSS -
- Uso de contadores con CSS -
- Uso de gradientes con CSS -
- Uso de transformaciones con CSS -
- Uso de animaciones con CSS -
- Uso de transiciones con CSS -
- Uso de múltiples fondos con CSS -
- Uso de las cajas flexibles con CSS -
- Uso de columnas con CSS -
- Extensiones CSS de Mozilla (con el prefijo
-moz)
- - Extensiones CSS de WebKit (principalmente con el prefijo
-webkit)
- - Extensiones CSS de Microsoft (con el prefijo
-ms)
- - {{cssxref("<length>")}} -
- Una longitud no negativa. -
- {{cssxref("<percentage>")}} -
- Un porcentaje no negativo relativo con el tamaño en línea del contenedor de la cuadrícula en las pistas de la cuadrícula de columna, y el tamaño del bloque del contenedor de la cuadrícula en las pistas de la cuadrúcula de la fila. Si el tamaño de la rejilla depende del tamaño de sus pistas, entonces el
<percentage>debe ser tratado comoauto. El agente de usuario puede ajustar las contribuciones de tamaño intrínseco de la pista al tamaño del contenedor de la rejilla y aumentar el tamaño final de la pista en la cantidad que resultaría en respetar el porcentaje.
- - {{cssxref("<flex>")}} -
- Una dimensión no negativa con la unidad
frespecificando el factor flexible de la pista. Cada pista de tamaño<flex>comparte el espacio restante en proporción a su factor flex
- max-content
- - Representa la contribución mas grande de max-content de los elementos de la cuadrícula ocupando la pista. -
min-content
- - Representa la contribución más pequeña min-content de los elementos de la cuadrícula ocupando la pista. -
auto
- - Como un máximo, idéntico a
max-content. Como un mínimo representa el mayor tamaño mínimo (como se específica en {{cssxref("min-width")}}/{{cssxref("min-height")}}) de los elementos de la cuadrícula ocupando la pista.
- auto-fill
- - Si el contenedor de cuadrícula tiene un tamaño definido o máximo en el eje relevante, entonces el número de repeticiones es el mayor entero positivo posible que no hace que la cuadrícula desborde su contenedor de cuadrícula. Tratando cada pista con su función de dimensiones máximo de pista (cada valor se utiliza individualmente para definir
grid-template-rowsogrid-template-columns), si está definido. De lo contrario, como su función de tamaño mínimo de pista, y teniendo en cuenta la brecha de cuadrícula. Si se desbordara cualquier número de repeticiones, entonces la repetición es1. De lo contrario, si el contenedor de la cuadrícula tiene un tamaño mínimo definido en el eje relevante, el número de repeticiones es el número entero positivo más pequeño posible que cumple ese requisito mínimo. De lo contrario, la lista de pistas especificada se repite solo una vez.
- auto-fit
- -
-
Se comporta igual que el autocompletado
- -auto-fill, excepto que después de colocar los elementos de la cuadrícula se colapsan las pistas vacías repetidas. Una pista vacía es aquella sin elementos de cuadrícula colocados o que se extienden a través de ella. (Esto puede provocar el colapso de todas las pistas, si están todas vacías).Una pista colapsada se trata como si tuviera una única función de tamaño de pista fija de
- -0px, y los canales (gutters) a cada lado de ella colapsan.Con el fin de encontrar el número de pistas repetidas automáticamente, el agente de usuario distribuye el tamaño de la pista a un valor especificado por el agente de usuario (por ejemplo,
-1px), para evitar la división por cero.
- - {{CSS_key_concepts()}} -
none
- - El elemento no efrece método para que el usuario controle el cambio de tamaño del elemento. -
both
- - El elemento efrece un mecanismo que permite al usuario cambiar el tamaño del elemento el cual puede ser tanto horizontal como verticalmente. -
horizontal
- - El elemento efrece un mecanismo que permite al usuario cambiar el tamaño del elemento sólo horintalmente. -
vertical
- - El elemento efrece un mecanismo que permite al usuario cambiar el tamaño del elemento sólo verticalmente. -
- {{HTMLElement("textarea")}} -
dpi
- - Esta unidad representa el número de dots per inch (ppp en español), puntos por pulgada . A screen typically contains 72 or 96 dpi; a printed document usually reach much greater dpi. As 1 inch is 2.54 cm,
1dpi ≈ 0.39dpcm.
- dpcm
- - Esta unidad representa el número de dots per centimeter (ppc en español), puntos por cm. 1 inch(pulgada) son 2.54 cm,
1dpcm ≈ 2.54dpi.
- dppx
- - Esta unidad representa el número de puntos por unidad px. Debido a la relación fija de 1:96 CSS para CSS px, 1 px es equivalente a 96 dpi, que corresponde a la resolución predeterminada de las imágenes mostradas en CSS como se define por {{cssxref("image-resolution")}}. -
- Referencia CSS -
- {{CSS_key_concepts}} -
- {{domxref("window.getComputedStyle")}} -
- {{ Xref_cssinitial() }}: {{ Cssxref("auto") }} -
- Se aplica a: positioned elements -
- {{ Xref_cssinherited() }}: no -
- Porcentajes: se refiere al ancho del bloque contenedor. -
- Media: {{ Xref_cssvisual() }} -
- {{ Xref_csscomputed() }}: valor absoluto, porcentaje ó auto. -
- {{cssxref("<length>")}} -
- Una longitud, puede ser un valor negativo, cero, o un valor positivo. -
- {{cssxref("<percentage>")}} -
- Un porcentaje del ancho del bloque contenedor. -
{{CSSRef("Selectors")}}
-
-Resumen
- -El combinador ~ separa dos selectores y selecciona el segundo elemento sólo si está precedido por el primero y ambos comparten un padre común.
Sintaxis
- -elemento ~ elemento { estilos }
-
-
-Ejemplo
- -p ~ span {
- color: red;
-}
-
-<span>Este span no es rojo.</span> -<p>Aquí hay un párrafo.</p> -<code>Aquí hay algo de código.</code> -<span>Aquí hay un span. Es rojo porque va precedido de un párrafo y ambos comparten el mismo padre.</span>- -
{{ EmbedLiveSample('Example', 320, 150) }}
- -Especificaciones
- -| Especificación | -Estado | -Comentarios | -
|---|---|---|
| {{ SpecName('CSS4 Selectors', '#general-sibling-combinators', 'following-sibling combinator') }} | -{{Spec2('CSS4 Selectors')}} | -- |
| {{ SpecName('CSS3 Selectors', '#general-sibling-combinators', 'general sibling combinator') }} | -{{Spec2('CSS3 Selectors')}} | -- |
Compatibilidad entre navegadores
- -{{Compat("css.selectors.general_sibling")}} - -Ver también
- -- - diff --git a/files/es/web/css/general_sibling_combinator/index.md b/files/es/web/css/general_sibling_combinator/index.md new file mode 100644 index 00000000000000..948e7104718796 --- /dev/null +++ b/files/es/web/css/general_sibling_combinator/index.md @@ -0,0 +1,54 @@ +--- +title: Selectores de hermanos generales +slug: Web/CSS/General_sibling_combinator +tags: + - CSS + - NeedsMobileBrowserCompatibility + - Referencia CSS + - Selectores +translation_of: Web/CSS/General_sibling_combinator +original_slug: Web/CSS/Selectores_hermanos_generales +--- +{{CSSRef("Selectors")}} + +## Resumen + +El combinador `~` separa dos selectores y selecciona el segundo elemento sólo si está precedido por el primero y ambos comparten un padre común. + +## Sintaxis + +``` +elemento ~ elemento { estilos } +``` + +## Ejemplo + +```css +p ~ span { + color: red; +} +``` + +```html +Este span no es rojo. +
Aquí hay un párrafo.
+Aquí hay algo de código.
+Aquí hay un span. Es rojo porque va precedido de un párrafo y ambos comparten el mismo padre.
+```
+
+{{ EmbedLiveSample('Example', 320, 150) }}
+
+## Especificaciones
+
+| Especificación | Estado | Comentarios |
+| -------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- |
+| {{ SpecName('CSS4 Selectors', '#general-sibling-combinators', 'following-sibling combinator') }} | {{Spec2('CSS4 Selectors')}} | |
+| {{ SpecName('CSS3 Selectors', '#general-sibling-combinators', 'general sibling combinator') }} | {{Spec2('CSS3 Selectors')}} | |
+
+## Compatibilidad entre navegadores
+
+{{Compat("css.selectors.general_sibling")}}
+
+## Ver también
+
+- [Selectores de hermanos adyacentes](/es/docs/Web/CSS/Adjacent_sibling_selectors)
diff --git a/files/es/web/css/gradient/index.html b/files/es/web/css/gradient/index.html
deleted file mode 100644
index 7d63a49ea65a15..00000000000000
--- a/files/es/web/css/gradient/index.html
+++ /dev/null
@@ -1,101 +0,0 @@
----
-title: {{CSSRef}}
-
-Resumen
- -El tipo de datos CSS <gradient> indica un tipo de {{cssxref("<image>")}} que consiste de una transición progresiva entre dos o más colores (Degradado).
{{EmbedInteractiveExample("pages/css/type-gradient.html")}}
- -Un gradiente de CSS no es un {{cssxref("<color>")}} pero tampoco es una imagen con dimensiones intrínsecas; es decir, que no tiene tamaño natural o preferido, ni una relación preferida. Su tamaño concreto coincidirá con los elementos a los que se aplica.
- -Funciones de las Gradientes
- -Hay tres tipos de gradientes de color:
- --
-
Interpolación
- -Al igual que con cualquier caso de interpolación de colores, los gradientes se calculan en el espacio de color alfa-premultiplicado. Esto impide que sombras de gris inesperadas aparezcan cuando el color o la opacidad están variando. (debe tener en cuenta que los navegadores mas antiguos no tienen incorporado este tipo de comportamient cuando utiliza la palabra clave "transparent " del inglés transparente ( para más información hacer clic en el link))
- -Especificación
- -| Especificación | -Estado | -Comentario | -
|---|---|---|
| {{SpecName('CSS3 Images', '#gradients', '<gradient>')}} | -{{Spec2('CSS3 Images')}} | -- |
Compatibilidad del navegador
- -Cada tipo de gradiente tiene una matriz de compatibilidad diferente. Por favor, consulte cada artículo individualmente.
- -Ver también
- --
-
La propiedad de css grid-auto-columns especifíca el tamaño de una columna de cuadrícula creada implícitamente {{glossary("grid tracks", "track")}}.
{{EmbedInteractiveExample("pages/css/grid-auto-columns.html")}}
-
-La version original interactiva de este artículo se guarda en un repositorio GitHub . If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
- -Si un item grid se posiciona dentro de una columna que no tenga un tamaño explícito para {{cssxref("grid-template-columns")}}, implícito{{glossary("grid", "grid")}}las pistan se crean para sostenerlo. Esto puede suceder posicionándose explícitamente en una columna que está fuera de rango, o mediante el algoritmo de auto colocación creando columnas adicionales.
- -Sintaxis
- -/* Keyword values */ -grid-auto-columns: min-content; -grid-auto-columns: max-content; -grid-auto-columns: auto; - -/* <length> values */ -grid-auto-columns: 100px; -grid-auto-columns: 20cm; -grid-auto-columns: 50vmax; - -/* <percentage> values */ -grid-auto-columns: 10%; -grid-auto-columns: 33.3%; - -/* <flex> values */ -grid-auto-columns: 0.5fr; -grid-auto-columns: 3fr; - -/* minmax() values */ -grid-auto-columns: minmax(100px, auto); -grid-auto-columns: minmax(max-content, 2fr); -grid-auto-columns: minmax(20%, 80vmax); - -/* fit-content() values */ -grid-auto-columns: fit-content(400px); -grid-auto-columns: fit-content(5cm); -grid-auto-columns: fit-content(20%); - -/* multiple track-size values */ -grid-auto-columns: min-content max-content auto; -grid-auto-columns: 100px 150px 390px; -grid-auto-columns: 10% 33.3%; -grid-auto-columns: 0.5fr 3fr 1fr; -grid-auto-columns: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax); -grid-auto-columns: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px); - -/* Global values */ -grid-auto-columns: inherit; -grid-auto-columns: initial; -grid-auto-columns: unset; -- -
Values
- --
-
Sintaxis Formal
- -{{csssyntax}} - -Ejemplo
- -Contenido HTML
- -<div id="grid"> - <div id="item1"></div> - <div id="item2"></div> - <div id="item3"></div> -</div>- -
Contenido CSS
- -#grid {
- height: 100px;
- display: grid;
- grid-template-areas: "a a";
- grid-gap: 10px;
- grid-auto-columns: 200px;
-}
-
-#grid > div {
- background-color: lime;
-}
-
-
-Resultado:
- -{{EmbedLiveSample("Example", "410px", "100px")}}
- -Especificaciones
- -| Especificación | -Estatus | -Comentario | -
|---|---|---|
| {{SpecName("CSS3 Grid", "#propdef-grid-auto-columns", "grid-auto-columns")}} | -{{Spec2("CSS3 Grid")}} | -Initial definition | -
{{cssinfo}}
- -Compatibilidad con Navegadores
- - - -{{Compat("css.properties.grid-auto-columns")}} - -Vea también
- --
-
-
-
+
+
+
+
+```
+
+### Contenido CSS
+
+```css
+#grid {
+ height: 100px;
+ display: grid;
+ grid-template-areas: "a a";
+ grid-gap: 10px;
+ grid-auto-columns: 200px;
+}
+
+#grid > div {
+ background-color: lime;
+}
+```
+
+### Resultado:
+
+{{EmbedLiveSample("Example", "410px", "100px")}}
+
+## Especificaciones
+
+| Especificación | Estatus | Comentario |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------ |
+| {{SpecName("CSS3 Grid", "#propdef-grid-auto-columns", "grid-auto-columns")}} | {{Spec2("CSS3 Grid")}} | Initial definition |
+
+{{cssinfo}}
+
+## Compatibilidad con Navegadores
+
+{{Compat("css.properties.grid-auto-columns")}}
+
+## Vea también
+
+- Propiedades CSS relacionadas: {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-flow")}}, {{cssxref("grid")}}
+- Guía de Layout tipo Grid (en inglés): _[Auto-placement in grid layout - sizing rows in the implicit grid](/es/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout#Sizing_rows_in_the_implicit_grid)_
+- Video tutorial (inglés): _[Introducing Grid auto-placement and order](http://gridbyexample.com/video/series-auto-placement-order/)_
+
+-
+
La propiedad grid-auto-rows de CSS especifíca el tamaño de una nueva fila creada de forma implícita.
/* Keyword values */ +```css +/* Keyword values */ grid-auto-rows: min-content; grid-auto-rows: max-content; grid-auto-rows: auto; -/* <length> values */ +/*+``` -values */ grid-auto-rows: 100px; grid-auto-rows: 20cm; grid-auto-rows: 50vmax; -/* <percentage> values */ +/* values */ grid-auto-rows: 10%; grid-auto-rows: 33.3%; -/* <flex> values */ +/* values */ grid-auto-rows: 0.5fr; grid-auto-rows: 3fr; @@ -44,62 +45,58 @@ grid-auto-rows: inherit; grid-auto-rows: initial; grid-auto-rows: unset; -
Si el elemento de una grilla es ubicado en una fila que no tiene un tamaño explicitado en {{cssxref("grid-template-rows")}}, se crean filas implícitas en la {{glossary("grid", "grilla")}} para ubicarlas. Esto puede suceder al ubicar explícitamente un elemento en una fila que está fuera de rango o por el posicionamiento automático que utiliza el algoritmo para crear líneas adicionales.
+Si el elemento de una grilla es ubicado en una fila que no tiene un tamaño explicitado en {{cssxref("grid-template-rows")}}, se crean filas implícitas en la {{glossary("grid", "grilla")}} para ubicarlas. Esto puede suceder al ubicar explícitamente un elemento en una fila que está fuera de rango o por el posicionamiento automático que utiliza el algoritmo para crear líneas adicionales. -{{cssinfo}}
+{{cssinfo}} -Syntax
+## Syntax -Values
+### Values --
-
representa el largo minimo del contenido de cada uno de los items de la pista en la cuadricula(grid)
+ - : Es una dimensión no negativa con la unidad `fr` especificando el factor flex de la pista (track). Cada pista con valor `-
-
-
-
Formal syntax
+ - : 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")}}. + +### Formal syntax {{csssyntax}} -Example
+## Example -HTML Content
+### HTML Content -<div id="grid"> - <div id="item1"></div> - <div id="item2"></div> - <div id="item3"></div> -</div>+```html +
+
+
+
+
+```
-CSS Content
+### CSS Content -#grid {
+```css
+#grid {
width: 200px;
display: grid;
grid-template-areas: "a a";
@@ -107,45 +104,28 @@ CSS Content
grid-auto-rows: 100px;
}
-#grid > div {
+#grid > div {
background-color: lime;
}
-
-
-{{EmbedLiveSample("Example", "210px", "210px")}}
- -Specifications
+``` -| Specification | -Status | -Comment | -
|---|---|---|
| {{SpecName("CSS3 Grid", "#propdef-grid-auto-rows", "grid-auto-rows")}} | -{{Spec2("CSS3 Grid")}} | -Initial definition | -
Browser compatibility
+## Specifications +| Specification | Status | Comment | +| -------------------------------------------------------------------------------------------- | ---------------------------- | ------------------ | +| {{SpecName("CSS3 Grid", "#propdef-grid-auto-rows", "grid-auto-rows")}} | {{Spec2("CSS3 Grid")}} | Initial definition | +## Browser compatibility -{{Compat("css.properties.grid-auto-rows")}}
+{{Compat("css.properties.grid-auto-rows")}} -Ver también
+## Ver también --
-
-
diff --git a/files/es/web/css/grid-template-areas/index.html b/files/es/web/css/grid-template-areas/index.md
similarity index 62%
rename from files/es/web/css/grid-template-areas/index.html
rename to files/es/web/css/grid-template-areas/index.md
index e130a69af3b552..d4a726ea5ad6f3 100644
--- a/files/es/web/css/grid-template-areas/index.html
+++ b/files/es/web/css/grid-template-areas/index.md
@@ -3,12 +3,13 @@
slug: Web/CSS/grid-template-areas
translation_of: Web/CSS/grid-template-areas
---
-
La propiedad CSS grid-template-areas especifica nombres para cada una de las {{glossary("grid areas")}}.
/* Keyword value */ +```css +/* Keyword value */ grid-template-areas: none; -/* <string> values */ +/*+``` -values */ grid-template-areas: "a b"; grid-template-areas: "a b b" "a c d"; @@ -17,41 +18,42 @@ grid-template-areas: inherit; grid-template-areas: initial; grid-template-areas: unset; -
Estas áreas no están asociadas a ningún elemento particular de la cuadrícula, pero pueden referenciarse desde otras propiedades de posicionamiento en la cuadrícula: {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, y sus formas abreviadas {{cssxref("grid-row")}}, {{cssxref("grid-column")}}, and {{cssxref("grid-area")}}.
+Estas áreas no están asociadas a ningún elemento particular de la cuadrícula, pero pueden referenciarse desde otras propiedades de posicionamiento en la cuadrícula: {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, y sus formas abreviadas {{cssxref("grid-row")}}, {{cssxref("grid-column")}}, and {{cssxref("grid-area")}}. -{{cssinfo}}
+{{cssinfo}} -Sintaxis
+## Sintaxis -Valores
+### Valores --
-
Formal syntax
+### Formal syntax {{csssyntax}} -Example
+## Example -HTML
+### HTML -<section id="page"> - <header>Header</header> - <nav>Navigation</nav> - <main>Main area</main> - <footer>Footer</footer> -</section>+```html +
CSS
+### CSS -#page {
+```css
+#page {
display: grid;
width: 100%;
height: 250px;
@@ -62,61 +64,46 @@ CSS
grid-template-columns: 150px 1fr;
}
-#page > header {
+#page > header {
grid-area: head;
background-color: #8ca0ff;
}
-#page > nav {
+#page > nav {
grid-area: nav;
background-color: #ffa08c;
}
-#page > main {
+#page > main {
grid-area: main;
background-color: #ffff64;
}
-#page > footer {
+#page > footer {
grid-area: foot;
background-color: #8cffa0;
}
-
+```
-Result
+### Result -{{EmbedLiveSample("Example", "100%", "250px")}}
+_{{EmbedLiveSample("Example", "100%", "250px")}}_ -Specifications
+## Specifications -| Specification | -Status | -Comment | -
|---|---|---|
| {{SpecName("CSS3 Grid", "#propdef-grid-template-areas", "grid-template-areas")}} | -{{Spec2("CSS3 Grid")}} | -Initial definition | -
Browser compatibility
+## Browser compatibility {{Compat("css.properties.grid-template-areas")}} -See also
+## See also --
-
-
diff --git a/files/es/web/css/grid-template-columns/index.html b/files/es/web/css/grid-template-columns/index.html
deleted file mode 100644
index 248013446eac46..00000000000000
--- a/files/es/web/css/grid-template-columns/index.html
+++ /dev/null
@@ -1,188 +0,0 @@
----
-title: grid-template-columns
-slug: Web/CSS/grid-template-columns
-translation_of: Web/CSS/grid-template-columns
----
-
La propiedad CSS grid-template-columns define el nombre de las líneas y las funciones de tamaño de línea de {{glossary("grid column", "grid columns")}}.
/* Keyword value */ -grid-template-columns: none; - -/* <track-list> values */ -grid-template-columns: 100px 1fr; -grid-template-columns: [linename] 100px; -grid-template-columns: [linename1] 100px [linename2 linename3]; -grid-template-columns: minmax(100px, 1fr); -grid-template-columns: fit-content(40%); -grid-template-columns: repeat(3, 200px); - -/* <auto-track-list> values */ -grid-template-columns: 200px repeat(auto-fill, 100px) 300px; -grid-template-columns: minmax(100px, max-content) - repeat(auto-fill, 200px) 20%; -grid-template-columns: [linename1] 100px [linename2] - repeat(auto-fit, [linename3 linename4] 300px) - 100px; -grid-template-columns: [linename1 linename2] 100px - repeat(auto-fit, [linename1] 300px) [linename3]; - -/* Global values */ -grid-template-columns: inherit; -grid-template-columns: initial; -grid-template-columns: unset; -- -
{{cssinfo}}
- -Sintaxis
- -Valores
- --
-
Sintaxis formal
- -{{csssyntax}} - -Ejemplos
- -CSS
- -#grid {
- display: grid;
- width: 100%;
- grid-template-columns: 50px 1fr;
-}
-
-#areaA {
- background-color: lime;
-}
-
-#areaB {
- background-color: yellow;
-}
-
-HTML
- -<div id="grid"> - <div id="areaA">A</div> - <div id="areaB">B</div> -</div>- -
Resultado
- -{{EmbedLiveSample("Examples", "100%", "20px")}}
- -Especificaciones
- -| Especificación | -Estado | -Comentario | -
|---|---|---|
| {{SpecName("CSS3 Grid", "#propdef-grid-template-columns", "grid-template-columns")}} | -{{Spec2("CSS3 Grid")}} | -Condición inicial | -
Compatibilidad del navegador
- - - -{{Compat("css.properties.grid-template-columns")}}
- -Ver también
- --
-
-
-
+
+```
+
+### Resultado
+
+{{EmbedLiveSample("Examples", "100%", "20px")}}
+
+## Especificaciones
+
+| Especificación | Estado | Comentario |
+| ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------- |
+| {{SpecName("CSS3 Grid", "#propdef-grid-template-columns", "grid-template-columns")}} | {{Spec2("CSS3 Grid")}} | Condición inicial |
+
+## Compatibilidad del navegador
+
+{{Compat("css.properties.grid-template-columns")}}
+
+## Ver también
+
+- Propiedades CSS relacionadas: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-template")}}
+- Guía de grid layout: _[Basic concepts of grid layout - Grid Tracks](/es/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Grid_Tracks)_
+- Video tutorial: _[Defining a Grid](http://gridbyexample.com/video/series-define-a-grid/)_
+
+A
+ B
+-
+
La propiedad CSS grid-template-rows define el nombre de las líneas y las funciones de tamaño de línea de {{glossary("grid rows", "grid rows")}}.
{{EmbedInteractiveExample("pages/css/grid-template-rows.html")}}
-
-Sintaxis
- -/* Keyword value */ -grid-template-rows: none; - -/* <track-list> values */ -grid-template-rows: 100px 1fr; -grid-template-rows: [linename] 100px; -grid-template-rows: [linename1] 100px [linename2 linename3]; -grid-template-rows: minmax(100px, 1fr); -grid-template-rows: fit-content(40%); -grid-template-rows: repeat(3, 200px); -grid-template-rows: subgrid; - -/* <auto-track-list> values */ -grid-template-rows: 200px repeat(auto-fill, 100px) 300px; -grid-template-rows: minmax(100px, max-content) - repeat(auto-fill, 200px) 20%; -grid-template-rows: [linename1] 100px [linename2] - repeat(auto-fit, [linename3 linename4] 300px) - 100px; -grid-template-rows: [linename1 linename2] 100px - repeat(auto-fit, [linename1] 300px) [linename3]; - -/* Global values */ -grid-template-rows: inherit; -grid-template-rows: initial; -grid-template-rows: unset; -- -
Esta propiedad puede especificarse como:
- --
-
Valores
- --
-
-
-
-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
- -{{csssyntax}} - -Ejemplos
- -CSS
- -#grid {
- display: grid;
- height: 100px;
- grid-template-rows: 30px 1fr;
-}
-
-#areaA {
- background-color: lime;
-}
-
-#areaB {
- background-color: yellow;
-}
-
-HTML
- -<div id="grid"> - <div id="areaA">A</div> - <div id="areaB">B</div> -</div>- -
Result
- -
-
-
-{{EmbedLiveSample("Examples", "40px", "100px")}}
-Especificaciones
- -| Especificación | -Estado | -Comentario | -
|---|---|---|
| {{SpecName("CSS3 Grid", "#propdef-grid-template-rows", "grid-template-rows")}} | -{{Spec2("CSS3 Grid")}} | -Definición inicial | -
| {{SpecName("CSS Grid 2", "#subgrids", "subgrid")}} | -{{Spec2("CSS Grid 2")}} | -Incorpora subgrid | -
Compatibilidad de los navegadores
- - - -{{Compat("css.properties.grid-template-rows")}}
- -Ver también
- --
-
-
-
+
+```
+
+### Result
+
+{{EmbedLiveSample("Examples", "40px", "100px")}}
+
+## Especificaciones
+
+| Especificación | Estado | Comentario |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------ |
+| {{SpecName("CSS3 Grid", "#propdef-grid-template-rows", "grid-template-rows")}} | {{Spec2("CSS3 Grid")}} | Definición inicial |
+| {{SpecName("CSS Grid 2", "#subgrids", "subgrid")}} | {{Spec2("CSS Grid 2")}} | Incorpora subgrid |
+
+## Compatibilidad de los navegadores
+
+{{Compat("css.properties.grid-template-rows")}}
+
+## Ver también
+
+- Propiedades CSS relacionadas: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-template")}}
+- Guía de grid layout: _[Basic concepts of grid layout - Grid Tracks](/es/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Grid_Tracks)_
+- Video tutorial: _[Defining a Grid](http://gridbyexample.com/video/series-define-a-grid/)_
+
+A
+ B
+-
+
La propiedad CSS grid es un shorthand que permite definir todas las propiedades grid explícitas ({{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, y {{cssxref("grid-template-areas")}}), implícitas ({{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}}, y {{cssxref("grid-auto-flow")}}), y relativas a gutter ({{cssxref("grid-column-gap")}} y {{cssxref("grid-row-gap")}}) en una sola declaración.
/* <'grid-template'> values */
+La propiedad CSS **`grid`** es un [shorthand](/es/docs/Web/CSS/Shorthand_properties) que permite definir todas las propiedades _grid_ explícitas ({{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, y {{cssxref("grid-template-areas")}}), implícitas ({{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}}, y {{cssxref("grid-auto-flow")}}), y relativas a _gutter_ ({{cssxref("grid-column-gap")}} y {{cssxref("grid-row-gap")}}) en una sola declaración.
+
+```css
+/* <'grid-template'> values */
grid: none;
grid: "a" 100px "b" 1fr;
grid: [linename1] "a" 100px [linename2];
@@ -14,15 +16,15 @@
grid: 100px / 200px;
grid: minmax(400px, min-content) / repeat(auto-fill, 50px);
-/* <'grid-template-rows'> /
- [ auto-flow && dense? ] <'grid-auto-columns'>? values */
+/* <'grid-template-rows'> /
+ [ auto-flow && dense? ] <'grid-auto-columns'>? values */
grid: 200px / auto-flow;
grid: 30% / auto-flow dense;
grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;
grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;
-/* [ auto-flow && dense? ] <'grid-auto-rows'>? /
- <'grid-template-columns'> values */
+/* [ auto-flow && dense? ] <'grid-auto-rows'>? /
+ <'grid-template-columns'> values */
grid: auto-flow / 200px;
grid: auto-flow dense / 30%;
grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
@@ -32,95 +34,80 @@
grid: inherit;
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.
-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.
{{cssinfo}}
+{{cssinfo}} -Sintaxis
+## Sintaxis -Valores
+### Valores --
-
Sintaxis formal
+### Sintaxis formal {{csssyntax}} -Ejemplo
+## Ejemplo -HTML
+### HTML -<div id="container"> - <div></div> - <div></div> - <div></div> - <div></div> - <div></div> - <div></div> - <div></div> - <div></div> -</div>+```html +
+
+
+
+
+
+
+
+
+
+```
-CSS
+### CSS -#container {
+```css
+#container {
display: grid;
grid: repeat(2, 60px) / auto-flow 80px;
}
-#container > div {
+#container > div {
background-color: #8ca0ff;
width: 50px;
height: 50px;
-}
+}
+```
-Resultado
+### Resultado -{{EmbedLiveSample("Example", "100%", 150)}}
+{{EmbedLiveSample("Example", "100%", 150)}} -Especificaciones
+## Especificaciones -| Especificación | -Estado | -Comentario | -
|---|---|---|
| {{SpecName("CSS3 Grid", "#propdef-grid", "grid")}} | -{{Spec2("CSS3 Grid")}} | -Definición inicial | -
Compatibilidad en navegadores
+## Compatibilidad en navegadores {{Compat("css.properties.grid")}} -Ver también
+## Ver también --
-
-
diff --git a/files/es/web/css/hyphens/index.html b/files/es/web/css/hyphens/index.html
deleted file mode 100644
index ae3ff921da0b6d..00000000000000
--- a/files/es/web/css/hyphens/index.html
+++ /dev/null
@@ -1,148 +0,0 @@
----
-title: hyphens
-slug: Web/CSS/hyphens
-translation_of: Web/CSS/hyphens
----
-
{{CSSRef}}
-
-La propiedad CSS
-
-
-
-hyphens especifica cómo deben dividirse las palabras cuando el texto se ajusta a través de múltiples líneas. Puede impedir la separación de sílabas por completo, usar guiones manualmente en puntos específicos del texto o dejar que el navegador inserte los guiones automáticamente donde corresponda.{{EmbedInteractiveExample("pages/css/hyphens.html")}}
-
-
-
-Las reglas de separación silábica son específicas del idioma. En HTML, el idioma es determinado por el atributo 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.
-Sintaxis
- -/* Keyword values */ -hyphens: none; -hyphens: manual; -hyphens: auto; - -/* Global values */ -hyphens: inherit; -hyphens: initial; -hyphens: unset; -- -
La propiedad hyphens se especifica con una única palabra de la lista a continuación.
Valores
- --
-
-
-
-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.
Sintaxis formal
- -{{csssyntax}} - -Sugiriendo oportunidades de separación de línea
- -Hay dos caracteres Unicode que pueden ser usados manualmente para especificar un potencial punto de separación de línea dentro del texto:
- --
-
Ejemplo
- -Este ejemplo usa tres clases, una por cada posible configuración de la propiedad hyphens.
HTML
- -<ul> - <li><code>none</code>: sin separación; se desbordará si es preciso - <p lang="es" class="none">Una extrema­damente larga palabra</p> - </li> - <li><code>manual</code>: separación sólo en &hyphen; o &shy; (si fuera necesario) - <p lang="es" class="manual">Una extrema­damente larga palabra</p> - </li> - <li><code>auto</code>: separará donde decida el algoritmo (si fuera necesario) - <p lang="enes class="auto">Una extrema­damente larga palabra</p> - </li> -</ul> -- -
CSS
- -p {
- width: 55px;
- border: 1px solid black;
- }
-p.none {
- -webkit-hyphens: none;
- -ms-hyphens: none;
- hyphens: none;
-}
-p.manual {
- -webkit-hyphens: manual;
- -ms-hyphens: manual;
- hyphens: manual;
-}
-p.auto {
- -webkit-hyphens: auto;
- -ms-hyphens: auto;
- hyphens: auto;
-}
-
-
-Resultado
- -{{EmbedLiveSample("Example", "100%", 490)}}
-Especificaciones
- -| Especificación | -Estado | -Comentario | -
|---|---|---|
| {{SpecName("CSS3 Text", "#hyphens-property", "hyphens")}} | -{{Spec2("CSS3 Text")}} | -Initial definition | -
{{cssinfo}}
- -Compatibilidad de navegadores
- -
-
-
-
-
-{{Compat("css.properties.hyphens")}}
-Ver también
- --
-
-
+
{{CSSRef}}
-
-En un documento HTML, los selectores de ID de CSS buscan un elemento basado en el contenido del atributo {{htmlattrxref("ID")}}. El atributo ID del elemento seleccionado debe coincidir exactamente con el valor dado en el selector.
/* El elemento con id="demo" */
-#demo {
- border: red 2px solid;
-}
-
-Sintaxis
- -#id_value { style properties }
-
-Nótese que esto es equivalente al siguiente {{Cssxref("Attribute_selectors", "attribute selector")}}:
- -[id=id_value] { style properties }
-
-Ejemplo
- -CSS
- -#identified {
- background-color: skyblue;
-}
-
-
-HTML
- -<div id="identified">¡Este div tiene un ID especial!</div> -<div>Este solo es un div regular.</div> -- -
Resultado
- -{{EmbedLiveSample("Ejemplo", '100%', 50)}}
- -Especificaciones
- -| Especificación | -Estado | -Comentarios | -
|---|---|---|
| {{SpecName("CSS4 Selectors", "#id-selectors", "ID selectors")}} | -{{Spec2("CSS4 Selectors")}} | -- |
| {{SpecName("CSS3 Selectors", "#id-selectors", "ID selectors")}} | -{{Spec2("CSS3 Selectors")}} | -- |
| {{SpecName("CSS2.1", "selector.html#id-selectors", "ID selectors")}} | -{{Spec2("CSS2.1")}} | -- |
| {{SpecName("CSS1", "#id-as-selector", "ID selectors")}} | -{{Spec2("CSS1")}} | -Definición Inicial. | -
Compatibilidad con navegadores
- - - -{{Compat("css.selectors.id")}}
diff --git a/files/es/web/css/id_selectors/index.md b/files/es/web/css/id_selectors/index.md new file mode 100644 index 00000000000000..fd2cdb4936138c --- /dev/null +++ b/files/es/web/css/id_selectors/index.md @@ -0,0 +1,66 @@ +--- +title: Selectores de ID +slug: Web/CSS/ID_selectors +tags: + - CSS + - Referencia + - Referencia CSS + - Selectores +translation_of: Web/CSS/ID_selectors +--- +{{CSSRef}} + +En un documento HTML, los **selectores de ID** de CSS buscan un elemento basado en el contenido del atributo {{htmlattrxref("ID")}}. El atributo `ID` del elemento seleccionado debe coincidir exactamente con el valor dado en el selector. + +```css +/* El elemento con id="demo" */ +#demo { + border: red 2px solid; +} +``` + +## Sintaxis + +``` +#id_value { style properties } +``` + +Nótese que esto es equivalente al siguiente {{Cssxref("Attribute_selectors", "attribute selector")}}: + +``` +[id=id_value] { style properties } +``` + +## Ejemplo + +### CSS + +```css +#identified { + background-color: skyblue; +} +``` + +### HTML + +```html +¡Este div tiene un ID especial!
+Este solo es un div regular.
+```
+
+### Resultado
+
+{{EmbedLiveSample("Ejemplo", '100%', 50)}}
+
+## Especificaciones
+
+| Especificación | Estado | Comentarios |
+| -------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------- |
+| {{SpecName("CSS4 Selectors", "#id-selectors", "ID selectors")}} | {{Spec2("CSS4 Selectors")}} | |
+| {{SpecName("CSS3 Selectors", "#id-selectors", "ID selectors")}} | {{Spec2("CSS3 Selectors")}} | |
+| {{SpecName("CSS2.1", "selector.html#id-selectors", "ID selectors")}} | {{Spec2("CSS2.1")}} | |
+| {{SpecName("CSS1", "#id-as-selector", "ID selectors")}} | {{Spec2("CSS1")}} | Definición Inicial. |
+
+## Compatibilidad con navegadores
+
+{{Compat("css.selectors.id")}}
diff --git a/files/es/web/css/image-rendering/index.html b/files/es/web/css/image-rendering/index.html
deleted file mode 100644
index f3797e87f4ff38..00000000000000
--- a/files/es/web/css/image-rendering/index.html
+++ /dev/null
@@ -1,108 +0,0 @@
----
-title: image-rendering
-slug: Web/CSS/image-rendering
-translation_of: Web/CSS/image-rendering
----
-{{CSSRef}}{{SeeCompatTable}}
-
-La propiedad CSS image-rendering provee una sugerencia al navegador acerca del algoritmo que debe usar para escalar imágenes.
/* Keyword values */ -image-rendering: auto; -image-rendering: crisp-edges; -image-rendering: pixelated; - -/* Global values */ -image-rendering: inherit; -image-rendering: initial; -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).
-
-
-Un Canvas puede proveer una solución de respaldo para crisp-edge/optimize-contrast a través de la manipulación manual de datos de la imagen.
-{{cssinfo}}
- -Sintaxis
- -Valores
- --
-
-
-
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.Formal syntax
- -{{csssyntax}} - -Ejemplos
- -/* aplica a imágenes GIF y PNG; eviar bordes borrosos */
-img[src$=".gif"], img[src$=".png"] {
- image-rendering: crisp-edges;
-}
-
-
-div {
- background: url(chessboard.gif) no-repeat 50% 50%;
- image-rendering: crisp-edges;
-}
-
-Ejemplos interactivos
- -image-rendering: auto;
- -78% 
100% 138% downsized 
upsized 
image-rendering: pixelated; (-ms-interpolation-mode: nearest-neighbor)
- -78% 100% 138% downsized upsized
image-rendering: crisp-edges; (-webkit-optimize-contrast)
- -78% 100% 138% downsized upsized
Especificaciones
- -| Especificación | -Estado | -Comentario | -
|---|---|---|
| {{SpecName('CSS3 Images', '#the-image-rendering', 'image-rendering')}} | -{{Spec2('CSS3 Images')}} | -Initial definition | -
-
-
-Nota: Aunque similar al atributo SVG {{svgattr("image-rendering")}}, los valores son bastante diferentes ahora.
-Compatibilidad con navegadores
- -- - - -
{{Compat("css.properties.image-rendering")}}
- -diff --git a/files/es/web/css/image-rendering/index.md b/files/es/web/css/image-rendering/index.md new file mode 100644 index 00000000000000..c2192a51c8530f --- /dev/null +++ b/files/es/web/css/image-rendering/index.md @@ -0,0 +1,88 @@ +--- +title: image-rendering +slug: Web/CSS/image-rendering +translation_of: Web/CSS/image-rendering +--- +{{CSSRef}}{{SeeCompatTable}} + +La propiedad [CSS](/es/docs/Web/CSS) **`image-rendering`** provee una sugerencia al navegador acerca del algoritmo que debe usar para escalar imágenes. + +```css +/* Keyword values */ +image-rendering: auto; +image-rendering: crisp-edges; +image-rendering: pixelated; + +/* Global values */ +image-rendering: inherit; +image-rendering: initial; +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. + +{{cssinfo}} + +## Sintaxis + +### Valores + +- **`auto`** + - : Valor predeterminado, la imagen debe escalarse con un algoritmo que maximice la apariencia de la imagen. En particular, son aceptables los algoritmos de escala que "suavizan" colores, como la interpolación bilinear. So propósito son imágenes de fotografías. Desde la versión 1.9 (Firefox 3.0), Gecko usa remuestreo _bilinear_ (alta calidad). + + + +- **`crisp-edges`** + - : La imagen se debe escalar con un algoritmo que preserve el contraste y los bordes de la imagen, y que no suavice los colores ni introduzca borrones en la imagen en el proceso. Los algoritmos adecuados incluyen algoritmos de escalamiento _nearest-neighbor_ y otros algoritmos de escalabilidad tales como algoritmos _2×SaI_ y _hqx-family_. Este valor está destinado a imágenes pixel-art, como en juegos de navegador. +- **`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`. + +### Formal syntax + +{{csssyntax}} + +## Ejemplos + +```css +/* aplica a imágenes GIF y PNG; eviar bordes borrosos */ +img[src$=".gif"], img[src$=".png"] { + image-rendering: crisp-edges; +} +``` + +```css +div { + background: url(chessboard.gif) no-repeat 50% 50%; + image-rendering: crisp-edges; +} +``` + +### Ejemplos interactivos + +#### image-rendering: auto; + +78%  100%  138%  downsized  upsized  + +#### image-rendering: pixelated; (-ms-interpolation-mode: nearest-neighbor) + +78%  100%  138%  downsized  upsized  + +#### image-rendering: crisp-edges; (-webkit-optimize-contrast) + +78%  100%  138%  downsized  upsized  + +## Especificaciones + +| Especificación | Estado | Comentario | +| -------------------------------------------------------------------------------------------- | -------------------------------- | ------------------ | +| {{SpecName('CSS3 Images', '#the-image-rendering', 'image-rendering')}} | {{Spec2('CSS3 Images')}} | Initial definition | + +> **Nota:** Aunque similar al atributo SVG {{svgattr("image-rendering")}}, los valores son bastante diferentes ahora. + +## Compatibilidad con navegadores + +{{Compat("css.properties.image-rendering")}} diff --git a/files/es/web/css/image/index.html b/files/es/web/css/image/index.html deleted file mode 100644 index 60e6b032c7d0cd..00000000000000 --- a/files/es/web/css/image/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title:
{{CSSRef}}
-
-Resumen
- -El tipo de dato CSS <image> representa una imagen 2D. Hay dos tipos de imágenes en CSS: imágenes planas estáticas, generalmente referenciadas usando una URL, e imágenes dinámicamente generadas, como degradados o representaciones de partes del árbol.
CSS puede manejar diferentes tipos de imágenes:
- --
-
CSS determina el tamaño concreto del objeto usando estas dimensiones intrínsecas, el tamaño específico en propiedades CSS como {{cssxref("width")}}, {{cssxref("height")}} o {{cssxref("background-size")}}, y el tamaño predeterminado del objeto definido por el tipo de propiedad con el que se usa la imagen:
- -| Tipo de objeto | -Tamaño de objeto predeterminado | -
|---|---|
| {{cssxref("background-image")}} | -El tamaño del área de posicionamiento de fondo de la imagen | -
| {{cssxref("list-style-image")}} | -El tamaño de un caracter de 1em |
-
| {{cssxref("border-image")}} | -El tamaño del área de imagen de borde de un elemento | -
| {{cssxref("cursor")}} | -Un tamaño definido por el navegador que coincida con el tamaño común de un cursor en el sistema en uso | -
| Contenido reemplazado - como cuando se combina la propiedad CSS {{cssxref("content")}} - con los pseudo-elementos CSS {{cssxref("::after")}} y {{cssxref("::before")}} |
- Un rectángulo de 300px × 150px |
-
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 para una lista detallada.
-
-Sintáxis
- -La representación de un tipo de dato CSS <image> puede ser una de las siguientes:
-
-
Ejemplos
- -Estos son valores válidos para imágenes:
- -url(test.jpg) /* La función url(), mientras test.jpg sea una imagen */ -linear-gradient(to bottom, blue, red) /* Un degradado (<gradient>) */ -element(#colonne3) /* Una párte de la página, usando la función element(), - mientras colonne3 sea un identificador CSS existente en la página. */ -- -
Estos son valores incorrectos para imágenes:
- -cervin.jpg /* Un archivo de imagen debe ser definido usando la función url(). */ -url(report.pdf) /* El archivo indicado en la función url() debe ser una imagen. */ -element(#fakeid) /* Si 'fakeid' no es un identificador CSS existente en la página. */ -- -
Especificaciones
- -| Especificación | -Estatus | -Comentarios | -
|---|---|---|
| {{SpecName('CSS3 Images', '#typedef-image', '<image>')}} | -{{Spec2('CSS3 Images')}} | -
- Antes de CSS3, no había un tipo de dato |
-
Compatibilidad de navegadores
- -{{Compat("css.types.image")}} - -Véase también
- --
-
-
{{ CSSRef() }}
-Resumen
-La propiedad ime-mode controla el estado del método de entrada del editor para campos de texto.
Sintaxis
-ime-mode: <mode> --
Valores
-Ejemplos
-<input type="text" name="name" value="initial value" style="ime-mode: disabled"> --
Este ejemplo inhabilita/desactiva el editor de entradas para este campo. Esto podría ser necesario para los campos que entran datos en una base de datos que no soporta el juego de caracteres extendido, por ejemplo.
-Notas
-A diferencia de Internet Explorer, la implementación de Firefox de ime-mode permite aplicar esta propiedad a los campos de edición de clave de usuario (passwords). Sin embargo, no es la mejor experiencia para el usuario y los campos de clave de usuario deberían desactivar el IME. Los usuarios pueden corregir el comportamiento inapropiado de los sitios que no sigan esta recomendación poniendo la siguiente regla CSS en su archivo de reglas CSS:
input[type=password] {
- ime-mode: auto !important;
-}
-
---Nota: En general, no es apropiado por un sitio público la manipulación el estado del modo de IME. Esta propiedad debería usarse para aplicaciones web o similares.-
La versión de Gecko 1.9 para Macintosh no es capaz de recuperar el estado previo del IME cuando el campo para el cual se ha desactivado pierde el foco, por tanto, los usuarios de Mac podrían enfadarse cuando se utiliza el valor disabled.
--Nota: Desactivar el IME para prevenir la entrada de caracteres extendidos en los formularios no impide que los usuarios puedan pegar caracteres extendidos en los campos del formulario.-
Especificaciones
- -Compatibilidad entre navegadores
-La propiedad ime-mode es soportada en Firefox 3 y posteriores, así como en Internet Explorer.
-
-Categorías
-Interwiki Languages zh tw:CSS:ime-mode
-{{ languages( { "en": "en/CSS/ime-mode", "fr": "fr/CSS/ime-mode", "ja": "ja/CSS/ime-mode", "zh-tw": "zh_tw/CSS/ime-mode" } ) }}
diff --git a/files/es/web/css/ime-mode/index.md b/files/es/web/css/ime-mode/index.md new file mode 100644 index 00000000000000..32ffcfc40868d5 --- /dev/null +++ b/files/es/web/css/ime-mode/index.md @@ -0,0 +1,77 @@ +--- +title: ime-mode +slug: Web/CSS/ime-mode +tags: + - CSS + - CSS:Referencias + - Referencia_CSS + - Todas_las_Categorías +translation_of: Web/CSS/ime-mode +--- +{{ CSSRef() }} + +### Resumen + +La propiedad `ime-mode` controla el estado del método de entrada del editor para campos de texto. + +- {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("auto", "automático") }} +- Se aplica a: campos de texto. +- {{ Cssxref("inheritance", "Valor heredado") }}: no +- Porcentajes: N/A +- Media: {{ Xref_cssvisual() }} +- {{ Cssxref("computed value", "Valor calculado") }}: + +### Sintaxis + +``` +ime-mode:Hojas de Estilo en Cascada (del inglés Cascading Style Sheets) o CSS es el lenguaje de estilos utilizado para describir la presentación de documentos HTML o XML (incluyendo varios languages basados en XML como SVG, MathML o {{Glossary("XHTML")}}). CSS describe como debe ser renderizado el elemento estructurado en la pantalla, en papel, en el habla o en otros medios.
- -CSS es uno de los lenguajes base de la Open Web y posee una especificación estandarizada por parte del W3C. Anteriormente , el desarrollo de varias partes de las especificaciones de CSS era realizado de manera sincrónica, lo que permiía el versionado de las recomendaciones. Probablemente habrás escuchado acerca de CSS1, CSS2.1, CSS3. Sin embargo, CSS4 nunca se ha lanzado como una versión oficial.
- -Desde CSS3, el alcance de las especificaciones se incrementó de forma significativa y el progreso de los diferentes modulos de CSS comenzó a mostrar varias diferencias, lo que hizo más efectivo desarrollar y publicar recomendaciones separadas por módulos. En vez de versionar las especificaciones de CSS, la W3C actualmente realiza una captura de las ultimas espcificaciones estables de CSS.
- --
-
-
-
-
-
-Tutoriales
- -Nuestra área de aprendizaje CSS presenta múltiples módulos que enseñan CSS desde cero — no se requieren conocimientos previos.
- --
-
-
-
-
-
-
-Referencia
- --
-
Cookbook
- -El libro de cocina de diseño CSS tiene como objetivo reunir recetas para patrones de diseño comunes, sobre cosas que puedes necesitar implementar en tus sitios. Además de proporcionar código que puedes usar como punto de partida en tus proyectos, estas recetas destacan las diferentes formas en que se pueden usar las especificaciones de diseño y las elecciones que puedes hacer como desarrollador.
- -Herramientas para el desarrollo de CSS
- --
-
Meta errores
- --
-
Ver también
- --
-
<< Volver
- - - -Resumen
- -inherit es un valor permitido en todas las propiedades CSS. Hace que el elemento al cual se aplica tome el valor calculado de la propiedad de su elemento padre.
- -Para propiedades heredadas
- -Para las propiedades heredadas, este valor refuerza el comportamiento del valor por defecto y es necesario sólo para anular otras reglas. Por ejemplo:
- - /* hacer las cabeceras de segundo nivel, verdes */
- h2 { color: green; }
-
- /* ...pero deja aquellas cabeceras dentro de de la barra lateral con el valor por defecto (el valor que tenga el elemento padre */
- #sidebar h2 { color: inherit; }
-
-
-Ten en cuenta que en este ejemplo, el elemento h2 dentro de sidebar, puede tener un color distinto. Por ejemplo, si alguno de los elementos es un hijo de un elemento div con la siguiente regla:
div#current { color: blue; }
-
-
-el elemento será azul.
- -Para propiedades no heredadas
- -Para las propiedades no heredadas, este valor especifica un comportamiento que tiene relativamente poco sentido al no reforzar el valor por defecto.
- -Notas
- -Siempre se hereda desde el elemento padre dentro del árbol del documento, aún cuando el elemento padre no es el bloque contenedor.
- -Especificaciones
- --
-
Compatibilidad de navegadores
- -Ver también
- - - - - -
-
-
-Categorías
- -Interwiki Languages
-{{ languages( { "fr": "fr/CSS/inherit", "en": "en/CSS/inherit" } ) }}
diff --git a/files/es/web/css/inherit/index.md b/files/es/web/css/inherit/index.md new file mode 100644 index 00000000000000..5b641c001fb4b4 --- /dev/null +++ b/files/es/web/css/inherit/index.md @@ -0,0 +1,56 @@ +--- +title: inherit +slug: Web/CSS/inherit +tags: + - CSS + - CSS:Referencias + - Todas_las_Categorías +translation_of: Web/CSS/inherit +--- +<< [Volver](es/Gu%c3%ada_de_referencia_de_CSS) + +### Resumen + +**inherit** es un valor permitido en todas las propiedades CSS. Hace que el elemento al cual se aplica tome el [valor calculado](es/CSS/Valor_calculado) de la propiedad de su elemento padre. + +#### Para propiedades heredadas + +Para las propiedades [heredadas](es/CSS/inheritance#Propiedades_heredadas), este valor refuerza el comportamiento del valor por defecto y es necesario sólo para anular otras reglas. Por ejemplo: + +``` + /* hacer las cabeceras de segundo nivel, verdes */ + h2 { color: green; } + + /* ...pero deja aquellas cabeceras dentro de de la barra lateral con el valor por defecto (el valor que tenga el elemento padre */ + #sidebar h2 { color: inherit; } +``` + +Ten en cuenta que en este ejemplo, el elemento `h2` dentro de sidebar, puede tener un color distinto. Por ejemplo, si alguno de los elementos es un hijo de un elemento div con la siguiente regla: + +``` + div#current { color: blue; } +``` + +el elemento será azul. + +#### Para propiedades no heredadas + +Para las propiedades [no heredadas](es/CSS/inheritance#Propiedades_no_heredadas), este valor especifica un comportamiento que tiene relativamente poco sentido al no reforzar el valor por defecto. + +### Notas + +Siempre se hereda desde el elemento padre dentro del árbol del documento, aún cuando el elemento padre no es el bloque contenedor. + +### Especificaciones + +- [CSS 2.1](http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit) + +### Compatibilidad de navegadores + +### Ver también + +[initial](/es/docs/Web/CSS/initial) + +Categorías + +Interwiki Languages diff --git a/files/es/web/css/inheritance/index.html b/files/es/web/css/inheritance/index.html deleted file mode 100644 index 3d334b673aa8e1..00000000000000 --- a/files/es/web/css/inheritance/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Herencia -slug: Web/CSS/inheritance -tags: - - CSS - - 'CSS:Referencias' - - Referencia_CSS - - Todas_las_Categorías -translation_of: Web/CSS/inheritance ---- -{{ CSSRef() }}
- -Resumen
- -El resumen de cada definición de propiedad CSS indica si esa propiedad es heredada por defecto ("Inherit: Yes") o no ("Inherit: no"). Esto controla lo que sucede al no especificar un valor concreto para una propiedad de un elemento.
- -Propiedades heredadas
- -Cuando no se especifica un valor para un elemento de una propiedad inherited property, el elemento toma el {{ Cssxref("computed value", "valor calculado") }} de la propiedad de su elemento padre. Sólo los elementos raíz de un documento obtienen el valor {{ Cssxref("initial", "inicial") }} dado en el resumen de la propiedad.
- -Un ejemplo característico de una propiedad heredada es la propiedad {{ Cssxref("color") }}. Definida con las siguientes reglas de estilo:
- - p { color: green }
-
-
-y el código HTML siguiente:
- -<p>Este párrafo tiene <em>texto enfatizado</em> en su interior.</p> -- -
las palabras "texto enfatizado" aparecerá en verde, ya que el elemento em ha heredado el valor de la propiedad {{ Cssxref("color") }} a partir del elemento p.No recoge el valor inicial de la propiedad (que es el color que es usado por el elemento raíz cuando la página especifica que no hay color).
Propiedades no heredadas
- -Si no se especifica un valor para una propiedad no heredada (non-inherited property) (a veces llamada reset property en el código Mozilla), el elemento toma el valor {{ Cssxref("initial", "inicial") }} de dicha propiedad (como se especifica en el resumen de ésa propiedad).
- -Un ejemplo característico de una propiedad no heredada es la del {{ Cssxref("border", "borde") }}. Definida con las siguientes reglas de estilo:
- - p { border: medium solid }
-
-
-y la etiqueta HTML:
- -<p>Este párrafo tiene <em>texto enfatizado</em> en su interior.</p> -- -
las palabras "texto enfatizado" no tendrán borde (ya que el valor inicial del {{ Cssxref("border-style", "estilo de borde") }} es none).
Notas
- -Las palabras de código {{ Cssxref("inherit") }} permiten al autor definir, explícitamente, la posibilidad de herencia. Funciona para las propiedades heredadas y las no heredadas.
- -Ver también
- -{{ Cssxref("inherit") }}, {{ Cssxref("Valor inicial") }}
- -- -
-
-
-Categorías
- -
- Interwiki Languages
{{ languages( { "en": "en/CSS/inheritance", "fr": "fr/CSS/H\u00e9ritage", "ja": "ja/CSS/inheritance", "pl": "pl/CSS/Dziedziczenie" } ) }}
diff --git a/files/es/web/css/inheritance/index.md b/files/es/web/css/inheritance/index.md new file mode 100644 index 00000000000000..17c742489e3619 --- /dev/null +++ b/files/es/web/css/inheritance/index.md @@ -0,0 +1,63 @@ +--- +title: Herencia +slug: Web/CSS/inheritance +tags: + - CSS + - CSS:Referencias + - Referencia_CSS + - Todas_las_Categorías +translation_of: Web/CSS/inheritance +--- +{{ CSSRef() }} + +### Resumen + +El resumen de cada [definición de propiedad CSS](es/Gu%c3%ada_de_referencia_de_CSS) indica si esa propiedad es heredada por defecto ("Inherit: Yes") o no ("Inherit: no"). Esto controla lo que sucede al no especificar un valor concreto para una propiedad de un elemento. + +### Propiedades heredadas + +Cuando no se especifica un valor para un elemento de una propiedad **inherited property**, el elemento toma el {{ Cssxref("computed value", "valor calculado") }} de la propiedad de su elemento padre. Sólo los elementos raíz de un documento obtienen el valor {{ Cssxref("initial", "inicial") }} dado en el resumen de la propiedad. + +Un ejemplo característico de una propiedad heredada es la propiedad {{ Cssxref("color") }}. Definida con las siguientes reglas de estilo: + +``` + p { color: green } +``` + +y el código HTML siguiente: + +``` +Este párrafo tiene texto enfatizado en su interior.
+``` + +las palabras "texto enfatizado" aparecerá en verde, ya que el elemento `em` ha heredado el valor de la propiedad {{ Cssxref("color") }} a partir del elemento `p`._No_ recoge el valor inicial de la propiedad (que es el color que es usado por el elemento raíz cuando la página especifica que no hay color). + +### Propiedades no heredadas + +Si no se especifica un valor para una propiedad no heredada (_non-inherited property_) (a veces llamada **reset property** en el código Mozilla), el elemento toma el valor {{ Cssxref("initial", "inicial") }} de dicha propiedad (como se especifica en el resumen de ésa propiedad). + +Un ejemplo característico de una propiedad no heredada es la del {{ Cssxref("border", "borde") }}. Definida con las siguientes reglas de estilo: + +``` + p { border: medium solid } +``` + +y la etiqueta HTML: + +``` +Este párrafo tiene texto enfatizado en su interior.
+``` + +las palabras "texto enfatizado" no tendrán borde (ya que el valor inicial del {{ Cssxref("border-style", "estilo de borde") }} es `none`). + +### Notas + +Las palabras de código {{ Cssxref("inherit") }} permiten al autor definir, explícitamente, la posibilidad de herencia. Funciona para las propiedades heredadas y las no heredadas. + +### Ver también + +{{ Cssxref("inherit") }}, {{ Cssxref("Valor inicial") }} + +Categorías + +Interwiki Languages diff --git a/files/es/web/css/initial/index.html b/files/es/web/css/initial/index.html deleted file mode 100644 index aff090e21ff9d1..00000000000000 --- a/files/es/web/css/initial/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: initial -slug: Web/CSS/initial -tags: - - CSS - - 'CSS:Referencias' - - Todas_las_Categorías -translation_of: Web/CSS/initial ---- -
-
Resumen
-initial es un valor permitido en todas las propiedades CSS. Fuerza la utilización del valor inicial de la propiedad para el elemento al cual se aplica. -
-Para propiedades no heredadas
-Para las propiedades no heredadas, este valor refuerza el comportamiento por defecto y es necesario sólo para sobrescribir otra regla. Por ejemplo: -
- /* definimos un borde verde de un encabezamiento de segundo nivel */
- h2 { border: medium solid green }
-
- /* pero las cabeceras de la barra lateral utilizan el valor inicial de la propiedad color */
- #sidebar h2 { border-color: initial; }
-
- /* ...en CSS1 se obtiene usando 'border: medium solid' */
-
-Para propiedades heredadas
-Para las propiedades heredadas, se usa menos ya que no refuerza el comportamiento por defecto. -
-Especificaciones
- -Compatibilidad
-Sólo algunas especificaciones son soportadas en Firefox (las cuales se incrementan en cada versión superior) Únicamente soportado en Firefox algunas propiedades (se incrementa el número en cada versión). -
-Ver también
-inherit -
-
-
-{{ languages( { "fr": "fr/CSS/initial", "en": "en/CSS/initial" } ) }}
diff --git a/files/es/web/css/initial/index.md b/files/es/web/css/initial/index.md
new file mode 100644
index 00000000000000..f54ec50ac878fa
--- /dev/null
+++ b/files/es/web/css/initial/index.md
@@ -0,0 +1,49 @@
+---
+title: initial
+slug: Web/CSS/initial
+tags:
+ - CSS
+ - CSS:Referencias
+ - Todas_las_Categorías
+translation_of: Web/CSS/initial
+---
+[Guía de referencia de CSS](es/Gu%c3%ada_de_referencia_de_CSS)
+
+### Resumen
+
+**initial** es un valor permitido en todas las propiedades CSS. Fuerza la utilización del [valor inicial](es/CSS/Valor_inicial) de la propiedad para el elemento al cual se aplica.
+
+#### Para propiedades no heredadas
+
+Para las propiedades [no heredadas](es/CSS/inheritance#propiedades_heredadas_y_no_heredadas), este valor refuerza el comportamiento por defecto y es necesario sólo para sobrescribir otra regla. Por ejemplo:
+
+```
+ /* definimos un borde verde de un encabezamiento de segundo nivel */
+ h2 { border: medium solid green }
+
+ /* pero las cabeceras de la barra lateral utilizan el valor inicial de la propiedad color */
+ #sidebar h2 { border-color: initial; }
+
+ /* ...en CSS1 se obtiene usando 'border: medium solid' */
+```
+
+#### Para propiedades heredadas
+
+Para las propiedades [heredadas](es/CSS/inheritance#propiedades_heredadas_y_no_heredadas), se usa menos ya que no refuerza el comportamiento por defecto.
+
+### Especificaciones
+
+- [css3-values](http://www.w3.org/TR/css3-values/#keywords)
+- [css3-cascade](http://www.w3.org/TR/css3-cascade/#initial0)
+
+### Compatibilidad
+
+Sólo algunas especificaciones son soportadas en Firefox (las cuales se incrementan en cada versión superior) Únicamente soportado en Firefox algunas propiedades (se incrementa el número en cada versión).
+
+### Ver también
+
+[inherit](es/CSS/inherit)
+
+Categorías
+
+Interwiki Languages Links
diff --git a/files/es/web/css/initial_value/index.html b/files/es/web/css/initial_value/index.html
deleted file mode 100644
index 275252c35bb78a..00000000000000
--- a/files/es/web/css/initial_value/index.html
+++ /dev/null
@@ -1,27 +0,0 @@
----
-title: Valor inicial
-slug: Web/CSS/initial_value
-tags:
- - CSS
- - CSS:Referencias
- - Todas_las_Categorías
-translation_of: Web/CSS/initial_value
-original_slug: Web/CSS/Valor_inicial
----
-Categorías -
Interwiki Languages Links -
--
<< Volver -
-Resumen
-El Valor inicial dado en el resumen de cada definición de propiedad CSS tiene un significado distinto según se trate de propiedades heredadas o no heredadas. -
Para propiedades heredadas, se usa el valor inicial, para el elemento raíz solamente, cuando no se ha especificado ningún valor para el elemento.
Para propiedades no heredadas se usa el valor inicial para todos los elementos, cuando no se especificó nigún valor para el elemento.
En CSS3 se propuso el valor initial para permitir a los autores especificar explícitamente éste valor inicial.
-
Ver también
-Propiedades heredadas y no heredadas, initial
-
-
-
-{{ languages( { "en": "en/CSS/initial_value", "fr": "fr/CSS/Valeur_initiale", "ja": "ja/CSS/initial_value", "ko": "ko/CSS/initial_value", "pl": "pl/CSS/Warto\u015b\u0107_pocz\u0105tkowa" } ) }}
diff --git a/files/es/web/css/initial_value/index.md b/files/es/web/css/initial_value/index.md
new file mode 100644
index 00000000000000..5fb1bb4f6b2799
--- /dev/null
+++ b/files/es/web/css/initial_value/index.md
@@ -0,0 +1,29 @@
+---
+title: Valor inicial
+slug: Web/CSS/initial_value
+tags:
+ - CSS
+ - CSS:Referencias
+ - Todas_las_Categorías
+translation_of: Web/CSS/initial_value
+original_slug: Web/CSS/Valor_inicial
+---
+<< [Volver](es/Gu%c3%ada_de_referencia_de_CSS)
+
+### Resumen
+
+El **Valor inicial** dado en el resumen de cada definición de [propiedad CSS](es/Gu%c3%ada_de_referencia_de_CSS) tiene un significado distinto según se trate de [propiedades heredadas o no heredadas](es/CSS/inheritance#Propiedades_heredadas_y_no_heredadas).
+
+Para propiedades [heredadas](es/CSS/inheritance#Propiedades_heredadas_y_no_heredadas), se usa el valor inicial, para el elemento raíz **solamente**, cuando no se ha especificado ningún valor para el elemento.
+
+Para propiedades [no heredadas](es/CSS/inheritance#Propiedades_heredadas_y_no_heredadas) se usa el valor inicial para **todos** los elementos, cuando no se especificó nigún valor para el elemento.
+
+En CSS3 se propuso el valor [`initial`](es/CSS/initial) para permitir a los autores especificar explícitamente éste valor inicial.
+
+### Ver también
+
+[Propiedades heredadas y no heredadas](es/CSS/inheritance#Propiedades_heredadas_y_no_heredadas), [`initial`](es/CSS/initial)
+
+Categorías
+
+Interwiki Languages
diff --git a/files/es/web/css/inline-size/index.html b/files/es/web/css/inline-size/index.html
deleted file mode 100644
index 058799b3deafed..00000000000000
--- a/files/es/web/css/inline-size/index.html
+++ /dev/null
@@ -1,97 +0,0 @@
----
-title: inline-size
-slug: Web/CSS/inline-size
-translation_of: Web/CSS/inline-size
----
-Categorías -
Interwiki Languages -
-{{CSSRef}}{{SeeCompatTable}}
-
-La propiedad de CSS inline-size define el tamaño horizontal o vertical de un bloque de elementos, dependiendo del modo de escritura. Esto corresponde ya sea a la propiedad {{cssxref("width")}} o {{cssxref("height")}}, dependiendo del valor de {{cssxref("writing-mode")}}.
{{EmbedInteractiveExample("pages/css/inline-size.html")}}
-
-
-
-Sintaxis
- -/* <length> values */ -inline-size: 300px; -inline-size: 25em; - -/* <percentage> values */ -inline-size: 75%; - -/* Keyword values */ -inline-size: 25em border-box; -inline-size: 75% content-box; -inline-size: max-content; -inline-size: min-content; -inline-size: available; -inline-size: fit-content; -inline-size: auto; - -/* Global values */ -inline-size: inherit; -inline-size: initial; -inline-size: unset; -- -
Si el modo de escritura es verticalmente orientado, el valor de inline-size se relaciona con la altura del elemento; de lo contrario, se relaciona con el ancho del elemento. Una propiedad relacionada es {{cssxref("block-size")}}, que define la otra dimensión del elemento.
{{cssinfo}}
- -Valores
- -La propiedad inline-size toma los mismos valores de las propiedades {{cssxref("width")}} y {{cssxref("height")}}.
Sintaxis formal
- -{{csssyntax}} - -Ejemplo
- -Contenido HTML
- -<p class="exampleText">Example text</p> -- -
Contenido CSS
- -.exampleText {
- writing-mode: vertical-rl;
- background-color: yellow;
- inline-size: 110px;
-}
-
-{{EmbedLiveSample("Ejemplo")}}
- -Especificación
- -| Especificación | -Estado | -Comentario | -
|---|---|---|
| {{SpecName("CSS Logical Properties", "#logical-dimension-properties", "inline-size")}} | -{{Spec2("CSS Logical Properties")}} | -Definición inicial. | -
Compatibilidad en navegadores
- - - -{{Compat("css.properties.inline-size")}}
- -Mira también
- --
-
Example text
+``` + +### Contenido CSS + +```css +.exampleText { + writing-mode: vertical-rl; + background-color: yellow; + inline-size: 110px; +} +``` + +{{EmbedLiveSample("Ejemplo")}} + +## Especificación + +| Especificación | Estado | Comentario | +| -------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------- | +| {{SpecName("CSS Logical Properties", "#logical-dimension-properties", "inline-size")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. | + +## Compatibilidad en navegadores + +{{Compat("css.properties.inline-size")}} + +## Mira también + +- Las propiedades físicas mapeadas: {{cssxref("width")}} y {{cssxref("height")}} +- {{cssxref("writing-mode")}} diff --git a/files/es/web/css/inset-block-end/index.html b/files/es/web/css/inset-block-end/index.html deleted file mode 100644 index 179d8541fe43d5..00000000000000 --- a/files/es/web/css/inset-block-end/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: inset-block-end -slug: Web/CSS/inset-block-end -translation_of: Web/CSS/inset-block-end ---- -{{CSSRef}}{{SeeCompatTable}}
-
-La propiedad de CSS inset-block-end define el desplazamiento de final de bloque lógico de un elemento, que se asigna a una inserción física en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a la propiedad {{cssxref ("top")}}, {{cssxref ("right")}}, {{cssxref ("bottom")}}, o {{cssxref ("left")}} dependiendo de la propiedad en los valores definidos para {{cssxref ("modo de escritura")}}, {{cssxref ("dirección")}} y {{cssxref ("orientación de texto")}}.
/* <length> values */ -inset-block-end: 3px; -inset-block-end: 2.4em; - -/* <percentage>s of the width or height of the containing block */ -inset-block-end: 10%; - -/* Keyword value */ -inset-block-end: auto; - -/* Global values */ -inset-block-end: inherit; -inset-block-end: initial; -inset-block-end: unset; -- -
{{cssinfo}}
- -Sintaxis
- -Valores
- -La propiedad inset-block-end toma los mismos valores de la propiedad {{cssxref("left")}}.
Sintaxis formal
- -{{csssyntax}} - -Ejemplo
- -Contenido HTML
- -<div> - <p class="exampleText">Example text</p> -</div> -- -
Contenido CSS
- -div {
- background-color: yellow;
- width: 120px;
- height: 120px;
-}
-
-.exampleText {
- writing-mode: vertical-rl;
- position: relative;
- inset-block-end: 20px;
- background-color: #c8c800;
-}
-
-{{EmbedLiveSample("Ejemplo", 140, 140)}}
- -Especificación
- -| Especificación | -Estado | -Comentario | -
|---|---|---|
| {{SpecName("CSS Logical Properties", "#propdef-inset-block-end", "inset-block-end")}} | -{{Spec2("CSS Logical Properties")}} | -Definición inicial. | -
Compatibilidad en navegadores
- -{{Compat("css.properties.inset-block-end")}}
- -Mira también
- --
-
+
+```
+
+### Contenido CSS
+
+```css
+div {
+ background-color: yellow;
+ width: 120px;
+ height: 120px;
+}
+
+.exampleText {
+ writing-mode: vertical-rl;
+ position: relative;
+ inset-block-end: 20px;
+ background-color: #c8c800;
+}
+```
+
+{{EmbedLiveSample("Ejemplo", 140, 140)}}
+
+## Especificación
+
+| Especificación | Estado | Comentario |
+| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-inset-block-end", "inset-block-end")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. |
+
+## Compatibilidad en navegadores
+
+{{Compat("css.properties.inset-block-end")}}
+
+## Mira también
+
+- Las propiedades que definen otras inserciones:: {{cssxref("inset-block-start")}}, {{cssxref("inset-inline-start")}}, y {{cssxref("inset-inline-end")}}
+- Las propiedades físicas mapeadas: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, y {{cssxref("left")}}
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/es/web/css/inset-block-start/index.html b/files/es/web/css/inset-block-start/index.html
deleted file mode 100644
index b38414ae74f46f..00000000000000
--- a/files/es/web/css/inset-block-start/index.html
+++ /dev/null
@@ -1,93 +0,0 @@
----
-title: inset-block-start
-slug: Web/CSS/inset-block-start
-translation_of: Web/CSS/inset-block-start
----
-Example text
+{{CSSRef}}{{SeeCompatTable}}
-
-La propiedad de CSS inset-block-start define el desplazamiento de inicio de bloque lógico de un elemento, que se asigna a una inserción física en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a la propiedad {{cssxref ("top")}}, {{cssxref ("right")}}, {{cssxref ("bottom")}}, o {{cssxref ("left")}} dependiendo de la propiedad en los valores definidos para {{cssxref ("modo de escritura")}}, {{cssxref ("dirección")}} y {{cssxref ("orientación de texto")}}.
/* <length> values */ -inset-block-start: 3px; -inset-block-start: 2.4em; - -/* <percentage>s of the width or height of the containing block */ -inset-block-start: 10%; - -/* Keyword value */ -inset-block-start: auto; - -/* Global values */ -inset-block-start: inherit; -inset-block-start: initial; -inset-block-start: unset; -- -
{{cssinfo}}
- -Sintaxis
- -Valores
- -La propiedad inset-block-start toma los mismos valores de la propiedad {{cssxref("left")}}.
Sintaxis formal
- -{{csssyntax}} - -Ejemplo
- -Contenido HTML
- -<div> - <p class="exampleText">Example text</p> -</div> -- -
Contenido CSS
- -div {
- background-color: yellow;
- width: 120px;
- height: 120px;
-}
-
-.exampleText {
- writing-mode: vertical-lr;
- position: relative;
- inset-block-start: 20px;
- background-color: #c8c800;
-}
-
-{{EmbedLiveSample("Ejemplo", 140, 140)}}
- -Especificación
- -| Especificación | -Estado | -Comentario | -
|---|---|---|
| {{SpecName("CSS Logical Properties", "#propdef-inset-block-start", "inset-block-start")}} | -{{Spec2("CSS Logical Properties")}} | -Definición inicial. | -
Compatibilidad en navegadores
- -{{Compat("css.properties.inset-block-start")}}
- -Mira también
- --
-
+
+```
+
+### Contenido CSS
+
+```css
+div {
+ background-color: yellow;
+ width: 120px;
+ height: 120px;
+}
+
+.exampleText {
+ writing-mode: vertical-lr;
+ position: relative;
+ inset-block-start: 20px;
+ background-color: #c8c800;
+}
+```
+
+{{EmbedLiveSample("Ejemplo", 140, 140)}}
+
+## Especificación
+
+| Especificación | Estado | Comentario |
+| ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | ------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-inset-block-start", "inset-block-start")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. |
+
+## Compatibilidad en navegadores
+
+{{Compat("css.properties.inset-block-start")}}
+
+## Mira también
+
+- Las propiedades que definen otras inserciones:: {{cssxref("inset-block-end")}}, {{cssxref("inset-inline-start")}}, y {{cssxref("inset-inline-end")}}
+- Las propiedades físicas mapeadas: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, y {{cssxref("left")}}
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/es/web/css/inset-block/index.html b/files/es/web/css/inset-block/index.html
deleted file mode 100644
index c611ed293e41c8..00000000000000
--- a/files/es/web/css/inset-block/index.html
+++ /dev/null
@@ -1,97 +0,0 @@
----
-title: inset-block
-slug: Web/CSS/inset-block
-translation_of: Web/CSS/inset-block
----
-Example text
+{{CSSRef}}{{SeeCompatTable}}
-
-La propiedad de CSS inset-block define los bloques lógicos de inicio y fin de las compensaciones de un elemento, que se asignan a las compensaciones físicas en función del modo de escritura del elemento, la direccionalidad y la orientación del texto. Corresponde a las propiedades {{cssxref ("top")}} y {{cssxref ("bottom")}}, o {{cssxref ("right")}} y {{cssxref ("left")}} dependiendo de las propiedades en los valores definidos para {{cssxref ("modo de escritura")}}, {{cssxref ("dirección")}} y {{cssxref ("orientación de texto")}}.
/* <length> values */ -inset-block: 3px 10px; -inset-block: 2.4em 3em; -inset-block: 10px; /* value applied to start and end */ - -/* <percentage>s of the width or height of the containing block */ -inset-block: 10% 5%; - -/* Keyword value */ -inset-block: auto; - -/* Global values */ -inset-block: inherit; -inset-block: initial; -inset-block: unset; -- -
La abreviación para la otra dimensión {{cssxref("inset-inline")}}, que es una abreviación para {{cssxref("inset-inline-start")}}, y {{cssxref("inset-inline-end")}}.
- -{{cssinfo}}
- -Sintaxis
- -Valores
- -La propiedad inset-block toma los mismos valores de la propiedad {{cssxref("left")}}.
Sintaxis formal
- -{{csssyntax}} - -Ejemplo
- -Contenido HTML
- -<div> - <p class="exampleText">Example text</p> -</div> -- -
Contenido CSS
- -div {
- background-color: yellow;
- width: 120px;
- height: 120px;
-}
-
-.exampleText {
- writing-mode: vertical-lr;
- position: relative;
- inset-block: 20px 50px;
- background-color: #c8c800;
-}
-
-{{EmbedLiveSample("Ejemplo", 140, 140)}}
- -Especificación
- -| Especificación | -Estado | -Comentario | -
|---|---|---|
| {{SpecName("CSS Logical Properties", "#propdef-inset-block", "inset-block")}} | -{{Spec2("CSS Logical Properties")}} | -Definición inicial. | -
Compatibilidad en navegadores
- - - -{{Compat("css.properties.inset-block")}}
- -Mira también
- --
-
+
+```
+
+### Contenido CSS
+
+```css
+div {
+ background-color: yellow;
+ width: 120px;
+ height: 120px;
+}
+
+.exampleText {
+ writing-mode: vertical-lr;
+ position: relative;
+ inset-block: 20px 50px;
+ background-color: #c8c800;
+}
+```
+
+{{EmbedLiveSample("Ejemplo", 140, 140)}}
+
+## Especificación
+
+| Especificación | Estado | Comentario |
+| -------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-inset-block", "inset-block")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. |
+
+## Compatibilidad en navegadores
+
+{{Compat("css.properties.inset-block")}}
+
+## Mira también
+
+- Las propiedades físicas mapeadas: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, y {{cssxref("left")}}
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/es/web/css/inset-inline-end/index.html b/files/es/web/css/inset-inline-end/index.html
deleted file mode 100644
index 48d05366dd8326..00000000000000
--- a/files/es/web/css/inset-inline-end/index.html
+++ /dev/null
@@ -1,93 +0,0 @@
----
-title: inset-inline-end
-slug: Web/CSS/inset-inline-end
-translation_of: Web/CSS/inset-inline-end
----
-Example text
+{{CSSRef}}{{SeeCompatTable}}
-
-La propiedad de CSS inset-inline-end define la inserción final lógica en línea de un elemento, que se asigna a una inserción física en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a la propiedad {{cssxref ("top")}}, {{cssxref ("right")}}, {{cssxref ("bottom")}}, o {{cssxref ("left")}} dependiendo de la propiedad en los valores definidos para {{cssxref ("modo de escritura")}}, {{cssxref ("dirección")}} y {{cssxref ("orientación de texto")}}.
/* <length> values */ -inset-inline-end: 3px; -inset-inline-end: 2.4em; - -/* <percentage>s of the width or height of the containing block */ -inset-inline-end: 10%; - -/* Keyword value */ -inset-inline-end: auto; - -/* Global values */ -inset-inline-end: inherit; -inset-inline-end: initial; -inset-inline-end: unset; -- -
{{cssinfo}}
- -Sintaxis
- -Valores
- -La propiedad inset-inline-end toma los mismos valores de la propiedad {{cssxref("left")}}.
Sintaxis formal
- -{{csssyntax}} - -Ejemplo
- -Contenido HTML
- -<div> - <p class="exampleText">Example text</p> -</div> -- -
Contenido CSS
- -div {
- background-color: yellow;
- width: 120px;
- height: 120px;
-}
-
-.exampleText {
- writing-mode: vertical-rl;
- position: relative;
- inset-inline-end: 20px;
- background-color: #c8c800;
-}
-
-{{EmbedLiveSample("Ejemplo", 140, 140)}}
- -Especificación
- -| Especificación | -Estado | -Comentario | -
|---|---|---|
| {{SpecName("CSS Logical Properties", "#propdef-inset-inline-end", "inset-inline-end")}} | -{{Spec2("CSS Logical Properties")}} | -Definición inicial. | -
Compatibilidad en navegadores
- -{{Compat("css.properties.inset-inline-end")}}
- -Mira también
- --
-
+
+```
+
+### Contenido CSS
+
+```css
+div {
+ background-color: yellow;
+ width: 120px;
+ height: 120px;
+}
+
+.exampleText {
+ writing-mode: vertical-rl;
+ position: relative;
+ inset-inline-end: 20px;
+ background-color: #c8c800;
+}
+```
+
+{{EmbedLiveSample("Ejemplo", 140, 140)}}
+
+## Especificación
+
+| Especificación | Estado | Comentario |
+| -------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-inset-inline-end", "inset-inline-end")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. |
+
+## Compatibilidad en navegadores
+
+{{Compat("css.properties.inset-inline-end")}}
+
+## Mira también
+
+- Las propiedades que definen otras inserciones:: {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}}, y {{cssxref("inset-inline-start")}}
+- Las propiedades físicas mapeadas: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, y {{cssxref("left")}}
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/es/web/css/inset-inline-start/index.html b/files/es/web/css/inset-inline-start/index.html
deleted file mode 100644
index c9725e3a2ab4a2..00000000000000
--- a/files/es/web/css/inset-inline-start/index.html
+++ /dev/null
@@ -1,93 +0,0 @@
----
-title: inset-inline-start
-slug: Web/CSS/inset-inline-start
-translation_of: Web/CSS/inset-inline-start
----
-Example text
+{{CSSRef}}{{SeeCompatTable}}
-
-La propiedad de CSS inset-inline-start define la inserción de inicio en línea lógica de un elemento, que se asigna a un desplazamiento físico en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a la propiedad {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, o {{cssxref("left")}} dependiendo de la propiedad en los valores definidos para {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
/* <length> values */ -inset-inline-start: 3px; -inset-inline-start: 2.4em; - -/* <percentage>s of the width or height of the containing block */ -inset-inline-start: 10%; - -/* Keyword value */ -inset-inline-start: auto; - -/* Global values */ -inset-inline-start: inherit; -inset-inline-start: initial; -inset-inline-start: unset; -- -
{{cssinfo}}
- -Sintaxis
- -Valores
- -La propiedad inset-inline-start toma los mismos valores de la propiedad {{cssxref("left")}}.
Sintaxis formal
- -{{csssyntax}} - -Ejemplo
- -Contenido HTML
- -<div> - <p class="exampleText">Example text</p> -</div> -- -
Contenido CSS
- -div {
- background-color: yellow;
- width: 120px;
- height: 120px;
-}
-
-.exampleText {
- writing-mode: vertical-lr;
- position: relative;
- inset-inline-start: 20px;
- background-color: #c8c800;
-}
-
-{{EmbedLiveSample("Ejemplo", 140, 140)}}
- -Especificación
- -| Especificación | -Estado | -Comentario | -
|---|---|---|
| {{SpecName("CSS Logical Properties", "#propdef-inset-inline-start", "inset-inline-start")}} | -{{Spec2("CSS Logical Properties")}} | -Definición inicial. | -
Compatibilidad en navegadores
- -{{Compat("css.properties.inset-inline-start")}}
- -Mira también
- --
-
+
+```
+
+### Contenido CSS
+
+```css
+div {
+ background-color: yellow;
+ width: 120px;
+ height: 120px;
+}
+
+.exampleText {
+ writing-mode: vertical-lr;
+ position: relative;
+ inset-inline-start: 20px;
+ background-color: #c8c800;
+}
+```
+
+{{EmbedLiveSample("Ejemplo", 140, 140)}}
+
+## Especificación
+
+| Especificación | Estado | Comentario |
+| ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | ------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-inset-inline-start", "inset-inline-start")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. |
+
+## Compatibilidad en navegadores
+
+{{Compat("css.properties.inset-inline-start")}}
+
+## Mira también
+
+- Las propiedades que definen otras inserciones: {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}}, y {{cssxref("inset-inline-end")}}
+- Las propiedades físicas mapeadas: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, y {{cssxref("left")}}
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/es/web/css/inset-inline/index.html b/files/es/web/css/inset-inline/index.html
deleted file mode 100644
index 0b157278a3150d..00000000000000
--- a/files/es/web/css/inset-inline/index.html
+++ /dev/null
@@ -1,97 +0,0 @@
----
-title: inset-inline
-slug: Web/CSS/inset-inline
-translation_of: Web/CSS/inset-inline
----
-Example text
+{{CSSRef}}{{SeeCompatTable}}
-
-La propiedad de CSS inset-inline define los bloques lógicos de inicio y fin de las compensaciones de un elemento, que se asignan a las compensaciones físicas en función del modo de escritura del elemento, la direccionalidad y la orientación del texto. Corresponde a las propiedades {{cssxref ("top")}} y {{cssxref ("bottom")}}, o {{cssxref ("right")}} y {{cssxref ("left")}} dependiendo de las propiedades en los valores definidos para {{cssxref ("modo de escritura")}}, {{cssxref ("dirección")}} y {{cssxref ("orientación de texto")}}.
/* <length> values */ -inset-inline: 3px 10px; -inset-inline: 2.4em 3em; -inset-inline: 10px; /* value applied to start and end */ - -/* <percentage>s of the width or height of the containing block */ -inset-inline: 10% 5%; - -/* Keyword value */ -inset-inline: auto; - -/* Global values */ -inset-inline: inherit; -inset-inline: initial; -inset-inline: unset; -- -
La abreviación para la otra dimensión es {{cssxref("inset-block")}}, que es la abreviación para {{cssxref("inset-block-start")}}, y {{cssxref("inset-block-end")}}.
- -{{cssinfo}}
- -Sintaxis
- -Valores
- -La propiedad inset-inline toma los mismos valores de la propiedad {{cssxref("left")}}.
Sintaxis formal
- -{{csssyntax}} - -Ejemplo
- -Contenido HTML
- -<div> - <p class="exampleText">Example text</p> -</div> -- -
Contenido CSS
- -div {
- background-color: yellow;
- width: 120px;
- height: 120px;
-}
-
-.exampleText {
- writing-mode: vertical-lr;
- position: relative;
- inset-inline: 20px 50px;
- background-color: #c8c800;
-}
-
-{{EmbedLiveSample("Ejemplo", 140, 140)}}
- -Especificación
- -| Especificación | -Estado | -Comentario | -
|---|---|---|
| {{SpecName("CSS Logical Properties", "#propdef-inset-inline", "inset-inline")}} | -{{Spec2("CSS Logical Properties")}} | -Definición inicial. | -
Compatibilidad en navegadores
- - - -{{Compat("css.properties.inset-inline")}}
- -Mira también
- --
-
+
+```
+
+### Contenido CSS
+
+```css
+div {
+ background-color: yellow;
+ width: 120px;
+ height: 120px;
+}
+
+.exampleText {
+ writing-mode: vertical-lr;
+ position: relative;
+ inset-inline: 20px 50px;
+ background-color: #c8c800;
+}
+```
+
+{{EmbedLiveSample("Ejemplo", 140, 140)}}
+
+## Especificación
+
+| Especificación | Estado | Comentario |
+| -------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-inset-inline", "inset-inline")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. |
+
+## Compatibilidad en navegadores
+
+{{Compat("css.properties.inset-inline")}}
+
+## Mira también
+
+- Las propiedades físicas mapeadas: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, y {{cssxref("left")}}
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/es/web/css/inset/index.html b/files/es/web/css/inset/index.html
deleted file mode 100644
index 881fa33367467e..00000000000000
--- a/files/es/web/css/inset/index.html
+++ /dev/null
@@ -1,96 +0,0 @@
----
-title: inset
-slug: Web/CSS/inset
-translation_of: Web/CSS/inset
----
-Example text
+{{CSSRef}}{{SeeCompatTable}}
-
-La propiedad de CSS inset define el bloque lógico y las compensaciones de inicio y finalización en línea de un elemento, que se asignan a las compensaciones físicas en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a las propiedades {{cssxref ("top")}} y {{cssxref ("bottom")}}, o {{cssxref ("right")}} y {{cssxref ("left")}} dependiendo de las propiedades en los valores definidos para {{cssxref ("modo de escritura")}}, {{cssxref ("dirección")}} y {{cssxref ("orientación de texto")}}.
/* <length> values */ -inset: 3px 10px 3px 10px; -inset: 2.4em 3em 3em 3em; -inset: 10px; /* value applied to all edges */ - -/* <percentage>s of the width or height of the containing block */ -inset: 10% 5% 5% 5%; - -/* Keyword value */ -inset: auto; - -/* Global values */ -inset: inherit; -inset: initial; -inset: unset; - -- -
{{cssinfo}}
- -Sintaxis
- -Valores
- -La propiedad inset toma los mismos valores de la propiedad {{cssxref("left")}}.
Sintaxis formal
- -{{csssyntax}} - -Ejemplo
- -Contenido HTML
- -<div> - <p class="exampleText">Example text</p> -</div> -- -
Contenido CSS
- -div {
- background-color: yellow;
- width: 120px;
- height: 120px;
-}
-
-.exampleText {
- writing-mode: vertical-lr;
- position: relative;
- inset: 20px 50px 30px 10px;
- background-color: #c8c800;
-}
-
-{{EmbedLiveSample("Ejemplo", 140, 140)}}
- -Especificación
- -| Especificación | -Estado | -Comentario | -
|---|---|---|
| {{SpecName("CSS Logical Properties", "#propdef-inset", "inset")}} | -{{Spec2("CSS Logical Properties")}} | -Definición inicial. | -
Compatibilidad en navegadores
- - - -{{Compat("css.properties.inset")}}
- -Mira también
- --
-
+
+```
+
+### Contenido CSS
+
+```css
+div {
+ background-color: yellow;
+ width: 120px;
+ height: 120px;
+}
+
+.exampleText {
+ writing-mode: vertical-lr;
+ position: relative;
+ inset: 20px 50px 30px 10px;
+ background-color: #c8c800;
+}
+```
+
+{{EmbedLiveSample("Ejemplo", 140, 140)}}
+
+## Especificación
+
+| Especificación | Estado | Comentario |
+| ---------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-inset", "inset")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. |
+
+## Compatibilidad en navegadores
+
+{{Compat("css.properties.inset")}}
+
+## Mira también
+
+- Las propiedades físicas mapeadas: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, y {{cssxref("left")}}
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/es/web/css/integer/index.html b/files/es/web/css/integer/index.html
deleted file mode 100644
index 2075d52e376b30..00000000000000
--- a/files/es/web/css/integer/index.html
+++ /dev/null
@@ -1,16 +0,0 @@
----
-title: Example text
+{{ CSSRef() }}
- -Sumario
- -Un valor entero usado para algunas propiedades CSS que no tiene unidades.
- -Usado en
- --
-
{{CSSRef}}
-
-Resumen
- -La propiedad CSS isolation define si el elemento debe crear un nuevo {{glossary("stacking context")}}.
Esto es especialmente útil en conjunto con {{cssxref("background-blend-mode")}} que solo mezclan fondos en un contexto de apilamiento determinado: permite aislar grupos de elementos de sus fondos más profundos y mezclar sus colores de fondo.
- -{{cssinfo}}
- -Sintaxis
- -/* Keyword values */ -isolation: auto; -isolation: isolate; - -/* Global values */ -isolation: inherit; -isolation: initial; -isolation: unset; -- -
Valores
- --
-
Sintaxis formal
- -{{csssyntax}} - -Ejemplos
- -<div id="b" class="a"> - <div id="d"> - <div class="a c">auto</div> - </div> - <div id="e"> - <div class="a c">isolate</div> - </div> -</div> -- -
.a {
- background-color: rgb(0,255,0);
-}
-#b {
- width: 200px;
- height: 210px;
-}
-.c {
- width: 100px;
- height: 100px;
- border: 1px solid black;
- padding: 2px;
- mix-blend-mode: difference;
-}
-#d {
- isolation: auto;
-}
-#e {
- isolation: isolate;
-}
-
-{{ EmbedLiveSample('Examples', "230", "230") }}
- -Especificaciones
- -| Specification | -Status | -Comment | -
|---|---|---|
| {{ SpecName('Compositing', '#isolation', 'Isolation') }} | -{{ Spec2('Compositing') }} | -Initial definition | -
Compatibilidad de navegadores
- -{{Compat("css.properties.isolation")}} - -También puedes ver
- --
-
+
+```
+
+```css
+.a {
+ background-color: rgb(0,255,0);
+}
+#b {
+ width: 200px;
+ height: 210px;
+}
+.c {
+ width: 100px;
+ height: 100px;
+ border: 1px solid black;
+ padding: 2px;
+ mix-blend-mode: difference;
+}
+#d {
+ isolation: auto;
+}
+#e {
+ isolation: isolate;
+}
+```
+
+{{ EmbedLiveSample('Examples', "230", "230") }}
+
+## Especificaciones
+
+| Specification | Status | Comment |
+| ---------------------------------------------------------------------------- | ------------------------------------ | ------------------ |
+| {{ SpecName('Compositing', '#isolation', 'Isolation') }} | {{ Spec2('Compositing') }} | Initial definition |
+
+## Compatibilidad de navegadores
+
+{{Compat("css.properties.isolation")}}
+
+## También puedes ver
+
+- {{cssxref("<blend-mode>")}}
+- {{cssxref("mix-blend-mode")}}, {{cssxref("background-blend-mode")}}
diff --git a/files/es/web/css/justify-content/index.html b/files/es/web/css/justify-content/index.html
deleted file mode 100644
index 5b925cf6d08126..00000000000000
--- a/files/es/web/css/justify-content/index.html
+++ /dev/null
@@ -1,173 +0,0 @@
----
-title: justify-content
-slug: Web/CSS/justify-content
-translation_of: Web/CSS/justify-content
----
-
+
+ auto
+
+
+isolate
+ {{CSSRef}}
-
-Resumen
- -La propiedad CSS justify-content define cómo el navegador distribuye el espacio entre y alrededor de los items flex, a lo largo del eje principal de su contenedor.
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.
- -
-
-
-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. La especificación preliminar se encuentra en una etapa muy temprana y aún no está implementada.
-{{cssinfo}}
-
-Véase Using CSS flexible boxes para más propiedades e información.
- -Sintaxis
- -/* Alinear items flex desde el comienzo */ -justify-content: flex-start; - -/* Alinear items desde el final */ -justify-content: flex-end; - -/* Alinear items en el centro */ -justify-content: center; - -/* Distribuir items uniformemente -El primer item al inicio, el último al final */ -justify-content: space-between; - -/* Distribuir items uniformemente -Los items tienen el mismo espacio a su alrededor */ -justify-content: space-around; - -/* Valores globales */ -justify-content: inherit; -justify-content: initial; -justify-content: unset; -- -
Valores
- --
-
Sintaxis formal
- -{{csssyntax}} - -Ejemplos
- -Contenido HTML
- -<div id="container"> - <p>justify-content: flex-start</p> - <div id="flex-start"> - <div></div> - <div></div> - <div></div> - </div> - - <p>justify-content: flex-end</p> - <div id="flex-end"> - <div></div> - <div></div> - <div></div> - </div> - - <p>justify-content: center</p> - <div id="center"> - <div></div> - <div></div> - <div></div> - </div> - - <p>justify-content: space-between</p> - <div id="space-between"> - <div></div> - <div></div> - <div></div> - </div> - - <p>justify-content: space-around</p> - <div id="space-around"> - <div></div> - <div></div> - <div></div> - </div> -</div> -- -
CSS
- -#container > div {
- display: flex;
- font-family: "Courier New", "Lucida Console", monospace;
-}
-
-#container > div > div {
- width: 50px;
- height: 50px;
- background: linear-gradient(-45deg, #788cff, #b4c8ff);
-}
-
-#flex-start {
- justify-content: flex-start;
-}
-
-#center {
- justify-content: center;
-}
-
-#flex-end {
- justify-content: flex-end;
-}
-
-#space-between {
- justify-content: space-between;
-}
-
-#space-around {
- justify-content: space-around;
-}
-
-
-Resultados en:
- -{{ EmbedLiveSample('Ejemplos', 600, 550) }}
- -Especificaciones
- -| Especificación | -Estado | -Comentario | -
|---|---|---|
| {{SpecName('CSS3 Flexbox', '#justify-content', 'justify-content')}} | -{{Spec2('CSS3 Flexbox')}} | -Definición inicial | -
Compatibilidad en navegadores
- -{{Compat("css.properties.justify-content")}} - -Ver también
- - diff --git a/files/es/web/css/justify-content/index.md b/files/es/web/css/justify-content/index.md new file mode 100644 index 00000000000000..898aa484331556 --- /dev/null +++ b/files/es/web/css/justify-content/index.md @@ -0,0 +1,157 @@ +--- +title: justify-content +slug: Web/CSS/justify-content +translation_of: Web/CSS/justify-content +--- +{{CSSRef}} + +## Resumen + +La propiedad [CSS](/es/docs/CSS) **`justify-content`** define cómo el navegador distribuye el espacio entre y alrededor de los items flex, a lo largo del eje principal de su contenedor. + +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. + +{{cssinfo}} + +Véase [Using CSS flexible boxes](/es/docs/CSS/Using_CSS_flexible_boxes) para más propiedades e información. + +## Sintaxis + +```css +/* Alinear items flex desde el comienzo */ +justify-content: flex-start; + +/* Alinear items desde el final */ +justify-content: flex-end; + +/* Alinear items en el centro */ +justify-content: center; + +/* Distribuir items uniformemente +El primer item al inicio, el último al final */ +justify-content: space-between; + +/* Distribuir items uniformemente +Los items tienen el mismo espacio a su alrededor */ +justify-content: space-around; + +/* Valores globales */ +justify-content: inherit; +justify-content: initial; +justify-content: unset; +``` + +### Valores + +- `flex-start` + - : Los items flex se colocan comenzando desde el **comienzo principal**. El margen del primer item es alineado al ras con el borde del comienzo principal de la línea y cada item siguiente es alineado al ras con el precedente. +- `flex-end` + - : Los items flex se colocan comenzando desde el **final principal**. El margen del último item es alineado al ras con el borde del final principal de la línea y cada item precedente es alineado al ras con el siguiente. +- `center` + - : Los items flex son colocados hacia el centro de la línea. Los items flex se alinean al ras entre sí y en torno al centro de la línea. El espacio entre el borde del comienzo principal de la línea y el primer item es el mismo que el espacio entre el borde del final principal y el último item de la línea. +- `space-between` + - : Los items flex se distribuyen uniformemente sobre la línea. El espaciamiento se hace de tal manera que el espacio adyacente entre dos items es el mismo. El borde del comienzo principal y el borde del final principal se alinean al ras con el borde del primer y último item respectivamente. +- `space-around` + - : Los items flex se alinean uniformemente de tal manera que el espacio entre dos items adyacentes es el mismo. El espacio vacío anterior al primer item y posterior al último item equivale a la mitad del espacio entre dos items adyacentes. + +### Sintaxis formal + +{{csssyntax}} + +## Ejemplos + +### Contenido HTML + +```html +
+
+```
+
+### CSS
+
+```css
+#container > div {
+ display: flex;
+ font-family: "Courier New", "Lucida Console", monospace;
+}
+
+#container > div > div {
+ width: 50px;
+ height: 50px;
+ background: linear-gradient(-45deg, #788cff, #b4c8ff);
+}
+
+#flex-start {
+ justify-content: flex-start;
+}
+
+#center {
+ justify-content: center;
+}
+
+#flex-end {
+ justify-content: flex-end;
+}
+
+#space-between {
+ justify-content: space-between;
+}
+
+#space-around {
+ justify-content: space-around;
+}
+```
+
+Resultados en:
+
+{{ EmbedLiveSample('Ejemplos', 600, 550) }}
+
+## Especificaciones
+
+| Especificación | Estado | Comentario |
+| ---------------------------------------------------------------------------------------- | -------------------------------- | ------------------ |
+| {{SpecName('CSS3 Flexbox', '#justify-content', 'justify-content')}} | {{Spec2('CSS3 Flexbox')}} | Definición inicial |
+
+## Compatibilidad en navegadores
+
+{{Compat("css.properties.justify-content")}}
+
+## Ver también
+
+- [Using CSS flexible boxes](/es/docs/CSS/Using_CSS_flexible_boxes)
diff --git a/files/es/web/css/layout_cookbook/index.html b/files/es/web/css/layout_cookbook/index.html
deleted file mode 100644
index a3b3e422b9297b..00000000000000
--- a/files/es/web/css/layout_cookbook/index.html
+++ /dev/null
@@ -1,77 +0,0 @@
----
-title: Libro de recetas de maquetación CSS
-slug: Web/CSS/Layout_cookbook
-translation_of: Web/CSS/Layout_cookbook
----
-justify-content: flex-start
+
+
+
+
+
+
+ justify-content: flex-end
+
+
+
+
+
+
+ justify-content: center
+
+
+
+
+
+
+ justify-content: space-between
+
+
+
+
+
+
+ justify-content: space-around
+
+
+
+
+
+{{CSSRef}}
-
-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, ya que esto le dará la base básica que necesita para hacer aquí uso de las recetas.
-Las recetas
- -| Receta | -Descripción | -Metodos de maquetación | -
|---|---|---|
| Objetos media | -Una caja con dos-columnas con una imagen en un lado y texto descriptivo en el otro, por ejemplo, una entrada de facebook o un tweet. | -CSS Grid, alternativa {{cssxref("float")}}, dimensionamiento {{cssxref("fit-content")}} | -
| Columnas | -Cuándo elegir el diseño de varias columnas, flexbox o grid para sus columnas. | -CSS Grid, Multicol, Flexbox | -
| Centrar un elemento | -Cómo centrar un elemento horizontal y verticalmente. | -Flexbox, Box Alignment | -
| Pies de página pegajosos | -Creación de un pie de página que se coloca en la parte inferior del contenedor o en la ventana de visualización cuando el contenido es más corto. | -CSS Grid, Flexbox | -
| Navegación dividida | -Un patrón de navegación en el que algunos enlaces se separan visualmente de los demás. | -Flexbox, {{cssxref("margin")}} | -
| Navegación con migas de pan | -Crear una lista de enlaces para permitir al visitante navegar de nuevo a través de la jerarquía de la página. | -- - | -
| Lista de grupos con insignias | -Una lista de elementos con una insignia para mostrar un conteo. | -Flexbox, Box Alignment | -
| Paginación | -Enlaces a páginas de contenido (como los resultados de búsqueda). | -Flexbox, Box Alignment | -
| Tarjeta | -Un componente de tarjeta, que se muestra en una rejilla de tarjetas. | -Grid Layout | -
Aporta con una receta
- -Como con todo en MDN nos encantaría que contribuyeras con una receta en el mismo formato que los que se muestran arriba. Revisa esta página para obtener una plantilla y pautas para escribir su propio ejemplo.
diff --git a/files/es/web/css/layout_cookbook/index.md b/files/es/web/css/layout_cookbook/index.md new file mode 100644 index 00000000000000..0fc65739b32e2b --- /dev/null +++ b/files/es/web/css/layout_cookbook/index.md @@ -0,0 +1,28 @@ +--- +title: Libro de recetas de maquetación CSS +slug: Web/CSS/Layout_cookbook +translation_of: Web/CSS/Layout_cookbook +--- +{{CSSRef}} + +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. + +## Las recetas + +| Receta | Descripción | Metodos de maquetación | +| ------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | +| [Objetos media](/docs/Web/CSS/Layout_cookbook/Media_objects) | Una caja con dos-columnas con una imagen en un lado y texto descriptivo en el otro, por ejemplo, una entrada de facebook o un tweet. | [CSS Grid](/es/docs/Web/CSS/CSS_Grid_Layout), alternativa {{cssxref("float")}}, dimensionamiento {{cssxref("fit-content")}} | +| [Columnas](/docs/Web/CSS/Layout_cookbook/Column_layouts) | Cuándo elegir el diseño de varias columnas, flexbox o grid para sus columnas. | [CSS Grid](/es/docs/Web/CSS/CSS_Grid_Layout), [Multicol](/es/docs/Web/CSS/CSS_Columns), [Flexbox](/es/docs/Web/CSS/CSS_Flexible_Box_Layout) | +| [Centrar un elemento](/docs/Web/CSS/Layout_cookbook/Center_an_element) | Cómo centrar un elemento horizontal y verticalmente. | [Flexbox](/es/docs/Web/CSS/CSS_Flexible_Box_Layout), [Box Alignment](/es/docs/Web/CSS/CSS_Box_Alignment) | +| [Pies de página pegajosos](/docs/Web/CSS/Layout_cookbook/Sticky_footers) | Creación de un pie de página que se coloca en la parte inferior del contenedor o en la ventana de visualización cuando el contenido es más corto. | [CSS Grid](/es/docs/Web/CSS/CSS_Grid_Layout), [Flexbox](/es/docs/Web/CSS/CSS_Flexible_Box_Layout) | +| [Navegación dividida](/docs/Web/CSS/Layout_cookbook/Split_Navigation) | Un patrón de navegación en el que algunos enlaces se separan visualmente de los demás. | [Flexbox](/es/docs/Web/CSS/CSS_Flexible_Box_Layout), {{cssxref("margin")}} | +| [Navegación con migas de pan](/docs/Web/CSS/Layout_cookbook/Breadcrumb_Navigation) | Crear una lista de enlaces para permitir al visitante navegar de nuevo a través de la jerarquía de la página. | [Flexbox](/es/docs/Web/CSS/CSS_Flexible_Box_Layout) | +| [Lista de grupos con insignias](/docs/Web/CSS/Layout_cookbook/List_group_with_badges) | Una lista de elementos con una insignia para mostrar un conteo. | [Flexbox](/es/docs/Web/CSS/CSS_Flexible_Box_Layout), [Box Alignment](/es/docs/Web/CSS/CSS_Box_Alignment) | +| [Paginación](/docs/Web/CSS/Layout_cookbook/Pagination) | Enlaces a páginas de contenido (como los resultados de búsqueda). | [Flexbox](/es/docs/Web/CSS/CSS_Flexible_Box_Layout), [Box Alignment](/es/docs/Web/CSS/CSS_Box_Alignment) | +| [Tarjeta](/es/docs/Web/CSS/Layout_cookbook/Card) | Un componente de tarjeta, que se muestra en una rejilla de tarjetas. | [Grid Layout](/es/docs/Web/CSS/CSS_Grid_Layout) | + +## Aporta con una receta + +Como con todo en MDN nos encantaría que contribuyeras con una receta en el mismo formato que los que se muestran arriba. [Revisa esta página](/docs/user:chrisdavidmills/Layout_Cookbook_Home/Contribute_a_recipe) para obtener una plantilla y pautas para escribir su propio ejemplo. diff --git a/files/es/web/css/layout_mode/index.html b/files/es/web/css/layout_mode/index.html deleted file mode 100644 index 0579cc24e3597d..00000000000000 --- a/files/es/web/css/layout_mode/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Layout mode -slug: Web/CSS/Layout_mode -tags: - - CSS - - Layout - - Referencia -translation_of: Web/CSS/Layout_mode ---- -{{cssref}}
-
-Un modo de diseño CSS(CSS layout mode), a veces simplemente llamado "layout", es un algoritmo que determina la posición y tamaño de cajas basado en la forma en la que interactúan con sus (elementos) hermanos y padres. Hay varios de ellos:
- --
-
-
-
-Nota: No todas las propiedades 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
- --
-
{{CSSRef}}
- - -La propiedad left especifica parte de la posición de un elemento (posicionado - es decir, con una posición determinada por código).
Para los elementos con una posición absoluta (aquellos que tienen la propiedad {{ Cssxref("position") }}: absolute ó position: fixed), la propiedad left determina la distancia entre el margen izquierdo del elemento y el borde izquierdo de su bloque contenedor.
{{EmbedInteractiveExample("pages/css/left.html")}}
-
-{{cssinfo}}
- -Sintaxis
- -left: <length> | <percentage> | auto | inherit ; -- -
Valores
- --
-
Ejemplos
- -CSS
- -#wrap {
- width: 700px;
- margin: 0 auto;
- background: #5C5C5C;
-}
-
-pre {
- white-space: pre;
- white-space: pre-wrap;
- white-space: pre-line;
- word-wrap: break-word;
-}
-
-#example_1 {
- width: 200px;
- height: 200px;
- position: absolute;
- left: 20px;
- top: 20px;
- background-color: #D8F5FF;
-}
-
-#example_2 {
- width: 200px;
- height: 200px;
- position: relative;
- top: 0;
- right: 0;
- background-color: #C1FFDB;
-
-}
-#example_3 {
- width: 600px;
- height: 400px;
- position: relative;
- top: 20px;
- left: 20px;
- background-color: #FFD7C2;
-}
-
-#example_4 {
- width:200px;
- height:200px;
- position:absolute;
- bottom:10px;
- right:20px;
- background-color:#FFC7E4;
-}
-
-HTML
- -<div id="wrap"> - <div id="example_1"> - <pre> - position: absolute; - left: 20px; - top: 20px; - </pre> - <p>The only containing element for this div is the main window, so it positions itself in relation to it.</p> - </div> - - <div id="example_2"> - <pre> - position: relative; - top: 0; - right: 0; - </pre> - <p>Relative position in relation to its siblings.</p> - </div> - - <div id="example_3"> - <pre> - float: right; - position: relative; - top: 20px; - left: 20px; - </pre> - <p>Relative to its sibling div above, but removed from flow of content.</p> - - <div id="example_4"> - <pre> - position: absolute; - bottom: 10px; - right: 20px; - </pre> - <p>Absolute position inside of a parent with relative position</p> - </div> - </div> -</div>- -
{{EmbedLiveSample('Ejemplos',1200,650)}}
- -Especificaciones
- - - -Compatibilidad entre navegadores
- - -{{Compat("css.properties.left")}}
- - -Ver también
- --
-
+
+```
+
+{{EmbedLiveSample('Ejemplos',1200,650)}}
+
+## Especificaciones
+
+- [CSS 2.1](http://www.w3.org/TR/CSS21/visuren.html#propdef-left)
+- [CSS 3](http://www.w3.org/Style/CSS/current-work#positioning)
+
+## Compatibilidad entre navegadores
+
+{{Compat("css.properties.left")}}
+
+## Ver también
+
+- {{ Cssxref("position") }}, {{ Cssxref("top") }}, {{ Cssxref("right") }}, {{ Cssxref("bottom") }}
diff --git a/files/es/web/css/length/index.html b/files/es/web/css/length/index.html
deleted file mode 100644
index fdfd4663853766..00000000000000
--- a/files/es/web/css/length/index.html
+++ /dev/null
@@ -1,142 +0,0 @@
----
-title:
+
+
+ + position: absolute; + left: 20px; + top: 20px; ++
The only containing element for this div is the main window, so it positions itself in relation to it.
+
+
+
+ + position: relative; + top: 0; + right: 0; ++
Relative position in relation to its siblings.
+
+
++ float: right; + position: relative; + top: 20px; + left: 20px; ++
Relative to its sibling div above, but removed from flow of content.
+ +
+
+ + position: absolute; + bottom: 10px; + right: 20px; ++
Absolute position inside of a parent with relative position
+{{CSSRef}}
-
-Resumen
- -El tipo de dato CSS <length> denota medidas de distancia. Es un valor {{cssxref("<number>")}} seguido por una unidad de longitud (px, em, pc, in, mm, …). Al igual que en cualquier dimensión CSS, no debe haber espacio entre la unidad y el número. La unidad de longitud es opcional después del valor {{cssxref("<number>")}} 0.
Muchas propiedades CSS (CSS properties) reciben valores <length>, como por ejemplo {{ Cssxref("width") }}, {{ Cssxref("margin-top") }}, y {{ Cssxref("font-size") }}.
Para algunas propiedades, el uso de longitudes negativas es un error de sintaxis, mientras que para algunas propiedades está permitido. Nótese que aunque los valores {{cssxref("<percentage>")}} también son dimensiones CSS y son aceptadas por algunas propiedades CSS que aceptan valores <length>, no son valores <length> en sí.
Interpolación
- -Los valores de tipo <length> pueden ser interpolados para permitir animaciones. En este caso son interpolados como números reales, de punto flotante. La interpolación sucede en el valor calculado. La velocidad de la interpolación es definida por la función {{cssxref("<timing-function>")}} asociada a la animación.
Unidades
- -Unidades de longitud relativa
- -Longitudes relativas a la fuente
- --
-
Longitudes de porcentaje del viewport
- -Las longitudes de porcentaje del viewport definen una longitud relativa al tamaño del viewport, que es la porción visible del documento. Solamente los navegadores basados en Gecko actualizan los valores del viewport dinámicamente, cuando el tamaño de éste es modificado (al cambiar el tamaño de la ventana en una computadora de escritorio, o al girar el dispositivo, en teléfonos y tablets).
- -En conjunto con overflow:auto, el espacio tomado por barras de desplazamiento no es restado al tamaño del viewport, mientras en el caso de overflow:scroll, sí lo es.
En un bloque de declaración de la regla-at {{cssxref("@page")}}, el uso de longitudes de viewport es inválido, y la declaración será desechada.
- --
-
Unidades de longitud absoluta
- --
-
Las unidades de longitud absoluta representan una medida física, y cuando las propiedades físicas del medio de salida son conocidas, como en diseño para impresión. Esto se hace anclando una de las unidades a una unidad física, y definiendo el resto con relación a ésta. La definición del ancla difiere entre dispositivos de baja resolución, como pantallas, y dispositivos de alta resolución, como impresoras.
- -Para dispositivos de ppp bajo, la unidad px representa el píxel de referencia físico, y el resto son definidos con relación a éste. Así, 1in es definido como 96px, que equivalen a 72pt. La consecuencia de esta definición es que en dichos dispositivos, las longitudes descritas en pulgadas (in), centrímetros (cm), milímetros (mm) no necesariamente conincidirán con la longitud de la unidad física del mismo nombre.
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).
-
-
-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.
-
-
Unidades CSS y puntos por pulgada (dots-per-inch)
- -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:
- --
-
Especificaciones
- -| Especificación | -Estado | -Comentarios | -
|---|---|---|
| {{SpecName('CSS3 Values', '#lengths', '<length>')}} | -{{Spec2('CSS3 Values')}} | -Añadidos ch, rem, vw, vh, vmin, vmax y q |
-
| {{SpecName('CSS2.1', 'syndata.html#length-units', '<length>')}} | -{{Spec2('CSS2.1')}} | -pt, pc, px son definidos explícitamente (fueron definidos implícitamente en CSS1) |
-
| {{SpecName('CSS1', '#length-units', '<length>')}} | -{{Spec2('CSS1')}} | -Definición inicial | -
Compatibilidad de navegadores
- -{{Compat("css.types.length")}} diff --git a/files/es/web/css/length/index.md b/files/es/web/css/length/index.md new file mode 100644 index 00000000000000..563e0283bee122 --- /dev/null +++ b/files/es/web/css/length/index.md @@ -0,0 +1,111 @@ +--- +title:https://developer.mozilla.org/en-US/docs/Web/CSS{{ CSSRef() }} -/*Keyword value*/ -line-height: normal; - -/- - - -
Resumen
- -La propiedad CSS line-height establece la altura de una casilla remarcada por líneas. Comúnmente se usa para establecer la distancia entre líneas de texto. A nivel de elementos de bloque, define la altura mínima de las casillas encuadradas por líneas dentro del elemento. En elementos en linea no reemplazables, especifica la altura que se usa para calcular la altura de la casila encuadrada por líneas.
-
-
Syntax
- - - -/* Keyword value */
-line-height: normal;
-
-/* Unitless values: usa esta cifra multiplicada por el tamaño de fuente
-del elemento */
-line-height: 3.5;
-
-/* <longitud> valores */
-line-height: 3em;
-
-/* <porcentaje> valores */
-line-height: 34%;
-
-/* Valores absolutos */
-line-height: inherit;
-line-height: initial;
-line-height: unset;Valores
- --
-
Ejemplos
- -/* Todas las reglas debajo ofrecen la misma line-height resultante */
-
-div { line-height: 1.2; font-size: 10pt; } /* número/unitless */
-div { line-height: 1.2em; font-size: 10pt; } /* longitud */
-div { line-height: 120%; font-size: 10pt; } /* porcentaje */
-div { font: 10pt/1.2 Georgia,"Bitstream Charter",serif; } /* font shorthand */A menudo es más conveniente establecer el line-height usando {{cssxref("font")}} abreviadamente, como se muestra arriba, pero esto también requiere especificar la propiedad font-family.
Notas
- -Especificaciones
- --
-
Compatibilidad de navegadores
- -| Navegador | -Versión mínima | -
|---|---|
| Internet Explorer | -? | -
| Firefox | -1 | -
| Netscape | -? | -
| Opera | -? | -
| Safari | -? | -
Ver también
- -{{ Cssxref("font-size") }}
diff --git a/files/es/web/css/line-height/index.md b/files/es/web/css/line-height/index.md new file mode 100644 index 00000000000000..5197c08d2f5225 --- /dev/null +++ b/files/es/web/css/line-height/index.md @@ -0,0 +1,96 @@ +--- +title: line-height +slug: Web/CSS/line-height +tags: + - CSS + - CSS:Referencias + - Referencia_CSS + - Todas_las_Categorías + - para_revisar + - páginas_a_traducir +translation_of: Web/CSS/line-height +--- +``` +https://developer.mozilla.org/en-US/docs/Web/CSS{{ CSSRef() }} +/*Keyword value*/ +line-height: normal; + +/ +``` + +### Resumen + +La propiedad [CSS](/es/docs/Web/CSS) `line-height`[](/es/docs/Web/CSS)establece la altura de una casilla remarcada por líneas. Comúnmente se usa para establecer la distancia entre líneas de texto. A nivel de elementos de bloque, define la altura mínima de las casillas encuadradas por líneas dentro del elemento. En elementos en linea no reemplazables, especifica la altura que se usa para calcular la altura de la casila encuadrada por líneas. + +- {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("normal") }} +- Aplicable a: todos los elementos. +- {{ Cssxref("inheritance", "Valor heredado") }}: sí +- Porcentajes: se refieren a tamaño de la fuente del elemento mismo. +- Medio: {{ Xref_cssvisual() }} +- {{ Cssxref("computed value", "Valor calculado") }}: para los valores \{{ CSSRef() }}
- -Resumen
- -La imagen de lista (list-style-image) define la imagen que será utilizada como marcador del listado.
-
-
Sintaxis
- -list-style-image: <uri> | none | inherit -- -
Valores
- --
-
Ejemplos
- -HTML
- -<ul> - <li>Item 1</li> - <li>Item 2</li> -</ul> -- -
CSS
- -ul {
- list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif")
-}
-
-Result
- -{{EmbedLiveSample('Ejemplos')}}
- -Especificaciones
- --
-
Compatibilidad con navegadores
- -Ver también
- -{{ Cssxref("list-style") }}, {{ Cssxref("list-style-type") }}, {{ Cssxref("list-style-position") }}
- -{{ languages( { "fr": "fr/CSS/list-style-image", "pl": "pl/CSS/list-style-image", "en": "en/CSS/list-style-image" } ) }}
diff --git a/files/es/web/css/list-style-image/index.md b/files/es/web/css/list-style-image/index.md new file mode 100644 index 00000000000000..ceaf82d1a71cd7 --- /dev/null +++ b/files/es/web/css/list-style-image/index.md @@ -0,0 +1,68 @@ +--- +title: list-style-image +slug: Web/CSS/list-style-image +tags: + - CSS + - CSS:Referencias + - Referencia_CSS + - Todas_las_Categorías +translation_of: Web/CSS/list-style-image +--- +{{ CSSRef() }} + +### Resumen + +La imagen de lista (`list-style-image`) define la imagen que será utilizada como marcador del [listado](es/HTML/Element/li). + +- {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("none", "ninguno") }} +- Se aplica a: elementos con 'display: list-item' +- {{ Cssxref("inheritance", "Valor heredado") }}: Sí +- Porcentajes: n/a +- Medio: {{ Cssxref("Media:Visual", "visual") }} +- {{ Cssxref("computed value", "Valor calculado") }}: URI absoluta o `none` + +### Sintaxis + +``` +list-style-image:-
+
{{ CSSRef() }}
- -Resumen
- -La posición de la lista (list-style-position) especifica donde será colocado el marcador de la lista en relación a la caja principal.
-
-
Sintaxis
- -list-style-position: inside | outside | inherit -- -
Valores
- --
-
Ejemplos
- -HTML
- -<ul class="one"> List 1 - <li>List Item 1-1</li> - <li>List Item 1-2</li> - <li>List Item 1-3</li> - <li>List Item 1-4</li> -</ul> -<ul class="two"> List 2 - <li>List Item 2-1</li> - <li>List Item 2-2</li> - <li>List Item 2-3</li> - <li>List Item 2-4</li> -</ul> -<ul class="three"> List 3 - <li>List Item 3-1</li> - <li>List Item 3-2</li> - <li>List Item 3-3</li> - <li>List Item 3-4</li> -</ul>- -
CSS
- -.one {
- list-style:square inside;
-}
-
-.two {
- list-style-position: outside;
- list-style-type: circle;
-}
-
-.three {
- list-style-image: url("https://mdn.mozillademos.org/files/11979/starsolid.gif");
- list-style-position: inherit;
-}
-
-Result
- -{{EmbedLiveSample("Ejemplos","200","420")}}
- -Especificaciones
- --
-
Compatibilidad con navegadores
- -Ver también
- -{{ Cssxref("list-style") }}, {{ Cssxref("list-style-type") }}, {{ Cssxref("list-style-image") }}
- -{{ languages( { "fr": "fr/CSS/list-style-position", "pl": "pl/CSS/list-style-position", "en": "en/CSS/list-style-position" } ) }}
diff --git a/files/es/web/css/list-style-position/index.md b/files/es/web/css/list-style-position/index.md new file mode 100644 index 00000000000000..0468110c8e0347 --- /dev/null +++ b/files/es/web/css/list-style-position/index.md @@ -0,0 +1,94 @@ +--- +title: list-style-position +slug: Web/CSS/list-style-position +tags: + - CSS + - CSS:Referencias + - Referencia_CSS + - Todas_las_Categorías +translation_of: Web/CSS/list-style-position +--- +{{ CSSRef() }} + +### Resumen + +La posición de la lista (`list-style-position`) especifica donde será colocado el marcador de la lista en relación a la caja principal. + +- {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("outside", "outside (afuera)") }} +- Se aplica a: elementos con 'display: list-item' +- {{ Cssxref("inheritance", "Valor heredado") }}: Sí +- Porcentajes: n/a +- Medio: {{ Cssxref("Media:Visual", "visual") }} +- {{ Cssxref("computed value", "Valor calculado") }}: como especificado + +### Sintaxis + +``` +list-style-position: inside | outside | inherit +``` + +### Valores + +- `outside` + - : el marcador se encuentra fuera de la caja principal. +- `inside` + - : el marcador es la primera caja en línea dentro de la caja principal, después de la cual fluye el resto de los elementos. + +## Ejemplos + +### HTML + +```html +- List 1
+
- List 2
+
- List 3
+
{{ CSSRef() }}
- -Resumen
- -El {{ Cssxref("list-style-type", "tipo de estilo de lista") }} especifica la apariencia del listado.
- --
-
Sintaxis
- - list-style-type: <std-list-style-name> | {{ Cssxref("none") }} | {{ Cssxref("inherit") }} ;
-
-
-Valores
- --
-
Ejemplos
- -CSS
- -ol.normal {
- list-style-type: upper-alpha;
-}
-
-/* or use the shortcut "list-style": */
-ol.shortcut {
- list-style: upper-alpha;
-}
-
-HTML
- -<ol class="normal">List 1 - <li>Hello</li> - <li>World</li> - <li>What's up?</li> -</ol> - -<ol class="shortcut">List 2 - <li>Looks</li> - <li>Like</li> - <li>The</li> - <li>Same</li> -</ol> -- -
Result
- -{{EmbedLiveSample("Ejemplos","200","300")}}
- -Notas
- -Ésta especificación no define el comportamiento en el caso de una lista con más elementos que la cantidad de letras del alfabeto utilizado. Por ejemplo, después de 26 letras, el resultado con lower-latin no es definido (y continuará como: AA, AB, AC,...). Por eso, para listas largas, es recomendable utilizar números.
Especificaciones
- --
-
Compatibilidad con navegadores
- -Ver también
- -{{ Cssxref("list-style") }}, {{ Cssxref("list-style-image") }}, {{ Cssxref("list-style-position") }}
diff --git a/files/es/web/css/list-style-type/index.md b/files/es/web/css/list-style-type/index.md new file mode 100644 index 00000000000000..c22894f8ba8c70 --- /dev/null +++ b/files/es/web/css/list-style-type/index.md @@ -0,0 +1,115 @@ +--- +title: list-style-type +slug: Web/CSS/list-style-type +tags: + - CSS + - CSS:Referencias + - Referencia_CSS + - Todas_las_Categorías +translation_of: Web/CSS/list-style-type +--- +{{ CSSRef() }} + +### Resumen + +El {{ Cssxref("list-style-type", "tipo de estilo de lista") }} especifica la apariencia del [listado](/es/HTML/Element/li). + +- {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("disc", "disco/punto") }} +- Se aplica a: elementos con 'display: list-item' +- {{ Cssxref("inheritance", "Valor heredado") }}: Sí +- Porcentajes: n/a +- Medio: {{ Cssxref("Media:Visual", "visual") }} +- {{ Cssxref("computed value", "Valor calculado") }}: según se especificó + +### Sintaxis + +``` + list-style-type:- List 1
+
- List 2
+
{{ CSSRef() }}
- -Resumen
- -La propiedad de estilo de lista (list-style) permite definir de golpe todos los parámetros: {{ Cssxref("list-style-type") }}, {{ Cssxref("list-style-image") }}, y {{ Cssxref("list-style-position") }}.
-
-
Sintaxis
- -list-style: {{ mediawiki.external(' list-style-type || list-style-position || list-style-image ') }} | inherit
- -Valores
- --
-
Ejemplos
- -HTML
- -List 1 -<ul class="one"> - <li>List Item1</li> - <li>List Item2</li> - <li>List Item3</li> -</ul> -List 2 -<ul class="two"> - <li>List Item A</li> - <li>List Item B</li> - <li>List Item C</li> -</ul> -- -
CSS
- -.one {
- list-style: circle;
-}
-
-.two {
- list-style: square inside;
-}
-
-Resultado
- -{{EmbedLiveSample('Ejemplos')}}
- -Especificaciones
- --
-
Compatibilidad con navegadores
- -Ver también
- -{{ Cssxref("list-style-type") }}, {{ Cssxref("list-style-image") }}, {{ Cssxref("list-style-position")}}
diff --git a/files/es/web/css/list-style/index.md b/files/es/web/css/list-style/index.md new file mode 100644 index 00000000000000..7a6143841c0f05 --- /dev/null +++ b/files/es/web/css/list-style/index.md @@ -0,0 +1,81 @@ +--- +title: list-style +slug: Web/CSS/list-style +tags: + - CSS + - CSS:Referencias + - Referencia_CSS + - Todas_las_Categorías +translation_of: Web/CSS/list-style +--- +{{ CSSRef() }} + +## Resumen + +La propiedad de estilo de lista (`list-style`) permite definir de golpe todos los parámetros: {{ Cssxref("list-style-type") }}, {{ Cssxref("list-style-image") }}, y {{ Cssxref("list-style-position") }}. + +- {{ Cssxref("initial", "Valor inicial") }}: ver propiedades individuales +- Se aplica a: elementos con 'display: list-item' +- {{ Cssxref("inheritance", "Valor heredado") }}: no +- Porcentajes: N/A +- Medio: {{ Cssxref("Media:Visual", "visual") }} +- {{ Cssxref("computed value", "Valor calculado") }}: ver propiedades individuales + +## Sintaxis + +list-style: {{ mediawiki.external(' list-style-type || list-style-position || list-style-image ') }} | inherit + +### Valores + +ver {{ Cssxref("list-style-type", "list-style-type") }}. + +ver {{ Cssxref("list-style-image", "list-style-image") }}. + +ver {{ Cssxref("list-style-position", "list-style-position") }}. + +## Ejemplos + +### HTML + +```html +List 1 +-
+
-
+
{{CSSRef}}{{SeeCompatTable}}
- -La propiedad de CSS margin-block-start CSS property defines the logical block start margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation.
{{EmbedInteractiveExample("pages/css/margin-block-start.html")}}
-
-
-
-Sintaxis
- -/* <length> values */ -margin-block-start: 10px; /* An absolute length */ -margin-block-start: 1em; /* relative to the text size */ -margin-block-start: 5%; /* relative to the nearest block container's width */ - -/* Keyword values */ -margin-block-start: auto; - -/* Global values */ -margin-block-start: inherit; -margin-block-start: initial; -margin-block-start: unset; -- -
Esto corresponde a las propiedades {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, o {{cssxref("margin-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
- -Se relaciona con {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-start")}}, and {{cssxref("margin-inline-end")}}, que define las otras márgenes del elemento.
- -{{cssinfo}}
- -Valores
- -La propiedad margin-block-start toma los mismos valores de la propiedad {{cssxref("margin-left")}}.
Sintaxis formal
- -{{csssyntax}} - -Ejemplo
- -Contenido HTML
- -<div> - <p class="exampleText">Example text</p> -</div> -- -
Contenido CSS
- -div {
- background-color: yellow;
- width: 120px;
- height: 120px;
-}
-
-.exampleText {
- writing-mode: vertical-lr;
- margin-block-start: 20px;
- background-color: #c8c800;
-}
-
-{{EmbedLiveSample("Ejemplo", 140, 140)}}
- -Especificación
- -| Especificación | -Estado | -Comentario | -
|---|---|---|
| {{SpecName("CSS Logical Properties", "#propdef-margin-block-start", "margin-block-start")}} | -{{Spec2("CSS Logical Properties")}} | -Definición inicial. | -
Compatibilidad en navegadores
- - - -{{Compat("css.properties.margin-block-start")}}
- -Mira también
- --
-
+
+```
+
+### Contenido CSS
+
+```css
+div {
+ background-color: yellow;
+ width: 120px;
+ height: 120px;
+}
+
+.exampleText {
+ writing-mode: vertical-lr;
+ margin-block-start: 20px;
+ background-color: #c8c800;
+}
+```
+
+{{EmbedLiveSample("Ejemplo", 140, 140)}}
+
+## Especificación
+
+| Especificación | Estado | Comentario |
+| ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | ------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-margin-block-start", "margin-block-start")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. |
+
+## Compatibilidad en navegadores
+
+{{Compat("css.properties.margin-block-start")}}
+
+## Mira también
+
+- Las propiedades físicas mapeadas: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, y {{cssxref("margin-left")}}
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/es/web/css/margin-block/index.html b/files/es/web/css/margin-block/index.html
deleted file mode 100644
index 71382a98af9d89..00000000000000
--- a/files/es/web/css/margin-block/index.html
+++ /dev/null
@@ -1,108 +0,0 @@
----
-title: margin-block
-slug: Web/CSS/margin-block
-translation_of: Web/CSS/margin-block
----
-Example text
+{{CSSRef}}{{SeeCompatTable}}
- -La propiedad de CSS margin-block define el bloque lógico de inicio y fin de las márgenes de un elemento, que se asigna a las márgenes físicas en función del modo de escritura del elemento, la direccionalidad y la orientación del texto.
/* <length> values */ -margin-block: 10px 20px; /* An absolute length */ -margin-block: 1em 2em; /* relative to the text size */ -margin-block: 5% 2%; /* relative to the nearest block container's width */ -margin-block: 10px; /* sets both start and end values */ - -/* Keyword values */ -margin-block: auto; - -/* Global values */ -margin-block: inherit; -margin-block: initial; -margin-block: unset; -- - - -
Estos valores corresponden a {{CSSxRef("margin-top")}} y {{CSSxRef("margin-bottom")}}, o {{CSSxRef("margin-right")}}, y {{CSSxRef("margin-left")}} depende de los valores definidos para {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, y {{CSSxRef("text-orientation")}}.
- -Propiedades que lo constituyen
- -Los valores se pueden establecer individualmente como {{CSSxRef("margin-block-start")}} y {{CSSxRef("margin-block-end")}}. La propiedad de dirección en línea es {{CSSxRef("margin-inline")}} que establece {{CSSxRef("margin-inline-start")}}, y {{CSSxRef("margin-inline-end")}}.
- -Sintaxis
- -Valores
- -La propiedad margin-block toma los mismos valores de la propiedad {{CSSxRef("margin-left")}}.
Definición formal
- -{{cssinfo}}
- -Sintaxis formal
- -{{CSSSyntax}} - -Ejemplo
- -Definiendo el comienzo del bloque y el fin de los margenes
- -HTML
- -<div> - <p class="exampleText">Example text</p> -</div> -- -
CSS
- -div {
- background-color: yellow;
- width: 120px;
- height: 120px;
-}
-
-.exampleText {
- writing-mode: vertical-rl;
- margin-block: 20px 40px;
- background-color: #c8c800;
-}
-
-Resultado
- -{{EmbedLiveSample("Ejemplo", 140, 140)}}
- -Especificación
- -| Especificación | -Estado | -Comentario | -
|---|---|---|
| {{SpecName("CSS Logical Properties", "#propdef-margin-block", "margin-block")}} | -{{Spec2("CSS Logical Properties")}} | -Definición inicial. | -
{{CSSInfo}}
- -Compatibilidad en navegadores
- - - -{{Compat("css.properties.margin-block")}}
- -Mira también
- --
-
+
+```
+
+#### CSS
+
+```css
+div {
+ background-color: yellow;
+ width: 120px;
+ height: 120px;
+}
+
+.exampleText {
+ writing-mode: vertical-rl;
+ margin-block: 20px 40px;
+ background-color: #c8c800;
+}
+```
+
+#### Resultado
+
+{{EmbedLiveSample("Ejemplo", 140, 140)}}
+
+## Especificación
+
+| Especificación | Estado | Comentario |
+| -------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-margin-block", "margin-block")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. |
+
+{{CSSInfo}}
+
+## Compatibilidad en navegadores
+
+{{Compat("css.properties.margin-block")}}
+
+## Mira también
+
+- Las propiedades físicas mapeadas: {{CSSxRef("margin-top")}}, {{CSSxRef("margin-right")}}, {{CSSxRef("margin-bottom")}}, y {{CSSxRef("margin-left")}}
+- {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}
diff --git a/files/es/web/css/margin-bottom/index.html b/files/es/web/css/margin-bottom/index.html
deleted file mode 100644
index ec02963a2ec65c..00000000000000
--- a/files/es/web/css/margin-bottom/index.html
+++ /dev/null
@@ -1,85 +0,0 @@
----
-title: margin-bottom
-slug: Web/CSS/margin-bottom
-translation_of: Web/CSS/margin-bottom
----
-Example text
+{{CSSRef()}}
-
-Summary
- -
El margin-bottom CSS (margen-inferior) es la propiedad de un elemento que establece el espacio requerido en la parte inferior de un elemento. Tambien se permiten valores negativos.
Esta propiedad no tiene ningun efecto sobre los elementos en linea non-replaced , como {{HTMLElement("tt")}} o {{HTMLElement("span")}}.
- -{{cssinfo}}
- -Syntax
- -Formal syntax: {{csssyntax("margin-bottom")}}- -
margin-bottom: 10px; /* Una longitud absoluta (sin redimension) */ -margin-bottom: 1em; /* Una longitud en relacion con el tamaño del texto */ -margin-bottom: 5%; /* Un margen respecto al ancho de su objeto padre (el que lo contiene) */ -margin-bottom: auto; - -margin-bottom: inherit; /*margen heredado*/ -- -
Values
- --
-
Examples
- -.content { margin-bottom: 5%; }
-.sidebox { margin-bottom: 10px; }
-.logo { margin-bottom: -5px; }
-#header { margin-bottom: 1em; }
-
-
-
-
-Specifications
- -| Specification | -Status | -Comment | -
|---|---|---|
| {{SpecName('CSS3 Box', '#the-margin', 'margin-bottom')}} | -{{Spec2('CSS3 Box')}} | -No significant change. | -
| {{SpecName('CSS3 Transitions', '#animatable-css', 'margin-bottom')}} | -{{Spec2('CSS3 Transitions')}} | -Defines margin-bottom as animatable. |
-
| {{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-bottom')}} | -{{Spec2('CSS2.1')}} | -Removes its effect on inline elements. | -
| {{SpecName('CSS1', '#margin-bottom', 'margin-bottom')}} | -{{Spec2('CSS1')}} | -Initial definition. | -
Browser compatibility
- -{{Compat("css.properties.margin-bottom")}} diff --git a/files/es/web/css/margin-bottom/index.md b/files/es/web/css/margin-bottom/index.md new file mode 100644 index 00000000000000..89d9a0fd80071f --- /dev/null +++ b/files/es/web/css/margin-bottom/index.md @@ -0,0 +1,62 @@ +--- +title: margin-bottom +slug: Web/CSS/margin-bottom +translation_of: Web/CSS/margin-bottom +--- +{{CSSRef()}} + +## Summary + +El `margin-bottom` [CSS](/es/docs/CSS) (_margen-inferior_) es la propiedad de un elemento que establece el espacio requerido en la parte inferior de un elemento. Tambien se permiten valores negativos. + +Esta propiedad no tiene ningun efecto sobre los elementos en linea _non-replaced_ , como {{HTMLElement("tt")}} o {{HTMLElement("span")}}. + +{{cssinfo}} + +## Syntax + +``` +Formal syntax: {{csssyntax("margin-bottom")}} +``` + +``` +margin-bottom: 10px; /* Una longitud absoluta (sin redimension) */ +margin-bottom: 1em; /* Una longitud en relacion con el tamaño del texto */ +margin-bottom: 5%; /* Un margen respecto al ancho de su objeto padre (el que lo contiene) */ +margin-bottom: auto; + +margin-bottom: inherit; /*margen heredado*/ +``` + +### Values + +- `{{CSSRef}}{{SeeCompatTable}}
- -La propiedad de CSS margin-inline-end define el margen final lógico en línea de un elemento, que se asigna a un margen físico en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. En otras palabras, corresponde a las propiedades {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} o {{cssxref("margin-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
{{EmbedInteractiveExample("pages/css/margin-inline-end.html")}}
-
-
-
-Sintaxis
- -/* <length> values */ -margin-inline-end: 10px; /* An absolute length */ -margin-inline-end: 1em; /* relative to the text size */ -margin-inline-end: 5%; /* relative to the nearest block container's width */ - -/* Keyword values */ -margin-inline-end: auto; - -/* Global values */ -margin-inline-end: inherit; -margin-inline-end: initial; -margin-inline-end: unset; -- -
Se relaciona con {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, and {{cssxref("margin-inline-start")}}, que define las otras márgenes del elemento.
- -{{cssinfo}}
- -Valores
- -La propiedad margin-inline-end toma los mismos valores de la propiedad {{cssxref("margin-left")}}.
Sintaxis formal
- -{{csssyntax}} - -Ejemplo
- -Contenido HTML
- -<div> - <p class="exampleText">Example text</p> -</div> -- -
Contenido CSS
- -div {
- background-color: yellow;
- width: 120px;
- height: 120px;
-}
-
-.exampleText {
- writing-mode: vertical-lr;
- margin-inline-end: 20px;
- background-color: #c8c800;
-}
-
-{{EmbedLiveSample("Ejemplo", 140, 140)}}
- -Especificación
- -| Especificación | -Estado | -Comentario | -
|---|---|---|
| {{SpecName("CSS Logical Properties", "#propdef-margin-inline-end", "margin-inline-end")}} | -{{Spec2("CSS Logical Properties")}} | -Definición inicial. | -
Compatibilidad en navegadores
- - - -{{Compat("css.properties.margin-inline-end")}}
- -Mira también
- --
-
+
+```
+
+### Contenido CSS
+
+```css
+div {
+ background-color: yellow;
+ width: 120px;
+ height: 120px;
+}
+
+.exampleText {
+ writing-mode: vertical-lr;
+ margin-inline-end: 20px;
+ background-color: #c8c800;
+}
+```
+
+{{EmbedLiveSample("Ejemplo", 140, 140)}}
+
+## Especificación
+
+| Especificación | Estado | Comentario |
+| ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | ------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-margin-inline-end", "margin-inline-end")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. |
+
+## Compatibilidad en navegadores
+
+{{Compat("css.properties.margin-inline-end")}}
+
+## Mira también
+
+- {{cssxref("margin-inline-start")}}
+- Las propiedades físicas mapeadas: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, y {{cssxref("margin-left")}}
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/es/web/css/margin-inline-start/index.html b/files/es/web/css/margin-inline-start/index.html
deleted file mode 100644
index 08517b655a5b2f..00000000000000
--- a/files/es/web/css/margin-inline-start/index.html
+++ /dev/null
@@ -1,96 +0,0 @@
----
-title: margin-inline-start
-slug: Web/CSS/margin-inline-start
-translation_of: Web/CSS/margin-inline-start
----
-Example text
+{{CSSRef}}{{SeeCompatTable}}
- -The margin-inline-start define el margen de inicio en línea lógico de un elemento, que se asigna a un margen físico según el modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a la las propiedades {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, o {{cssxref("margin-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
{{EmbedInteractiveExample("pages/css/margin-inline-start.html")}}
-
-
-
-Sintaxis
- -/* <length> values */ -margin-inline-start: 10px; /* An absolute length */ -margin-inline-start: 1em; /* relative to the text size */ -margin-inline-start: 5%; /* relative to the nearest block container's width */ - -/* Keyword values */ -margin-inline-start: auto; - -/* Global values */ -margin-inline-start: inherit; -- -
Se relaciona con {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, and {{cssxref("margin-inline-end")}}, que define las otras márgenes del elemento.
- -{{cssinfo}}
- -Valores
- -La propiedad margin-inline-start toma los mismos valores de la propiedad {{cssxref("margin-left")}}.
Sintaxis formal
- -{{csssyntax}} - -Ejemplo
- -Contenido HTML
- -<div> - <p class="exampleText">Example text</p> -</div> -- -
Contenido CSS
- -div {
- background-color: yellow;
- width: 120px;
- height: 120px;
-}
-
-.exampleText {
- writing-mode: vertical-lr;
- margin-inline-start: 20px;
- background-color: #c8c800;
-}
-
-{{EmbedLiveSample("Ejemplo", 140, 140)}}
- -Especificación
- -| Especificación | -Estado | -Comentario | -
|---|---|---|
| {{SpecName("CSS Logical Properties", "#propdef-margin-inline-start", "margin-inline-start")}} | -{{Spec2("CSS Logical Properties")}} | -Definición inicial. | -
Compatibilidad en navegadores
- - - -{{Compat("css.properties.margin-inline-start")}}
- -Mira también
- --
-
+
+```
+
+### Contenido CSS
+
+```css
+div {
+ background-color: yellow;
+ width: 120px;
+ height: 120px;
+}
+
+.exampleText {
+ writing-mode: vertical-lr;
+ margin-inline-start: 20px;
+ background-color: #c8c800;
+}
+```
+
+{{EmbedLiveSample("Ejemplo", 140, 140)}}
+
+## Especificación
+
+| Especificación | Estado | Comentario |
+| ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-margin-inline-start", "margin-inline-start")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. |
+
+## Compatibilidad en navegadores
+
+{{Compat("css.properties.margin-inline-start")}}
+
+## Mira también
+
+- {{cssxref("margin-inline-end")}}
+- Las propiedades físicas mapeadas: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, y {{cssxref("margin-left")}}
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/es/web/css/margin-inline/index.html b/files/es/web/css/margin-inline/index.html
deleted file mode 100644
index 675f00cfc82bcd..00000000000000
--- a/files/es/web/css/margin-inline/index.html
+++ /dev/null
@@ -1,96 +0,0 @@
----
-title: margin-inline
-slug: Web/CSS/margin-inline
-translation_of: Web/CSS/margin-inline
----
-Example text
+{{CSSRef}}{{SeeCompatTable}}
- -La propiedad de CSS margin-inline define los márgenes lógicos de inicio y final en línea de un elemento, que se asignan a márgenes físicos según el modo de escritura, la direccionalidad y la orientación del texto del elemento.
/* Valores <largo> */ -margin-inline: 10px 20px; /* Un largo absoluto */ -margin-inline: 1em 2em; /* relativo al tamaño del texto */ -margin-inline: 5% 2%; /* relativo al ancho del container del bloque más cercano */ -margin-inline: 10px; /* settear tanto el valor inicial como el final*/ - -/* Valores keyword */ -margin-inline: auto; - -/* Valores globales */ -margin-inline: inherit; -margin-inline: initial; -margin-inline: unset; -- -
Estos valores corresponden a las propiedades {{CSSxRef("margin-top")}} y {{CSSxRef("margin-bottom")}}, o {{CSSxRef("margin-right")}}, y {{CSSxRef("margin-left")}} dependiendo de los valores definidos por {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, y {{CSSxRef("text-orientation")}}.
- -Los valores pueden ser establecidos individualmente como {{CSSxRef("margin-inline-start")}} y {{CSSxRef("margin-inline-end")}}. La propiedad de dirección de bloque es {{CSSxRef("margin-block")}} que establece {{CSSxRef("margin-block-start")}}, y {{CSSxRef("margin-block-end")}}.
- -Sintaxis
- -Valores
- -La propiedad margin-inline toma los mismos valores de la propiedad {{CSSxRef("margin-left")}}.
Sintaxis formal
- -{{CSSSyntax}} - -Ejemplo
- -Contenido HTML
- -<div> - <p class="exampleText">Texto de ejemplo</p> -</div> -- -
Contenido CSS
- -div {
- background-color: yellow;
- width: 120px;
- height: 120px;
-}
-
-.exampleText {
- writing-mode: vertical-rl;
- margin-inline: 20px 40px;
- background-color: #c8c800;
-}
-
-{{EmbedLiveSample("Ejemplo", 140, 140)}}
- -Especificación
- -| Especificación | -Estado | -Comentario | -
|---|---|---|
| {{SpecName("CSS Logical Properties", "#propdef-margin-inline", "margin-inline")}} | -{{Spec2("CSS Logical Properties")}} | -Definición inicial. | -
{{CSSInfo}}
- -Compatibilidad en navegadores
- - - -{{Compat("css.properties.margin-inline")}}
- -Mira también
- --
-
+
+```
+
+### Contenido CSS
+
+```css
+div {
+ background-color: yellow;
+ width: 120px;
+ height: 120px;
+}
+
+.exampleText {
+ writing-mode: vertical-rl;
+ margin-inline: 20px 40px;
+ background-color: #c8c800;
+}
+```
+
+{{EmbedLiveSample("Ejemplo", 140, 140)}}
+
+## Especificación
+
+| Especificación | Estado | Comentario |
+| ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | ------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-margin-inline", "margin-inline")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. |
+
+{{CSSInfo}}
+
+## Compatibilidad en navegadores
+
+{{Compat("css.properties.margin-inline")}}
+
+## Mira también
+
+- Las propiedades físicas mapeadas: {{CSSxRef("margin-top")}}, {{CSSxRef("margin-right")}}, {{CSSxRef("margin-bottom")}}, y {{CSSxRef("margin-left")}}
+- {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}
diff --git a/files/es/web/css/margin-right/index.html b/files/es/web/css/margin-right/index.html
deleted file mode 100644
index 7d7f2b64866ac2..00000000000000
--- a/files/es/web/css/margin-right/index.html
+++ /dev/null
@@ -1,26 +0,0 @@
----
-title: margin-right
-slug: Web/CSS/margin-right
-translation_of: Web/CSS/margin-right
----
-Texto de ejemplo
+Definicion
-El margen derecho de propiedad establece el margen derecho de un elemento.
--
-
Sintaxis JavaScript
-CSS propiedades también se puede cambiar dinámicamente con una JavaScript. Scripting Sintaxis: object.style.marginRight="10px"
-Ejemplo
-h1
-{
-margin-right: 10px
-}
-h2
-{
-margin-right: -20px
-}
-
--
-
{{CSSRef}}
-
-Resumen
- -La propiedad CSS margin establece el margen para los cuatro lados. Es una abreviación para evitar tener que establecer cada lado por separado con las otras propiedades de margen: {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }} y {{ cssxref("margin-left") }}.
También se permiten valores negativos.
- -{{cssinfo}}
- -Sintaxis
- -/* Aplica a todos los cuatro lados */ -margin: 1em; - -/* Vertical | Horizontal */ -margin: 5% auto; - -/* Arriba | Horizontal | Abajo */ -margin: 1em auto 2em; - -/* Arriba | Derecha | Abajo | Izquierda */ -margin: 2px 1em 0 auto; - -/* Valores globales */ -margin: inherit; -margin: initial; -margin: unset; -- -
Valores
- -Acepta uno, dos , tres o cuatro valores de los siguientes:
- --
-
-
-
Sintaxis formal
- -{{csssyntax}} - -Ejemplos
- -Ejemplo simple
- -HTML
- -<div class="ex1"> - margin: auto; - background: gold; - width: 66%; -</div> -<div class="ex2"> - margin: 20px 0 0 -20px; - background: gold; - width: 66%; -</div>- -
CSS
- -.ex1 {
- margin: auto;
- background: gold;
- width: 66%;
-}
-.ex2 {
- margin: 20px 0px 0 -20px;
- background: gold;
- width: 66%;
-}
-
-{{ EmbedLiveSample('Simple_example') }}
- -Otro ejemplo
- -margin: 5%; /* 5% para todos los lados */ - -margin: 10px; /* 10px para todos los lados */ - -margin: 1.6em 20px; /* 1.6em arriba y abajo, 20px izquierda y derecha */ - -margin: 10px 3% 1em; /* 10px arriba, 3% izquierda y derecha, 1em abajo */ - -margin: 10px 3px 30px 5px; /* 10px arriba, 3px derecha, 30px abajo, 5px izquierda */ - -margin: 1em auto; /* 1em arriba y abajo, centrado horizontalmente */ - -margin: auto; /* 0px de margen vertical, centrado horizontalmente */ -- -
Centrado horizontal con margin: 0 auto;
-
-Para centrar algo horizontalmente en navegadores modernos, usa display: flex; justify-content: center; .
Sin embargo, en navegadores antiguos como IE8-9, flexbox no está disponible. Para poder centrar un elemento horizontalmente con respecto a su contenedor, usa margin: 0 auto;
Especificaciones
- -| Specification | -Status | -Comment | -
|---|---|---|
| {{ SpecName('CSS3 Box', '#margin', 'margin') }} | -{{ Spec2('CSS3 Box') }} | -No significant change | -
| {{ SpecName('CSS3 Transitions', '#animatable-css', 'margin') }} | -{{ Spec2('CSS3 Transitions') }} | -Defines margin as animatable. |
-
| {{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }} | -{{ Spec2('CSS2.1') }} | -Removes its effect on inline elements. | -
| {{ SpecName('CSS1', '#margin', 'margin') }} | -{{ Spec2('CSS1') }} | -Initial definition | -
Compatibilidad en navegadores
- -{{Compat("css.properties.margin")}} - -- -
Ver también
- - diff --git a/files/es/web/css/margin/index.md b/files/es/web/css/margin/index.md new file mode 100644 index 00000000000000..5096867c35870e --- /dev/null +++ b/files/es/web/css/margin/index.md @@ -0,0 +1,136 @@ +--- +title: margin +slug: Web/CSS/margin +translation_of: Web/CSS/margin +translation_of_original: Web/CSS/margin-new +--- +{{CSSRef}} + +## Resumen + +La propiedad CSS **`margin`** establece el margen para los cuatro lados. Es una abreviación para evitar tener que establecer cada lado por separado con las otras propiedades de margen: {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }} y {{ cssxref("margin-left") }}. + +También se permiten valores negativos. + +{{cssinfo}} + +## Sintaxis + +```css +/* Aplica a todos los cuatro lados */ +margin: 1em; + +/* Vertical | Horizontal */ +margin: 5% auto; + +/* Arriba | Horizontal | Abajo */ +margin: 1em auto 2em; + +/* Arriba | Derecha | Abajo | Izquierda */ +margin: 2px 1em 0 auto; + +/* Valores globales */ +margin: inherit; +margin: initial; +margin: unset; +``` + +### Valores + +Acepta uno, dos , tres o cuatro valores de los siguientes: + +- `
+ margin: auto;
+ background: gold;
+ width: 66%;
+
+
+ margin: 20px 0 0 -20px;
+ background: gold;
+ width: 66%;
+
+```
+
+CSS
+
+```css
+.ex1 {
+ margin: auto;
+ background: gold;
+ width: 66%;
+}
+.ex2 {
+ margin: 20px 0px 0 -20px;
+ background: gold;
+ width: 66%;
+}
+```
+
+{{ EmbedLiveSample('Simple_example') }}
+
+### Otro ejemplo
+
+```css
+margin: 5%; /* 5% para todos los lados */
+
+margin: 10px; /* 10px para todos los lados */
+
+margin: 1.6em 20px; /* 1.6em arriba y abajo, 20px izquierda y derecha */
+
+margin: 10px 3% 1em; /* 10px arriba, 3% izquierda y derecha, 1em abajo */
+
+margin: 10px 3px 30px 5px; /* 10px arriba, 3px derecha, 30px abajo, 5px izquierda */
+
+margin: 1em auto; /* 1em arriba y abajo, centrado horizontalmente */
+
+margin: auto; /* 0px de margen vertical, centrado horizontalmente */
+```
+
+## Centrado horizontal con `margin: 0 auto;`
+
+Para centrar algo horizontalmente en navegadores modernos, usa `display: flex; justify-content: center;` .
+
+Sin embargo, en navegadores antiguos como IE8-9, **flexbox** no está disponible. Para poder centrar un elemento horizontalmente con respecto a su contenedor, usa `margin: 0 auto;`
+
+## Especificaciones
+
+| Specification | Status | Comment |
+| ------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------------------------- |
+| {{ SpecName('CSS3 Box', '#margin', 'margin') }} | {{ Spec2('CSS3 Box') }} | No significant change |
+| {{ SpecName('CSS3 Transitions', '#animatable-css', 'margin') }} | {{ Spec2('CSS3 Transitions') }} | Defines `margin` as animatable. |
+| {{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }} | {{ Spec2('CSS2.1') }} | Removes its effect on inline elements. |
+| {{ SpecName('CSS1', '#margin', 'margin') }} | {{ Spec2('CSS1') }} | Initial definition |
+
+## Compatibilidad en navegadores
+
+{{Compat("css.properties.margin")}}
+
+## Ver también
+
+- [Entendiendo el colapso de margen](es/docs/Web/CSS/CSS_Modelo_Caja/Mastering_margin_collapsing)
diff --git a/files/es/web/css/mask-clip/index.html b/files/es/web/css/mask-clip/index.html
deleted file mode 100644
index 6b20f8ebb94faf..00000000000000
--- a/files/es/web/css/mask-clip/index.html
+++ /dev/null
@@ -1,56 +0,0 @@
----
-title: '-webkit-mask-clip'
-slug: Web/CSS/mask-clip
-tags:
- - CSS
-translation_of: Web/CSS/mask-clip
-translation_of_original: Web/CSS/-webkit-mask-clip
-original_slug: Web/CSS/-webkit-mask-clip
----
-{{ CSSRef() }}
- -{{ Non-standard_header() }}
- -Si se especificado {{ Cssxref("-webkit-mask-image") }} , -webkit-mask-clip determina el comportamiento de recorte (clipping) de la imagen de máscara.
{{cssinfo}}
- -Síntaxis
- -{{csssyntax}} - -donde:
- --
-
Valores
- --
-
Ejemplo
- -div {
- -webkit-mask-image: url('images/mask.png');
- -webkit-mask-clip: padding;
-}
-
-
-Compatibilidad con los distintos navegadores
- -{{Compat("css.properties.mask-clip")}} - -Ver además
- -{{ cssxref("-webkit-mask") }}, {{ cssxref("-webkit-mask-origin") }}, {{ cssxref("-webkit-mask-box-image") }}, {{ cssxref("-webkit-mask-image") }},{{ cssxref("-webkit-mask-composite") }},{{ cssxref("-webkit-mask-repeat") }}
diff --git a/files/es/web/css/mask-clip/index.md b/files/es/web/css/mask-clip/index.md new file mode 100644 index 00000000000000..9a2ddd694715ae --- /dev/null +++ b/files/es/web/css/mask-clip/index.md @@ -0,0 +1,53 @@ +--- +title: '-webkit-mask-clip' +slug: Web/CSS/mask-clip +tags: + - CSS +translation_of: Web/CSS/mask-clip +translation_of_original: Web/CSS/-webkit-mask-clip +original_slug: Web/CSS/-webkit-mask-clip +--- +{{ CSSRef() }} + +{{ Non-standard_header() }} + +Si se especificado {{ Cssxref("-webkit-mask-image") }} , `-webkit-mask-clip` determina el comportamiento de recorte (clipping) de la imagen de máscara. + +{{cssinfo}} + +## Síntaxis + +{{csssyntax}} + +donde: + +- \{{CSSRef}}{{Non-standard_header}}
-
-Resumen
- -La propiedad CSS -webkit-mask-image establece la imagen de máscara para un elemento. Una imagen de máscara fija que partes del elemento serán visibles de acuerdo a la transparencia de la imagen de máscara.
{{cssinfo}}
- -Sintaxis
- --webkit-mask-image: url(images/mymask.png); --webkit-mask-image: url(images/foo.png), url(images/bar.png); --webkit-mask-image: none; -- -
Valores
- --
-
Sintaxis Formal
- -{{csssyntax}} - -Ejemplos
- -body {
- -webkit-mask-image: url('images/mymask.png');
-}
-
-div {
- -webkit-mask-image: url('images/foo.png'), url('images/bar.png');
-}
-
-p {
- -webkit-mask-image: none;
-}
-
-
-Si se especifican varias imágenes, la región visible que sale como resultado es la combinación de las regiones visibles de cada máscara individual.
- -Compatibilidad con los distintos navegadores.
- -{{Compat("css.properties.mask-image")}} - -Ver además
- -{{cssxref("-webkit-mask")}}, {{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-attachment")}},{{cssxref("-webkit-mask-image")}},{{cssxref("-webkit-mask-composite")}},{{cssxref("-webkit-mask-repeat")}}
diff --git a/files/es/web/css/mask-image/index.md b/files/es/web/css/mask-image/index.md new file mode 100644 index 00000000000000..07874477ad1bf3 --- /dev/null +++ b/files/es/web/css/mask-image/index.md @@ -0,0 +1,66 @@ +--- +title: '-webkit-mask-image' +slug: Web/CSS/mask-image +tags: + - CSS + - No estándar(2) + - Propiedad CSS + - Referencia CSS +translation_of: Web/CSS/mask-image +translation_of_original: Web/CSS/-webkit-mask-image +original_slug: Web/CSS/-webkit-mask-image +--- +{{CSSRef}}{{Non-standard_header}} + +## Resumen + +La propiedad CSS `-webkit-mask-image` establece la imagen de máscara para un elemento. Una imagen de máscara fija que partes del elemento serán visibles de acuerdo a la transparencia de la imagen de máscara. + +{{cssinfo}} + +## Sintaxis + +```css +-webkit-mask-image: url(images/mymask.png); +-webkit-mask-image: url(images/foo.png), url(images/bar.png); +-webkit-mask-image: none; +``` + +### Valores + +- \{{CSSRef}}{{Non-standard_header}}
-
-La propiedad CSS -webkit-mask-origin determina el origen de una imagen de máscara. El valor de la propiedad {{cssxref("-webkit-mask-position")}} se interpreta en relación al valor de esta propiedad. No se aplica cuando -webkit-mask-attachment es fixed.
{{cssinfo}}
- -Síntaxis
- -{{csssyntax}} - -Valores
- --
-
Ejemplos
- -.example {
- border: 10px double;
- padding: 10px;
- -webkit-mask-image: url('mask.png');
-
- /* La imagen de máscara estará dentro del padding */
- -webkit-mask-origin: content;
-}
-
-
-div {
- -webkit-mask-image: url('mask1.png'), url('mask2.png');
- -webkit-mask-origin: padding, content;
-}
-
-
-Compatibilidad con los distintos navegadores.
- -{{Compat("css.properties.mask-origin")}} - -Ver además
- -{{cssxref("-webkit-mask")}}, {{cssxref("-webkit-mask-box-image")}}, {{cssxref("-webkit-mask-attachment")}}, {{cssxref("-webkit-mask-image")}},{{cssxref("-webkit-mask-composite")}}, {{cssxref("-webkit-mask-repeat")}}, {{cssxref("-webkit-mask-clip")}}
diff --git a/files/es/web/css/mask-origin/index.md b/files/es/web/css/mask-origin/index.md new file mode 100644 index 00000000000000..53366775debf1f --- /dev/null +++ b/files/es/web/css/mask-origin/index.md @@ -0,0 +1,56 @@ +--- +title: '-webkit-mask-origin' +slug: Web/CSS/mask-origin +tags: + - CSS + - Referencia +translation_of: Web/CSS/mask-origin +translation_of_original: Web/CSS/-webkit-mask-origin +original_slug: Web/CSS/-webkit-mask-origin +--- +{{CSSRef}}{{Non-standard_header}} + +La propiedad [CSS](/es/docs/Web/CSS) `-webkit-mask-origin` determina el origen de una imagen de máscara. El valor de la propiedad {{cssxref("-webkit-mask-position")}} se interpreta en relación al valor de esta propiedad. No se aplica cuando `-webkit-mask-attachment` es `fixed`. + +{{cssinfo}} + +## Síntaxis + +{{csssyntax}} + +## Valores + +- padding + - : Valor por defecto. La posición de la imagen de máscara es relativa al padding (relleno). (Para cajas solas "`0 0`" es la esquina superior izquierda del límite del padding, "`100% 100%`" es la esquina inferior derecha.) +- border + - : La posición de la imagen de máscara es relativa al borde. +- content + - : La posición de la imagen de máscara es relativa al contenido. + +## Ejemplos + +```css +.example { + border: 10px double; + padding: 10px; + -webkit-mask-image: url('mask.png'); + + /* La imagen de máscara estará dentro del padding */ + -webkit-mask-origin: content; +} +``` + +```css +div { + -webkit-mask-image: url('mask1.png'), url('mask2.png'); + -webkit-mask-origin: padding, content; +} +``` + +## Compatibilidad con los distintos navegadores. + +{{Compat("css.properties.mask-origin")}} + +## Ver además + +{{cssxref("-webkit-mask")}}, {{cssxref("-webkit-mask-box-image")}}, {{cssxref("-webkit-mask-attachment")}}, {{cssxref("-webkit-mask-image")}},{{cssxref("-webkit-mask-composite")}}, {{cssxref("-webkit-mask-repeat")}}, {{cssxref("-webkit-mask-clip")}} diff --git a/files/es/web/css/mask-position/index.html b/files/es/web/css/mask-position/index.html deleted file mode 100644 index ebaf6d8322bc1e..00000000000000 --- a/files/es/web/css/mask-position/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: '-webkit-mask-position' -slug: Web/CSS/mask-position -tags: - - CSS - - No estándar(2) - - Propiedad CSS - - Referencia CSS -translation_of: Web/CSS/mask-position -translation_of_original: Web/CSS/-webkit-mask-position -original_slug: Web/CSS/-webkit-mask-position ---- -{{CSSRef}}{{Non-standard_header}}
-
-Sumario
- -la propiedad CSS -webkit-mask-position fija la posición inicial de una máscara de imagen.- -
{{cssinfo}}
- -Síntaxis
- -{{csssyntax}} - -Valores
- -Acepta uno o dos valores. Se permiten valores negativos para {{cssxref("<percentage>")}} y {{cssxref("<length>")}}.
- --
-
-
-
Ejemplos
- -.exampleOne {
- -webkit-mask-image: url(mask.png);
- -webkit-mask-position: bottom right;
-}
-
-.exampleTwo {
- -webkit-mask-image: url(mask.png);
- -webkit-mask-position: 25%;
-}
-
-
-Especificaciones
- -No forma parte de ninguna especificación.
- -Compatibilidad con los distintos nevegadores
- -{{Compat("css.properties.mask-position")}} - -Ver tambien
- -{{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-box-image")}}, {{cssxref("-webkit-mask-attachment")}}, {{cssxref("-webkit-mask-clip")}}, {{cssxref("-webkit-mask-image")}}, {{cssxref("-webkit-mask-composite")}}, {{cssxref("-webkit-mask-repeat")}}
diff --git a/files/es/web/css/mask-position/index.md b/files/es/web/css/mask-position/index.md new file mode 100644 index 00000000000000..801be75d365d65 --- /dev/null +++ b/files/es/web/css/mask-position/index.md @@ -0,0 +1,73 @@ +--- +title: '-webkit-mask-position' +slug: Web/CSS/mask-position +tags: + - CSS + - No estándar(2) + - Propiedad CSS + - Referencia CSS +translation_of: Web/CSS/mask-position +translation_of_original: Web/CSS/-webkit-mask-position +original_slug: Web/CSS/-webkit-mask-position +--- +{{CSSRef}}{{Non-standard_header}} + +## Sumario + +La propiedad CSS `-webkit-mask-position` fija la posición inicial de una máscara de imagen. + +{{cssinfo}} + +## Síntaxis + +{{csssyntax}} + +## Valores + +Acepta uno o dos valores. Se permiten valores negativos para {{cssxref("<percentage>")}} y {{cssxref("<length>")}}. + +- Si sólo se especifica un valor, el segundo valor se supone que es center. +- El primer valor representa la posición horizontal y el segundo la posición vertical (si al menos un valor no es una palabra clave). + + + +- `{{CSSRef}}{{Non-standard_header}}
-
-Resumen
- -La propiedad -webkit-mask-repeat especifica si la imagen de máscara se repite (en mosaico) y cómo se repite.
{{cssinfo}}
- -Síntaxis
- -/* Palabras clave de valor únicas */ --webkit-mask-repeat: repeat; --webkit-mask-repeat: repeat-x; --webkit-mask-repeat: repeat-y; --webkit-mask-repeat: no-repeat; - -/* Palabras clave de valor mútiple */ --webkit-mask-repeat: repeat, repeat-x, no-repeat; - -/* Valores globlaes */ --webkit-mask-repeat: inherit; --webkit-mask-repeat: initial; --webkit-mask-repeat: unset; -- -
Valores
- --
-
Síntaxis Formal
- -{{csssyntax}} - -Ejemplos
- -.exampleone {
- -webkit-mask-image: url('mask.png');
- -webkit-mask-repeat: repeat-x;
-}
-
-.exampletwo {
- -webkit-mask-image: url('mask.png');
- -webkit-mask-repeat: no-repeat;
-}
-
-
-Soporte para múltiples imágenes de máscara
- -Se puede especificar, seperados por comas, un <repeat-style> para cada una de las imágenes de máscara:
.examplethree {
- -webkit-mask-image: url('mask1.png'), url('mask2.png');
- -webkit-mask-repeat: repeat-x, repeat-y;
-}
-
-
-Cada imagen se relaciona con el correspondiente estilo, desde la primera especificada hasta la última.
- -Compatibilidad con los distintos navegadores
- -{{Compat("css.properties.mask-repeat")}} - -Ver además
- -{{cssxref("-webkit-mask")}}, {{cssxref("-webkit-mask-box-image")}}, {{cssxref("-webkit-mask-clip")}}, {{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-attachment")}}, {{cssxref("-webkit-mask-image")}}, {{cssxref("-webkit-mask-composite")}}
diff --git a/files/es/web/css/mask-repeat/index.md b/files/es/web/css/mask-repeat/index.md new file mode 100644 index 00000000000000..c10816b3e31857 --- /dev/null +++ b/files/es/web/css/mask-repeat/index.md @@ -0,0 +1,88 @@ +--- +title: '-webkit-mask-repeat' +slug: Web/CSS/mask-repeat +tags: + - CSS + - No estandar + - Propiedad CSS + - Referencia + - Web +translation_of: Web/CSS/mask-repeat +translation_of_original: Web/CSS/-webkit-mask-repeat +original_slug: Web/CSS/-webkit-mask-repeat +--- +{{CSSRef}}{{Non-standard_header}} + +## Resumen + +`La propiedad -webkit-mask-repeat` especifica si la imagen de máscara se repite (en mosaico) y cómo se repite. + +{{cssinfo}} + +## Síntaxis + +```css +/* Palabras clave de valor únicas */ +-webkit-mask-repeat: repeat; +-webkit-mask-repeat: repeat-x; +-webkit-mask-repeat: repeat-y; +-webkit-mask-repeat: no-repeat; + +/* Palabras clave de valor mútiple */ +-webkit-mask-repeat: repeat, repeat-x, no-repeat; + +/* Valores globlaes */ +-webkit-mask-repeat: inherit; +-webkit-mask-repeat: initial; +-webkit-mask-repeat: unset; +``` + +## Valores + +- repeat + - : La máscara de imagen se repite tanto vertical como horizontalmente. +- repeat-x + - : La imagen de máscara de repite sólo horizontalmente. +- repeat-y + - : La imagen de máscara de repite sólo verticalemente. +- no-repeat + - : La máscara de imagen no se repite. Sólo se dibuja una copia suya. El resto del contenido del elemento con máscara no se muestra. + +### Síntaxis Formal + +{{csssyntax}} + +## Ejemplos + +```css +.exampleone { + -webkit-mask-image: url('mask.png'); + -webkit-mask-repeat: repeat-x; +} + +.exampletwo { + -webkit-mask-image: url('mask.png'); + -webkit-mask-repeat: no-repeat; +} +``` + +### Soporte para múltiples imágenes de máscara + +Se puede especificar, seperados por comas, un `{{CSSRef}}{{Non-standard_header}}
-
-Resumen
- -La propiedad -webkit-mask es una manera corta de establecer, en un único sitio en una hoja de estilos, los valores individuales de máscara. -webkit-mask puede ser utilizado para fijar los valores en una o más de las siguiente propiedades: {{Cssxref("-webkit-mask-image")}}, {{Cssxref("-webkit-mask-repeat")}}, {{Cssxref("-webkit-mask-attachment")}}, {{Cssxref("-webkit-mask-position")}}, {{Cssxref("-webkit-mask-origin")}}, y {{Cssxref("-webkit-mask-clip")}}.
{{cssinfo}}
- -Síntaxis
- -/* Palabras clave valor */ --webkit-mask: none; - -/* Valores de imágene */ --webkit-mask: url(mask.png); /* Imagen de pixel usado coo máscara */ --webkit-mask: url(masks.svg#star); /* Elemento dentro de un gráfico SVG usado como máscara */ --webkit-mask: linear-gradient(transparent, black); /* Gradiente usado como máscara */ - -/* Valores combinados */ --webkit-mask: url(masks.svg#star) 40px 20px; /* Elemento dentro de un gráfico SVG usado como máscara y posicionado 40px desde la parte superior y 20px a la izquierda */ --webkit-mask: url(masks.svg#star) 0 0/50px 50px; /* Elemento dentro de un gráfico SVG usado como máscara con una anchura y altura de 50px */ --webkit-mask: url(masks.svg#star) repeat-x; /* Elemento dentro de un gráfico SVG usado como una máscara que se repite horizontalmente */ --webkit-mask: url(masks.svg#star) border; /* Elemento dentro de un gráfico SVG usado como una máscara que sobrepasa la caja que rodea el borde */ --webkit-mask: url(masks.svg#star) text; /* Elemento dentro de un gráfico SVG usado como una máscara que recorta el texto que contiene */ - -/* Valores globales */ --webkit-mask: inherit; --webkit-mask: initial; --webkit-mask: unset; -- -
Valores
- --
-
Síntaxis Formal
- -{{csssyntax}} - -Ejemplos
- -.example {
- -webkit-mask: url('mask.png') no-repeat fixed 20px 20px padding padding;
-}
-
-
-Compatibilidad con los distintos navegadores
- -{{Compat("css.properties.mask")}} - -See also
- --
-
- -
<< Volver
- -Resumen
- -La propiedad max-height se utiliza para definir la altura máxima de un elemento dado. Impide que el valor de la {{ Cssxref("height", "altura") }} pueda llegar a ser más grande que la de max-height.
-
-
Sintaxis
- -max-height: <length> | <percentage> -- -
Valores
- --
-
Ejemplos
- -table { max-width: 75%; }
-
-form { max-width: none; }
-
-
-Notas
- -{{ Cssxref("max-height") }} sobrescribe {{ Cssxref("height") }}, pero no {{ Cssxref("min-height") }}.
- -Especificaciones
- --
-
Compatibilidades
- -| Navegador | -Versión mínima | -
|---|---|
| Internet Explorer | -6 | -
| Netscape | -6 | -
| Opera | -3.5 | -
Ver también
- -{{ Cssxref("Modelo de caja", "modelo de caja") }}, {{ Cssxref("width", "ancho") }}, {{ Cssxref("-moz-box-sizing", "tamaño de cajas -Mozilla") }}, {{ Cssxref("min-height", "altura mínima") }}, {{ Cssxref("max-height", "altura máxima") }}
- -- -
-
-
-
-Categorías
- -Interwiki Languages
- -{{ languages( { "en": "en/CSS/max-height", "fr": "fr/CSS/max-height" } ) }}
diff --git a/files/es/web/css/max-height/index.md b/files/es/web/css/max-height/index.md new file mode 100644 index 00000000000000..f23da6d125bcf0 --- /dev/null +++ b/files/es/web/css/max-height/index.md @@ -0,0 +1,65 @@ +--- +title: max-height +slug: Web/CSS/max-height +tags: + - CSS + - CSS:Referencias + - Todas_las_Categorías +translation_of: Web/CSS/max-height +--- +<< [Volver](es/Gu%c3%ada_de_referencia_de_CSS) + +### Resumen + +La propiedad `max-height` se utiliza para definir la altura máxima de un elemento dado. Impide que el valor de la {{ Cssxref("height", "altura") }} pueda llegar a ser más grande que la de `max-height`. + +- {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("none", "ninguno") }} +- Se aplica a : elementos de bloque o remplazados +- {{ Cssxref("inheritance", "Valor heredado") }}: no +- Porcentajes: se refiere a la altura del bloque contenedor. +- Medio: {{ Xref_cssvisual() }} +- {{ Cssxref("computed value", "Valor calculado") }}: + +### Sintaxis + +``` +max-height:{{CSSRef}}{{SeeCompatTable}}
- -La propiedad de CSS max-inline-size define el tamaño máximo horizontal o vertical de un elemento bloque dependiendo del modo de escritura. Esto corresponde a las propiedades {{cssxref("max-width")}} o {{cssxref("max-height")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}. Si el modo de escritura esta orientado verticalmente, el valor de max-inline-size relacionado al alto máximo del elemento, de lo contrario, se relaciona con el ancho máximo del elemento. Se relaciona con {{cssxref("max-block-size")}}, que define la otra dimensión del elemento.
{{EmbedInteractiveExample("pages/css/max-inline-size.html")}}
-
-
-
-Sintaxis
- -/* <length> values */ -max-inline-size: 300px; -max-inline-size: 25em; - -/* <percentage> values */ -max-inline-size: 75%; - -/* Keyword values */ -max-inline-size: none; -max-inline-size: max-content; -max-inline-size: min-content; -max-inline-size: fit-content; -max-inline-size: fill-available; - -/* Global values */ -max-inline-size: inherit; -max-inline-size: initial; -max-inline-size: unset; -- -
{{cssinfo}}
- -Valores
- -La propiedad max-inline-size toma los mismos valores como las propiedades {{cssxref("max-width")}} y {{cssxref("max-height")}}.
Sintaxis formal
- -{{csssyntax}} - -Ejemplo
- -Contenido HTML
- -<p class="exampleText">Example text</p> -- -
Contenido CSS
- -.exampleText {
- writing-mode: vertical-rl;
- background-color: yellow;
- block-size: 100%;
- max-inline-size: 200px;
-}
-
-{{EmbedLiveSample("Ejemplo")}}
- -Especificación
- -| Especificación | -Estado | -Comentario | -
|---|---|---|
| {{SpecName("CSS Logical Properties", "#propdef-max-inline-size", "max-inline-size")}} | -{{Spec2("CSS Logical Properties")}} | -Definición inicial. | -
Compatibilidad en navegadores
- - - -{{Compat("css.properties.max-inline-size")}}
- -Mira también
- --
-
Example text
+``` + +### Contenido CSS + +```css +.exampleText { + writing-mode: vertical-rl; + background-color: yellow; + block-size: 100%; + max-inline-size: 200px; +} +``` + +{{EmbedLiveSample("Ejemplo")}} + +## Especificación + +| Especificación | Estado | Comentario | +| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------- | +| {{SpecName("CSS Logical Properties", "#propdef-max-inline-size", "max-inline-size")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. | + +## Compatibilidad en navegadores + +{{Compat("css.properties.max-inline-size")}} + +## Mira también + +- Las propiedades físicas mapeadas: {{cssxref("max-width")}} y {{cssxref("max-height")}} +- {{cssxref("writing-mode")}} diff --git a/files/es/web/css/media_queries/index.html b/files/es/web/css/media_queries/index.html deleted file mode 100644 index a02839cadbe13c..00000000000000 --- a/files/es/web/css/media_queries/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: Media queries -slug: Web/CSS/Media_Queries -translation_of: Web/CSS/Media_Queries ---- -{{CSSRef}}
-
-Las consultas de medios le permiten adaptar su sitio o aplicación dependiendo de la presencia o el valor de varias características y parámetros del dispositivo.
- -Son un componente clave del responsive design. Por ejemplo, una consulta de medios puede reducir el tamaño de la fuente en dispositivos pequeños, aumentar el relleno entre párrafos cuando se ve una página en modo vertical, o aumentar el tamaño de los botones en las pantallas táctiles.
- -En CSS, use la {{cssxref ("@ media")}} at-rule para aplicar condicionalmente parte de una hoja de estilo en función del resultado de una consulta de medios. Use {{cssxref ("@ import")}} para aplicar condicionalmente una hoja de estilo completa.
- -- -
Consultas de medios en HTML
- -En HTML, las consultas de medios se pueden aplicar a varios elementos:
- - En el atributo {{HTMLElement ("link")}} {{htmlattrxref ("media", "link")}} del elemento, definen los medios a los que se debe aplicar un recurso vinculado (normalmente CSS).
- En el atributo {{HTMLElement ("source")}} {{htmlattrxref ("media", "source")}} del elemento, definen los medios a los que se debe aplicar esa fuente. (Esto solo es válido dentro de los elementos {{HTMLElement ("picture")}}.)
- En el atributo {{HTMLElement ("style")}} del elemento {{htmlattrxref ("media", "style")}}, definen los medios a los que se debe aplicar el estilo.
- -
Consultas de medios en JavaScript
- -- -
En JavaScript puede usar el método {{domxref ("Window.matchMedia ()")}} para probar la ventana contra una consulta de medios. También puede usar {{domxref ("MediaQueryList.addListener ()")}} para recibir notificaciones cada vez que cambie el estado de una consulta. Con esta funcionalidad, su sitio o aplicación puede responder a los cambios en la configuración, orientación o estado del dispositivo.
- -Puede obtener más información sobre el uso programático de consultas de medios en Pruebas de consultas de medios.
- -Referencias
- -At-rules
- -
-
-
--
-
Guides
- --
-
Especificaciones
- -| Especificación | -Estado | -Comentario | -
|---|---|---|
| {{SpecName('CSS5 Media Queries')}} | -{{Spec2('CSS5 Media Queries')}} | -- |
| {{SpecName('CSS3 Conditional')}} | -{{Spec2('CSS3 Conditional')}} | -- |
| {{SpecName('CSS4 Media Queries')}} | -{{Spec2('CSS4 Media Queries')}} | -- |
| {{SpecName('CSS3 Media Queries')}} | -{{Spec2('CSS3 Media Queries')}} | -- |
| {{SpecName('CSS2.1', 'media.html')}} | -{{Spec2('CSS2.1')}} | -Initial definition | -
Compatibilidades con navegadores
- -@media rule
- - - -{{Compat("css.at-rules.media")}}
- -Ver también
- --
-
{{cssref}}
-
-Las media queries (en español "consultas de medios") son útiles cuando deseas modificar tu página web o aplicación en función del tipo de dispositivo (como una impresora o una pantalla) o de características y parámetros específicos (como la resolución de la pantalla o el ancho del {{glossary("viewport")}} del navegador).
- -Se utilizan para:
- --
-
Sintaxis
- -- -
Las media queries consisten de un tipo de medio opcional y una o más expresiones de características de medios. Varias consultas se pueden combinar utilizando operadores lógicos. No distinguen entre mayúsculas y minúsculas.
- -El resultado de la consulta es "verdadero" cuando el tipo de medio (si se especifica) coincide con el dispositivo en el que se está mostrando el documento y todas las expresiones en el media query son "verdaderas". En este caso, se aplica los estilos correspondientes, siguiendo las reglas usuales de cascada.
- -Las consultas sobre tipos de medios desconocidos son siempre falsas.
- -- -
- -<!-- CSS media query on a link element --> -<link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> - -<!-- CSS media query within a style sheet --> -<style> -@media (max-width: 600px) { - .facet_sidebar { - display: none; - } -} -</style>-
Media Types
- -Los Media Types (tipos de medios) describen la categoría general de un dispositivo. Excepto cuando se utilizan los operadores lógicos not o only, el tipo de medio es opcional y será interpretada como all.
-
-
-
-
-Tipos de medios depreciados: CSS2.1 y Media Queries 3 definieron varios tipos de medios adicionales (tty, tv, projection, handheld, braille, embossed y aural), pero fueron desaprobados en Media Queries 4 y no deberían ser usados. El tipo aural ha sido reemplazado por speech, que es similar.
Operadores Lógicos
- -Se pueden redactar queries utilizando operadores lógicos, incluyendo not, and, y only.
Además se puede combinar múltiples queries en una lista separada por comas múltiples; si cualquiera de las queries en la lista es verdadera, la hoja de estilo asociada es aplicada. Esto es equivalente a una operación lógica "or".
- -and
- -El operador and es usado para colocar juntas múltiples funciones multimedia. Un query básico con el tipo de medio especificado como all puede lucir así:
@media (min-width: 700px) { ... }
-
-Si usted quiere aplicar ese query solo si la pantalla esta en formato horizontal, usted puede utilizar el operador and y colocar la siguiente cadena:
@media (min-width: 700px) and (orientation: landscape) { ... }
-
-La siguiente query solo retornara verdadero si la ventana tiene un ancho de 700px o mas y la pantalla esta en formato horizontal. Ahora si usted quiere aplicar esta opción solo si tipo de medio es TV, usted puede utilizar la siguiente cadena:
- -@media tv and (min-width: 700px) and (orientation: landscape) { ... }
-
-Esta query solo se aplica si el tipo de medio es TV, la ventana tiene 700px de ancho o mas y la pantalla esta en formato horizontal.
- -lista separada por comas
- -Las listas separadas por comas se comportan como el operador or cuando es usado en media queries. Cuando utilice una lista separada por comas y alguno de los queries retorna verdadero, el estilo o la hoja de estilos sera aplicada. Cada query en una lista separada por comas es tratado como una query individual y cualquier operador aplicado a un medio no afectara a los demás. Esto significa que cada query en una lista separada por comas puede tener como objetivo diferentes medios, tipos y estados.
Si usted quiere aplicar una serie de estilos para un equipo con un ancho mínimo de 700px o si el dispositivo esta colocado en horizontal, usted puede escribir lo siguiente:
- -@media (min-width: 700px), handheld and (orientation: landscape) { ... }
-
-Por lo tanto, si esta en una screen con una ventana de 800px de ancho, la declaración del medio retornara verdadero debido a la primera parte de la lista, si aplicamos esto a un dispositivo @media all and (min-width: 700px) podría retornar verdadero a pesar del hecho de que la pantalla falle la verificación tipo de medio del handheld en la segunda query. Por otra parte si estuviese en un handheld con un ancho de ventana de 500px, la primera parte de la lista fallaría pero la segunda parte retornara verdadero debido a la declaración de medio.
not
- -El operador not aplica a todo el query y retorna verdadero si es posible y sino retorna falso (como por ejemplo monochrome en un monitor a color o una ventana con un ancho mínimo de min-width: 700px en un monitor de 600px). Un not negara un query si es posible pero no a todos los query posibles si están ubicados en una lista separada por comas. El operador not no puede ser usado para negar un query individual, solo para un query completo. Por ejemplo, el not en el siguiente query es evaluado al final:
@media not all and (monochrome) { ... }
-
-
-Esto significa que el query es evaluado de la siguiente forma:
- -@media not (all and (monochrome)) { ... }
-
-
-... y no de esta forma:
- -@media (not all) and (monochrome) { ... }
-
-Otro Ejemplo:
- -@media not screen and (color), print and (color) -- -
Es evaluado de la siguiente forma:
- -@media (not (screen and (color))), print and (color)- -
only
- -El operador only previene que navegadores antiguos que no soportan queries con funciones apliquen los estilos asignados:
<link rel="stylesheet" media="only screen and (color)" href="Ejemplo.css" /> -- -
Pseudo-BNF
- -media_query_list: <media_query> [, <media_query> ]* -media_query: [[only | not]? <media_type> [ and <expression> ]*] - | <expression> [ and <expression> ]* -expression: ( <media_feature> [: <value>]? ) -media_type: all | aural | braille | handheld | print | - projection | screen | tty | tv | embossed -media_feature: width | min-width | max-width - | height | min-height | max-height - | device-width | min-device-width | max-device-width - | device-height | min-device-height | max-device-height - | aspect-ratio | min-aspect-ratio | max-aspect-ratio - | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio - | color | min-color | max-color - | color-index | min-color-index | max-color-index - | monochrome | min-monochrome | max-monochrome - | resolution | min-resolution | max-resolution - | scan | grid- -
Los queries son insensibles a las mayúsculas o minúsculas. Media queries que contengan tipos de medios desconocidos siempre retornaran falso.
- -Nota: Los paréntesis son requeridos alrededor de las expresiones, no utilizarlos es un error.
-
-Funciones Multimedia
- -La mayoría de las funciones multimedia pueden ser precedidas por "min-" o "max-" para expresar "greater or equal to" o "less than or equal to". Esto elimina la necesidad de usar los símbolos "<" y ">" los cuales podrían causar conflictos con HTML y XML. Si usted usa una función multimedia sin especificarle un valor, la expresión retornara verdadero si el valor es diferente de cero.
- -Nota: Si una función multimedia no aplica al dispositivo donde el navegador esta corriendo, la expresión que contiene esa función siempre retornara falso. Por Ejemplo, cambiar la relación de aspecto en un dispositivo aural siempre resultara falso.
-
-color
- -Valor: {{cssxref("<color>")}}
- Medio: {{cssxref("Media/Visual")}}
- Acepta prefijos min/max: si
Indica el numero de bits por componente de color del dispositivo de salida. Si el dispositivo no soporta colores, este valor es 0.
- -Nota: Si el componente de color tiene diferente numero de bits por color, entonces el valor mas pequeño es utilizado. Por Ejemplo, si una pantalla utiliza 5 bits para azul y rojo y 6 bits para el verde, entonces se utilizan 5 bits por componente de color. Si el dispositivo utiliza índices de color se usara el mínimo valor de bits por color en la tabla.
-
-Ejemplos
- -Para aplicar una hoja de estilo a todos los dispositivos que soporten colores:
- -@media all and (color) { ... }
-
-
-Para aplicar una hoja de estilo a dispositivos con al menos 4 bits por componente de color:
- -@media all and (min-color: 4) { ... }
-
-
-color-index
- -Valor: {{cssxref("<integer>")}}
- Medio: {{cssxref("Media/Visual")}}
- Acepta prefijos min/max: sí
Indica el numero de entradas en la tabla de colores para el dispositivo de salida.
- -Ejemplos
- -Para indicar que una hoja de estilo debe aplicarse a todos los dispositivos utilizando índices de color, usted puede hacer esto:
- -@media all and (color-index) { ... }
-
-
-Para aplicar una hoja de estilo a un dispositivo con un índice de al menos 256 colores:
- -<link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" /> -- -
aspect-ratio
- -Valor: {{cssxref("<ratio>")}}
- Medio: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
- Acepta prefijos min/max: sí
Describe el aspecto de una zona a mostrar en el dispositivo de salida. Este valor consiste en enteros positivos separados por una barra ("/"). Esto representa la razón de aspecto de los pixeles horizontales (primer termino) a los pixeles verticales (segundo termino).
- -Ejemplo
- -Lo siguiente selecciona una hoja de estilo especial para ser aplicada donde la proporción del tamaño de la pantalla del dispositivo de salida es al menos la misma de ancho que de alto.
- -@media screen and (min-aspect-ratio: 1/1) { ... }
-
-Este selecciona el estilo cuando la proporción de aspecto sea 1:1 o superior. En otras palabras este estilo solo sera aplicado cuando el área de visualización sea cuadrada u horizontal.
- -device-aspect-ratio
- -Valor: {{cssxref("<ratio>")}}
- Medio: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
- Acepta prefijos min/max: sí
Describe la proporción de aspecto del dispositivo de salida. Este valor consiste de dos enteros positivos separados por una barra ("/"). Este representa la proporción de aspecto de los pixeles horizontales (primer termino) a los pixeles verticales (segundo termino).
- -Ejemplo
- -El siguiente código selecciona una hoja de estilo especial para ser aplicada en pantallas panorámicas ("widescreen").
- -@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }
-
-Este selecciona el estilo cuando la proporción de aspecto sea 16:9 o 16:10.
- -device-height
- -Valor: {{cssxref("<length>")}}
- Medio: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
- Acepta prefijos min/max: sí
Describe la altura del dispositivo de salida (ya sea la totalidad de la pantalla o página y no el área del documento a renderizar).
- -device-width
- -Valor: {{cssxref("<length>")}}
- Medio: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
- Acepta prefijos min/max: sí
Describe la anchura del dispositivo de salida (ya sea la totalidad de la pantalla o página y no el área del documento a renderizar).
- -Ejemplo
- -Para aplicar una hoja de estilo a un documento cuando este sea mostrado en una pantalla de menos de 800px de ancho, usted puede usar esto:
- -<link rel="stylesheet" media="screen and (max-device-width: 799px)" /> -- -
grid
- -Valor: {{cssxref("<integer>")}}
- Medio: all
- Acepta prefijos min/max: no
Determina cuando el dispositivo de salida es un dispositivo de cuadrícula o de mapa de bits. Si el dispositivo esta basado en una cuadrícula (como una terminal TTY o una pantalla de teléfono de solo texto), el valor sera 1, de lo contrario sera 0.
- -Ejemplo
- -Para aplicar una hoja de estilo a un dispositivo portátil con una pantalla de 15 caracteres o mas estrecha:
- -@media handheld and (grid) and (max-width: 15em) { ... }
-
-
-Nota: La unidad "em" tiene un significado especial para los dispositivos de cuadrícula; ya que la anchura exacta de una "em" no puede ser determinada, se asume un "em" como el ancho de una celda en la cuadrícula y el alto de una celda en la cuadrícula.
-
-height
- -Valor: {{cssxref("<length>")}}
- Medio: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
- Acepta prefijos min/max: sí
La función height describe la altura de la superficie a renderizar en el dispositivo de salida (como la altura de una ventana o la bandeja de papel en una impresora).
Nota: Cuando el usuario cambia el tamaño de una ventana Firefox también cambia las hojas de estilo para utilizar la mas adecuada basándose en los valores de
-
-width y height del query.monochrome
- -Valor: {{cssxref("<integer>")}}
- Medio: {{cssxref("Media/Visual")}}
- Acepta prefijos min/max: sí
Indica el número de bits por pixel en un dispositivo monocromático (escala de grises). Si el dispositivo no es monocromático el valor sera 0.
- -Ejemplos
- -Para aplicar una hoja de estilo a todos los dispositivos monocromáticos:
- -@media all and (monochrome) { ... }
-
-
-Para aplicar una hoja de estilo a un dispositivo monocromático con al menos 8 bits por pixel:
- -@media all and (min-monochrome: 8) { ... }
-
-
-orientation
- -Valor: landscape | portrait
- Medio: {{cssxref("Media/Visual")}}
- Acepta prefijos min/max: no
Indica cuando el dispositivo esta en modo landscape (el ancho de la pantalla es mayor al alto) o modo portrait (el alto de la pantalla es mayor al ancho).
- -Ejemplo
- -Para aplicar una hoja de estilo solo en orientación vertical (portrait):
- -@media all and (orientation: portrait) { ... }
-
-resolution
- -Valor: {{cssxref("<resolution>")}}
- Medio: {{cssxref("Media/Bitmap", "bitmap")}}
- Acepta prefijos min/max: sí
Indica la resolución (densidad de pixeles) del dispositivo de salida. La resolución puede ser especificada en puntos por pulgada (dpi) o en puntos por centímetros (dpcm).
- -Ejemplo
- -Para aplicar una hoja de estilo a dispositivos con al menos 300 dpi de resolución:
- -@media print and (min-resolution: 300dpi) { ... }
-
-
-Para reemplazar la vieja sintaxis (min-device-pixel-ratio: 2):
- -@media screen and (min-resolution: 2dppx) { ... }
-
-scan
- -Valor: progressive | interlace
- Medio: {{cssxref("Media/TV")}}
- Acepta prefijos min/max: no
Describe el proceso de exploración de televisión de los dispositivos de salida.
- -Ejemplo
- -Para aplicar una hoja de estilo solo a televisores de exploración progresiva:
- -@media tv and (scan: progressive) { ... }
-
-
-width
- -Valor: {{cssxref("<length>")}}
- Medio: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
- Acepta prefijos min/max: sí
La función width describe el ancho de la superficie a renderizar en el dispositivo de salida (como el ancho de una ventana de un documento o el ancho de la bandeja de papel en una impresora).
Nota: Cuando el usuario cambia el tamaño de una ventana Firefox también cambia las hojas de estilo para utilizar la mas adecuada basándose en los valores de
-
-width y height del query.Ejemplos
- -Si usted quiere especificar una hoja de estilo para dispositivos portátiles o pantallas con un ancho de al menos 20em, usted puede usar esta query:
- -@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }
-
-
-Esta query especifica una hoja de estilo para ser aplicada a un medio impreso con un ancho mayor a 8.5 pulgadas:
- -<link rel="stylesheet" media="print and (min-width: 8.5in)" - href="http://foo.com/mystyle.css" /> -- -
Esta query especifica una hoja de estilo para ser utilizada cuando la ventana tiene un ancho entre 500 y 800 pixeles:
- -@media screen and (min-width: 500px) and (max-width: 800px) { ... }
-
-
-
--
-
Específico de Mozilla
- -Mozilla ofrece varias funciones especificas de Gecko. Algunas de estas pueden ser propuestas como funcines oficiales.
- --moz-images-in-menus
- -Valor: {{cssxref("<integer>")}}
- Medio: {{cssxref("Media/Visual")}}
- Acepta prefijos min/max: no
Si el dispositivo acepta que haya imágenes en menús, el valor es 1; de otro modo sera 0. Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(images-in-menus)") }}.
- --moz-mac-graphite-theme
- -Valor: {{cssxref("<integer>")}}
- Medio: {{cssxref("Media/Visual")}}
- Acepta prefijos min/max: no
Si el usuario ha configurado su dispositivo para usar la apariencia "Grafito" en Mac OS X, esto sera 1. Si el usuario esta usando la apariencia azul por defecto, o si no usa Mac OS X, esto sera 0.
- -Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(mac-graphite-theme)") }}.
- --moz-maemo-classic
- -Valor: {{cssxref("<integer>")}}
- Medio: {{cssxref("Media/Visual")}}
- Acepta prefijos min/max: no
Si el usuario esta usando Maemo con el tema original, esto sera 1; Si esta usando el nuevo tema Fremantle, sera 0.
- -Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(maemo-classic)") }}
- --moz-device-pixel-ratio
- -Valor: {{cssxref("<number>")}}
- Medio: {{cssxref("Media/Visual")}}
- Acepta prefijos min/max: sí
Da el numero de pixeles del dispositivo por pixeles de CSS.
- -
-
-
-No use esta función.
- -En cambio use la función resolution con la unidad dppx.
-
- -moz-device-pixel-ratio puede ser usada para compatibilidad con Firefox 16 o anterior; y -webkit-device-pixel-ratio con navegadores basados en WebKit que no soporten dppx.
Ejemplo:
- -@media (-webkit-min-device-pixel-ratio: 2), /* Navegadores basados en WebKit */ - (min--moz-device-pixel-ratio: 2), /* Navegadores anteriores a Firefox 16 */ - (min-resolution: 2dppx), /* La forma estandar */ - (min-resolution: 192dpi) /* compatibilidad con dppx */- -
Vea este articulo CSSWG sobre buenas practicas para compatibilidad en relación a resolution y dppx.
Nota: Esta funcion multimedia tambien esta implementada en Webkit como -webkit-device-pixel-ratio. Los prefijos minimos y maximos de esta funcion implementados por Gecko se llaman asi: min--moz-device-pixel-ratio y max--moz-device-pixel-ratio; y los mismos prefijos implementados por Webkit se llaman asi: -webkit-min-device-pixel-ratio y -webkit-max-device-pixel-ratio.
-
--moz-os-version
- -Valor: windows-xp | windows-vista | windows-win7 | windows-win8
- Medio: {{cssxref("Media/Visual")}}
- Acepta prefijos min/max: no
Indica que sistema operativo esta en uso actualmente. Actualmente solo es implementado en Windows. Sus posibles valores son:
- --
-
Esto se hace para permitir a los skins y a algunos códigos funcionen mejor con el sistema operativo en el que se ejecutan.
- --moz-scrollbar-end-backward
- -Valor: {{cssxref("<integer>")}}
- Medio: {{cssxref("Media/Visual")}}
- Acepta prefijos min/max: no
El valor sera 1 si la interfaz de usuario muestra una fecha inversa al final de la barra de desplazamiento, de lo contrario el valor sera 0.
- -Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }}.
- --moz-scrollbar-end-forward
- -Valor: {{cssxref("<integer>")}}
- Medio: {{cssxref("Media/Visual")}}
- Acepta prefijos min/max: no
El valor sera 1 si la interfaz de usuario muestra una fecha apuntando hacia la derecha al final de la barra de desplazamiento. de lo contrario el valor sera 0.
- -Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }}.
- --moz-scrollbar-start-backward
- -Valor: {{cssxref("<integer>")}}
- Medio: {{cssxref("Media/Visual")}}
- Acepta prefijos min/max: no
El valor sera 1 si la interfaz de usuario muestra una fecha inversa al principio de la barra de desplazamiento, de lo contrario el valor sera 0.
- -Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }}.
- --moz-scrollbar-start-forward
- -Valor: {{cssxref("<integer>")}}
- Medio: {{cssxref("Media/Visual")}}
- Acepta prefijos min/max: no
El valor sera 1 si la interfaz de usuario muestra una fecha apuntando hacia la derecha al principio de la barra de desplazamiento, de lo contrario el valor sera 0.
- -Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }}.
- --moz-scrollbar-thumb-proportional
- -Valor: {{cssxref("<integer>")}}
- Medio: {{cssxref("Media/Visual")}}
- Acepta prefijos min/max: no
El valor sera 1 si la interfaz de usuario muestra la miniatura de la barra de desplazamiento de forma proporcional (basado en el porcentaje del documento que es visible), de lo contrario el valor sera 0.
- -Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }}.
- --moz-touch-enabled
- -Valor: {{cssxref("<integer>")}}
- Medio: {{cssxref("Media/Visual")}}
- Acepta prefijos min/max: no
El valor sera 1 si el dispositivo soporta eventos táctiles (una pantalla táctil), de lo contrario el valor sera 0.
- -Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(touch-enabled)") }}.
- -Ejemplo
- -Usted puede usar esto para renderizar sus botones un poco mas grandes, Por Ejemplo, si el usuario se encuentra en una pantalla táctil, esto hará los botones mas fáciles de usar con los dedos.
- --moz-windows-classic
- -Valor: {{cssxref("<integer>")}}
- Medio: {{cssxref("Media/Visual")}}
- Acepta prefijos min/max: no
El valor sera 1 si el usuario utiliza un windows sin temas visuales (modo clasico); de lo contrario el valor sera 0.
- -Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(windows-classic)") }}.
- --moz-windows-compositor
- -Valor: {{cssxref("<integer>")}}
- Medio: {{cssxref("Media/Visual")}}
- Acepta prefijos min/max: no
El valor sera 1 si el usuario utiliza windows con el compositor de ventanas DWM; de lo contrario el valor sera 0.
- -Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(windows-compositor)") }}.
- --moz-windows-default-theme
- -Valor: {{cssxref("<integer>")}}
- Medio: {{cssxref("Media/Visual")}}
- Acepta prefijos min/max: no
El valor sera 1 si el usuario actualmente esta utilizando algunos de los temas por defecto de Windows (Luna, Royale, Zune, or Aero), de lo contrario el valor sera 0.
- -Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(windows-default-theme)") }}.
- --moz-windows-theme
- -Valor: aero | luna-blue | luna-olive | luna-silver | royale | generic | zune
- Medio: {{cssxref("Media/Visual")}}
- Acepta prefijos min/max: no
Indica cual tema de Windows esta en uso actualmente. Solo disponible para Windows. Sus posibles valores son:
- --
-
Esto se hace para permitir a los skins y a algunos códigos funcionen mejor con el tema utilizado por el sistema operativo en el que se ejecutan.
- -Específico de WebKit
- --webkit-transform-3d
- -Vakir: {{cssxref("<integer>")}}
- Medio: {{cssxref("Media/Visual")}}
- Acepta prefijos min/max: no
-
-
Si está soportado, el valor es 1, si no, el valor es 0.
- -Ejemplo
- -@media (-webkit-transform-3d) {
- .foo {
- transform-style: preserve-3d;
- }
-}
-
-@media (-webkit-transform-3d: 1) {
- .foo {
- transform-style: preserve-3d;
- }
-}-webkit-transform-2d
- -Valor: {{cssxref("<integer>")}}
- Medio: {{cssxref("Media/Visual")}}
- Acepta prefijos min/max: no
-
-
Si está soportado, el valor es 1, si no, el valor es 0.
- --webkit-transition
- -Value: {{cssxref("<integer>")}}
- Medio: {{cssxref("Media/Visual")}}
- Acepta prefijos min/max: no
-
-
Si está soportado, el valor es 1, si no, el valor es 0.
- - - -Vea también
- - diff --git a/files/es/web/css/media_queries/using_media_queries/index.md b/files/es/web/css/media_queries/using_media_queries/index.md new file mode 100644 index 00000000000000..ef2b9c2720127f --- /dev/null +++ b/files/es/web/css/media_queries/using_media_queries/index.md @@ -0,0 +1,714 @@ +--- +title: CSS media queries +slug: Web/CSS/Media_Queries/Using_media_queries +tags: + - CSS + - Media + - Media Queries + - query +translation_of: Web/CSS/Media_Queries/Using_media_queries +original_slug: CSS/Media_queries +--- +{{cssref}} + +Las **media queries** (en español "consultas de medios") son útiles cuando deseas modificar tu página web o aplicación en función del tipo de dispositivo (como una impresora o una pantalla) o de características y parámetros específicos (como la resolución de la pantalla o el ancho del {{glossary("viewport")}} del navegador). + +Se utilizan para: + +- Aplicar estilos condicionales con las [reglas-at](/es/docs/Web/CSS/At-rule) {{cssxref("@media")}} e {{cssxref("@import")}} de [CSS](/es/docs/Web/CSS). +- Indicar medios específicos en los elementos {{HTMLElement("link")}}, {{HTMLElement("source")}} y otros elementos [HTML](/es/docs/Web/HTML). +- [Testear y monitorizar los estados de los medios](/es/docs/Web/Guide/CSS/probando_media_queries) usando los métodos de javascript {{domxref("Window.matchMedia()")}} y {{domxref("MediaQueryList.addListener()")}}. + +## Sintaxis + +Las _media queries_ consisten de un tipo de medio opcional y una o más expresiones de _características de medios_. Varias consultas se pueden combinar utilizando operadores lógicos. No distinguen entre mayúsculas y minúsculas. + +El resultado de la consulta es "verdadero" cuando el tipo de medio (si se especifica) coincide con el dispositivo en el que se está mostrando el documento y todas las expresiones en el _media query_ son "verdaderas". En este caso, se aplica los estilos correspondientes, siguiendo las reglas usuales de cascada. + +Las consultas sobre tipos de medios desconocidos son siempre falsas. + +```html + + + + + +``` + +### Media Types + +Los _Media Types_ (tipos de medios) describen la categoría general de un dispositivo. Excepto cuando se utilizan los operadores lógicos `not` o `only`, el tipo de medio es opcional y será interpretada como `all`. + +- `all` + - : Apto para todos los dispositivos. +- `print` + - : Destinado a material impreso y visualización de documentos en una pantalla en el modo de vista previa de impresión. +- `screen` + - : Destinado principalmente a las pantallas. +- `speech` + - : Destinado a sintetizadores de voz. + +> **Nota:** **Tipos de medios depreciados:** CSS2.1 y [Media Queries 3](/es/docs/) definieron varios tipos de medios adicionales (`tty`, `tv`, `projection`, `handheld`, `braille`, `embossed` y `aural`), pero fueron desaprobados en [Media Queries 4](https://drafts.csswg.org/mediaqueries/#media-types) y no deberían ser usados. El tipo `aural` ha sido reemplazado por `speech`, que es similar. + +### Operadores Lógicos + +Se pueden redactar queries utilizando operadores lógicos, incluyendo `not`, `and`, y `only`. + +Además se puede combinar múltiples queries en una lista separada por comas múltiples; si cualquiera de las queries en la lista es verdadera, la hoja de estilo asociada es aplicada. Esto es equivalente a una operación lógica "or". + +#### and + +El operador `and` es usado para colocar juntas múltiples funciones multimedia. Un query básico con el tipo de medio especificado como `all` puede lucir así: + +```css +@media (min-width: 700px) { ... } +``` + +Si usted quiere aplicar ese query solo si la pantalla esta en formato horizontal, usted puede utilizar el operador `and` y colocar la siguiente cadena: + +```css +@media (min-width: 700px) and (orientation: landscape) { ... } +``` + +La siguiente query solo retornara verdadero si la ventana tiene un ancho de 700px o mas y la pantalla esta en formato horizontal. Ahora si usted quiere aplicar esta opción solo si tipo de medio es TV, usted puede utilizar la siguiente cadena: + +```css +@media tv and (min-width: 700px) and (orientation: landscape) { ... } +``` + +Esta query solo se aplica si el tipo de medio es TV, la ventana tiene 700px de ancho o mas y la pantalla esta en formato horizontal. + +#### lista separada por comas + +Las listas separadas por comas se comportan como el operador `or` cuando es usado en media queries. Cuando utilice una lista separada por comas y alguno de los queries retorna verdadero, el estilo o la hoja de estilos sera aplicada. Cada query en una lista separada por comas es tratado como una query individual y cualquier operador aplicado a un medio no afectara a los demás. Esto significa que cada query en una lista separada por comas puede tener como objetivo diferentes medios, tipos y estados. + +Si usted quiere aplicar una serie de estilos para un equipo con un ancho mínimo de 700px o si el dispositivo esta colocado en horizontal, usted puede escribir lo siguiente: + +```css +@media (min-width: 700px), handheld and (orientation: landscape) { ... } +``` + +Por lo tanto, si esta en una `screen` con una ventana de 800px de ancho, la declaración del medio retornara verdadero debido a la primera parte de la lista, si aplicamos esto a un dispositivo `@media all and (min-width: 700px)` podría retornar verdadero a pesar del hecho de que la pantalla falle la verificación tipo de medio del `handheld` en la segunda query. Por otra parte si estuviese en un `handheld` con un ancho de ventana de 500px, la primera parte de la lista fallaría pero la segunda parte retornara verdadero debido a la declaración de medio. + +#### not + +El operador `not` aplica a todo el query y retorna verdadero si es posible y sino retorna falso (como por ejemplo `monochrome` en un monitor a color o una ventana con un ancho mínimo de `min-width: 700px` en un monitor de 600px). Un `not` negara un query si es posible pero no a todos los query posibles si están ubicados en una lista separada por comas. El operador `not` no puede ser usado para negar un query individual, solo para un query completo. Por ejemplo, el `not` en el siguiente query es evaluado al final: + +```css +@media not all and (monochrome) { ... } +``` + +Esto significa que el query es evaluado de la siguiente forma: + +```css +@media not (all and (monochrome)) { ... } +``` + +... y no de esta forma: + +```css +@media (not all) and (monochrome) { ... } +``` + +Otro Ejemplo: + +```css +@media not screen and (color), print and (color) +``` + +Es evaluado de la siguiente forma: + +```css +@media (not (screen and (color))), print and (color) +``` + +#### only + +El operador `only` previene que navegadores antiguos que no soportan queries con funciones apliquen los estilos asignados: + +```html + +``` + +### Pseudo-BNF + +``` +media_query_list:{{CSSRef}}{{SeeCompatTable}}
-
-La propiedad de CSS min-block-size define el tamaño mínimo horizontal o vertical de un elemento de bloque, dependiendo de los modos de escritura. Esto corresponde ya sea a la propiedad {{cssxref("min-width")}} o a la propiedad {{cssxref("min-height")}}, dependiendo del valor de {{cssxref("writing-mode")}}.
{{EmbedInteractiveExample("pages/css/min-block-size.html")}}
-
-
-
-Sintaxis
- -/* <length> values */ -min-block-size: 100px; -min-block-size: 5em; - -/* <percentage> values */ -min-block-size: 10%; - -/* Keyword values */ -min-block-size: max-content; -min-block-size: min-content; -min-block-size: fit-content; -min-block-size: fill-available; - -/* Global values */ -min-block-size: inherit; -min-block-size: initial; -min-block-size: unset; -- -
Si el modo de escritura es verticalmente orientado, el valor de min-block-size se relaciona con el mínimo ancho del elemento; de otra manera, se relaciona al mínimo alto del elemento. Una propiedad relacionada es {{cssxref("min-inline-size")}}, que define la otra dimensión del elemento.
{{cssinfo}}
- -Valores
- -La propiedad min-block-size toma los mismos valores de las propiedades {{cssxref("min-width")}} y {{cssxref("min-height")}}.
Sintaxis formal
- -{{csssyntax}} - -Ejemplo
- -Contenido HTML
- -<p class="exampleText">Example text</p> -- -
Contenido CSS
- -.exampleText {
- writing-mode: vertical-rl;
- background-color: yellow;
- min-block-size: 200px;
-}
-
-{{EmbedLiveSample("Ejemplo")}}
- -Especificación
- -| Especificación | -Estado | -Comentario | -
|---|---|---|
| {{SpecName("CSS Logical Properties", "#propdef-min-block-size", "min-block-size")}} | -{{Spec2("CSS Logical Properties")}} | -Definición inicial. | -
Compatibilidad en navegadores
- - - -{{Compat("css.properties.min-block-size")}}
- -Mira también
- --
-
Example text
+``` + +### Contenido CSS + +```css +.exampleText { + writing-mode: vertical-rl; + background-color: yellow; + min-block-size: 200px; +} +``` + +{{EmbedLiveSample("Ejemplo")}} + +## Especificación + +| Especificación | Estado | Comentario | +| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------- | +| {{SpecName("CSS Logical Properties", "#propdef-min-block-size", "min-block-size")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. | + +## Compatibilidad en navegadores + +{{Compat("css.properties.min-block-size")}} + +## Mira también + +- Las propiedades físicas mapeadas: {{cssxref("min-width")}} y {{cssxref("min-height")}} +- {{cssxref("writing-mode")}} diff --git a/files/es/web/css/min-height/index.html b/files/es/web/css/min-height/index.html deleted file mode 100644 index afae0591315cca..00000000000000 --- a/files/es/web/css/min-height/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: min-height -slug: Web/CSS/min-height -tags: - - CSS - - 'CSS:Referencias' - - Todas_las_Categorías -translation_of: Web/CSS/min-height ---- -{{CSSRef}}
-
-Resumen
- -La propiedad min-height se utiliza para definir la altura mínima de un elemento dado. Impide que el valor de la propiedad {{ Cssxref("height") }} llegue a ser más pequeña que la especificada en la altura mínima (min-height).
{{cssinfo}}
- -Sintaxis
- -{{csssyntax}} - -Values
- --
-
Examples
- -table {min-height: 75%;}
-
-form {min-height: 0;}
-
-
-Notes
- -{{ Cssxref("min-height") }} tiene prioridad sobre los valores {{ Cssxref("max-height") }} y {{ Cssxref("height") }}.
- -Esdpecificaciones
- --
-
Compatibilidades
- -| Navegador | -Versión mínima | -
|---|---|
| Internet Explorer | -6 | -
| Netscape | -6 | -
| Opera | -3.5 | -
Ver también
- -{{ Cssxref("Modelo de caja", "modelo de caja") }}, {{ Cssxref("width", "ancho") }}, {{ Cssxref("-moz-box-sizing", "tamaño de cajas -Mozilla") }}, {{ Cssxref("min-height", "altura mínima") }}, {{ Cssxref("max-height", "altura máxima") }}
diff --git a/files/es/web/css/min-height/index.md b/files/es/web/css/min-height/index.md new file mode 100644 index 00000000000000..26dbfd9e630d3e --- /dev/null +++ b/files/es/web/css/min-height/index.md @@ -0,0 +1,53 @@ +--- +title: min-height +slug: Web/CSS/min-height +tags: + - CSS + - CSS:Referencias + - Todas_las_Categorías +translation_of: Web/CSS/min-height +--- +{{CSSRef}} + +### Resumen + +La propiedad `min-height` se utiliza para definir la altura mínima de un elemento dado. Impide que el valor de la propiedad {{ Cssxref("height") }} llegue a ser más pequeña que la especificada en la altura mínima (`min-height`). + +{{cssinfo}} + +### Sintaxis + +{{csssyntax}} + +### Values + +- **length** : puede ser en px, cm, in (píxel, centímetro o inches) +- **percentage** : % especificado como un porcentaje de la altura del bloque contenedor. + +### Examples + +``` +table {min-height: 75%;} + +form {min-height: 0;} +``` + +### Notes + +{{ Cssxref("min-height") }} tiene prioridad sobre los valores {{ Cssxref("max-height") }} y {{ Cssxref("height") }}. + +### Esdpecificaciones + +- [CSS 2.1](http://www.w3.org/TR/CSS2/visudet.html#min-max-heights) + +### Compatibilidades + +| Navegador | Versión mínima | +| ----------------- | -------------- | +| Internet Explorer | 6 | +| Netscape | 6 | +| Opera | 3.5 | + +### Ver también + +{{ Cssxref("Modelo de caja", "modelo de caja") }}, {{ Cssxref("width", "ancho") }}, {{ Cssxref("-moz-box-sizing", "tamaño de cajas -Mozilla") }}, {{ Cssxref("min-height", "altura mínima") }}, {{ Cssxref("max-height", "altura máxima") }} diff --git a/files/es/web/css/min-inline-size/index.html b/files/es/web/css/min-inline-size/index.html deleted file mode 100644 index 8045c2a6382374..00000000000000 --- a/files/es/web/css/min-inline-size/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: min-inline-size -slug: Web/CSS/min-inline-size -translation_of: Web/CSS/min-inline-size ---- -{{CSSRef}}{{SeeCompatTable}}
-
-La propiedad de CSS min-inline-size define el tamaño mínimo horizontal o vertical de los elementos en bloque, dependiendo del modo de escritura. Esto corresponde ya sea a la propiedad {{cssxref("min-width")}} o la propiedad {{cssxref("min-height")}}, dependiendo del valor de {{cssxref("writing-mode")}}.
{{EmbedInteractiveExample("pages/css/min-inline-size.html")}}
-
-
-
-Sintaxis
- -/* <length> values */ -min-inline-size: 100px; -min-inline-size: 5em; - -/* <percentage> values */ -min-inline-size: 10%; - -/* Keyword values */ -min-inline-size: max-content; -min-inline-size: min-content; -min-inline-size: fit-content; -min-inline-size: fill-available; - -/* Global values */ -min-inline-size: inherit; -min-inline-size: initial; -min-inline-size: unset; -- -
Si el modo de escritura es verticalmente orientado, el valor de min-inline-size se relaciona con el mínimo alto del elemento; de otra manera, se relaciona al mínimo ancho del elemento. Una propiedad relacionada es {{cssxref("min-block-size")}}, que define la otra dimensión del elemento.
{{cssinfo}}
- -Valores
- -La propiedad min-inline-size toma los mismos valores de las propiedades {{cssxref("min-width")}} y {{cssxref("min-height")}}.
Sintaxis formal
- -{{csssyntax}} - -Ejemplo
- -Contenido HTML
- -<p class="exampleText">Example text</p> -- -
Contenido CSS
- -.exampleText {
- writing-mode: vertical-rl;
- background-color: yellow;
- block-size: 5%;
- min-inline-size: 200px;
-}
-
-{{EmbedLiveSample("Ejemplo")}}
- -Especificación
- -| Especificación | -Estado | -Comentario | -
|---|---|---|
| {{SpecName("CSS Logical Properties", "#propdef-min-inline-size", "min-inline-size")}} | -{{Spec2("CSS Logical Properties")}} | -Definición inicial. | -
Compatibilidad en navegadores
- - - -{{Compat("css.properties.min-inline-size")}}
- -Mira también
- --
-
Example text
+``` + +### Contenido CSS + +```css +.exampleText { + writing-mode: vertical-rl; + background-color: yellow; + block-size: 5%; + min-inline-size: 200px; +} +``` + +{{EmbedLiveSample("Ejemplo")}} + +## Especificación + +| Especificación | Estado | Comentario | +| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------- | +| {{SpecName("CSS Logical Properties", "#propdef-min-inline-size", "min-inline-size")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. | + +## Compatibilidad en navegadores + +{{Compat("css.properties.min-inline-size")}} + +## Mira también + +- Las propiedades físicas mapeadas: {{cssxref("min-width")}} y {{cssxref("min-height")}} +- {{cssxref("writing-mode")}} diff --git a/files/es/web/css/min-width/index.html b/files/es/web/css/min-width/index.html deleted file mode 100644 index 827e1126377a4e..00000000000000 --- a/files/es/web/css/min-width/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: min-width -slug: Web/CSS/min-width -tags: - - Referencia_CSS -translation_of: Web/CSS/min-width ---- -{{ CSSRef() }}
- -Sumario
- -La propiedad min-width se usa para determinar la anchura mínima de un elemento. Previene que la propiedad {{ Cssxref("width") }} pueda ser inferior que min-width.
-
-
Sintaxis
- -min-width: <longitud> | <porcentaje> | -moz-max-content | -moz-min-content | -moz-fit-content | -moz-available
- -Valores
- --
-
Ejemplos
- -table{min-width: 75%;}
-
-form{min-width: 0;}
-
-
-Notas
- -{{ Cssxref("min-width") }} sobrescribe los valores de {{ Cssxref("max-width") }} y {{ Cssxref("width") }}.
- -Especificaciones
- --
-
Compatibilidad entre navegadores
- -| Navegador | -Versión mínima | -
|---|---|
| Internet Explorer | -6 | -
| Netscape | -6 | -
| Opera | -3.5 | -
Ver también
- -box model, {{ Cssxref("min-height") }}, {{ Cssxref("-moz-box-sizing") }}, {{ Cssxref("width") }}, {{ Cssxref("max-width") }}
diff --git a/files/es/web/css/min-width/index.md b/files/es/web/css/min-width/index.md new file mode 100644 index 00000000000000..0c40ce740b0c30 --- /dev/null +++ b/files/es/web/css/min-width/index.md @@ -0,0 +1,60 @@ +--- +title: min-width +slug: Web/CSS/min-width +tags: + - Referencia_CSS +translation_of: Web/CSS/min-width +--- +{{ CSSRef() }} + +### Sumario + +La propiedad `min-width` se usa para determinar la anchura mínima de un elemento. Previene que la propiedad {{ Cssxref("width") }} pueda ser inferior que `min-width`. + +- {{ Xref_cssinitial() }}: 0 +- Aplicable a: elementos de tipo bloque. +- {{ Xref_cssinherited() }}: no +- Porcentajes: se refieren a la anchura del bloque contenedor. +- Media: {{ Xref_cssvisual() }} +- {{ Xref_csscomputed() }}: + +### Sintaxis + +min-width: \{{CSSRef}}
-
-La función CSS min() permite establecer el valor mas pequeño (mas negativo) de una lista de expresiones separadas por coma como el valor de una propiedad CSS. La función min() puede ser usada donde quiera que {{CSSxRef("<length>")}}, {{CSSxRef("<frequency>")}}, {{CSSxRef("<angle>")}}, {{CSSxRef("<time>")}}, {{CSSxRef("<percentage>")}}, {{CSSxRef("<number>")}}, o {{CSSxRef("<integer>")}} esté permitido.
{{EmbedInteractiveExample("pages/css/function-min.html")}}
-
-
-
-En el primer ejemplo anterior, el ancho será al menos 200px, pero será menor si el viewport es menor de 400px de ancho (en tal caso 1vw sería 4px, así 50vw sería 200px). En otras palabras, el ancho máximo es 200px. Piensa en el valor de min() como el máximo valor que una propiedad puede tener.
Sintaxis
- -La funcion min() toma uno o mas expresiones separadas por coma como sus parametros, y usa el valor mas pequeño de esas expresiones como su valor.
Las expresiones pueden ser expresiones matemáticas (usando operadores aritmeticos), valores literales, u otras expresiones, tales como {{CSSxRef("attr", "attr()")}}, que se evaluan a un tipo de argumento válido (like {{CSSxRef("<length>")}}).
- -Se pueden usar distintas unidades de medida para cada valor en la expresion, si se desea. Tambien puede usar parentesis para establecer orden de percedencia si lo requiere.
- --
-
Sintaxis formal
- -{{CSSSyntax}} - -Probemas de accesibilidad
- -Cuando use min() para establecer el maximo valor de fonr size, asegurese de que la fuente todavia podra ser escalada por lo menos al 200% para mas legibilidad (sin tecnologia asistente como la funcion de zoom).
-
-
Ejemplos
- -Setting a maximum size for a label and input
- -Otro caso de uso para las funciones CSS es establecer la maxima longitud en controles enformularios responsive: habilitando el ancho de los labels y los inputs para encogerse como lo hace el ancho del formulario
- -Veamos algo de CSS:
- -input, label {
- padding: 2px;
- box-sizing: border-box;
- display: inline-block;
- width: min(40%, 400px);
- background-color: pink;
-}
-
-form {
- margin: 4px;
- border: 1px solid black;
- padding: 4px;
-}
-
-
-Aquí, el formulario en si mismo, junto con el margen, borde y padding, será de 100% del ancho de su padre. Declaramos el input y el label para que sean menores ente el 40% del ancho del formulario hasta el padding o de 400px, el que sea menor. En otras palabras, lo mas ancho que el label y el input pueden ser es de 400px. Lo mas estrecho que serán es 40% del ancho del formulario, el cual en pantallas de relojes inteligentes es muy pequeño.
- -<form> - <label>Escribe algo:</label> - <input type="text"> -</form> -- -
{{EmbedLiveSample("Setting_a_maximum_size_for_a_label_and_input", "100%", "110")}}
- -Especificaciones
- -| Especificación | -Estado | -Comentario | -
|---|---|---|
| {{SpecName("CSS4 Values", "#calc-notation", "min()")}} | -{{Spec2("CSS4 Values")}} | -Definición inicial. | -
Compatibilidad con navegadores
- - - -{{Compat("css.types.min")}}
- -Ver también
- --
-
La función minmax() en CSS define un rango de tamaño mayor o igual que min y menor o igual que max. Se emplea con rejillas CSS.
/* valores <ancho no-flexible>, <ancho de la banda> */ -minmax(200px, 1fr) -minmax(400px, 50%) -minmax(30%, 300px) -minmax(100px, max-content) -minmax(min-content, 400px) -minmax(max-content, auto) -minmax(auto, 300px) -minmax(min-content, auto) - -/* valores <ancho fijo>, <ancho de la banda> */ -minmax(200px, 1fr) -minmax(30%, 300px) -minmax(400px, 50%) -minmax(50%, min-content) -minmax(300px, max-content) -minmax(200px, auto) - -/* valores <ancho no-flexible>, <ancho fijo> */ -minmax(400px, 50%) -minmax(30%, 300px) -minmax(min-content, 200px) -minmax(max-content, 200px) -minmax(auto, 300px) -- -
Sintáxis
- -Una función que toma dos parámetros, min y max.
- -Cada parámetro puede ser un valor <length>, <percentage>, <flex> o uno de los valores de las palabras clave max-content, min-content o auto.
Si max < min, entonces max es ignorado y se trata a minmax(min,max) como min. Como un máximo, un valor {{cssxref("flex_value","<flex>")}} establece el factor flex de una banda; no es válido como un mínimo.
Valores
- --
-
Sintáxis formal
- -{{csssyntax}} - -Propiedades CSS
- -La función minmax() puede ser usada dentro de:
Ejemplo
- -CSS
- -#container {
- display: grid;
- grid-template-columns: minmax(max-content, 300px) minmax(200px, 1fr) 150px;
- grid-gap: 5px;
- box-sizing: border-box;
- height: 200px;
- width: 100%;
- background-color: #8cffa0;
- padding: 10px;
-}
-
-#container > div {
- background-color: #8ca0ff;
- padding: 5px;
-}
-
-
-HTML
- -<div id="container"> - <div> - Elemento tan ancho como el contenido,<br/> - pero de máximo 300 píxeles. - </div> - <div> - Elemento con un ancho flexible, pero con un mínimo de 200 píxeles. - </div> - <div> - Elemento inflexible de 150 píxeles de ancho. - </div> -</div>- -
Resultado
- -{{EmbedLiveSample("Example", "100%", 200)}}
- -Especificaciones
- -| Especificación | -Estado | -Comentario | -
|---|---|---|
| {{SpecName("CSS Grid", "#valdef-grid-template-columns-minmax", "minmax()")}} | -{{Spec2("CSS Grid")}} | -Definición inicial | -
Compatibilidad de navegadores
- - - -{{Compat("css.properties.grid-template-columns.minmax")}}
- -Mira también
- --
-
-
-
+
+```
+
+### Resultado
+
+{{EmbedLiveSample("Example", "100%", 200)}}
+
+## Especificaciones
+
+| Especificación | Estado | Comentario |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------ |
+| {{SpecName("CSS Grid", "#valdef-grid-template-columns-minmax", "minmax()")}} | {{Spec2("CSS Grid")}} | Definición inicial |
+
+## Compatibilidad de navegadores
+
+{{Compat("css.properties.grid-template-columns.minmax")}}
+
+## Mira también
+
+- Guía de Grid Layout: _[Conceptos básicos del diseño con rejilla - tamaño de bandas con minmax()]()_
+- [Rejillas CSS, valores lógicos y modos de escritura](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes)
+- Video tutorial: _[Presentando minmax()](http://gridbyexample.com/video/series-minmax/)_
+
+1. [**CSS**](/es/docs/Web/CSS)
+2. [**Referencia CSS**](/es/docs/Web/CSS/Reference)
+3. [CSS Grid Layout](/es/docs/Web/CSS/CSS_Grid_Layout)
+4. **Guías**
+
+ 1. [Conceptos básicos del diseño con rejillas](/es/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)
+ 2. [Relación a otros métodos de diseño](/es/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout)
+ 3. [Posicionamiento basado en líneas](
+/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid)
+ 4. [Grid template areas](/es/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas)
+ 5. [Diseño usando lineas con nombre](/es/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines)
+ 6. [Posicionamiento automático en el diseño con rejillas](/es/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout)
+ 7. [Alineamiento de cajas en el diseño con rejillas](/es/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout)
+ 8. [Rejillas, valores lógicos y modos de escritura](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes)
+ 9. [CSS Grid Layout y la Accesibilidad](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility)
+ 10. [CSS Grid Layout y una Mejora Progresiva](/es/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement)
+ 11. [Elaborando diseños comunes utilizando rejillas](/es/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout)
+
+5. **Propiedades**
+
+ 1. [grid](/es/docs/Web/CSS/grid)
+ 2. [grid-area](/es/docs/Web/CSS/grid-area)
+ 3. [grid-auto-columns](/es/docs/Web/CSS/grid-auto-columns)
+ 4. [grid-auto-flow](/es/docs/Web/CSS/grid-auto-flow)
+ 5. [grid-auto-rows](/es/docs/Web/CSS/grid-auto-rows)
+ 6. [grid-column](/es/docs/Web/CSS/grid-column)
+ 7. [grid-column-end](/es/docs/Web/CSS/grid-column-end)
+ 8. [grid-column-gap](/es/docs/Web/CSS/grid-column-gap)
+ 9. [grid-column-start](/es/docs/Web/CSS/grid-column-start)
+ 10. [grid-gap](/es/docs/Web/CSS/grid-gap)
+ 11. [grid-row](/es/docs/Web/CSS/grid-row)
+ 12. [grid-row-end](/es/docs/Web/CSS/grid-row-end)
+ 13. [grid-row-gap](/es/docs/Web/CSS/grid-row-gap)
+ 14. [grid-row-start](/es/docs/Web/CSS/grid-row-start)
+ 15. [grid-template](/es/docs/Web/CSS/grid-template)
+ 16. [grid-template-areas](/es/docs/Web/CSS/grid-template-areas)
+ 17. [grid-template-columns](/es/docs/Web/CSS/grid-template-columns)
+ 18. [grid-template-rows](/es/docs/Web/CSS/grid-template-rows)
+
+6. **Glosario**
+
+ 1. [Rejilla](/es/docs/Glossary/Grid)
+ 2. [Líneas de rejilla](/es/docs/Glossary/Grid_lines)
+ 3. [Bandas de rejilla](/es/docs/Glossary/Grid_tracks)
+ 4. [Celdas de rejilla](/es/docs/Glossary/Grid_cell)
+ 5. [Áreas de rejilla](/es/docs/Glossary/Grid_areas)
+ 6. [Canaletes](/es/docs/Glossary/Gutters)
+ 7. [Eje de rejilla](/es/docs/Glossary/Grid_Axis)
+ 8. [Fila](/es/docs/Glossary/Grid_rows)
+ 9. [Columna](/es/docs/Glossary/Grid_column)
diff --git a/files/es/web/css/mix-blend-mode/index.html b/files/es/web/css/mix-blend-mode/index.html
deleted file mode 100644
index b31b8010fa6d13..00000000000000
--- a/files/es/web/css/mix-blend-mode/index.html
+++ /dev/null
@@ -1,612 +0,0 @@
----
-title: mix-blend-mode
-slug: Web/CSS/mix-blend-mode
-tags:
- - CSS
-translation_of: Web/CSS/mix-blend-mode
-original_slug: Web/CSS/Referencia_CSS/mix-blend-mode
----
-
+ Elemento tan ancho como el contenido,
+ pero de máximo 300 píxeles. +
+ + pero de máximo 300 píxeles. +
+ Elemento con un ancho flexible, pero con un mínimo de 200 píxeles.
+
+
+ Elemento inflexible de 150 píxeles de ancho.
+
+{{CSSRef}}
-
-La propiedad CSS mix-blend-mode describe cómo el contenido de un elemento debe mezclarse con el contenido del elemento que está tras él y con el fondo del elemento.
{{EmbedInteractiveExample("pages/css/mix-blend-mode.html")}}
-
-
-
-Syntax
- -/* Valores clave */ -mix-blend-mode: normal; -mix-blend-mode: multiply; -mix-blend-mode: screen; -mix-blend-mode: overlay; -mix-blend-mode: darken; -mix-blend-mode: lighten; -mix-blend-mode: color-dodge; -mix-blend-mode: color-burn; -mix-blend-mode: hard-light; -mix-blend-mode: soft-light; -mix-blend-mode: difference; -mix-blend-mode: exclusion; -mix-blend-mode: hue; -mix-blend-mode: saturation; -mix-blend-mode: color; -mix-blend-mode: luminosity; - -/* Valores globales */ -mix-blend-mode: initial; -mix-blend-mode: inherit; -mix-blend-mode: unset; -- -
Valores
- --
-
Sintaxis formal
- -{{csssyntax}} - -Ejemplos
- -
-
-
-<div class="grid"> - <div class="col"> - <div class="note">Mezclado aislado (sin mezclar con el fondo)</div> - <div class="row isolate"> - <div class="cell"> normal - <div class="container normal"> - <div class="group"> - <div class="item firefox"></div> - <svg viewBox="0 0 150 150"> - <defs> - <linearGradient id="red"> - <stop offset="0" stop-color="hsl(0,100%,50%)" /> - <stop offset="100%" stop-color="hsl(0,0%,100%)" /> - </linearGradient> - <linearGradient id="green"> - <stop offset="0" stop-color="hsl(120,100%,50%)" /> - <stop offset="100%" stop-color="hsl(120,0%,100%)" /> - </linearGradient> - <linearGradient id="blue"> - <stop offset="0" stop-color="hsl(240,100%,50%)" /> - <stop offset="100%" stop-color="hsl(240,0%,100%)" /> - </linearGradient> - </defs> - <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> - </svg> - </div> - </div> - </div> - <div class="cell"> multiply - <div class="container multiply"> - <div class="group"> - <div class="item firefox"></div> - <svg viewBox="0 0 150 150"> - <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> - </svg> - </div> - </div> - </div> - <div class="cell"> darken - <div class="container darken"> - <div class="group"> - <div class="item firefox"></div> - <svg viewBox="0 0 150 150"> - <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> - </svg> - </div> - </div> - </div> - <div class="cell"> screen - <div class="container screen"> - <div class="group"> - <div class="item firefox"></div> - <svg viewBox="0 0 150 150"> - <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> - </svg> - </div> - </div> - </div> - <div class="cell"> lighten - <div class="container lighten"> - <div class="group"> - <div class="item firefox"></div> - <svg viewBox="0 0 150 150"> - <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> - </svg> - </div> - </div> - </div> - <div class="cell"> overlay - <div class="container overlay"> - <div class="group"> - <div class="item firefox"></div> - <svg viewBox="0 0 150 150"> - <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> - </svg> - </div> - </div> - </div> - <div class="cell"> color-dodge - <div class="container color-dodge"> - <div class="group"> - <div class="item firefox"></div> - <svg viewBox="0 0 150 150"> - <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> - </svg> - </div> - </div> - </div> - <div class="cell"> color-burn - <div class="container color-burn"> - <div class="group"> - <div class="item firefox"></div> - <svg viewBox="0 0 150 150"> - <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> - </svg> - </div> - </div> - </div> - <div class="cell"> hard-light - <div class="container hard-light"> - <div class="group"> - <div class="item firefox"></div> - <svg viewBox="0 0 150 150"> - <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> - </svg> - </div> - </div> - </div> - <div class="cell"> soft-light - <div class="container soft-light"> - <div class="group"> - <div class="item firefox"></div> - <svg viewBox="0 0 150 150"> - <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> - </svg> - </div> - </div> - </div> - <div class="cell"> difference - <div class="container difference"> - <div class="group"> - <div class="item firefox"></div> - <svg viewBox="0 0 150 150"> - <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> - </svg> - </div> - </div> - </div> - <div class="cell"> exclusion - <div class="container exclusion"> - <div class="group"> - <div class="item firefox"></div> - <svg viewBox="0 0 150 150"> - <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> - </svg> - </div> - </div> - </div> - <div class="cell"> hue - <div class="container hue"> - <div class="group"> - <div class="item firefox"></div> - <svg viewBox="0 0 150 150"> - <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> - </svg> - </div> - </div> - </div> - <div class="cell"> saturation - <div class="container saturation"> - <div class="group"> - <div class="item firefox"></div> - <svg viewBox="0 0 150 150"> - <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> - </svg> - </div> - </div> - </div> - <div class="cell"> color - <div class="container color"> - <div class="group"> - <div class="item firefox"></div> - <svg viewBox="0 0 150 150"> - <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> - </svg> - </div> - </div> - </div> - <div class="cell"> luminosity - <div class="container luminosity"> - <div class="group"> - <div class="item firefox"></div> - <svg viewBox="0 0 150 150"> - <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> - </svg> - </div> - </div> - </div> - </div> - - <div class="note">Mezclado global (mezclar con el fondo)</div> - <div class="row"> - <div class="cell"> normal - <div class="container normal"> - <div class="group"> - <div class="item firefox"></div> - <svg viewBox="0 0 150 150"> - <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> - </svg> - </div> - </div> - </div> - <div class="cell"> multiply - <div class="container multiply"> - <div class="group"> - <div class="item firefox"></div> - <svg viewBox="0 0 150 150"> - <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> - </svg> - </div> - </div> - </div> - <div class="cell"> darken - <div class="container darken"> - <div class="group"> - <div class="item firefox"></div> - <svg viewBox="0 0 150 150"> - <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> - </svg> - </div> - </div> - </div> - <div class="cell"> screen - <div class="container screen"> - <div class="group"> - <div class="item firefox"></div> - <svg viewBox="0 0 150 150"> - <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> - </svg> - </div> - </div> - </div> - <div class="cell"> lighten - <div class="container lighten"> - <div class="group"> - <div class="item firefox"></div> - <svg viewBox="0 0 150 150"> - <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> - </svg> - </div> - </div> - </div> - <div class="cell"> overlay - <div class="container overlay"> - <div class="group"> - <div class="item firefox"></div> - <svg viewBox="0 0 150 150"> - <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> - </svg> - </div> - </div> - </div> - <div class="cell"> color-dodge - <div class="container color-dodge"> - <div class="group"> - <div class="item firefox"></div> - <svg viewBox="0 0 150 150"> - <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> - </svg> - </div> - </div> - </div> - <div class="cell"> color-burn - <div class="container color-burn"> - <div class="group"> - <div class="item firefox"></div> - <svg viewBox="0 0 150 150"> - <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> - </svg> - </div> - </div> - </div> - <div class="cell"> hard-light - <div class="container hard-light"> - <div class="group"> - <div class="item firefox"></div> - <svg viewBox="0 0 150 150"> - <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> - </svg> - </div> - </div> - </div> - <div class="cell"> soft-light - <div class="container soft-light"> - <div class="group"> - <div class="item firefox"></div> - <svg viewBox="0 0 150 150"> - <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> - </svg> - </div> - </div> - </div> - <div class="cell"> difference - <div class="container difference"> - <div class="group"> - <div class="item firefox"></div> - <svg viewBox="0 0 150 150"> - <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> - </svg> - </div> - </div> - </div> - <div class="cell"> exclusion - <div class="container exclusion"> - <div class="group"> - <div class="item firefox"></div> - <svg viewBox="0 0 150 150"> - <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> - </svg> - </div> - </div> - </div> - <div class="cell"> hue - <div class="container hue"> - <div class="group"> - <div class="item firefox"></div> - <svg viewBox="0 0 150 150"> - <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> - </svg> - </div> - </div> - </div> - <div class="cell"> saturation - <div class="container saturation"> - <div class="group"> - <div class="item firefox"></div> - <svg viewBox="0 0 150 150"> - <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> - </svg> - </div> - </div> - </div> - <div class="cell"> color - <div class="container color"> - <div class="group"> - <div class="item firefox"></div> - <svg viewBox="0 0 150 150"> - <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> - </svg> - </div> - </div> - </div> - <div class="cell"> luminosity - <div class="container luminosity"> - <div class="group"> - <div class="item firefox"></div> - <svg viewBox="0 0 150 150"> - <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse> - <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse> - </svg> - </div> - </div> - </div> - </div> - </div> -</div>- -
html,body {
- height: 100%;
- box-sizing: border-box;
- background: #EEE;
-}
-
-.grid {
- width: 100%;
- display: flex;
- font: 1em monospace;
-}
-
-.row {
- display: flex;
- flex: 1 auto;
- flex-direction: row;
- flex-wrap: wrap;
- height: auto;
-}
-
-.col {
- display: flex;
- flex: 1 auto;
- flex-direction: column;
- height: auto;
-}
-
-.cell {
- margin: .5em;
- padding: .5em;
- background-color: #FFF;
- overflow: hidden;
- text-align: center;
-}
-
-.note {
- background: #fff3d4;
- padding: 1em;
- margin: .5em .5em 0;
- font: .8em sans-serif;
- text-align: left;
- white-space: nowrap;
-}
-
-.note + .row .cell {
- margin-top: 0;
-}
-
-.container {
- position: relative;
- background: linear-gradient(to right, #000 0%, transparent 50%, #FFF 100%),
- linear-gradient(to bottom, #FF0 0%, #F0F 50%, #0FF 100%);
- width: 150px;
- height: 150px;
- margin: 0 auto;
-}
-
-.R {
- transform-origin: center;
- transform: rotate(-30deg);
- fill: url(#red);
-}
-
-.G {
- transform-origin: center;
- transform: rotate(90deg);
- fill: url(#green);
-}
-
-.B {
- transform-origin: center;
- transform: rotate(210deg);
- fill: url(#blue);
-}
-
-.isolate .group { isolation: isolate; }
-
-.normal .item { mix-blend-mode: normal; }
-.multiply .item { mix-blend-mode: multiply; }
-.screen .item { mix-blend-mode: screen; }
-.overlay .item { mix-blend-mode: overlay; }
-.darken .item { mix-blend-mode: darken; }
-.lighten .item { mix-blend-mode: lighten; }
-.color-dodge .item { mix-blend-mode: color-dodge; }
-.color-burn .item { mix-blend-mode: color-burn; }
-.hard-light .item { mix-blend-mode: hard-light; }
-.soft-light .item { mix-blend-mode: soft-light; }
-.difference .item { mix-blend-mode: difference; }
-.exclusion .item { mix-blend-mode: exclusion; }
-.hue .item { mix-blend-mode: hue; }
-.saturation .item { mix-blend-mode: saturation; }
-.color .item { mix-blend-mode: color; }
-.luminosity .item { mix-blend-mode: luminosity; }
-{{EmbedLiveSample("mix-blend-mode", "100%", 1600, "", "", "example-outcome-frame")}}
-
-Ejemplo vivo
- -<svg> - <g class="isolate"> - <circle cx="40" cy="40" r="40" fill="red"/> - <circle cx="80" cy="40" r="40" fill="lightgreen"/> - <circle cx="60" cy="80" r="40" fill="blue"/> - </g> -</svg>- -
circle { mix-blend-mode: screen; }
-.isolate { isolation: isolate; } /* sin aislación, el color de fondo será tenido en cuenta */
-
-
-{{EmbedLiveSample("Ejemplo_vivo", "100%", "180")}}
- -Especificaciones
- -| Especificación | -Estado | -Comentario | -
|---|---|---|
| {{ SpecName('Compositing', '#mix-blend-mode', 'mix-blend-mode') }} | -{{ Spec2('Compositing') }} | -Definición inicial | -
{{cssinfo}}
- -Compatibilidad con navegadores
- - - -{{Compat("css.properties.mix-blend-mode")}}
- -Véase también
- --
-
+
+```
+
+```css hidden
+html,body {
+ height: 100%;
+ box-sizing: border-box;
+ background: #EEE;
+}
+
+.grid {
+ width: 100%;
+ display: flex;
+ font: 1em monospace;
+}
+
+.row {
+ display: flex;
+ flex: 1 auto;
+ flex-direction: row;
+ flex-wrap: wrap;
+ height: auto;
+}
+
+.col {
+ display: flex;
+ flex: 1 auto;
+ flex-direction: column;
+ height: auto;
+}
+
+.cell {
+ margin: .5em;
+ padding: .5em;
+ background-color: #FFF;
+ overflow: hidden;
+ text-align: center;
+}
+
+.note {
+ background: #fff3d4;
+ padding: 1em;
+ margin: .5em .5em 0;
+ font: .8em sans-serif;
+ text-align: left;
+ white-space: nowrap;
+}
+
+.note + .row .cell {
+ margin-top: 0;
+}
+
+.container {
+ position: relative;
+ background: linear-gradient(to right, #000 0%, transparent 50%, #FFF 100%),
+ linear-gradient(to bottom, #FF0 0%, #F0F 50%, #0FF 100%);
+ width: 150px;
+ height: 150px;
+ margin: 0 auto;
+}
+
+.R {
+ transform-origin: center;
+ transform: rotate(-30deg);
+ fill: url(#red);
+}
+
+.G {
+ transform-origin: center;
+ transform: rotate(90deg);
+ fill: url(#green);
+}
+
+.B {
+ transform-origin: center;
+ transform: rotate(210deg);
+ fill: url(#blue);
+}
+
+.isolate .group { isolation: isolate; }
+
+.normal .item { mix-blend-mode: normal; }
+.multiply .item { mix-blend-mode: multiply; }
+.screen .item { mix-blend-mode: screen; }
+.overlay .item { mix-blend-mode: overlay; }
+.darken .item { mix-blend-mode: darken; }
+.lighten .item { mix-blend-mode: lighten; }
+.color-dodge .item { mix-blend-mode: color-dodge; }
+.color-burn .item { mix-blend-mode: color-burn; }
+.hard-light .item { mix-blend-mode: hard-light; }
+.soft-light .item { mix-blend-mode: soft-light; }
+.difference .item { mix-blend-mode: difference; }
+.exclusion .item { mix-blend-mode: exclusion; }
+.hue .item { mix-blend-mode: hue; }
+.saturation .item { mix-blend-mode: saturation; }
+.color .item { mix-blend-mode: color; }
+.luminosity .item { mix-blend-mode: luminosity; }
+```
+
+{{EmbedLiveSample("", "100%", 1600, "", "", "")}}
+
+### Ejemplo vivo
+
+```html
+
+```
+
+```css
+circle { mix-blend-mode: screen; }
+.isolate { isolation: isolate; } /* sin aislación, el color de fondo será tenido en cuenta */
+```
+
+{{EmbedLiveSample("Ejemplo_vivo", "100%", "180")}}
+
+## Especificaciones
+
+| Especificación | Estado | Comentario |
+| ---------------------------------------------------------------------------------------- | ------------------------------------ | ------------------ |
+| {{ SpecName('Compositing', '#mix-blend-mode', 'mix-blend-mode') }} | {{ Spec2('Compositing') }} | Definición inicial |
+
+{{cssinfo}}
+
+## Compatibilidad con navegadores
+
+{{Compat("css.properties.mix-blend-mode")}}
+
+## Véase también
+
+- {{cssxref("<blend-mode>")}}
+- {{cssxref("background-blend-mode")}}
diff --git a/files/es/web/css/mozilla_extensions/index.html b/files/es/web/css/mozilla_extensions/index.html
deleted file mode 100644
index 5873f9d3309425..00000000000000
--- a/files/es/web/css/mozilla_extensions/index.html
+++ /dev/null
@@ -1,616 +0,0 @@
----
-title: Extensiones CSS de Mozilla
-slug: Web/CSS/Mozilla_Extensions
-translation_of: Web/CSS/Mozilla_Extensions
----
-
+
+Mezclado aislado (sin mezclar con el fondo)
+
+
+
+ normal
+
+ multiply
+
+
+
+
+
+
+
+ darken
+
+
+
+
+
+
+
+ screen
+
+
+
+
+
+
+
+ lighten
+
+
+
+
+
+
+
+ overlay
+
+
+ color-dodge
+
+
+
+
+
+
+
+ color-burn
+
+
+
+
+
+
+
+ hard-light
+
+
+
+
+
+
+
+ soft-light
+
+
+
+
+
+
+
+ difference
+
+
+
+
+
+
+
+ exclusion
+
+
+
+
+
+
+
+ hue
+
+
+
+
+
+
+
+ saturation
+
+
+
+
+
+
+
+ color
+
+
+
+
+
+
+
+ luminosity
+
+
+
+
+
+
+
+ Mezclado global (mezclar con el fondo)
+
+
+ normal
+
+
+
+
+
+
+
+ multiply
+
+
+
+
+
+
+
+ darken
+
+
+
+
+
+
+
+ screen
+
+
+
+
+
+
+
+ lighten
+
+
+
+
+
+
+
+ overlay
+
+
+ color-dodge
+
+
+
+
+
+
+
+ color-burn
+
+
+
+
+
+
+
+ hard-light
+
+
+
+
+
+
+
+ soft-light
+
+
+
+
+
+
+
+ difference
+
+
+
+
+
+
+
+ exclusion
+
+
+
+
+
+
+
+ hue
+
+
+
+
+
+
+
+ saturation
+
+
+
+
+
+
+
+ color
+
+
+
+
+
+
+
+ luminosity
+
+
+
+
+
+
+
+ {{CSSRef}}
-
-Mozilla soporta ciertas extensiones de CSS con el prefijo -moz-.
Algunas de estas propiedades han sido incluidas en una especificación de CSS en borrador para incluirlas en la recomendación final, pero aún están en proceso experimental. La propiedad final estándar puede ser diferente de la implementación actual con prefijo. Algunas de estas propiedades no estándares solo son aplicables en elementos XUL.
- -Cuando se estandarizan y se añade el soporte para la variante sin prefijo, las propiedades prefijadas se abandonan.
- -Propiedades estándares prefijadas de Mozilla
- -A
-
-
-
--
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Propiedades no estándar prefijadas propietarias de Mozilla (no usar en sitios web)
- -A B
-
-
-
--
-
C—F
- --
-
G H I
- --
-
J—M
- --
-
N O
- --
-
P Q R
- --
-
S
- --
-
T U V
- --
-
W—Z
- --
-
Propiedades prefijadas anteriormente, ahora estándar
- --
-
Valores
- -Para todas las propiedades
- --
-
{{Cssxref("-moz-appearance")}}
- --
-
{{cssxref("background-image")}}
- --
-
{{Cssxref("border-color")}}
- --
-
{{Cssxref("border-style")}} y {{Cssxref("outline-style")}}
- --
-
Palabras clave de {{cssxref("<color>")}}
- --
-
{{Cssxref("display")}}
- --
-
{{cssxref("empty-cells")}}
- --
-
{{Cssxref("font")}}
- --
-
{{Cssxref("font-family")}}
- --
-
{{Cssxref("image-rendering")}}
- --
-
{{cssxref("<length>")}}
- --
-
{{Cssxref("list-style-type")}}
- --
-
{{Cssxref("overflow")}}
- --
-
{{Cssxref("text-align")}}
- --
-
{{Cssxref("text-decoration")}}
- --
-
{{Cssxref("-moz-user-select")}}
- --
-
{{Cssxref("width")}}, {{Cssxref("min-width")}} y {{Cssxref("max-width")}}
- --
-
Pseudoelementos y pseudoclases
- --
-
Reglas arroba (At-rules)
- --
-
Media Queries
- --
-
Otros
- --
-
{{ CSSRef() }}
- -Un valor para una propiedad CSS, un número incluyendo un valor entero {{ Cssxref("integer") }}.
diff --git a/files/es/web/css/number/index.md b/files/es/web/css/number/index.md new file mode 100644 index 00000000000000..6dcdce2da1797e --- /dev/null +++ b/files/es/web/css/number/index.md @@ -0,0 +1,8 @@ +--- +title:{{CSSRef}}
-
-La propiedad CSS object-fit indica cómo el contenido de un elemento reemplazado, por ejemplo un {{HTMLElement("img")}} o {{HTMLElement("video")}}, debería redimensionarse para ajustarse a su contenedor.
Se puede alterar la alineación del contenido del elemento reemplazado utilizando la propiedad {{cssxref("object-position")}}.
- -{{EmbedInteractiveExample("pages/css/object-fit.html")}}
-
-Sintaxis
- -La propiedad object-fit se especifica con una de las palabras claves elegidas de la siguiente lista de valores.
Valores
- --
-
Sintaxis formal
- -{{csssyntax}} - -Ejemplo
- -HTML
- -<section> - <h2>object-fit: fill</h2> - <img class="fill" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"> - - <img class="fill narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"> - - <h2>object-fit: contain</h2> - <img class="contain" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"> - - <img class="contain narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"> - - <h2>object-fit: cover</h2> - <img class="cover" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"> - - <img class="cover narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"> - - <h2>object-fit: none</h2> - <img class="none" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"> - - <img class="none narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"> - - <h2>object-fit: scale-down</h2> - <img class="scale-down" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"> - - <img class="scale-down narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"> -</section>- -
CSS
- -h2 {
- font-family: Courier New, monospace;
- font-size: 1em;
- margin: 1em 0 0.3em;
-}
-
-div {
- display: flex;
- flex-direction: column;
- flex-wrap: wrap;
- align-items: flex-start;
- height: 940px;
-}
-
-img {
- width: 150px;
- height: 100px;
- border: 1px solid #000;
-}
-
-.narrow {
- width: 100px;
- height: 150px;
- margin-top: 10px;
-}
-
-.fill {
- object-fit: fill;
-}
-
-.contain {
- object-fit: contain;
-}
-
-.cover {
- object-fit: cover;
-}
-
-.none {
- object-fit: none;
-}
-
-.scale-down {
- object-fit: scale-down;
-}
-
-
-Resultado
- -{{ EmbedLiveSample('Example', 500, 450) }}
- -Especificaciones
- -| Especificación | -Estado | -Comentario | -
|---|---|---|
| {{SpecName('CSS4 Images', '#the-object-fit', 'object-fit')}} | -{{Spec2('CSS4 Images')}} | -- |
| {{SpecName('CSS3 Images', '#the-object-fit', 'object-fit')}} | -{{Spec2('CSS3 Images')}} | -Definicion inicial. | -
Compatibilidad
- -{{Compat("css.properties.object-fit")}}
- -Ver también
- --
-
object-fit: fill
+
+
+
+
+ object-fit: contain
+
+
+
+
+ object-fit: cover
+
+
+
+
+ object-fit: none
+
+
+
+
+ object-fit: scale-down
+
+
+
+{{CSSRef}}
-
-Summary
- -La propiedad object-position determina el alineamiento del elemento dentro de la caja.
{{cssinfo}}
- -Sintaxis
- -/* <position> valores */ -object-position: 100px 50px; - -/* Valores globales */ -object-position: inherit; -object-position: initial; -object-position: unset; -- -
Valores
- --
-
Sintaxis formal
- -{{csssyntax}} - -Ejemplo
- -Ejemplo de HTML
- -<img id="object-position-1" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/> -<img id="object-position-2" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/> -- -
Ejemplo de CSS
- -img {
- width: 150px;
- height: 100px;
- border: 1px solid #000;
- background-color: yellow;
- margin-right: 1em;
-}
-
-#object-position-1 {
- object-position: 10px;
-}
-
-#object-position-2 {
- object-position: 20% 10%;
-}
-
-
-Resultado
- -{{ EmbedLiveSample('Example', 360, 120) }}
- -Especificaciones
- -| Specification | -Status | -Comment | -
|---|---|---|
| {{SpecName('CSS4 Images', '#the-object-position', 'object-position')}} | -{{Spec2('CSS4 Images')}} | -
- Las |
-
| {{SpecName('CSS3 Images', '#the-object-position', 'object-position')}} | -{{Spec2('CSS3 Images')}} | -Definición incial | -
Compatibilidad con navegadores
- -{{Compat("css.properties.object-position")}} - -Contenido relacionado
- --
-
+
+```
+
+#### Ejemplo de CSS
+
+```css
+img {
+ width: 150px;
+ height: 100px;
+ border: 1px solid #000;
+ background-color: yellow;
+ margin-right: 1em;
+}
+
+#object-position-1 {
+ object-position: 10px;
+}
+
+#object-position-2 {
+ object-position: 20% 10%;
+}
+```
+
+#### Resultado
+
+{{ EmbedLiveSample('Example', 360, 120) }}
+
+## Especificaciones
+
+| Specification | Status | Comment |
+| -------------------------------------------------------------------------------------------- | -------------------------------- | ---------------------------------------------------------- |
+| {{SpecName('CSS4 Images', '#the-object-position', 'object-position')}} | {{Spec2('CSS4 Images')}} | Las `palabras clave from-image` y `flip` an sido añadidas. |
+| {{SpecName('CSS3 Images', '#the-object-position', 'object-position')}} | {{Spec2('CSS3 Images')}} | Definición incial |
+
+## Compatibilidad con navegadores
+
+{{Compat("css.properties.object-position")}}
+
+## Contenido relacionado
+
+- Other image-related CSS properties: {{cssxref("object-fit")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.
diff --git a/files/es/web/css/opacity/index.html b/files/es/web/css/opacity/index.html
deleted file mode 100644
index 55e7c2d4f6e9e3..00000000000000
--- a/files/es/web/css/opacity/index.html
+++ /dev/null
@@ -1,140 +0,0 @@
----
-title: opacity
-slug: Web/CSS/opacity
-tags:
- - CSS
- - CSS Reference
- - CSS3
- - css3-color
-translation_of: Web/CSS/opacity
----
-{{ CSSRef() }}
-
-Resumen
- -La propiedad CSS opacity define la transparencia de un elemento, esto es, en qué grado se superpone el fondo al elemento.
Usar esta propiedad con un valor diferente a 1 situa al elemento en un nuevo contexto de apilamiento.
- -{{cssinfo}}
- -Sintaxis
- -opacity: <valor alfanumérico>- -
Valores
- --
-
Ejemplos
- -hbox.example {
- opacity: 0.5; /* see the background through the hbox */
-}
-
-Live Example
- -pre { /* make the box translucent (20% opaque) */
- border: solid red;
- opacity: 0.2;
- filter: alpha(opacity=20); /* IE8 and lower */
- zoom: 1; /* set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and lower */
-}
-
-pre { /* make the box translucent (50% opaque) */
- border: solid red;
- opacity: 0.5;
- filter: alpha(opacity=50); /* IE8 and lower */
- zoom: 1; /* set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and lower */
-}
-
-pre { /* make the box translucent (80% opaque) */
- border: solid red;
- opacity: 0.8;
- filter: alpha(opacity=80); /* IE8 and lower */
- zoom: 1; /* set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and lower */
-}
-
-Variando la opacidad con :hover
- -<!doctype html>
-<html>
-<head>
-<style>
-img.opacity {
- opacity: 1;
- filter: alpha(opacity=50);
- zoom: 1;
- }
-
-img.opacity:hover {
- opacity: 0.5;
- filter: alpha(opacity=100);
- zoom: 1;
- }
-</style>
-</head>
-
-<body>
-<img src="//developer.mozilla.org/media/img/mdn-logo.png" alt="MDN logo" width="128" height="146" class="opacity">
-</body>
-</html>
-
-
-Especificaciones
- -| Especificación | -Estado | -Comentarios | -
|---|---|---|
| {{ SpecName('CSS3 Transitions', '#animatable-css', 'opacity') }} | -{{ Spec2('CSS3 Transitions') }} | -Define opacity como una animación. |
-
| {{ SpecName('CSS3 Colors', '#opacity', 'opacity') }} | -{{ Spec2('CSS3 Colors') }} | -Definición inicial | -
Compatibilidad entre navegadores
- -{{Compat("css.properties.opacity")}} - -Más información
- - diff --git a/files/es/web/css/opacity/index.md b/files/es/web/css/opacity/index.md new file mode 100644 index 00000000000000..f5c639c4d1bd4c --- /dev/null +++ b/files/es/web/css/opacity/index.md @@ -0,0 +1,116 @@ +--- +title: opacity +slug: Web/CSS/opacity +tags: + - CSS + - CSS Reference + - CSS3 + - css3-color +translation_of: Web/CSS/opacity +--- +{{ CSSRef() }} + +## Resumen + +La propiedad CSS `opacity` define la transparencia de un elemento, esto es, en qué grado se superpone el fondo al elemento. + +Usar esta propiedad con un valor diferente a 1 situa al elemento en un nuevo [contexto de apilamiento](/en/CSS/Understanding_z-index/The_stacking_context). + +{{cssinfo}} + +## Sintaxis + +``` +opacity:
+
+
+```
+
+## Especificaciones
+
+| Especificación | Estado | Comentarios |
+| ------------------------------------------------------------------------------------ | ---------------------------------------- | ------------------------------------ |
+| {{ SpecName('CSS3 Transitions', '#animatable-css', 'opacity') }} | {{ Spec2('CSS3 Transitions') }} | Define `opacity` como una animación. |
+| {{ SpecName('CSS3 Colors', '#opacity', 'opacity') }} | {{ Spec2('CSS3 Colors') }} | Definición inicial |
+
+## Compatibilidad entre navegadores
+
+{{Compat("css.properties.opacity")}}
+
+## Más información
+
+- [MSDN Microsoft's filter:alpha(opacity=xx)](http://msdn.microsoft.com/en-us/library/ms532910%28VS.85%29.aspx)
diff --git a/files/es/web/css/order/index.html b/files/es/web/css/order/index.html
deleted file mode 100644
index 11a025a5b897b1..00000000000000
--- a/files/es/web/css/order/index.html
+++ /dev/null
@@ -1,108 +0,0 @@
----
-title: order
-slug: Web/CSS/order
-translation_of: Web/CSS/order
----
-{{CSSRef}}
-
-Resumen
- -La propiedad CSS order especifica el orden utilizado para disponer los elementos en su contenedor flexible. Los elementos estarán dispuestos en orden ascendente según el valor de order. Los elementos con el mismo valor de order se dispondrán en el orden en el cual aparecen en el código fuente.
-
-
-Nota: order sólo pretende afectar el orden visual de los elementos y no su orden lógico u orden de tabulación. order no se debe usar en un medio no visual tal como un speech (sintetizador de voz).
{{cssinfo}}
- -Ver Uso de cajas flexibles de CSS para más propiedades e información.
- -Sintaxis
- -/* Valor numérico incluyendo números negativos */ -order: 5; -order: -5; - -/* Valores Globales */ -order: inherit; -order: initial; -order: unset; -- -
Valores
- --
-
Sintaxis formal
- -{{csssyntax}} - -Ejemplos
- -Aquí tiene un trozo de HTML básico:
- -<!DOCTYPE html> -<header>...</header> -<div id='main'> - <article>Article</article> - <nav>Nav</nav> - <aside>Aside</aside> -</div> -<footer>...</footer>- -
El siguiente código CSS debería crear un diseño clásico de dos barra laterales que rodea a un bloque de contenido. EL Módulo de Diseño de Caja Flexible crea automáticamente bloques de tamaño vertical igual y utiliza todo el espacio horizontal disponible.
- -#main { display: flex; text-align:center; }
- -#main > article { flex:1; order: 2; }
-#main > nav { width: 200px; order: 1; }
-#main > aside { width: 200px; order: 3; }
-
-Resultado
- -{{ EmbedLiveSample('Examples' ,'','','','Web/CSS/order') }}
- -Sobre Accesibilidad
- -Utilizar la propiedad order rompe la conexión entre la presentación visual y el order original de los elementos en el DOM. Esto afecta de forma negativa a los usuarios que navegan a través de teclado utilizando, por ejemplo, un lector de pantalla. Si el orden visual (CSS) es importante, entonces los lectores de pantallas no podrán acceder a ese dato y recorrerán los elementos de forma desordenada.
Para más información por favor, referirse a estos artículos:
- --
-
Especificaciones
- -| Especificación | -Estado | -Comentario | -
|---|---|---|
| {{SpecName('CSS3 Flexbox', '#order-property', 'order')}} | -{{Spec2('CSS3 Flexbox')}} | -Definición Inicial | -
Compatibilidad de Navegadores
- -{{Compat("css.properties.order")}} - -Ver también
- - diff --git a/files/es/web/css/order/index.md b/files/es/web/css/order/index.md new file mode 100644 index 00000000000000..2937ba0856b438 --- /dev/null +++ b/files/es/web/css/order/index.md @@ -0,0 +1,92 @@ +--- +title: order +slug: Web/CSS/order +translation_of: Web/CSS/order +--- +{{CSSRef}} + +## Resumen + +La propiedad [CSS](/es/docs/Web/CSS) **`order`** especifica el orden utilizado para disponer los elementos en su contenedor flexible. Los elementos estarán dispuestos en orden ascendente según el valor de `order`. Los elementos con el mismo valor de `order` se dispondrán en el orden en el cual aparecen en el código fuente. + +> **Nota:** `order` sólo pretende afectar el orden visual de los elementos y no su orden lógico u orden de tabulación. **`order`** no se debe usar en un medio no visual tal como un speech (sintetizador de voz). + +{{cssinfo}} + +Ver [Uso de cajas flexibles de CSS](/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS) para más propiedades e información. + +## Sintaxis + +```css +/* Valor numérico incluyendo números negativos */ +order: 5; +order: -5; + +/* Valores Globales */ +order: inherit; +order: initial; +order: unset; +``` + +### Valores + +- `
+ Article
+
+
+
+
+```
+
+El siguiente código CSS debería crear un diseño clásico de dos barra laterales que rodea a un bloque de contenido. EL Módulo de Diseño de Caja Flexible crea automáticamente bloques de tamaño vertical igual y utiliza todo el espacio horizontal disponible.
+
+\#main { display: flex; text-align:center; }
+
+```css
+#main > article { flex:1; order: 2; }
+#main > nav { width: 200px; order: 1; }
+#main > aside { width: 200px; order: 3; }
+```
+
+### Resultado
+
+{{ EmbedLiveSample('Examples' ,'','','','Web/CSS/order') }}
+
+## Sobre Accesibilidad
+
+Utilizar la propiedad `order` rompe la conexión entre la presentación visual y el order original de los elementos en el DOM. Esto afecta de forma negativa a los usuarios que navegan a través de teclado utilizando, por ejemplo, un lector de pantalla. Si el orden visual (CSS) es importante, entonces los lectores de pantallas no podrán acceder a ese dato y recorrerán los elementos de forma desordenada.
+
+Para más información por favor, referirse a estos artículos:
+
+- [Flexbox & the keyboard navigation disconnect — Tink](https://tink.uk/flexbox-the-keyboard-navigation-disconnect/)
+- [Source Order Matters | Adrian Roselli](http://adrianroselli.com/2015/09/source-order-matters.html)
+- [MDN Understanding WCAG, Guideline 1.3 explanations](/es/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways)
+- [Understanding Success Criterion 1.3.2 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html)
+
+## Especificaciones
+
+| Especificación | Estado | Comentario |
+| ---------------------------------------------------------------------------- | -------------------------------- | ------------------ |
+| {{SpecName('CSS3 Flexbox', '#order-property', 'order')}} | {{Spec2('CSS3 Flexbox')}} | Definición Inicial |
+
+## Compatibilidad de Navegadores
+
+{{Compat("css.properties.order")}}
+
+## Ver también
+
+- [Uso de cajas flexibles de CSS](/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS)
diff --git a/files/es/web/css/outline-offset/index.html b/files/es/web/css/outline-offset/index.html
deleted file mode 100644
index fe812cc73d4eb3..00000000000000
--- a/files/es/web/css/outline-offset/index.html
+++ /dev/null
@@ -1,90 +0,0 @@
----
-title: outline-offset
-slug: Web/CSS/outline-offset
-tags:
- - Contorno CSS
- - Propiedad CSS
-translation_of: Web/CSS/outline-offset
----
-{{CSSRef}}
-
-Resumen
- -La propiedad CSS outline-offset es usada para establecer el espacio entre un contorno {{ cssxref("outline") }} y el límite o borde de un elemento. Un contorno es una línea que se dibuja al rededor de los elementos, fuera de los límites de su borde.
{{cssinfo}}
- -El espacio será transparente (el elemento padre determinará el fondo).
- -Sintaxis
- -/* Valores <length> */ -outline-offset: 3px; -outline-offset: 0.2em; - -/* Valores globales */ -outline-offset: inherit; -outline-offset: initial; -outline-offset: unset; -- -
Valores
- --
-
Sintaxis formal
- -{{csssyntax}} - -Ejemplos
- -p {
- outline: dashed thin;
- /* Mueve el contorno 10px lejos del borde */
- outline-offset: 10px;
- border:1px solid black;
-}
-
-
-Html
- -<p>outline: offset 10px. Border is solid and outline is dashed</p>- -
El código anterior producirá este efecto:
- -{{ EmbedLiveSample('Examples', '', '', '') }}
- -Otro ejemplo:
- -outline: multiple offsets;
- -Especificaciones
- -| Especificación | -Estado | -Comentarios | -
|---|---|---|
| {{ SpecName('CSS3 Transitions', '#animatable-css', 'outline-offset') }} | -{{ Spec2('CSS3 Transitions') }} | -Define outline-offset como propiedad que se puede animar. |
-
| {{ SpecName('CSS3 Basic UI', '#outline-offset', 'outline-offset') }} | -{{ Spec2('CSS3 Basic UI') }} | -Definición inicial | -
Compatibilidad de navegadores
- -{{Compat("css.properties.outline-offset")}} diff --git a/files/es/web/css/outline-offset/index.md b/files/es/web/css/outline-offset/index.md new file mode 100644 index 00000000000000..9ce069bd7b709f --- /dev/null +++ b/files/es/web/css/outline-offset/index.md @@ -0,0 +1,85 @@ +--- +title: outline-offset +slug: Web/CSS/outline-offset +tags: + - Contorno CSS + - Propiedad CSS +translation_of: Web/CSS/outline-offset +--- +{{CSSRef}} + +## Resumen + +La propiedad CSS **`outline-offset`** es usada para establecer el espacio entre un contorno {{ cssxref("outline") }} y el límite o borde de un elemento. Un contorno es una línea que se dibuja al rededor de los elementos, fuera de los límites de su borde. + +{{cssinfo}} + +El espacio será transparente (el elemento padre determinará el fondo). + +## Sintaxis + +```css +/* Valoresoutline: offset 10px. Border is solid and outline is dashed
+``` + +El código anterior producirá este efecto: + +{{ EmbedLiveSample('Examples', '', '', '') }} + +#### Otro ejemplo: + +```html hidden ++ + + outline: multiple offsets; + + +
+``` + +{{EmbedLiveSample}} + +## Especificaciones + +| Especificación | Estado | Comentarios | +| ------------------------------------------------------------------------------------------------ | ---------------------------------------- | ----------------------------------------------------------- | +| {{ SpecName('CSS3 Transitions', '#animatable-css', 'outline-offset') }} | {{ Spec2('CSS3 Transitions') }} | Define `outline-offset` como propiedad que se puede animar. | +| {{ SpecName('CSS3 Basic UI', '#outline-offset', 'outline-offset') }} | {{ Spec2('CSS3 Basic UI') }} | Definición inicial | + +## Compatibilidad de navegadores + +{{Compat("css.properties.outline-offset")}} diff --git a/files/es/web/css/outline-style/index.html b/files/es/web/css/outline-style/index.html deleted file mode 100644 index 486b1fc8bbcbe7..00000000000000 --- a/files/es/web/css/outline-style/index.html +++ /dev/null @@ -1,199 +0,0 @@ ---- -title: outline-style -slug: Web/CSS/outline-style -tags: - - Contorno CSS - - Propiedad CSS -translation_of: Web/CSS/outline-style ---- -{{CSSRef}}
-
-Resumen
- -La propiedad CSS outline-style es usada para establecer el estilo del contorno de un elemento. Un contorno es una línea que se dibuja al rededor de elementos, fuera de los límites del borde, para resaltar un elemento.
Por lo general, es más conveniente usar la propiedad de forma reducida {{cssxref("outline")}} en vez de outline-style, outline-width y outline-color por separado.
{{cssinfo}}
- -Sintaxis
- -/* Valores clave */ -outline-style: auto; -outline-style: none; -outline-style: dotted; -outline-style: dashed; -outline-style: solid; -outline-style: double; -outline-style: groove; -outline-style: ridge; -outline-style: inset; -outline-style: outset; - -/* Valores globales */ -outline-style: inherit; -outline-style: initial; -outline-style: unset; -- -
Valores
- -<br-style> puede ser uno de los siguientes:
-
-
-
-
-
-
-
-
-
-
-
Sintaxis formal
- -{{csssyntax}} - -Ejemplo 1 - dotted y dashed
-
-HTML
- -<div> - <div class="dotted"> - <p class="dashed">Outline Demo</p> - </div> -</div>- -
CSS
- -.dotted {
- outline-style: dotted; /* same result as "outline: dotted" */
-}
-.dashed {
- outline-style: dashed;
-}
-
-/* To make the Demo clearer */
-* { outline-width: 10px; padding: 15px; }
-
-{{ EmbedLiveSample('Example_1_-_dotted_and_dashed') }}
- -Ejemplo 2 - solid y double
-
-HTML
- -<div> - <div class="solid"> - <p class="double">Outline Demo</p> - </div> -</div>- -
CSS
- -.solid {
- outline-style: solid;
-}
-.double {
- outline-style: double;
-}
-
-/* To make the Demo clearer */
-* { outline-width: 10px; padding: 15px; }
-
-{{ EmbedLiveSample('Example_2_-_solid_and_double') }}
- -Ejemplo 3 - groove y ridge
-
-HTML
- -<div> - <div class="groove"> - <p class="ridge">Outline Demo</p> - </div> -</div>- -
CSS
- -.groove {
- outline-style: groove;
-}
-.ridge {
- outline-style: ridge;
-}
-
-/* To make the Demo clearer */
-* { outline-width: 10px; padding: 15px; }
-
-{{ EmbedLiveSample('Example_3_-_groove_and_ridge') }}
- -Ejemplo 4 - inset y outset
-
-HTML
- -<div> - <div class="inset"> - <p class="outset">Outline Demo</p> - </div> -</div>- -
CSS
- -.inset {
- outline-style: inset;
-}
-.outset {
- outline-style: outset;
-}
-
-/* To make the Demo clearer */
-* { outline-width: 10px; padding: 15px; }
-
-{{ EmbedLiveSample('Example_4_-_inset_and_outset') }}
- -Especificaciones
- -| Especificación | -Estado | -Comentarios | -
|---|---|---|
| {{SpecName('CSS3 Basic UI', '#outline-style', 'outline-style')}} | -{{Spec2('CSS3 Basic UI')}} | -Se añade el valor auto |
-
| {{SpecName('CSS2.1', 'ui.html#propdef-outline-style', 'outline-style')}} | -{{Spec2('CSS2.1')}} | -Definición inicial | -
Compatibilidad de navegadores
- -{{Compat("css.properties.outline-style")}} diff --git a/files/es/web/css/outline-style/index.md b/files/es/web/css/outline-style/index.md new file mode 100644 index 00000000000000..bb2da5d3c14693 --- /dev/null +++ b/files/es/web/css/outline-style/index.md @@ -0,0 +1,188 @@ +--- +title: outline-style +slug: Web/CSS/outline-style +tags: + - Contorno CSS + - Propiedad CSS +translation_of: Web/CSS/outline-style +--- +{{CSSRef}} + +## Resumen + +La propiedad CSS **`outline-style`** es usada para establecer el estilo del contorno de un elemento. Un contorno es una línea que se dibuja al rededor de elementos, fuera de los límites del borde, para resaltar un elemento. + +Por lo general, es más conveniente usar la propiedad de forma reducida {{cssxref("outline")}} en vez de`outline-style`,`outline-width`y`outline-color` por separado. + +{{cssinfo}} + +## Sintaxis + +```css +/* Valores clave */ +outline-style: auto; +outline-style: none; +outline-style: dotted; +outline-style: dashed; +outline-style: solid; +outline-style: double; +outline-style: groove; +outline-style: ridge; +outline-style: inset; +outline-style: outset; + +/* Valores globales */ +outline-style: inherit; +outline-style: initial; +outline-style: unset; +``` + +## Valores + +`
+
+```
+
+CSS
+
+```css
+.dotted {
+ outline-style: dotted; /* same result as "outline: dotted" */
+}
+.dashed {
+ outline-style: dashed;
+}
+
+/* To make the Demo clearer */
+* { outline-width: 10px; padding: 15px; }
+```
+
+{{ EmbedLiveSample('Example_1_-_dotted_and_dashed') }}
+
+## Ejemplo 2 - `solid` y `double`
+
+HTML
+
+```html
+
+
+Outline Demo
+
+
+```
+
+CSS
+
+```css
+.solid {
+ outline-style: solid;
+}
+.double {
+ outline-style: double;
+}
+
+/* To make the Demo clearer */
+* { outline-width: 10px; padding: 15px; }
+```
+
+{{ EmbedLiveSample('Example_2_-_solid_and_double') }}
+
+## Ejemplo 3 - `groove` y `ridge`
+
+HTML
+
+```html
+
+
+Outline Demo
+
+
+```
+
+CSS
+
+```css
+.groove {
+ outline-style: groove;
+}
+.ridge {
+ outline-style: ridge;
+}
+
+/* To make the Demo clearer */
+* { outline-width: 10px; padding: 15px; }
+```
+
+{{ EmbedLiveSample('Example_3_-_groove_and_ridge') }}
+
+## Ejemplo 4 - `inset` y `outset`
+
+HTML
+
+```html
+
+
+Outline Demo
+
+
+```
+
+CSS
+
+```css
+.inset {
+ outline-style: inset;
+}
+.outset {
+ outline-style: outset;
+}
+
+/* To make the Demo clearer */
+* { outline-width: 10px; padding: 15px; }
+```
+
+{{ EmbedLiveSample('Example_4_-_inset_and_outset') }}
+
+## Especificaciones
+
+| Especificación | Estado | Comentarios |
+| ------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------------------ |
+| {{SpecName('CSS3 Basic UI', '#outline-style', 'outline-style')}} | {{Spec2('CSS3 Basic UI')}} | Se añade el valor `auto` |
+| {{SpecName('CSS2.1', 'ui.html#propdef-outline-style', 'outline-style')}} | {{Spec2('CSS2.1')}} | Definición inicial |
+
+## Compatibilidad de navegadores
+
+{{Compat("css.properties.outline-style")}}
diff --git a/files/es/web/css/outline-width/index.html b/files/es/web/css/outline-width/index.html
deleted file mode 100644
index fe3172a67484ea..00000000000000
--- a/files/es/web/css/outline-width/index.html
+++ /dev/null
@@ -1,128 +0,0 @@
----
-title: outline-width
-slug: Web/CSS/outline-width
-tags:
- - Contorno CSS
- - Propiedad CSS
-translation_of: Web/CSS/outline-width
----
-
+
+Outline Demo
+{{CSSRef}}
-
-Resumen
- -La propiedad CSS outline-width es usada para establecer el grosor del contorno de un elemento. Un contorno es una línea que se dibuja al rededor de los elementos, fuera de los límites del borde, para resaltar al elemento:
{{cssinfo}}
- -Sintaxis
- -/* Valores clave */ -outline-width: thin; -outline-width: medium; -outline-width: thick; - -/* Valores <length> */ -outline-width: 1px; -outline-width: 0.1em; - -/* Valores globales */ -outline-width: inherit; -- -
Valores
- --
-
Sintaxis formal
- -{{csssyntax}} - -Ejemplos
- -Contenido HTML
- -<span id="thin">thin</span> -<span id="medium">medium</span> -<span id="thick">thick</span> -<span id="twopixels">2px</span> -<span id="oneex">1ex</span> -<span id="twoem">2em</span> -- -
Contenido CSS
- -span {
- outline-style: solid;
- display: inline-block;
- margin: 20px;
-}
-
-#thin {
- outline-width: thin;
-}
-
-#medium {
- outline-width: medium;
-}
-
-#thick {
- outline-width: thick;
-}
-
-#twopixels {
- outline-width: 2px;
-}
-
-#oneex {
- outline-width: 1ex;
-}
-
-#twoem {
- outline-width: 2em;
-}
-
-
-
-{{EmbedLiveSample('Examples', '100%', '80')}}
- -Especificaciones
- -| Especificación | -Estado | -Comentarios | -
|---|---|---|
| {{SpecName('CSS3 Basic UI', '#outline-width', 'outline-width')}} | -{{Spec2('CSS3 Basic UI')}} | -Sin cambios | -
| {{SpecName('CSS3 Transitions', '#animatable-css', 'outline-width')}} | -{{Spec2('CSS3 Transitions')}} | -Define outline-width como propiedad que puede ser animada. |
-
| {{SpecName('CSS2.1', 'ui.html#propdef-outline-width', 'outline-width')}} | -{{Spec2('CSS2.1')}} | -Definición inicial | -
Compatibilidad de navegadores
- -{{Compat("css.properties.outline-width")}} diff --git a/files/es/web/css/outline-width/index.md b/files/es/web/css/outline-width/index.md new file mode 100644 index 00000000000000..23f70fbf62ac03 --- /dev/null +++ b/files/es/web/css/outline-width/index.md @@ -0,0 +1,107 @@ +--- +title: outline-width +slug: Web/CSS/outline-width +tags: + - Contorno CSS + - Propiedad CSS +translation_of: Web/CSS/outline-width +--- +{{CSSRef}} + +## Resumen + +La propiedad CSS **`outline-width`** es usada para establecer el grosor del contorno de un elemento. Un contorno es una línea que se dibuja al rededor de los elementos, fuera de los límites del borde, para resaltar al elemento: + +{{cssinfo}} + +## Sintaxis + +```css +/* Valores clave */ +outline-width: thin; +outline-width: medium; +outline-width: thick; + +/* Valores{{CSSRef}}
-
-La propiedad CSS outline es una forma reducida para establecer una o más de las propiedades individuales de contorno {{cssxref("outline-style")}}, {{cssxref("outline-width")}} y {{cssxref("outline-color")}} en una sola declaración. En la mayoría de los casos el uso de este atajo es preferible y más conveniente.
{{EmbedInteractiveExample("pages/css/outline.html")}}
-
-Al igual que con todas las propiedades abreviadas, cualquier subvalor omitido se establecerá en su valor inicial.
- -Border vs outline
- -Los bordes y los contornos son muy similares. Sin embargo, los contornos difieren de los bordes de la siguiente manera:
- --
-
{{cssinfo}}
-
-Sintaxis
- -/* style */
-outline: solid;
-
-/* color | style */
-outline: #f66 dashed;
-
-/* style | width */
-outline: inset thick;
-
-/* color | style | width */
-outline: green solid 3px;
-
-/* Global values */
-outline: inherit;
-outline: initial;
-outline: unset;Valores
- -Uno, dos o tres valores, en orden arbitrario:
- --
-
Sintaxis formal
- -{{csssyntax}} - -Example
- -HTML
- -<a href="#">Este link tiene un estilo especial para el foco</a> -- -
CSS
- -a {
- border: 1px solid;
- border-radius: 3px;
- display: inline-block;
- margin: 10px;
- padding: 5px;
-}
-
-a:focus {
- outline: 4px dotted #e73;
- outline-offset: 4px;
- background: #ffa;
-}
-
-
-Result
- -{{EmbedLiveSample("Example", "100%", 60)}}
- -Especificaciones
- -| Especificación | -Estado | -Comentarios | -
|---|---|---|
| {{SpecName('CSS3 Basic UI', '#outline', 'outline')}} | -{{Spec2('CSS3 Basic UI')}} | -Sin cambios | -
| {{SpecName('CSS2.1', 'ui.html#propdef-outline', 'outline')}} | -{{Spec2('CSS2.1')}} | -Definición inicial | -
Compatibilidad de navegadores
- -
-
-
-
diff --git a/files/es/web/css/outline/index.md b/files/es/web/css/outline/index.md
new file mode 100644
index 00000000000000..62f7c452470806
--- /dev/null
+++ b/files/es/web/css/outline/index.md
@@ -0,0 +1,111 @@
+---
+title: outline
+slug: Web/CSS/outline
+tags:
+ - Contorno CSS
+ - Propiedad CSS
+translation_of: Web/CSS/outline
+---
+{{CSSRef}}
+
+La propiedad [CSS](/es/docs/Web/CSS) **`outline`** es una [forma reducida](/es/docs/Web/CSS/Shorthand_properties) para establecer una o más de las propiedades individuales de contorno {{cssxref("outline-style")}}, {{cssxref("outline-width")}} y {{cssxref("outline-color")}} en una sola declaración. En la mayoría de los casos el uso de este atajo es preferible y más conveniente.
+
+{{EmbedInteractiveExample("pages/css/outline.html")}}
+
+Al igual que con todas las propiedades abreviadas, cualquier subvalor omitido se establecerá en su valor inicial.
+
+### Border vs outline
+
+Los bordes y los contornos son muy similares. Sin embargo, los contornos difieren de los bordes de la siguiente manera:
+
+- Los contornos no ocupan espacio, son dibujados por encima del elemento. Por lo tanto, su aparición u ocultamiento no causa un redibujado de las cajas. No suma en el tamaño de la caja y no hay movimiento o desplazamiento de los elementos como con {{cssxref("border")}}.
+- Los contornos pueden no ser rectangulares. Si el elemento se distribuye en varias líneas, el contorno no forma un rectágulo para encerrar a todo el elemento. A **diferencia de los bordes**, el contorno no está abierto en algunos lados:
+
+ ```html hidden
+ {{Compat("css.properties.outline")}}
-Ejemplo: contorno aplicado a
+ varias líneas
Ejemplo: borde aplicado a
+ varias líneas
{{CSSRef}}
-
-La propiedad CSS overflow-y define qué se debe mostrar cuando el contenido se desborda de los extremos superior e inferior de un elemento en bloque.
-
-
-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")}}
- -
-
-
-El código para este ejemplo interactivo está almacenado en un repositorio de GitHub. Si quieres contribuir con el proyecto de ejemplos interactivos, por favor clone https://github.com/mdn/interactive-examples y envíanos un pull request.
-Sintaxis
- -/* Valores con una palabra clave */
-overflow-y: visible;
-overflow-y: hidden;
-overflow-y: scroll;
-overflow-y: auto;
-
-/* Valores globales */
-overflow-y: inherit;
-overflow-y: initial;
-overflow-y: unset;La propiedad overflow-y es especificada con una sola palabra clave escogida de la lista de abajo.
Valores
- --
-
Sintaxis Formal
- -{{csssyntax}} - -Ejemplo
- -HTML
- -<ul> - <li><code>overflow-y:hidden</code> — Esconde el texto fuera de la caja - <div id="div1"> - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. - </div> - </li> - - <li><code>overflow-y:scroll</code> — Agrega una barra scroll si se necesita - <div id="div2"> - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. - </div> - </li> - - <li><code>overflow-y:visible</code> — Muestra el texto fuera de la caja si se necesita - <div id="div3"> - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. - </div> - </li> - - <li><code>overflow-y:auto</code> — En la mayoría de los navegadores, equivalente a <code>scroll</code> - <div id="div4"> - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. - </div> - </li> -</ul> - -- -
CSS
- -#div1,
-#div2,
-#div3,
-#div4 {
- border: 1px solid black;
- width: 250px;
- height: 100px;
-}
-
-#div1 { overflow-y: hidden; margin-bottom: 12px;}
-#div2 { overflow-y: scroll; margin-bottom: 12px;}
-#div3 { overflow-y: visible; margin-bottom: 120px;}
-#div4 { overflow-y: auto; margin-bottom: 120px;}
-
-
-Resultado
- -{{EmbedLiveSample("Ejemplo", "100%", "780")}}
-Especificaciones
- -| Especificación | -Estado | -Comentario | -
|---|---|---|
| {{ SpecName('CSS3 Overflow', '#propdef-overflow-y', 'overflow-y') }} | -{{Spec2('CSS3 Box')}} | -- |
Compatibilidad con navegadores
- -{{Compat("css.properties.overflow-y")}}
-
-Ver también
- --
-
-
+
{{ CSSRef() }}
-
-Sumario
- -La propiedad CSS overflow especifica: si recortar contenido, dibujar barras de desplazamiento o mostrar el contenido excedente en un elemento a nivel de bloque.
Usando la propiedad overflow con un valor distinto a visible, valor por defecto, creará un nuevo contexto de formatos de bloques. Esto es técnicamente necesario debido a que si un elemento flotante interceptara con otros forzaría a reajustar el contenido alrededor de los elementos que se interceden. El reajuste sucedería luego de cada desplazamiento, y llevaría a un desplazamiento demasiado lento.
Nótese que, cambiando programáticamente el valor de scrollTop al elemento HTML relevante, incluso cuando overflow tenga el valor hidden un elemento podría necesitar ser desplazado.
{{cssinfo}}
- -Sintaxis
- -Sintáxis formal: {{csssyntax("overflow")}}- -
overflow: visible -overflow: hidden -overflow: scroll -overflow: auto - -overflow: inherit -- -
Valores
- --
-
Extensiones de Mozilla
- --
-
Ejemplos
- -p {
- width: 12em;
- border: dotted;
- overflow: visible; /* dibuja barras si es necesario */
-}
-
-
-visible (por defecto)
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
p { overflow: hidden; /* no se dibujan barras */ }
-
-
-
-
-p { overflow: scroll; /* se dibujan ambas barras */ }
-
-
-overflow: scroll
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
p { overflow: auto; /* se dibujan barras según se necesite */ }
-
-
-overflow: auto
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
Especificaciones
- -| Especificación | -Estado | -Comentario | -
|---|---|---|
| {{ SpecName('CSS3 Box', '#overflow1', 'overflow') }} | -{{ Spec2('CSS3 Box') }} | -Sin cambios. | -
| {{ SpecName('CSS2.1', 'visufx.html#overflow', 'overflow') }} | -{{ Spec2('CSS2.1') }} | -- |
Compatibilidad en navegadores
- -{{Compat("css.properties.overflow")}}
- -Véase también
- --
-
+ visible (por defecto)
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
+
+ overflow: scroll
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
+
+ overflow: auto
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
+
{{CSSRef}}{{SeeCompatTable}}
-
-La propiedad de CSS padding-block-end define el relleno de final de bloque lógico de un elemento, que se asigna a un relleno físico en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a las propiedades {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, o {{cssxref("padding-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
Esto se relaciona con {{cssxref("padding-block-start")}}, {{cssxref("padding-inline-start")}}, y {{cssxref("padding-inline-end")}}, que define los otros rellenos del elemento.
- -{{EmbedInteractiveExample("pages/css/padding-block-end.html")}}
-
-
-
-Sintaxis
- -/* <length> values */ -padding-block-end: 10px; /* An absolute length */ -padding-block-end: 1em; /* A length relative to the text size */ - -/* <percentage> value */ -padding-block-end: 5%; /* A padding relative to the block container's width */ - -/* Global values */ -padding-block-end: inherit; -padding-block-end: initial; -padding-block-end: unset; -- -
{{cssinfo}}
- -Valores
- -La propiedad padding-block-end toma los mismos valores de la propiedad {{cssxref("padding-left")}}.
Sintaxis formal
- -{{csssyntax}} - -Ejemplo
- -Contenido HTML
- -<div> - <p class="exampleText">Example text</p> -</div> -- -
Contenido CSS
- -div {
- background-color: yellow;
- width: 120px;
- height: 120px;
-}
-
-.exampleText {
- writing-mode: vertical-lr;
- padding-block-end: 20px;
- background-color: #C8C800;
-}
-
-{{EmbedLiveSample("Ejemplo", 140, 140)}}
- -Especificación
- -| Especificación | -Estado | -Comentario | -
|---|---|---|
| {{SpecName("CSS Logical Properties", "#propdef-padding-block-end", "padding-block-end")}} | -{{Spec2("CSS Logical Properties")}} | -Definición inicial. | -
Compatibilidad en navegadores
- - - -{{Compat("css.properties.padding-block-end")}}
- -Mira también
- --
-
+
+```
+
+### Contenido CSS
+
+```css
+div {
+ background-color: yellow;
+ width: 120px;
+ height: 120px;
+}
+
+.exampleText {
+ writing-mode: vertical-lr;
+ padding-block-end: 20px;
+ background-color: #C8C800;
+}
+```
+
+{{EmbedLiveSample("Ejemplo", 140, 140)}}
+
+## Especificación
+
+| Especificación | Estado | Comentario |
+| ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | ------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-padding-block-end", "padding-block-end")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. |
+
+## Compatibilidad en navegadores
+
+{{Compat("css.properties.padding-block-end")}}
+
+## Mira también
+
+- Las propiedades físicas mapeadas: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, y {{cssxref("padding-left")}}
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/es/web/css/padding-block-start/index.html b/files/es/web/css/padding-block-start/index.html
deleted file mode 100644
index 28da359d78b159..00000000000000
--- a/files/es/web/css/padding-block-start/index.html
+++ /dev/null
@@ -1,96 +0,0 @@
----
-title: padding-block-start
-slug: Web/CSS/padding-block-start
-translation_of: Web/CSS/padding-block-start
----
-Example text
+{{CSSRef}}{{SeeCompatTable}}
- -La propiedad de CSS padding-block-start define el bloque lógico de inicio de relleno de un elemento, que se asigna a un relleno físico en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a las propiedades {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, or {{cssxref("padding-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
Esto se relaciona con {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-start")}}, y {{cssxref("padding-inline-end")}}, que define los otros rellenos del elemento.
- -{{EmbedInteractiveExample("pages/css/padding-block-start.html")}}
-
-
-
-Sintaxis
- -/* <length> values */ -padding-block-start: 10px; /* An absolute length */ -padding-block-start: 1em; /* A length relative to the text size */ - -/* <percentage> value */ -padding-block-start: 5%; /* A padding relative to the block container's width */ - -/* Global values */ -padding-block-start: inherit; -padding-block-start: initial; -padding-block-start: unset; -- -
{{cssinfo}}
- -Valores
- -La propiedad padding-block-start toma los mismos valores de la propiedad {{cssxref("padding-left")}}.
Sintaxis formal
- -{{csssyntax}} - -Ejemplo
- -Contenido HTML
- -<div> - <p class="exampleText">Example text</p> -</div> -- -
Contenido CSS
- -div {
- background-color: yellow;
- width: 120px;
- height: 120px;
-}
-
-.exampleText {
- writing-mode: vertical-lr;
- padding-block-start: 20px;
- background-color: #C8C800;
-}
-
-{{EmbedLiveSample("Ejemplo", 140, 140)}}
- -Especificación
- -| Especificación | -Estado | -Comentario | -
|---|---|---|
| {{SpecName("CSS Logical Properties", "#propdef-padding-block-start", "padding-block-start")}} | -{{Spec2("CSS Logical Properties")}} | -Definición inicial. | -
Compatibilidad en navegadores
- - - -{{Compat("css.properties.padding-block-start")}}
- -Mira también
- --
-
+
+```
+
+### Contenido CSS
+
+```css
+div {
+ background-color: yellow;
+ width: 120px;
+ height: 120px;
+}
+
+.exampleText {
+ writing-mode: vertical-lr;
+ padding-block-start: 20px;
+ background-color: #C8C800;
+}
+```
+
+{{EmbedLiveSample("Ejemplo", 140, 140)}}
+
+## Especificación
+
+| Especificación | Estado | Comentario |
+| ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-padding-block-start", "padding-block-start")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. |
+
+## Compatibilidad en navegadores
+
+{{Compat("css.properties.padding-block-start")}}
+
+## Mira también
+
+- Las propiedades físicas mapeadas: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, y {{cssxref("padding-left")}}
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/es/web/css/padding-block/index.html b/files/es/web/css/padding-block/index.html
deleted file mode 100644
index 9693f43e5fcdb9..00000000000000
--- a/files/es/web/css/padding-block/index.html
+++ /dev/null
@@ -1,96 +0,0 @@
----
-title: padding-block
-slug: Web/CSS/padding-block
-translation_of: Web/CSS/padding-block
----
-Example text
+{{CSSRef}}{{SeeCompatTable}}
- -La propiedad de CSS padding-block define el relleno lógico de inicio y final del bloque de un elemento, que se asigna a las propiedades físicas del relleno según el modo de escritura del elemento, la direccionalidad y la orientación del texto.
/* <length> values */ -padding-block: 10px 20px; /* An absolute length */ -padding-block: 1em 2em; /* relative to the text size */ -padding-block: 5% 2%; /* relative to the nearest block container's width */ -padding-block: 10px; /* sets both start and end values */ - -/* Keyword values */ -padding-block: auto; - -/* Global values */ -padding-block: inherit; -padding-block: initial; -padding-block: unset; -- -
Estos valores corresponde a las propiedades {{cssxref("padding-top")}} y {{cssxref("padding-bottom")}}, o {{cssxref("padding-right")}}, y {{cssxref("padding-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
- -Los valores pueden ser establecidos individualmente como {{cssxref("padding-block-start")}} y {{cssxref("padding-block-end")}}. La propiedad de dirección en línea es {{cssxref("padding-inline")}} que establece {{cssxref("padding-inline-start")}}, y {{cssxref("padding-inline-end")}}.
- -{{cssinfo}}
- -Sintaxis
- -Valores
- -La propiedad padding-block toma los mismos valores que la propiedad {{cssxref("padding-left")}}.
Sintaxis formal
- -{{csssyntax}} - -Ejemplo
- -Contenido HTML
- -<div> - <p class="exampleText">Example text</p> -</div> -- -
Contenido CSS
- -div {
- background-color: yellow;
- width: 120px;
- height: 120px;
-}
-
-.exampleText {
- writing-mode: vertical-rl;
- padding-block: 20px 40px;
- background-color: #c8c800;
-}
-
-{{EmbedLiveSample("Ejemplo", 140, 140)}}
- -Especificación
- -| Especificación | -Estado | -Comentario | -
|---|---|---|
| {{SpecName("CSS Logical Properties", "#propdef-padding-block", "padding-block")}} | -{{Spec2("CSS Logical Properties")}} | -Definición inicial. | -
Compatibilidad en navegadores
- - - -{{Compat("css.properties.padding-block")}}
- -Mira también
- --
-
+
+```
+
+### Contenido CSS
+
+```css
+div {
+ background-color: yellow;
+ width: 120px;
+ height: 120px;
+}
+
+.exampleText {
+ writing-mode: vertical-rl;
+ padding-block: 20px 40px;
+ background-color: #c8c800;
+}
+```
+
+{{EmbedLiveSample("Ejemplo", 140, 140)}}
+
+## Especificación
+
+| Especificación | Estado | Comentario |
+| ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | ------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-padding-block", "padding-block")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. |
+
+## Compatibilidad en navegadores
+
+{{Compat("css.properties.padding-block")}}
+
+## Mira también
+
+- Las propiedades físicas mapeadas: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, y {{cssxref("padding-left")}}
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/es/web/css/padding-bottom/index.html b/files/es/web/css/padding-bottom/index.html
deleted file mode 100644
index be3693ad246b21..00000000000000
--- a/files/es/web/css/padding-bottom/index.html
+++ /dev/null
@@ -1,85 +0,0 @@
----
-title: padding-bottom
-slug: Web/CSS/padding-bottom
-translation_of: Web/CSS/padding-bottom
----
-Example text
+{{CSSRef}}
- -Sumario
- -La propiedad padding-bottom CSS establece el espacio de relleno requerido en la parte inferior del elemento. El área de padding es el espacio entre el contenido del elemento y su borde. Contrariamente de la propiedad margin-bottom, valores negativos no son válidos.
{{cssinfo}}
- -Sintaxis
- -/* <length> values (Valores fijos)*/ -padding-bottom: 0.5em; -padding-bottom: 0; -padding-bottom: 2cm; - -/* <percentage> value (Valores porcentuales)*/ -padding-bottom: 10%; - -/* Global values (Valores globales)*/ -padding-bottom: inherit; -padding-bottom: initial; -padding-bottom: unset; -- -
Valores
- --
-
Sintaxis formal
- -{{csssyntax}} - -Ejemplos
- -.content { padding-bottom: 5%; }
-.sidebox { padding-bottom: 10px; }
-
-
-Especificaciones
- -| Especificación | -Estado | -Comentarios | -
|---|---|---|
| {{ SpecName('CSS3 Box', '#the-padding', 'padding-bottom') }} | -{{ Spec2('CSS3 Box') }} | -No change from {{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-bottom') }}. | -
| {{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-bottom') }} | -{{ Spec2('CSS3 Transitions') }} | -Defines padding-bottom as animatable. |
-
| {{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-bottom') }} | -{{ Spec2('CSS2.1') }} | -No change from {{ Specname('CSS1', '#padding-bottom', 'padding-bottom') }}. | -
| {{ Specname('CSS1', '#padding-bottom', 'padding-bottom') }} | -{{ Spec2('CSS1') }} | -Initial definition | -
Compatibilidad en navegadores
- -{{Compat("css.properties.padding-bottom")}} diff --git a/files/es/web/css/padding-bottom/index.md b/files/es/web/css/padding-bottom/index.md new file mode 100644 index 00000000000000..8b6603a61058a9 --- /dev/null +++ b/files/es/web/css/padding-bottom/index.md @@ -0,0 +1,60 @@ +--- +title: padding-bottom +slug: Web/CSS/padding-bottom +translation_of: Web/CSS/padding-bottom +--- +{{CSSRef}} + +## Sumario + +La propiedad **`padding-bottom`** [CSS](https://developer.mozilla.org/en/CSS) establece el espacio de relleno requerido en la parte inferior del elemento. El [área de padding](https://developer.mozilla.org/en/CSS/box_model#padding) es el espacio entre el contenido del elemento y su borde. Contrariamente de la propiedad **`margin-bottom`**, valores negativos no son válidos. + +{{cssinfo}} + +## Sintaxis + +```css +/*{{CSSRef}}{{SeeCompatTable}}
-
-La propiedad de CSS padding-inline-end define el relleno final lógico en línea de un elemento, que se asigna a un relleno físico en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a las propiedades {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, o {{cssxref("padding-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
Esto se relaciona con {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, and {{cssxref("padding-inline-start")}}, que define los otros rellenos del elemento.
- -{{EmbedInteractiveExample("pages/css/padding-inline-end.html")}}
-
-
-
-Sintaxis
- -/* <length> values */ -padding-inline-end: 10px; /* An absolute length */ -padding-inline-end: 1em; /* A length relative to the text size */ - -/* <percentage> value */ -padding-inline-end: 5%; /* A padding relative to the block container's width */ - -/* Global values */ -padding-inline-end: inherit; -padding-inline-end: initial; -padding-inline-end: unset; -- -
{{cssinfo}}
- -Valores
- -La propiedad padding-inline-end toma los mismos valores de la propiedad {{cssxref("padding-left")}}.
Sintaxis formal
- -{{csssyntax}} - -Ejemplo
- -Contenido HTML
- -<div> - <p class="exampleText">Example text</p> -</div> -- -
Contenido CSS
- -div {
- background-color: yellow;
- width: 120px;
- height: 120px;
-}
-
-.exampleText {
- writing-mode: vertical-lr;
- padding-inline-end: 20px;
- background-color: #C8C800;
-}
-
-{{EmbedLiveSample("Ejemplo", 140, 140)}}
- -Especificación
- -| Especificación | -Estado | -Comentario | -
|---|---|---|
| {{SpecName("CSS Logical Properties", "#propdef-padding-inline-end", "padding-inline-end")}} | -{{Spec2("CSS Logical Properties")}} | -Definición inicial. | -
Compatibilidad en navegadores
- - - -{{Compat("css.properties.padding-inline-end")}}
- -Mira también
- --
-
+
+```
+
+### Contenido CSS
+
+```css
+div {
+ background-color: yellow;
+ width: 120px;
+ height: 120px;
+}
+
+.exampleText {
+ writing-mode: vertical-lr;
+ padding-inline-end: 20px;
+ background-color: #C8C800;
+}
+```
+
+{{EmbedLiveSample("Ejemplo", 140, 140)}}
+
+## Especificación
+
+| Especificación | Estado | Comentario |
+| ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | ------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-padding-inline-end", "padding-inline-end")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. |
+
+## Compatibilidad en navegadores
+
+{{Compat("css.properties.padding-inline-end")}}
+
+## Mira también
+
+- Las propiedades físicas mapeadas: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, y {{cssxref("padding-left")}}
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/es/web/css/padding-inline-start/index.html b/files/es/web/css/padding-inline-start/index.html
deleted file mode 100644
index ebfb418e022ce3..00000000000000
--- a/files/es/web/css/padding-inline-start/index.html
+++ /dev/null
@@ -1,96 +0,0 @@
----
-title: padding-inline-start
-slug: Web/CSS/padding-inline-start
-translation_of: Web/CSS/padding-inline-start
----
-Example text
+{{CSSRef}}{{SeeCompatTable}}
-
-La propiedad de CSS padding-inline-start define el relleno de inicio lógico en línea de un elemento, que se asigna a un relleno físico en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a las propiedades {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, or {{cssxref("padding-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
Esto se relaciona con {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, y {{cssxref("padding-inline-end")}}, que define los rellenos de los otros elementos.
- -{{EmbedInteractiveExample("pages/css/padding-inline-start.html")}}
-
-
-
-Sintaxis
- -/* <length> values */ -padding-inline-start: 10px; /* An absolute length */ -padding-inline-start: 1em; /* A length relative to the text size */ - -/* <percentage> value */ -padding-inline-start: 5%; /* A padding relative to the block container's width */ - -/* Global values */ -padding-inline-start: inherit; -padding-inline-start: initial; -padding-inline-start: unset; -- -
{{cssinfo}}
- -Valores
- -La propiedad padding-inline-start toma los mismos valores de la propiedad {{cssxref("padding-left")}}.
Sintaxis formal
- -{{csssyntax}} - -Ejemplo
- -Contenido HTML
- -<div> - <p class="exampleText">Example text</p> -</div> -- -
Contenido CSS
- -div {
- background-color: yellow;
- width: 120px;
- height: 120px;
-}
-
-.exampleText {
- writing-mode: vertical-lr;
- padding-inline-start: 20px;
- background-color: #C8C800;
-}
-
-{{EmbedLiveSample("Ejemplo", 140, 140)}}
- -Especificación
- -| Especificación | -Estado | -Comentario | -
|---|---|---|
| {{SpecName("CSS Logical Properties", "#propdef-padding-inline-start", "padding-inline-start")}} | -{{Spec2("CSS Logical Properties")}} | -Definición inicial. | -
Compatibilidad en navegadores
- - - -{{Compat("css.properties.padding-inline-start")}}
- -Mira también
- --
-
+
+```
+
+### Contenido CSS
+
+```css
+div {
+ background-color: yellow;
+ width: 120px;
+ height: 120px;
+}
+
+.exampleText {
+ writing-mode: vertical-lr;
+ padding-inline-start: 20px;
+ background-color: #C8C800;
+}
+```
+
+{{EmbedLiveSample("Ejemplo", 140, 140)}}
+
+## Especificación
+
+| Especificación | Estado | Comentario |
+| -------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-padding-inline-start", "padding-inline-start")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. |
+
+## Compatibilidad en navegadores
+
+{{Compat("css.properties.padding-inline-start")}}
+
+## Mira también
+
+- Las propiedades físicas mapeadas: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, y {{cssxref("padding-left")}}
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/es/web/css/padding-inline/index.html b/files/es/web/css/padding-inline/index.html
deleted file mode 100644
index 31e22fd0125fc9..00000000000000
--- a/files/es/web/css/padding-inline/index.html
+++ /dev/null
@@ -1,96 +0,0 @@
----
-title: padding-inline
-slug: Web/CSS/padding-inline
-translation_of: Web/CSS/padding-inline
----
-Example text
+{{CSSRef}}{{SeeCompatTable}}
- -La propiedad de CSS padding-inline define el relleno en línea lógico de inicio y final de un elemento, que asigna las propiedades de relleno físicas dependiendo del modo de escritura del elemento, direccionalidad, y orientación del texto.
/* <length> values */ -padding-inline: 10px 20px; /* An absolute length */ -padding-inline: 1em 2em; /* relative to the text size */ -padding-inline: 5% 2%; /* relative to the nearest block container's width */ -padding-inline: 10px; /* sets both start and end values */ - -/* Keyword values */ -padding-inline: auto; - -/* Global values */ -padding-inline: inherit; -padding-inline: initial; -padding-inline: unset; -- -
Estos valores corresponden a las propiedades{{cssxref("padding-top")}} y {{cssxref("padding-bottom")}}, o {{cssxref("padding-right")}}, y {{cssxref("padding-left")}} dependiendo de los valores definidos {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
- -Los valores pueden ser establecidos individualmente como {{cssxref("padding-inline-start")}} y {{cssxref("padding-inline-end")}}. La propiedad de la dirección bloque es {{cssxref("padding-block")}} que establece {{cssxref("padding-block-start")}}, y {{cssxref("padding-block-end")}}.
- -{{cssinfo}}
- -Sintaxis
- -Valores
- -La propiedad padding-inline toma los mismos valores de la propiedad {{cssxref("padding-left")}}.
Sintaxis formal
- -{{csssyntax}} - -Ejemplo
- -Contenido HTML
- -<div> - <p class="exampleText">Example text</p> -</div> -- -
Contenido CSS
- -div {
- background-color: yellow;
- width: 120px;
- height: 120px;
-}
-
-.exampleText {
- writing-mode: vertical-rl;
- padding-inline: 20px 40px;
- background-color: #c8c800;
-}
-
-{{EmbedLiveSample("Ejemplo", 140, 140)}}
- -Especificación
- -| Especificación | -Estado | -Comentario | -
|---|---|---|
| {{SpecName("CSS Logical Properties", "#propdef-padding-inline", "padding-inline")}} | -{{Spec2("CSS Logical Properties")}} | -Definición inicial. | -
Compatibilidad en navegadores
- - - -{{Compat("css.properties.padding-inline")}}
- -Mira también
- --
-
+
+```
+
+### Contenido CSS
+
+```css
+div {
+ background-color: yellow;
+ width: 120px;
+ height: 120px;
+}
+
+.exampleText {
+ writing-mode: vertical-rl;
+ padding-inline: 20px 40px;
+ background-color: #c8c800;
+}
+```
+
+{{EmbedLiveSample("Ejemplo", 140, 140)}}
+
+## Especificación
+
+| Especificación | Estado | Comentario |
+| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-padding-inline", "padding-inline")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. |
+
+## Compatibilidad en navegadores
+
+{{Compat("css.properties.padding-inline")}}
+
+## Mira también
+
+- Las propiedades físicas mapeadas: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, y {{cssxref("padding-left")}}
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/es/web/css/padding-top/index.html b/files/es/web/css/padding-top/index.html
deleted file mode 100644
index 7e7d8a2b83bae3..00000000000000
--- a/files/es/web/css/padding-top/index.html
+++ /dev/null
@@ -1,85 +0,0 @@
----
-title: padding-top
-slug: Web/CSS/padding-top
-translation_of: Web/CSS/padding-top
----
-Example text
+{{CSSRef}}
- -Sumario
- -La propiedad padding-top CSS establece el espacio de relleno requerido en la parte superior del elemento. El área de padding es el espacio entre el contenido del elemento y su borde. Contrariamente de la propiedad margin-top, valores negativos no son válidos.
{{cssinfo}}
- -Sintaxis
- -/* <length> values (valores fijos) */ -padding-top: 0.5em; -padding-top: 0; -padding-top: 2cm; - -/* <percentage> value (valores porcentuales) */ -padding-top: 10%; - -/* Global values (valores globales) */ -padding-top: inherit; -padding-top: initial; -padding-top: unset; -- -
Valores
- --
-
Sintaxis formal
- -{{csssyntax}} - -Ejemplos
- -.content { padding-top: 5%; }
-.sidebox { padding-top: 10px; }
-
-
-Especificaciones
- -| Especificación | -Estado | -Comentarios | -
|---|---|---|
| {{ SpecName('CSS3 Box', '#the-padding', 'padding-top') }} | -{{ Spec2('CSS3 Box') }} | -No change from {{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-top') }}. | -
| {{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-top') }} | -{{ Spec2('CSS3 Transitions') }} | -Defines padding-top as animatable. |
-
| {{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-top') }} | -{{ Spec2('CSS2.1') }} | -No change from {{ Specname('CSS1', '#padding-top', 'padding-top') }}. | -
| {{ Specname('CSS1', '#padding-top', 'padding-top') }} | -{{ Spec2('CSS1') }} | -Initial definition | -
Compatibilidad en navegadores
- -{{Compat("css.properties.padding-top")}} diff --git a/files/es/web/css/padding-top/index.md b/files/es/web/css/padding-top/index.md new file mode 100644 index 00000000000000..813f872998fdc3 --- /dev/null +++ b/files/es/web/css/padding-top/index.md @@ -0,0 +1,60 @@ +--- +title: padding-top +slug: Web/CSS/padding-top +translation_of: Web/CSS/padding-top +--- +{{CSSRef}} + +## Sumario + +La propiedad **`padding-top`** [CSS](/en/CSS) establece el espacio de relleno requerido en la parte superior del elemento. El [área de padding](/en/CSS/box_model#padding) es el espacio entre el contenido del elemento y su borde. Contrariamente de la propiedad **`margin-top`**, valores negativos no son válidos. + +{{cssinfo}} + +## Sintaxis + +```css +/*{{CSSRef}}
- -Resumen
- -La propiedad CSS padding establece el espacio de relleno requerido por todos los lados de un elemento. El área de padding es el espacio entre el contenido del elemento y su borde (border). No se permiten valores negativos.
La propiedad padding es un atajo para evitar la asignación de cada lado por separado (padding-top, padding-right, padding-bottom, padding-left).
{{EmbedInteractiveExample("pages/css/padding.html")}}
- -
-
-
-Nota: Padding crea espacio extra dentro de un elemento. En contraste, margin crea espacio extra alrededor de un elemento.
{{cssinfo}}
- -Sintaxis
- -Sintaxis formal: {{csssyntax("padding")}}- -
Valores
- -Esta propiedad puede ser especificada utilizando uno, dos, tres o cuatro de los siguientes valores:
- --
-
-
-
Ejemplos
- -padding: 5%; /* aplica 5% de padding en todos los lados*/ -- -
padding: 10px; /* aplica 10px de padding en todos los lados */ -- -
padding: 10px 20px; /* arriba y abajo, 10px de padding */ - /* izquierda y derecha, 20px de padding */ -- -
padding: 10px 3% 20px; /* arriba, 10px de padding */ - /* izquierda y derecha, 3% de padding */ - /* bottom, 20px padding */ -- -
padding: 1em 3px 30px 5px; /* arriba 1em padding */ - /* derecha 3px padding */ - /* abajo 30px padding */ - /* izquierda 5px padding - /* en dirección de las agujas del reloj */ -- -
border:outset; padding:5% 1em;
- -Ver ejemplo
- -HTML
- -<h4>¡Hola Mundo!</h4> -<h3>El padding es diferente en esta linea.</h3> -- -
CSS
- -h4{
- background-color: green;
- padding: 50px 20px 20px 50px;
-}
-
-h3{
- background-color: blue;
- padding: 400px 50px 50px 400px;
-}
-
-
-{{ EmbedLiveSample('Live_Sample', 'Live Sample Link', 300) }}
- -Especificaciones
- -| Especificación | -Estado | -Comentario | -
|---|---|---|
| {{ SpecName('CSS3 Box', '#the-padding', 'padding') }} | -{{ Spec2('CSS3 Box') }} | -Sin cambio. | -
| {{ SpecName('CSS2.1', 'box.html#propdef-padding', 'padding-top') }} | -{{ Spec2('CSS2.1') }} | -Sin cambio. | -
| {{ Specname('CSS1', '#padding', 'padding') }} | -{{ Spec2('CSS1') }} | -Definición inicial. | -
Compatibilidad en navegadores
- -{{Compat("css.properties.padding")}} - -Ver también
- --
-
border:outset; padding:5% 1em;
+``` + +{{EmbedLiveSample}} + +## Ver ejemplo + +HTML + +```html +¡Hola Mundo!
+El padding es diferente en esta linea.
+``` + +CSS + +```css +h4{ + background-color: green; + padding: 50px 20px 20px 50px; +} + +h3{ + background-color: blue; + padding: 400px 50px 50px 400px; +} +``` + +{{ EmbedLiveSample('Live_Sample', 'Live Sample Link', 300) }} + +## Especificaciones + +| Especificación | Estado | Comentario | +| ---------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | +| {{ SpecName('CSS3 Box', '#the-padding', 'padding') }} | {{ Spec2('CSS3 Box') }} | Sin cambio. | +| {{ SpecName('CSS2.1', 'box.html#propdef-padding', 'padding-top') }} | {{ Spec2('CSS2.1') }} | Sin cambio. | +| {{ Specname('CSS1', '#padding', 'padding') }} | {{ Spec2('CSS1') }} | Definición inicial. | + +## Compatibilidad en navegadores + +{{Compat("css.properties.padding")}} + +## Ver también + +- [CSS Box Model](/en/CSS/box_model) diff --git a/files/es/web/css/percentage/index.html b/files/es/web/css/percentage/index.html deleted file mode 100644 index 088e83748a4fec..00000000000000 --- a/files/es/web/css/percentage/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title:{{CSSRef}}
- -Sumario
- -Los tipos de dato <porcentaje> de CSS representan un valor en forma de porcentaje. Muchas propiedades de CSS pueden tomar valores porcentuales, siempre para definir longitudes con respecto al tamaño de los elementos padre. Los porcentajes estan formados por un <numero> seguido por el signo de porcentaje %. No hay un espacio entre el '%' y el numero.
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
-
-<length>, sera accesible en la propiedad heredada, no el valor porcentual.Interpolación
- -Los valores del tipo de dato <porcentaje> de CSS pueden ser interpolados en orden de permitir animaciones. En ese caso ellos son interpolados como numeros reales de punto flotante. La velocidad de la interpolación se determina por medio de la funcion de temporizacion asociada con la animacion.
Examples
- -<div style="background-color:#0000FF;"> - <div style="width:50%;margin-left:20%;background-color:#00FF00;">Width: 50%, Left margin: 20%</div> - <div style="width:30%;margin-left:60%;background-color:#FF0000;">Width: 30%, Left margin: 60%</div> -</div> -- -
El codigo de arriba se va a renderizar así:
- -
-
-
-Width: 50%, Left margin: 20%
-
-Width: 30%, Left margin: 60%
-- -
<div style="font-size:18px;"> - Full size text (18px) - <span style="font-size:50%;">50%</span> - <span style="font-size:200%;">200%</span> -</div> -- -
El codigo de arriba de renderizara así:
- -Full size text (18px) 50% 200%
-
-Especificaciones
- -| Especificacion | -Estatus | -Comentarios | -
|---|---|---|
| {{ SpecName('CSS3 Values', '#percentages', '<percentage>') }} | -{{ Spec2('CSS3 Values') }} | -No hay cambios significantes desde CSS Level 2 (Revision 1) | -
| {{ SpecName('CSS2.1', 'syndata.html#percentage-units', '<percentage>') }} | -{{ Spec2('CSS2.1') }} | -No hay cambios desde CSS Level 1 | -
| {{ SpecName('CSS1', '#percentage-units', '<percentage>') }} | -{{ Spec2('CSS1') }} | -- |
Compatibilidad de navegadores
- -{{Compat("css.types.percentage")}} diff --git a/files/es/web/css/percentage/index.md b/files/es/web/css/percentage/index.md new file mode 100644 index 00000000000000..3a83c2f39be115 --- /dev/null +++ b/files/es/web/css/percentage/index.md @@ -0,0 +1,60 @@ +--- +title:
+
+```
+
+El codigo de arriba se va a renderizar así:
+
+{{EmbedLivesample}}
+
+#### Usando `font-size`
+
+```html
+Width: 50%, Left margin: 20%
+ Width: 30%, Left margin: 60%
+
+ Full size text (18px)
+ 50%
+ 200%
+
+```
+
+El codigo de arriba de renderizara así:
+
+{{EmbedLiveSample}}
+
+## Especificaciones
+
+| Especificacion | Estatus | Comentarios |
+| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------------------------------------------------------- |
+| {{ SpecName('CSS3 Values', '#percentages', '<percentage>') }} | {{ Spec2('CSS3 Values') }} | No hay cambios significantes desde CSS Level 2 (Revision 1) |
+| {{ SpecName('CSS2.1', 'syndata.html#percentage-units', '<percentage>') }} | {{ Spec2('CSS2.1') }} | No hay cambios desde CSS Level 1 |
+| {{ SpecName('CSS1', '#percentage-units', '<percentage>') }} | {{ Spec2('CSS1') }} | |
+
+## Compatibilidad de navegadores
+
+{{Compat("css.types.percentage")}}
diff --git a/files/es/web/css/perspective/index.html b/files/es/web/css/perspective/index.html
deleted file mode 100644
index 357152cc8d848c..00000000000000
--- a/files/es/web/css/perspective/index.html
+++ /dev/null
@@ -1,148 +0,0 @@
----
-title: perspective
-slug: Web/CSS/perspective
-tags:
- - CSS
- - Capas
- - Propiedad CSS
- - Referencia
- - Transformaciones CSS
- - Web
- - graficos
-translation_of: Web/CSS/perspective
----
-{{ CSSRef("CSS Transforms") }} {{ SeeCompatTable() }}
- -Resumen
- -La propiedad perspective CSS determina la distancia entre el plano z=0 y el usuario para dar algo de perspectiva al elemento 3D posicionado. Cada elemento 3D con z>0 se hace más grande y con z<0 se vuelve más pequeño. La intensidad del efecto es determinado por el valor de esta propiedad.
Parte de los elementos 3D que se encuentran destrás del usuario, es decir que su coordenada del eje z es mayor que el valor de la propiedad perspective de CSS no es dibujada.
- -La posición de origen que se usará para la transformación es por defecto colocado en el centro del elemento, pero su posición puede ser cambiada usando la propiedad {{ cssxref("perspective-origin") }}.
- -Usando esta propiedad con un valor diferente a 0 y none se crea un nuevo contexto de apilamiento.
- -{{cssinfo}}
- -Syntax
- -Sintaxis Formal: {{csssyntax("perspective")}}- -
perspective: none -perspective: 20px /* <longitud> valores */ -perspective: 3.5em - -perspective: inherited -- -
Valores
- --
-
Ejemplos
- -
-
-
-
-
-
-perspective:250px; |
- perspective:350px; |
- perspective:500px; |
-
|
-
-
-
-
- 1
-
- 2
-
- 3
-
- 4
-
- 5
-
- 6
- |
-
-
-
-
-
- 1
-
- 2
-
- 3
-
- 4
-
- 5
-
- 6
- |
-
-
-
-
-
- 1
-
- 2
-
- 3
-
- 4
-
- 5
-
- 6
- |
-
Especificaciones
- -| Especifiación | -Estado | -Comentario | -
|---|---|---|
| {{ Specname('CSS3 Transforms', '#perspective', 'perspective') }} | -{{ Spec2('CSS3 Transforms') }} | -- |
Compatibilidad de navegadores
- -{{Compat("css.properties.perspective")}} - -Ver también
- - diff --git a/files/es/web/css/perspective/index.md b/files/es/web/css/perspective/index.md new file mode 100644 index 00000000000000..1dacab06361844 --- /dev/null +++ b/files/es/web/css/perspective/index.md @@ -0,0 +1,67 @@ +--- +title: perspective +slug: Web/CSS/perspective +tags: + - CSS + - Capas + - Propiedad CSS + - Referencia + - Transformaciones CSS + - Web + - graficos +translation_of: Web/CSS/perspective +--- +{{ CSSRef("CSS Transforms") }} {{ SeeCompatTable() }} + +## Resumen + +La propiedad `perspective` [CSS](/en/CSS) determina la distancia entre el plano z=0 y el usuario para dar algo de perspectiva al elemento 3D posicionado. Cada elemento 3D con z>0 se hace más grande y con z<0 se vuelve más pequeño. La intensidad del efecto es determinado por el valor de esta propiedad. + +Parte de los elementos 3D que se encuentran destrás del usuario, es decir que su coordenada del eje z es mayor que el valor de la propiedad perspective de CSS no es dibujada. + +La posición de origen que se usará para la transformación es por defecto colocado en el centro del elemento, pero su posición puede ser cambiada usando la propiedad {{ cssxref("perspective-origin") }}. + +Usando esta propiedad con un valor diferente a 0 y none se crea un nuevo [contexto de apilamiento](/en/CSS/Understanding_z-index/The_stacking_context). + +{{cssinfo}} + +## Syntax + +``` +Sintaxis Formal: {{csssyntax("perspective")}} +``` + +``` +perspective: none +perspective: 20px /*{{CSSRef}}
-
-La propiedad position de CSS especifica cómo un elemento es posicionado en el documento. Las propiedades {{Cssxref("top")}}, {{Cssxref("right")}}, {{Cssxref("bottom")}}, y {{Cssxref("left")}} determinan la ubicación final de los elementos posicionados.
{{EmbedInteractiveExample("pages/css/position.html")}}
-
-El código fuente de este ejemplo interactivo se encuentra almacenado en un repositorio de GitHub. Si quisiera contribuir al proyecto de ejemplos interactivos, por favor clone https://github.com/mdn/interactive-examples y envíenos sus contribuciones como un pull request.
- -Tipos de posicionamiento
- --
-
La mayoría de las veces, los elementos absolutamente posicionados que tienen su {{Cssxref("height")}} y {{Cssxref("width")}} establecidos en auto son ajustados hasta acomodarse a su contenido. Sin embargo, elementos non-replaced y absolutamente posicionados se pueden crear para llenar el espacio vertical disponible, especificando tanto {{Cssxref("top")}} como {{Cssxref("bottom")}}, y dejando {{Cssxref("height")}} sin especificar (es decir, auto). De igual manera se pueden utilizar para llenar el espacio horizontal disponible especificando tanto {{Cssxref("left")}} como {{Cssxref("right")}}, y dando a {{Cssxref("width")}} el valor de auto.
A excepción del caso anteriormente descrito (de elementos posicionados absolutamente rellenando el espacio disponible):
- --
-
Sintaxis
- -La propiedad position es especificada como una palabra única elegida de la siguiente lista de valores.
Valores
- --
-
Sintaxis formal
- -{{csssyntax}} - -Examples
- -Posicionamiento relativo
- -Elementos posicionados relativamente son desplazados una cantidad dada de su posición normal en el documento, pero sin que su desplazamiento afecte a otros elementos. En el ejemplo siguiente, nótese cómo los demás elementos se ubican como si "Two" estuviera ocupando el lugar de su ubicación normal.
- -HTML
- -<div class="box" id="one">One</div> -<div class="box" id="two">Two</div> -<div class="box" id="three">Three</div> -<div class="box" id="four">Four</div> -- -
CSS
- -.box {
- display: inline-block;
- width: 100px;
- height: 100px;
- background: red;
- color: white;
-}
-
-#two {
- position: relative;
- top: 20px;
- left: 20px;
- background: blue;
-}
-
-
-{{ EmbedLiveSample('Relative_positioning', '600px', '200px') }}
- -Posicionamiento absoluto
- -Los elementos posicionados relativamente se mantienen en el flujo normal del documento. Por el contrario, un elemento posicionado absolutamente es removido del flujo de esta manera, los demás elementos se posicionan como si el mismo no existiera. El elemento posicionado absolutamente se posiciona relativamente a su ancestro posicionado más cercano (es decir, el ancestro más cercano que no es static). Si no hay ningún ancestro posicionado se ubica relativo al bloque contenedor inicial. En el ejemplo siguiente, la caja "Two" no tiene un ancestro posicionado, por lo tanto se posiciona relativo al <body> del documento.
HTML
- -<div class="box" id="one">One</div> -<div class="box" id="two">Two</div> -<div class="box" id="three">Three</div> -<div class="box" id="four">Four</div>- -
CSS
- -.box {
- display: inline-block;
- width: 100px;
- height: 100px;
- background: red;
- color: white;
-}
-
-#two {
- position: absolute;
- top: 20px;
- left: 20px;
- background: blue;
-}
-
-{{ EmbedLiveSample('Absolute_positioning', '800px', '200px') }}
- -Posicionamiento fijo
- -El posicionamiento fijo es similar al posicionamiento absoluto, con la excepción de que el bloque contenedor del elemento es el viewport. Esto puede usarse para crear un elemento flotante que se mantiene en la misma posición independientemente del desplazamiento. En el ejemplo siguiente, la caja "One" está fijada a 80 pixels del límite superior de la página y 10 pixels a la izquierda. Aún luego de desplazarse, se mantiene en el mismo lugar relativo al viewport.
- -<div class="outer"> - <p> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis. - Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue. - Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit. - Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi. - Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor. - Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum. - Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus. - </p> - <p> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis. - Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue. - Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit. - Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi. - Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor. - Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum. - Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus. - </p> - <div class="box" id="one">One</div> -</div> -- -
CSS
- -.box {
- width: 100px;
- height: 100px;
- background: red;
- color: white;
-}
-
-#one {
- position: fixed;
- top: 80px;
- left: 10px;
- background: blue;
-}
-
-.outer {
- width: 500px;
- height: 300px;
- overflow: scroll;
- padding-left: 150px;
-}
-
-
-{{ EmbedLiveSample('Fixed_positioning', '800px', '300px') }}
- -Posicionamiento sticky
- -El posicionamiento sticky puede considerarse un híbrido de los posicionamientos relativo y fijo. Un elemento con posicionamiento sticky es tratado como un elemento posicionado relativamente hasta que cruza un umbral especificado, en cuyo punto se trata como fijo hasta que alcanza el límite de su padre. Por ejemplo...
- -#one { position: sticky; top: 10px; }
-
-...posicionaría el elemento con id uno relativamente hasta que el viewport sea desplazado de manera tal que el elemento esté a menos de 10 píxeles del límite superior. Más allá de ese umbral, el elemento sería fijado a 10 píxeles del límite superior.
- -Un uso común para el posicionamiento sticky es para los encabezados en una lista alfabética. El encabezado "B" aparecerá justo por debajo de los ítems que comienzan con "A" hasta que se hayan desplazado más allá de la pantalla. En vez de deslizarse fuera de la pantalla como el resto del contenido, el encabezado "B" se mantendrá fijado al límite superior del viewport hasta que todos los ítems "B" se hayan desplazado fuera de la pantalla, en cuyo punto será cubierto por el encabezado "C", y así sucesivamente. Se debe especificar un umbral con al menos uno de top, right, bottom, or left para que el posicionamiento sticky se comporte de forma esperada. Caso contrario, será indistinguible del posicionamiento relativo.
HTML
- -<dl> - <div> - <dt>A</dt> - <dd>Andrew W.K.</dd> - <dd>Apparat</dd> - <dd>Arcade Fire</dd> - <dd>At The Drive-In</dd> - <dd>Aziz Ansari</dd> - </div> - <div> - <dt>C</dt> - <dd>Chromeo</dd> - <dd>Common</dd> - <dd>Converge</dd> - <dd>Crystal Castles</dd> - <dd>Cursive</dd> - </div> - <div> - <dt>E</dt> - <dd>Explosions In The Sky</dd> - </div> - <div> - <dt>T</dt> - <dd>Ted Leo & The Pharmacists</dd> - <dd>T-Pain</dd> - <dd>Thrice</dd> - <dd>TV On The Radio</dd> - <dd>Two Gallants</dd> - </div> -</dl> -- -
CSS
- -* {
- box-sizing: border-box;
-}
-
-dl > div {
- background: #FFF;
- padding: 24px 0 0 0;
-}
-
-dt {
- background: #B8C1C8;
- border-bottom: 1px solid #989EA4;
- border-top: 1px solid #717D85;
- color: #FFF;
- font: bold 18px/21px Helvetica, Arial, sans-serif;
- margin: 0;
- padding: 2px 0 0 12px;
- position: -webkit-sticky;
- position: sticky;
- top: -1px;
-}
-
-dd {
- font: bold 20px/45px Helvetica, Arial, sans-serif;
- margin: 0;
- padding: 0 0 0 12px;
- white-space: nowrap;
-}
-
-dd + dd {
- border-top: 1px solid #CCC;
-}
-
-
-{{ EmbedLiveSample('Sticky_positioning', '500px', '300px') }}
- --
-
Consideraciones de accesibilidad
- -Asegurarse de que los elementos posicionados con valor absolute o fixed no oscurezcan el resto del contenido cuando la página sea ampliada para aumentar el tamaño del texto.
-
-
Performance y accesibilidad
- -Los elementos que se desplazan que contienen contenido fixed o sticky content pueden ocasionar problemas de performance y accesibilidad. Mientras un usuario desplaza la página, el navegador debe realizar repaint del contenido sticky o fijo en una nueva locación. Dependiendo del contenido que precisa ser repainted, la performance del navegador y la velocidad de procesamiento del dispositivo, el navegador podría no ser capaz de realizar el repaint a 60 fps, ocasionando problemas de accesibilidad para personas con sensibilidades y desprolijidad para todos. Una solución es agregar {{cssxref("will-change", "will-change: transform")}} a los elementos posicionados para renderizar el elemento en su propia capa, mejorando la velocidad del repaint y por lo tanto mejorando performance y accesibilidad.
Especificaciones
- -| Especificación | -Status | -Comentario | -
|---|---|---|
| {{SpecName('CSS2.1', 'visuren.html#propdef-position', 'position')}} | -{{Spec2('CSS2.1')}} | -- |
| {{SpecName('CSS3 Positioning','#position-property','position')}} | -{{Spec2('CSS3 Positioning')}} | -Añade valor de la propiedad sticky. |
-
{{cssinfo}}
- -Compatibilidad
- - - -{{Compat("css.properties.position")}}
diff --git a/files/es/web/css/position/index.md b/files/es/web/css/position/index.md new file mode 100644 index 00000000000000..76bcbc2d81ddeb --- /dev/null +++ b/files/es/web/css/position/index.md @@ -0,0 +1,295 @@ +--- +title: position +slug: Web/CSS/position +tags: + - Referencia_CSS +translation_of: Web/CSS/position +--- +{{CSSRef}} + +La propiedad **`position`** de [CSS](/es/docs/CSS) especifica cómo un elemento es posicionado en el documento. Las propiedades {{Cssxref("top")}}, {{Cssxref("right")}}, {{Cssxref("bottom")}}, y {{Cssxref("left")}} determinan la ubicación final de los elementos posicionados. + +{{EmbedInteractiveExample("pages/css/position.html")}} + +El código fuente de este ejemplo interactivo se encuentra almacenado en un repositorio de GitHub. Si quisiera contribuir al proyecto de ejemplos interactivos, por favor cloneOne
+Two
+Three
+Four
+```
+
+CSS
+
+```css
+.box {
+ display: inline-block;
+ width: 100px;
+ height: 100px;
+ background: red;
+ color: white;
+}
+
+#two {
+ position: relative;
+ top: 20px;
+ left: 20px;
+ background: blue;
+}
+```
+
+{{ EmbedLiveSample('Relative_positioning', '600px', '200px') }}
+
+### Posicionamiento absoluto
+
+Los elementos posicionados relativamente se mantienen en el flujo normal del documento. Por el contrario, un elemento posicionado absolutamente es removido del flujo de esta manera, los demás elementos se posicionan como si el mismo no existiera. El elemento posicionado absolutamente se posiciona relativamente a su _ancestro posicionado más cercano_ (es decir, el ancestro más cercano que no es `static`). Si no hay ningún ancestro posicionado se ubica relativo al [bloque contenedor](/es/docs/Web/CSS/All_About_The_Containing_Block) inicial. En el ejemplo siguiente, la caja "Two" no tiene un ancestro posicionado, por lo tanto se posiciona relativo al `` del documento.
+
+HTML
+
+```html
+One
+Two
+Three
+Four
+```
+
+CSS
+
+```css
+.box {
+ display: inline-block;
+ width: 100px;
+ height: 100px;
+ background: red;
+ color: white;
+}
+
+#two {
+ position: absolute;
+ top: 20px;
+ left: 20px;
+ background: blue;
+}
+```
+
+{{ EmbedLiveSample('Absolute_positioning', '800px', '200px') }}
+
+### Posicionamiento fijo
+
+El posicionamiento fijo es similar al posicionamiento absoluto, con la excepción de que el bloque contenedor del elemento es el _viewport_. Esto puede usarse para crear un elemento flotante que se mantiene en la misma posición independientemente del desplazamiento. En el ejemplo siguiente, la caja "One" está fijada a 80 pixels del límite superior de la página y 10 pixels a la izquierda. Aún luego de desplazarse, se mantiene en el mismo lugar relativo al viewport.
+
+```html
+
+
+```
+
+CSS
+
+```css
+.box {
+ width: 100px;
+ height: 100px;
+ background: red;
+ color: white;
+}
+
+#one {
+ position: fixed;
+ top: 80px;
+ left: 10px;
+ background: blue;
+}
+
+.outer {
+ width: 500px;
+ height: 300px;
+ overflow: scroll;
+ padding-left: 150px;
+}
+```
+
+{{ EmbedLiveSample('Fixed_positioning', '800px', '300px') }}
+
+### Posicionamiento sticky
+
+El posicionamiento sticky puede considerarse un híbrido de los posicionamientos relativo y fijo. Un elemento con posicionamiento sticky es tratado como un elemento posicionado relativamente hasta que cruza un umbral especificado, en cuyo punto se trata como fijo hasta que alcanza el límite de su padre. Por ejemplo...
+
+```css
+#one { position: sticky; top: 10px; }
+```
+
+...posicionaría el elemento con id _uno_ relativamente hasta que el viewport sea desplazado de manera tal que el elemento esté a menos de 10 píxeles del límite superior. Más allá de ese umbral, el elemento sería fijado a 10 píxeles del límite superior.
+
+Un uso común para el posicionamiento sticky es para los encabezados en una lista alfabética. El encabezado "B" aparecerá justo por debajo de los ítems que comienzan con "A" hasta que se hayan desplazado más allá de la pantalla. En vez de deslizarse fuera de la pantalla como el resto del contenido, el encabezado "B" se mantendrá fijado al límite superior del viewport hasta que todos los ítems "B" se hayan desplazado fuera de la pantalla, en cuyo punto será cubierto por el encabezado "C", y así sucesivamente. Se debe especificar un umbral con al menos uno de `top`, `right`, `bottom`, or `left` para que el posicionamiento sticky se comporte de forma esperada. Caso contrario, será indistinguible del posicionamiento relativo.
+
+HTML
+
+```html
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis. + Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue. + Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit. + Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi. + Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor. + Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum. + Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus. +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis. + Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue. + Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit. + Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi. + Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor. + Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum. + Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus. +
+One
+-
+
+
+
+
+
+
+
+
+{{CSSRef}}{{Non-standard_header}}
-
-Resumen
- -La propiedad CSS -webkit-print-color-adjust es una extensión CSS no estándar que puede ser usada para forzar la impresión de fondos e imágenes en navegadores basado en el motor WebKit.
Síntaxis
- --webkit-print-color-adjust: economy | exact -- -
Valores
- --
-
Herencia
- -Esta propiedad es heredada.
- -Especificaciones
- -Aún no es parte de ninguna especificación aunque hay una propuesta en la wiki de CSSWG para que sea estandarizada.
- -Compatibilidad con los distintos navegadores
- -{{Compat("css.properties.print-color-adjust")}} - -Ver además
- --
-
{{ CSSRef() }}
- -Una pseudoclase CSS es una palabra clave que se añade a los selectores y que especifica un estado especial del elemento seleccionado. Por ejemplo, {{ Cssxref(":hover") }} aplicará un estilo cuando el usuario haga hover sobre el elemento especificado por el selector.
- -div:hover {
- background-color: #F89B4D;
-}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.
-Sintaxis
- -selector:pseudoclase { propiedad: valor; }
-
-
-Al igual que las clases, se pueden concatenar la cantidad de pseudoclases que se deseen en un selector.
- -Indice de las pseudo-clases estándar
- -
-
-
--
-
Especificaciones
- -| Especificación | -Estado | -Comentario | -
|---|---|---|
| {{ SpecName('Fullscreen') }} | -{{ Spec2('Fullscreen') }} | -Definido :fullscreen. |
-
| {{ SpecName('HTML WHATWG') }} | -{{ Spec2('HTML WHATWG') }} | -Ningún cambio desde {{ SpecName('HTML5 W3C') }}. | -
| {{SpecName('CSS4 Selectors')}} | -{{Spec2('CSS4 Selectors')}} | -Definido :any-link, :local-link, :scope, :active-drop-target, :valid-drop-target, :invalid-drop-target, :current, :past, :future, :placeholder-shown, :user-error, :blank, :nth-match(), :nth-last-match(), :nth-column(), :nth-last-column(), and :matches().- Ningún cambio significativo para las pseudo-clases difinidas en {{SpecName('CSS3 Selectors')}} y en {{SpecName('HTML5 W3C')}} (Aunque el significado semántico no fuera absorbido). |
-
| {{ SpecName('HTML5 W3C') }} | -{{ Spec2('HTML5 W3C') }} | -Define el significado semántico en el contexto HTML de :link, :visited, :active, :enabled, :disabled, :checked, and :indeterminate.- Definido :default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only, :read-write, y :dir(). |
-
| {{ SpecName('CSS3 Basic UI') }} | -{{ Spec2('CSS3 Basic UI') }} | -Definido :default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only, y :read-write, pero sin el significado semántico asociado. |
-
| {{SpecName('CSS3 Selectors')}} | -{{Spec2('CSS3 Selectors')}} | -Definido :target, :root, :nth-child(), :nth-last-of-child(), :nth-of-type(), :nth-last-of-type(), :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty, y :not().- Define la sintaxis de :enabled, :disabled, :checked, y :indeterminate, pero sin el significado semántico asociado.- Ningún cambio significativo para las pseudo-clases difinidas en {{SpecName('CSS2.1')}}. |
-
| {{SpecName('CSS2.1')}} | -{{Spec2('CSS2.1')}} | -Definido :lang(), :first-child, :hover, y :focus.- Ningún cambio significativo para las pseudo-clases difinidas en {{SpecName('CSS1')}}. |
-
| {{SpecName('CSS1')}} | -{{Spec2('CSS1')}} | -Definido :link, :visited, y :active, pero sin el significado semántico asociado. |
-
{{ CSSRef() }}
-
-Resumen
- -Al igual que las {{ Cssxref("Pseudo-classes") }}, los pseudo-elementos se añaden a los selectores, pero en cambio, no describen un estado especial sino que, permiten añadir estilos a una parte concreta del documento. Por ejemplo, el pseudoelemento {{ Cssxref("::first-line") }} selecciona solo la primera línea del elemento especificado por el selector.
- -Sintaxis
- -selector::pseudo-elemento { propiedad: valor; }
-
-Lista de pseudoelementos
- --
-
Notas
- -De vez en cuando se utilizan dos puntos dobles (::) en vez de solo uno (:). Esto forma parte de CSS3 y de un intento para distinguir pseudo-elementos de pseudo-clases.
- -Nota:
-
-::selection siempre se escribe con dos puntos dobles (::).Solo se puede usar un pseudo-elemento por selector. Debe aparecer después del selector simple.
- -| Navegador | -Versión inferior | -Soporta | -
|---|---|---|
| Internet Explorer | -8.0 | -:pseudoelemento |
-
| 9.0 | -:pseudoelemento y ::pseudoelemento |
- |
| Firefox (Gecko) | -1.0 (1.0) | -:pseudoelemento |
-
| 1.0 (1.5) | -:pseudoelemento y ::pseudoelemento |
- |
| Opera | -4.0 | -:pseudoelemento |
-
| 7.0 | -:pseudoelemento y ::pseudoelemento |
- |
| Safari (WebKit) | -1.0 (85) | -:pseudoelemento y ::pseudoelemento |
-
diff --git a/files/es/web/css/pseudo-elements/index.md b/files/es/web/css/pseudo-elements/index.md new file mode 100644 index 00000000000000..92f070ec5a79cf --- /dev/null +++ b/files/es/web/css/pseudo-elements/index.md @@ -0,0 +1,85 @@ +--- +title: Pseudoelementos +slug: Web/CSS/Pseudo-elements +tags: + - CSS + - Pseudo-element + - Pseudo-elementos + - Selectores +translation_of: Web/CSS/Pseudo-elements +original_slug: Web/CSS/Pseudoelementos +--- +{{ CSSRef() }} + +## Resumen + +Al igual que las {{ Cssxref("Pseudo-classes") }}, los pseudo-elementos se añaden a los selectores, pero en cambio, no describen un estado especial sino que, permiten añadir estilos a una parte concreta del documento. Por ejemplo, el pseudoelemento {{ Cssxref("::first-line") }} selecciona solo la primera línea del elemento especificado por el selector. + +## Sintaxis + +``` +selector::pseudo-elemento { propiedad: valor; } +``` + +## Lista de pseudoelementos + +- {{ Cssxref("::after") }} +- {{ Cssxref("::before") }} +- {{ Cssxref("::first-letter") }} +- {{ Cssxref("::first-line") }} +- {{ Cssxref("::selection") }} +- {{ Cssxref("::backdrop") }} +- {{ Cssxref("::placeholder") }} {{experimental_inline}} +- {{ Cssxref("::marker") }} {{experimental_inline}} +- {{ Cssxref("::spelling-error") }} {{experimental_inline}} +- {{ Cssxref("::grammar-error") }} {{experimental_inline}} + +## Notas + +De vez en cuando se utilizan dos puntos dobles (::) en vez de solo uno (:). Esto forma parte de CSS3 y de un intento para distinguir pseudo-elementos de pseudo-clases. + +> **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. + +
| Navegador | +Versión inferior | +Soporta | +
|---|---|---|
| Internet Explorer | +8.0 | +:pseudoelemento |
+
| 9.0 | +:pseudoelemento y ::pseudoelemento |
+ |
| Firefox (Gecko) | +1.0 (1.0) | +:pseudoelemento |
+
| 1.0 (1.5) | +:pseudoelemento y ::pseudoelemento |
+ |
| Opera | +4.0 | +:pseudoelemento |
+
| 7.0 | +:pseudoelemento y ::pseudoelemento |
+ |
| Safari (WebKit) | +1.0 (85) | +:pseudoelemento y ::pseudoelemento |
+
{{CSSRef}}
-
-Sumario
- -La propiedad CSS quotes indica cómo debe renderizar las citas el navegador.
{{cssinfo}}
- -Sintaxis
- -/* Valor con palabras clave */ -quotes: none; - -/* Valor <string> */ -quotes: "«" "»"; /* Especifica open-quote y close-quote a las marcas de cita francesas */ -quotes: "«" "»" "‹" "›"; /* Especifica dos niveles de marcas de cita */ - -/* Valores globales */ -quotes: inherit; -quotes: initial; -quotes: unset; -- -
Valores
- --
-
Sintaxis formal
- -{{csssyntax}} - -Ejemplos
- -q { quotes: '"' '"' "'" "'" }
-q:before { content: open-quote }
-q:after { content: close-quote }
-
-
-Notas
- -Desde Firefox 3.5, el valor inicial de la propiedad de las citas se puede leer usando -moz-initial. Esto no es posible en versiones anteriores de Firefox.
Especificaciones
- -| Especificación | -Estado | -Commentario | -
|---|---|---|
| {{ SpecName('CSS2.1', 'generate.html#quotes', 'quotes') }} | -{{ Spec2('CSS2.1') }} | -Definición inicial | -
Compatibilidad con navegadores
- -{{Compat("css.properties.quotes")}} - -Ver también
- --
-
-
-
-Estamos trabajando sobre este documento. Si deseas ayudarnos a redactar o mejorar alguna de las páginas listadas a continuación, te animamos a que lo hagas.
- -Si vas a agregar o modificar una página, por favor, ajústate a la plantilla Referencia CSS:Plantilla de propiedades y modifica según sea necesario.
- -La plantilla básica para las páginas de ejemplo se puede encontrar aquí: samples/cssref/TEMPLATE.html.
-Siéntete libre para discutir sobre cualquier pregunta o sugerencia en la página Talk:CSS Reference.Esta Referencia CSS muestra la sintáxis básica de una regla CSS; lista todas las propiedades estándares CSS, pseudo-classes y pseudo-elementos, reglas-at, unidades, y selectores, todos juntos en orden alfabético, así como los selectores por tipo; y le permitirá acceso rápido a la información detallada de cada uno de ellos. No solo lista las propiedades de CSS 1 y CSS 2.1, sino que también es una referencia de CSS3 que enlaza cualquier propiedad y concepto de CSS3 estandarizado, o ya establecido. También incluye una breve referencia DOM-CSS / CSSOM.
- -Tenga en cuenta que las definiciones de reglas CSS son completamente basadas en texto (ASCII), mientras que DOM-CSS / CSSOM, el sistema de gestión de reglas, está basado en objetos.
- -Vea también las Extensiones CSS de Mozilla para propiedades específicas de Gecko, que usan el prefijo -moz; y las Extensiones CSS de WebKit para propiedades específicas de WebKit. Vea Vendor-prefixed CSS Property Overview de Peter Beverloo como referencia a todas las propiedades con prefijo.
Sintaxis de regla básica
- -Se advierte que cualquier error de sintaxis en una definición de regla invalidará la regla por completo.
- -Sintaxis de regla de estilo
- -selectorlist {
- property: value;
- [more property:value; pairs]
-}
-
-...where selectorlist is: selector[:pseudo-class] [::pseudo-element] [, more selectorlists]
-
-Ver selector, pseudo-elemento, pseudo-clase más abajo.
-
-
-
-Ejemplos de reglas de estilo
- -strong {
- color: red;
-}
-
-div.menu-bar li:hover > ul {
- display: block;
-}
-
-
-Para una introducción de nivel principiante a la sintaxis de los selectores de CSS, consulte este tutorial. Tenga en cuenta que cualquier error de sintaxis CSS en una definición de regla hace que la regla completa se invalide. El navegador ignora las reglas no válidas. Tenga en cuenta que las definiciones de reglas CSS son totalmente (ASCII) basadas en texto, mientras que DOM-CSS / CSSOM (el sistema de gestión de reglas) está basado en objetos.
- -Sintaxis de las reglas-at (@rules)
- -Debido a que éstas tienen formatos de estructura variados, revise la sección reglas-At para ver la sintaxis de la regla deseada.
- -Índice de palabras clave
- -
-
-
-Nota: Los nombres de propiedad en este índice no incluyen los nombres de JavaScript donde difieren de los nombres estándar de CSS.
-{{CSS_Ref}}
-
-Selectores
- -Selectores básicos
- --
-
Combinadores
- --
-
Pseudo-clases
- -
-
-
--
-
Pseudo-elementos
- -
-
-
--
-
-
-
-Ver también: Una lista completa de selectores en la especificación de Nivel 3 de Selectores.
-Conceptos
- -Sintaxis y semántica
- --
-
Valores
- --
-
Diseño
- --
-
DOM-CSS / CSSOM
- -Tipos de objetos principales
- --
-
Métodos importantes
- --
-
Tutoriales CSS3
- -Estas páginas describen las nuevas tecnologías que aparecieron en CSS3, o las de CSS2.1 que no tienen mucho soporte:
- --
-
Ver también
- --
-
{{cssref}}
-
-La función CSS repeat() representa un fragmento repetido de la lista de la pista, permitiendo un gran número de columnas o renglones que exhiben un patrón recurrente para ser escrito de una forma más compacta.
Esta función puede ser usada en las propiedades CSS Grid {{cssxref("grid-template-columns")}} y {{cssxref("grid-template-rows")}}.
- -/* <track-repeat> values */ -repeat(4, 1fr) -repeat(4, [col-start] 250px [col-end]) -repeat(4, [col-start] 60% [col-end]) -repeat(4, [col-start] 1fr [col-end]) -repeat(4, [col-start] min-content [col-end]) -repeat(4, [col-start] max-content [col-end]) -repeat(4, [col-start] auto [col-end]) -repeat(4, [col-start] minmax(100px, 1fr) [col-end]) -repeat(4, [col-start] fit-content(200px) [col-end]) -repeat(4, 10px [col-start] 30% [col-middle] auto [col-end]) -repeat(4, [col-start] min-content [col-middle] max-content [col-end]) - -/* <auto-repeat> values */ -repeat(auto-fill, 250px) -repeat(auto-fit, 250px) -repeat(auto-fill, [col-start] 250px [col-end]) -repeat(auto-fit, [col-start] 250px [col-end]) -repeat(auto-fill, [col-start] minmax(100px, 1fr) [col-end]) -repeat(auto-fill, 10px [col-start] 30% [col-middle] 400px [col-end]) - -/* <fixed-repeat> values */ -repeat(4, 250px) -repeat(4, [col-start] 250px [col-end]) -repeat(4, [col-start] 60% [col-end]) -repeat(4, [col-start] minmax(100px, 1fr) [col-end]) -repeat(4, [col-start] fit-content(200px) [col-end]) -repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end]) -- -
Síntaxis
- -Valores
- --
-
Ejemplo
- -CSS
- -#container {
- display: grid;
- grid-template-columns: repeat(2, 50px 1fr) 100px;
- grid-gap: 5px;
- box-sizing: border-box;
- height: 200px;
- width: 100%;
- background-color: #8cffa0;
- padding: 10px;
-}
-
-#container > div {
- background-color: #8ca0ff;
- padding: 5px;
-}
-
-
-HTML
- -<div id="container"> - <div> - Este elemento tiene un ancho de 50 pixels. - </div> - <div> - Elemento con un ancho flexible. - </div> - <div> - Este elemento tiene un ancho de 50 pixels. - </div> - <div> - Elemento con un ancho flexible. - </div> - <div> - Este elemento tiene un ancho de 100 pixels. - </div> -</div>- -
Resultados
- -{{EmbedLiveSample("Example", "100%", 200)}}
- -Especificaciones
- -| Specification | -Status | -Comment | -
|---|---|---|
| {{SpecName("CSS Grid", "#funcdef-repeat", "repeat()")}} | -{{Spec2("CSS Grid")}} | -Initial definition | -
Compatibilidad del navegador
- - - -{{Compat("css.properties.grid-template-columns.repeat")}}
diff --git a/files/es/web/css/repeat/index.md b/files/es/web/css/repeat/index.md new file mode 100644 index 00000000000000..dd1a0a696b70c4 --- /dev/null +++ b/files/es/web/css/repeat/index.md @@ -0,0 +1,134 @@ +--- +title: repeat() +slug: Web/CSS/repeat +tags: + - CSS + - CSS Grid + - Función CSS + - Layout + - Maquetado + - Referencia + - Web +translation_of: Web/CSS/repeat() +original_slug: Web/CSS/repeat() +--- +{{cssref}} + +La función [CSS](/es/docs/Web/CSS) **`repeat()`** representa un fragmento repetido de la lista de la pista, permitiendo un gran número de columnas o renglones que exhiben un patrón recurrente para ser escrito de una forma más compacta. + +Esta función puede ser usada en las propiedades CSS Grid {{cssxref("grid-template-columns")}} y {{cssxref("grid-template-rows")}}. + +```css +/*
+
+```
+
+### Resultados
+
+{{EmbedLiveSample("Example", "100%", 200)}}
+
+## Especificaciones
+
+| Specification | Status | Comment |
+| ------------------------------------------------------------------------ | ---------------------------- | ------------------ |
+| {{SpecName("CSS Grid", "#funcdef-repeat", "repeat()")}} | {{Spec2("CSS Grid")}} | Initial definition |
+
+## Compatibilidad del navegador
+
+{{Compat("css.properties.grid-template-columns.repeat")}}
diff --git a/files/es/web/css/replaced_element/index.html b/files/es/web/css/replaced_element/index.html
deleted file mode 100644
index 73128acaa2e12a..00000000000000
--- a/files/es/web/css/replaced_element/index.html
+++ /dev/null
@@ -1,20 +0,0 @@
----
-title: Elemento de reemplazo
-slug: Web/CSS/Replaced_element
-tags:
- - CSS
- - CSS Referência
- - Intermediate
-translation_of: Web/CSS/Replaced_element
-original_slug: Web/CSS/Elemento_reemplazo
----
-
+ Este elemento tiene un ancho de 50 pixels.
+
+
+ Elemento con un ancho flexible.
+
+
+ Este elemento tiene un ancho de 50 pixels.
+
+
+ Elemento con un ancho flexible.
+
+
+ Este elemento tiene un ancho de 100 pixels.
+
+
- {{CSSRef()}}
-Summary
-Dentro de CSS tenemos los elementos de reemplazo, cuya representacion esta fuera del ambito de propio CSS. Son un tipo de objeto externo, por tanto su representacion es independiente de CSS. Algunos objetos que normalmente funcionan como objetos de reemplazo son {{HTMLElement("img")}}, {{HTMLElement("object")}}, {{HTMLElement("video")}} o elementos de formulario como {{HTMLElement("textarea")}}, {{HTMLElement("input")}}. Algunos elementos como {{HTMLElement("audio")}} or {{HTMLElement("canvas")}} ejercen como elementos de reemplazo solo en casos especificos. Los objetos insertados a traves de las propiedades CSS {{cssxref("content")}} son objetos de reemplazo anonimos..
-CSS gestiona elementos de reemplazo en casos concretos, por ejemplo al calcular los margenes y algunos auto valores.
Recuerda que algunos elementos de reemplazo, no todos, tienen dimensiones intrinsecas o linea de base establecida, las cuales son utilizadas por propiedades de CSS como {{cssxref("vertical-align")}}.
-Ver tambien:
--
-
{{CSSRef}}
-
-Resumen
- -La propiedad resize de CSS permite controlar la capacidad de cambio de tamaño de un elemento.
- -{{cssinfo}}
- -Sintaxis
- -/* Keyword values */ -resize: none; -resize: both; -resize: horizontal; -resize: vertical; - -/* Global values */ -resize: inherit; -resize: initial; -resize: unset; -- -
Valores
- --
-
Nota:
-
-resize no aplica abloques en los cuales la propiedad {{cssxref("overflow")}} es configurada como visible.Sintaxis formal
- -{{csssyntax}} - -Ejemplos
- -Deshabilitando la capacidad de cambio de tamaño de areas de texto
- -CSS
- -Por defecto, los elementos {{HTMLElement("textarea")}} permiten cambiar el tamaño en {{gecko("2.0")}} (Firefox 4). Se puede anular este comportamiento con el CSS mostrado abajo:
- -textarea.example {
- resize: none; /* disables resizability */
-}
-
-
-HTML
- -<textarea class="example">Type some text here.</textarea>- -
Result
- -{{EmbedLiveSample("Deshabilitando_la_capacidad_de_cambio_de_tamaño_de_areas_de_texto","200","100")}}
- -Utilizando resize con elementos arbitrarios
- -Se puede utilizar la propiedad resize para permitir a cualquier elemento ofrecer el mecanismo para cambiar de tamaño. En el ejemplo de abajo, un bloque {{HTMLElement("div")}} contiene un parrafo (elemento {{HTMLElement("p")}}) que permite cambiar su tamaño:
- -CSS
- -.resizable {
- resize: both;
- overflow: scroll;
- border: 1px solid black;
-}
-
-div {
- height: 300px;
- width: 300px;
-}
-
-p {
- height: 200px;
- width: 200px;
-}
-
-
-HTML
- -<div class="resizable"> - <p class="resizable"> - This paragraph is resizable, because the CSS resize property is set to 'both' on this - element. - </p> -</div> -- -
Result
- -{{EmbedLiveSample("Utilizando_resize_con_elementos_arbitrarios","450","450")}}
- -Especificaciones
- -| Espacificación | -Estado | -Comentario | -
|---|---|---|
| {{SpecName('CSS3 Basic UI', '#resize', 'resize')}} | -{{Spec2('CSS3 Basic UI')}} | -- |
Compatibilidad de Navegador
- -{{Compat("css.properties.resize")}} - -Ver también
- --
-
+
+```
+
+#### Result
+
+{{EmbedLiveSample("Utilizando_resize_con_elementos_arbitrarios","450","450")}}
+
+## Especificaciones
+
+| Espacificación | Estado | Comentario |
+| -------------------------------------------------------------------- | ------------------------------------ | ---------- |
+| {{SpecName('CSS3 Basic UI', '#resize', 'resize')}} | {{Spec2('CSS3 Basic UI')}} | |
+
+## Compatibilidad de Navegador
+
+{{Compat("css.properties.resize")}}
+
+## Ver también
+
+- {{HTMLElement("textarea")}}
diff --git a/files/es/web/css/resolution/index.html b/files/es/web/css/resolution/index.html
deleted file mode 100644
index 87d3388da05cd7..00000000000000
--- a/files/es/web/css/resolution/index.html
+++ /dev/null
@@ -1,86 +0,0 @@
----
-title: + This paragraph is resizable, because the CSS resize property is set to 'both' on this + element. +
+{{CSSRef}}
-
-Resumen
- -El tipo de dato CSS <resolution>, usado en media queries, define la densidad de píxeles de un dispositivo de salida, su resolución. Es un {{cssxref("<number>")}} inmediatamente seguido por una unidad de resolución (dpi, dpcm, ...). Como para cualquier dimensión CSS, no hay espacio entre la unidad literal y el número.
En pantallas, la longitud está relacionada a centímetros, pulgadas o píxeles CSS, no en valores físicos.
- -Incluso si todas las unidades representan la misma resolución para el valor 0, la unidad no se puede omitir en este caso, ya que no es un {{cssxref("<length>")}}: 0 es inválida y no representa 0dpi, 0dpcm, ni 0dppx.
Unidades
- --
-
Ejemplos
- -Éstos son algunos de los usos correctos de valores <resolution>:
96dpi Uso correcto: a {{cssxref("<number>")}} (here an {{cssxref("<integer>")}}) followed by the unit.
-@media print and (min-resolution: 300dpi) { ... } El uso correcto en el contexto de una media query.
-
-
-Here are some incorrect uses:
- -72 dpi Incorecto: no hay espacios entre {{ cssxref("<number>") }} y la unidad.
-ten dpi Incorecto: sólo deben ser utilizados dígitos.
-0 Incorecto: la unidad se puede omitir por 0 sólo para valores {{ cssxref("<length>") }}.
-
-
-Especificación
- -| Especificación | -Estado | -Comentario | -
|---|---|---|
| {{SpecName('CSS3 Values', '#resolution', '<resolution>')}} | -{{Spec2('CSS3 Values')}} | -Factorización del tipo en una especificación más genérica. Ningún cambio | -
| {{SpecName('CSS3 Images', '#resolution-units', '<resolution>')}} | -{{Spec2('CSS3 Images')}} | -Añadida la unidad dppx |
-
| {{SpecName('CSS3 Media Queries', '#resolution', '<resolution>')}} | -{{Spec2('CSS3 Media Queries')}} | -Definición inicial | -
Compatibilidad de navegadores
- -{{Compat("css.types.resolution")}} - -Ver también
- - diff --git a/files/es/web/css/resolution/index.md b/files/es/web/css/resolution/index.md new file mode 100644 index 00000000000000..3df0f74afb6bf7 --- /dev/null +++ b/files/es/web/css/resolution/index.md @@ -0,0 +1,63 @@ +--- +title:{{cssref}}
-
-El valor resuelto (resolved value) de una propiedad CSS es el valor devuelto por {{domxref("Window.getComputedStyle", "getComputedStyle()")}}. Para la mayoría de las propiedades, esto es el {{cssxref("computed_value", "valor calculado") }}, pero para algunas propiedades antiguas (incluyendo {{cssxref("width")}} y {{cssxref("height")}}), éste es el {{cssxref("used_value", "valor usado")}}. Véase el enlace a la especificación a continuación para más detalles por propiedad.
- -Especificaciones
- -| Especificación | -Estatus | -Comentarios | -
|---|---|---|
| {{SpecName("CSSOM", "#resolved-values", "resolved value")}} | -{{Spec2("CSSOM")}} | -Definición inicial | -
Véase también
- --
-
{{ CSSRef() }}
- -Sumario
- -La propiedad right especifica parte de la posición de un elemento (posicionado - es decir, con una posición determinada por código).
Para los elementos con una posición absoluta (aquellos que tienen la propiedad {{ Cssxref("position") }}: absolute ó position: fixed), la propiedad right determina la distancia entre el margen derecho del elemento y el borde derecho de su bloque contenedor.
-
-
Sintaxis
- -right: <length> | <percentage> | auto | inherit ; -- -
Valores
- --
-
Ejemplos
- -div {
- position: absolute;
- right: 20px;
- height: 200px;
- border: 1px solid #000;
-}
-
-
-Notas
- -Especificaciones
- - - -Compatibilidad entre navegadores
- -| Navegador | -Versión mínima | -
|---|---|
| Internet Explorer | -? | -
| Firefox | -1 | -
| Netscape | -? | -
| Opera | -? | -
| Safari | -? | -
Ver también
- -{{ Cssxref("position") }}, {{ Cssxref("top") }}, {{ Cssxref("bottom") }}, {{ Cssxref("left") }}
diff --git a/files/es/web/css/right/index.md b/files/es/web/css/right/index.md new file mode 100644 index 00000000000000..ddf53456e28764 --- /dev/null +++ b/files/es/web/css/right/index.md @@ -0,0 +1,68 @@ +--- +title: right +slug: Web/CSS/right +tags: + - CSS Reference + - NeedsTechnicalReview + - Referencia_CSS +translation_of: Web/CSS/right +--- +{{ CSSRef() }} + +### Sumario + +La propiedad `right` especifica parte de la posición de un elemento (posicionado - es decir, con una posición determinada por código). + +Para los elementos con una posición absoluta (aquellos que tienen la propiedad {{ Cssxref("position") }}`: absolute` ó `position: fixed`), la propiedad right determina la distancia entre el margen derecho del elemento y el borde derecho de su bloque contenedor. + +- {{ Xref_cssinitial() }}: {{ Cssxref("auto") }} +- Se aplica a: [positioned elements](es/CSS/position) +- {{ Xref_cssinherited() }}: no +- Porcentajes: se refiere al ancho del bloque contenedor. +- Media: {{ Xref_cssvisual() }} +- {{ Xref_csscomputed() }}: valor absoluto, porcentaje ó auto. + +### Sintaxis + +``` +right:Ver también
Interwiki Languages
- -{{ languages( { "fr": "fr/CSS/visibility", "pl": "pl/Dokumentacja_CSS/W\u0142asno\u015bci_szablonu", "en": "en/CSS/visibility" } ) }}