mozilla
Los resultados de tu búsqueda

    Clases CSS

    Estas son las clases CSS que hemos definido para los wikis del MDC. Si por alguna razón necesitas una clase CSS a medida para las páginas que edites, puedes ponerte en contacto con Dria.

    Cajas de Texto

    Consejos: .tip

    Usa div class="tip" para crear una caja de texto con la que destacar consejos o información importante:

    El siguiente código:

    <div class="tip">Esto es un consejo.</div>
    

    Se visualiza así:

    Esto es un consejo.

    Notas: .note

    Usa div class="note" para crear una caja de texto con la que destacar información complementaria:

    El siguiente código:

    <div class="note">Esto es una nota. Una nota no muy importante.</div>
    

    Se visualiza así:

    Esto es una nota. Una nota no muy importante.

    Alertas: .warning

    Use div class="warning" para destacar las puntos con los que el lector ha de tener cuidado.

    El siguiente código:

     <div class="warning">Esto es un aviso.</div> 
    

    Se visualiza así:

    Esto es un aviso.

    Bugs: .bug

    Use div class="bug" para referenciar bugs conocidos, con enlace a la entrada correspondiente en Bugzilla:

    El siguiente código:

    <div class="bug">[https://bugzilla.mozilla.org/show_bug.cgi?id=176320 Bug 176320: Minimal innerWidth/innerHeight values for popup windows]</div>
    


    Se visualiza así:

    Cajas laterales

    Puede resultar útil y estéticamente conveniente, mostrar la información complementaria en cajas de texto posicionadas a los lados del texto. La caja creada tendrá el 45% del ancho de su caja padre (usualmente el ancho del artículo). Podemos hacerlo aplicando las siguientes clases:

    .side-note-left

    El siguiente código:

    <div class="side-note-left">
     Se recomienda su uso para mejorar la lectura, así el contenido de la barra 
     lateral se alterna entre el lado izquierdo y derecho del artículo.</div>
     Usado para crear una barra lateral o al lado dentro de un artículo. 
     La caja creada tendrá el 45% del ancho de su caja padre (usualmente el ancho del artículo).
    

    Se visualiza así:

    Se recomienda su uso para mejorar la lectura, así el contenido de la barra lateral se alterna entre el lado izquierdo y derecho del artículo.

    Usado para crear una barra lateral o al lado dentro de un artículo. La caja creada tendrá el 45% del ancho de su caja padre (usualmente el ancho del artículo).

    .side-note-right

    El siguiente código:

    <div class="side-note-right">
     Se recomienda su uso para mejorar la lectura, así el contenido de la barra 
     lateral se alterna entre el lado izquierdo y derecho del artículo.</div>
     Usado para crear una barra lateral o al lado dentro de un artículo. 
     La caja creada tendrá el 45% del ancho de su caja padre (usualmente el ancho del artículo).
    

    Se visualiza así:

    Se recomienda su uso para mejorar la lectura, así el contenido de la barra lateral se alterna entre el lado izquierdo y derecho del artículo.

    Usado para crear una barra lateral o al lado dentro de un artículo. La caja creada tendrá el 45% del ancho de su caja padre (usualmente el ancho del artículo).

    Contenidos destacados: .Highlight

    Destaca secciones de la página añadiendo una barra azul a la izquierda de los contenidos. Es especialmente útil para relacionar contenidos. Por ejemplo, supongamos que queremos añadir a la página un bloque con código y un párrafo de texto aclaratorio.

    El siguiente código:

    <div class="highlight">
     Esto es un ejemplo de no sé qué.
    Y esto se supone que es un texto aclaratorio. </div>
    

    Se visualiza así:

    Esto es un ejemplo de no sé qué.
    

    Y esto se supone que es un texto aclaratorio.

    Texto y código de colores

    Si dentro de un texto queremos resaltar una palabra o frase, podemos aplicarle las siguientes clases a los elementos span:

    • .highlightred Cambia el color del texto a rojo.
    • .highlightblue Cambia el color del texto a azul.
    • .highlightgreen Cambia el color del texto a verde.

    El siguiente código:

     Texto... <span class="highlightred">rojo</span>, 
     <span class="highlightblue">azul</span> y 
     <span class="highlightgreen">verde</span>. 
    

    Se visualiza así:

    Texto... rojo, azul y verde.

    Ten en cuenta que si quieres usar estas clases en tus ejemplos de código, no debes usar pre para mostrar el texto preformateado. En su lugar escribe el ejemplo indentado con espacio en blanco.

    Esto no funciona:

     <pre><span class="highlightred">esto No funciona</span></pre>
    

    Esto sí:

    esto SI funciona
    

    Imágenes flotantes

    También podemos hacer flotar elementos en línea (normalmente una imagen), con las clases:

    .float-left

    El siguiente código:

    <p> <span class='float-left'> [[imagen:mdc-colabora.png]] </span> 
      Anímate a participar,  <br /> Necesitamos tu ayuda. <br/> 
      La unión hace la fuerza, <br /> Juntos seremos imparables. <br /></p>
    

    Se visualiza así:

    imagen:mdc-colabora.png Anímate a participar,
    Necesitamos tu ayuda.
    La unión hace la fuerza,
    Juntos seremos imparables.

    .float-right

    El siguiente código:

    <p> <span class='float-right'> [[imagen:mdc-colabora.png]] </span> 
      Anímate a participar,  <br />Necesitamos tu ayuda. <br/> 
      La unión hace la fuerza, <br /> Juntos seremos imparables. <br /></p>
    

    Se visualiza así:

    imagen:mdc-colabora.png Anímate a participar,
    Necesitamos tu ayuda.
    La unión hace la fuerza,
    Juntos seremos imparables.

    El breadcrumbs es una extensión muy utilizada en este wiki, pero tiene sus limitaciones y en algunas páginas no funciona como debiera, esta que lees, es un ejemplo:

    El siguiente código:

    <breadcrumbs></breadcrumbs>
    

    Se visualiza así:

    Por ello en ciertas situaciones puede resultar conveniente crear el breadcrumbs manualmente:

    El siguiente código:

     <div class="breadcrumbs"> [[Portada]] > [[MDC:Como ayudar|MDC]] > '''Clases CSS''' </div> 
    

    Se visualiza así:

     

    Tablas

    Para darle estilo a las tablas y adaptarlas a las necesidades especificas de cada página disponemos de las siguientes clases CSS:

    • .standard-table Estilo básico de tabla estándar.
    • .fullwidth-table Tabla con un ancho fijo del 100%.

    .standard-table

    Sirve para crear tablas con bordes en las celdas, y fondo gris en los encabezados. Ten en cuenta que con este estilo las tablas se adaptan a las dimensiones del contenido.

    El siguiente código:

    <table class="standard-table">
    <tr> <th>Encabezado 1</th> <th>Encabezado 2</th> </tr>
    <tr> <td>Este es un ejemplo de:</td> <td><code> standard-table </code> </td> </tr>
    </table> 
    


    Se visualiza así:

    Encabezado 1 Encabezado 2
    Este es un ejemplo de: standard-table

    .fullwidth-table

    Sirve para crear tablas con estilo que ocupen el 100% del espacio disponible.

    El siguiente código:

    <table class="fullwidth-table">
    <tr> <th>Encabezado 1</th> <th>Encabezado 2</th> </tr>
    <tr> <td>Este es un ejemplo de:</td> <td><code> fullwidth-table </code> </td> </tr>
    </table> 
    


    Se visualiza así:

    Encabezado 1 Encabezado 2
    Este es un ejemplo de: fullwidth-table

    Etiquetas y colaboradores del documento

    Contributors to this page: fscholz, DR, DoctorRomi, Jorolo, Balsero, Alfredomx, teoli
    Última actualización por: fscholz,