Definición de Elementos HTML/CSS

En esta página coloco diferentes estilos y conjuntos de HTML/CSS del diseño de esta web, primeramente como referencia para mi y también para que otros puedan aprender e incluso corregirme.

Código

<pre>texto en un &lt;pre&gt; xxx &lt;/pre&gt;</pre>

Resultado

texto en un <pre> xxx </pre>

Código

<pre class="shell"># comando de shell a ejecutar</pre>

Resultado

# comando de shell a ejecutar

Cuadro con sobra azul

Recuerda que la consulta en sí es lo que va entre comillas y es lo que se debe poner en la web.

Código

<div class="nota"> <span class="nota_titulo [color]">TITULO DE LA NOTA</span> <hr class="nota_arriba"> [<span class="nota_ico aviso_ico"></span>] <div class="nota_texto [con_ico] [rojo]"> Aquí podemos poner el texto de la Nota, el título se pasa a MAYUSCULAS, va justificado, con un ancho del 90%. </div> <hr class="nota_abajo"> </div>

[color] es opcional e indica el color del texto, hay varios colores definidos.

El span es opcional y sirve para incluir un icono antes del texto. aviso_ico es un triángulo rojo. Si usamos el span para incluir un icono debemos usar con_ico para que deje margen.


Código

<div class="nota"> <span class="nota_titulo">NOTA</span> <hr class="nota_arriba"> <div class="nota_texto"> Aquí podemos poner el texto de la Nota, el título se pasa a MAYUSCULAS, va justificado, con un ancho del 90%. </div> <hr class="nota_abajo"> </div>

Resultado

NOTA
Aquí podemos poner el texto de la Nota, el título se pasa a MAYUSCULAS, va justificado, con un ancho del 90%.


Código

<div class="nota"> <span class="nota_titulo">Importante</span> <hr class="nota_arriba"> <span class="nota_ico aviso_ico"></span> <div class="nota_texto con_ico rojo"> Aquí podemos poner el texto de la Nota, Aviso, Atención (el título se pasa a MAYUSCULAS), va justificado, con un ancho del 90%. </div> <hr class="nota_abajo"> </div>

Resultado

Importante
Aquí podemos poner el texto de la Nota, Aviso, Atención (el título se pasa a MAYUSCULAS), va justificado, con un ancho del 90%.

H1

H2

H3

H4

H5

Retro

Lugares

Redes

Sistemas

Varios