Propiedad display
La propiedad display se puede usar para:
- Hacer que un elemento sea de bloque (block) o de línea (inline).
- Ocultarlo o hacerlo visible. Esta característica se utiliza habitualmente a través de JavaScript con webs interactiva.
Por ejemplo, hay varios vínculos, que son elementos de línea. Pero hay una regla CSS que hace que los que tienen clase "especial" sean de bloque.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Ejemplo de atributos CSS de fuente</title>
<style>
.especial {
display: block;
}
.oculto {
display: none;
}
</style>
</head>
<body>
<a href="#">Primer vínculo (normal)</a>
<a href="#">Segundo vínculo (normal)</a>
<a href="#" class="especial">Tercer vínculo (especial)</a>
<a href="#" class="especial">Cuarto vínculo (especial)</a>
<a href="#" class="oculto">Quinto vínculo (oculto)</a>
</body>
</html>
En el navegador se mostraría de la siguiente manera:
Probar en el navegador