1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
|
---
title: visibility
slug: Web/CSS/visibility
tags:
- CSS
- 'CSS:Referencias'
- Referencia_CSS
- Todas_las_Categorías
translation_of: Web/CSS/visibility
---
<p> </p>
<p>{{ CSSRef() }}</p>
<h3 id="Resumen" name="Resumen">Resumen</h3>
<p>La propiedad <code>visibility</code> se usa para dos efectos:</p>
<ol>
<li>El valor <code>hidden</code> esconde un elemento, pero deja (vacío) el espacio donde debería aparecer.</li>
<li>El valor <code>collapse</code> esconde filas o columnas de una tabla.</li>
</ol>
<ul>
<li>{{ Cssxref("initial", "Valor incial") }}: {{ Cssxref("visible") }}</li>
<li>Se aplica a: Todos los elementos.</li>
<li>{{ Cssxref("inheritance", "Valor heredado") }}: Sí</li>
<li>Porcentajes: N/A</li>
<li>Medio: {{ Xref_cssvisual() }}</li>
<li>{{ Cssxref("computed value", "Valor calculado") }}: Como se especifica.</li>
</ul>
<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>
<pre class="eval">visibility: visible | hidden | collapse | {{ Cssxref("inherit") }}
</pre>
<h3 id="Valores" name="Valores">Valores</h3>
<dl>
<dt><code>visible</code></dt>
<dd>El elemento se muestra normalmente.</dd>
<dt><code>hidden</code></dt>
<dd>El elemento está escondido, pero los demás elementos se colocan como si ése elemento estuviera presente. Esto funciona como si el elemento fuera absolutamente transparente. Los elementos, con la propiedad <code>visibility: visible</code>, descendientes de ése elemento serán visibles.</dd>
<dt><code>collapse</code></dt>
<dd>Para tablas, filas, columnas y grupos de tablas. Las filas o columnas se esconden y el espacio que normalmente ocupan, es ocupado (como si aplicáramos el código <code>{{ Cssxref("display") }}: none</code> a las filas/columnas de la tabla). Sin embargo, el tamaño de las columnas o filas restantes, es calculado como si las filas/columnas fusionadas estuvieran presentes. Esta propiedad se diseñó así, al fin de permitir la supresión rápida de filas/columnas de una tabla sin necesidad de calcular de nuevo los altos y los anchos de cada porción de tabla. (Para otros elementos, <code>collapse</code> funciona como <code>hidden</code>).</dd>
</dl>
<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3>
<pre class="eval">p { visibility: hidden; } /* Los párrafos no serán visibles */
p.showme { visibility: visible; } /* excepto los que tengan class = showme (clase= muéstrame) */
tr.col { visibility: collapse; } /* las filas de la tabla con la clase<em>col</em> se fusionarán*/
</pre>
<h3 id="Notas" name="Notas">Notas</h3>
<p>El soporte para <code>visibility: collapse</code> no se encuentra o está implementado parcialmente en algunos navegadores modernos. En muchos casos será tratado como <code>visibility: hidden</code> en elementos que no son filas / columnas de una tabla.</p>
<p><code>visibility:collapse</code> puede cambiar el aspecto de una tabla si hay anidadas tablas dentro de celdas fusionadas, a no ser que se especifique explícitamente <code>visibility: visible</code> en la tabla anidada.</p>
<h3 id="Especificaciones" name="Especificaciones">Especificaciones</h3>
<ul>
<li><a class="external" href="http://www.w3.org/TR/CSS21/visufx.html#visibility">CSS 2.1</a></li>
</ul>
<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3>
<p>{{ Cssxref("display") }}</p>
<p> </p>
<div class="noinclude">
<p><span class="comment">Categorías</span></p>
<p><span class="comment">Interwiki Languages</span></p>
</div>
<p>{{ languages( { "fr": "fr/CSS/visibility", "pl": "pl/Dokumentacja_CSS/W\u0142asno\u015bci_szablonu", "en": "en/CSS/visibility" } ) }}</p>
|
