Clases CSS

  • Enlace amigable (slug) de la revisión: Project:Clases_CSS
  • Título de la revisión: Clases CSS
  • Id de la revisión: 122869
  • Creada:
  • Creador: Jorolo
  • ¿Es la revisión actual? No
  • Comentario /* <code>.float-right</code> */ errata y ortografía

Contenido de la revisión

{{template.Como_ayudar()}}

Estas son las clases CSS que hemos definido para los wikis del MDC. Si por alguna razón necesita una clase CSS a medida para las páginas que edites, puedes ponerte en contacto con {{mediawiki.interwiki('en', 'User:Dria', '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 a 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="highight">
 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 serémos imparables. <br /></p>

Se visualiza así:

imagen:mdc-colabora.png Anímate a participar,
Necesitamos tu ayuda.
La unión hace la fuerza
Juntos serémos 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.


Breadcrumbs

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



Categorías

interwiki links

{{ wiki.languages( { "en": "Project:en/Custom_CSS_Classes", "de": "Help:de/Custom_CSS_Classes", "fr": "Help:fr/Classes_CSS_particuli\u00e8res", "ja": "Project:ja/Custom_CSS_Classes" } ) }}

Fuente de la revisión

<div class="breadcrumbs"><a href="es">Portada</a> &gt; <a href="Project:es/Como_ayudar">MDC</a> &gt; <b>Clases CSS</b> </div>
<p>{{template.Como_ayudar()}}
</p><p>Estas son las clases CSS que hemos definido para los wikis del MDC. Si por alguna razón necesita una clase CSS a medida para las páginas que edites, puedes ponerte en contacto con {{mediawiki.interwiki('en', 'User:Dria', 'Dria')}}.
</p>
<h3 name="Cajas_de_Texto"> Cajas de Texto </h3>
<h4 name="Consejos:_.tip"> Consejos: .tip </h4>
<p>Usa <code>div class="tip"</code> para crear una caja de texto con la que destacar consejos o información importante:
</p><p>El siguiente código:
</p>
<pre class="eval"><span class="plain">&lt;div class="tip"&gt;Esto es un consejo.&lt;/div&gt;</span>
</pre>
<p>Se visualiza así:
</p>
<div class="tip">Esto es un consejo.</div>
<h4 name="Notas:_.note"> Notas: .note </h4>
<p>Usa <code>div class="note"</code> para crear una caja de texto con la que destacar información complementaria: 
</p><p>El siguiente código:
</p>
<pre class="eval"><span class="plain">&lt;div class="note"&gt;Esto es una nota. Una nota no muy importante.&lt;/div&gt;</span>
</pre>
<p>Se visualiza así:
</p>
<div class="note">Esto es una nota. Una nota no muy importante.</div>
<p><br>
</p>
<h4 name="Alertas:_.warning"> Alertas: .warning </h4>
<p>Use <code>div class="warning"</code> para destacar las puntos con los que el lector a de tener cuidado. 
</p><p>El siguiente código:
</p>
<pre class="eval"><span class="plain"> &lt;div class="warning"&gt;Esto es un aviso.&lt;/div&gt; </span>
</pre>
<p>Se visualiza así:
</p>
<div class="warning">Esto es un aviso.</div>
<h4 name="Bugs:_.bug"> Bugs: .bug </h4>
<p>Use <code>div class="bug"</code> para referenciar bugs conocidos, con enlace a la entrada correspondiente en Bugzilla:
</p><p>El siguiente código:
</p>
<pre class="eval"><span class="plain">&lt;div class="bug"&gt;[https://bugzilla.mozilla.org/show_bug.cgi?id=176320 Bug 176320: Minimal innerWidth/innerHeight values for popup windows]&lt;/div&gt;</span>
</pre>
<p><br>
Se visualiza así:
</p>
<div class="bug"><a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=176320">Bug 176320: Minimal innerWidth/innerHeight values for popup windows</a></div>
<h3 name="Cajas_laterales"> Cajas laterales </h3>
<p>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:
</p><p><br>
</p>
<h4 name=".side-note-left"> .side-note-left </h4>
<p>El siguiente código:
</p>
<pre class="eval"><span class="plain">&lt;div class="side-note-left"&gt;
 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.&lt;/div&gt;
 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).</span>
</pre>
<p>Se visualiza así:
</p>
<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>
<p>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).
</p><p><br>
</p>
<h4 name=".side-note-right"> .side-note-right </h4>
<p>El siguiente código:
</p>
<pre class="eval"><span class="plain">&lt;div class="side-note-right"&gt;
 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.&lt;/div&gt;
 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).</span>
</pre>
<p>Se visualiza así:
</p>
<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>
<p>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).
</p><p><br>
</p>
<h3 name="Contenidos_destacados:_.Highlight"> Contenidos destacados: .Highlight </h3>
<p>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.
</p><p><br>
El siguiente código:
</p>
<pre class="eval">&lt;div class="highight"&gt;
 Esto es un ejemplo de no sé qué.
Y esto se supone que es un texto aclaratorio. &lt;/div&gt;
</pre>
<p><br>
Se visualiza así:
</p>
<div class="highlight">
<pre class="eval">Esto es un ejemplo de no sé qué.
</pre>
<p>Y esto se supone que es un texto aclaratorio.
</p>
</div>
<h3 name="Texto_y_c.C3.B3digo_de_colores"> Texto y código de colores </h3>
<p>Si dentro de un texto queremos resaltar una palabra o frase, podemos aplicarle las siguientes clases a los elementos span:
</p>
<ul><li> <code>.highlightred</code> Cambia el color del texto a rojo.
</li><li> <code>.highlightblue</code> Cambia el color del texto a azul.
</li><li> <code>.highlightgreen</code> Cambia el color del texto a verde.
</li></ul>
<p><br>
El siguiente código:
</p>
<pre class="eval"><span class="plain"> Texto... &lt;span class="highlightred"&gt;rojo&lt;/span&gt;, 
 &lt;span class="highlightblue"&gt;azul&lt;/span&gt; y 
 &lt;span class="highlightgreen"&gt;verde&lt;/span&gt;. </span>
</pre>
<p>Se visualiza así:
</p><p>Texto...
<span class="highlightred">rojo</span>, 
<span class="highlightblue">azul</span> y 
<span class="highlightgreen">verde</span>.
</p><p><br>
Ten en cuenta que si quieres usar estas clases en tus ejemplos de código, no debes usar <code>pre</code> para mostrar el texto preformateado. En su lugar escribe el ejemplo indentado con espacio en blanco.
</p><p>Esto no funciona:
</p>
<pre class="eval"><span class="plain"> &lt;pre&gt;&lt;span class="highlightred"&gt;esto No funciona&lt;/span&gt;&lt;/pre&gt;</span>
</pre>
<p>Esto sí:
</p>
<pre class="eval"><span class="highlightred">esto SI funciona</span>
</pre>
<h3 name="Im.C3.A1genes_flotantes"> Imágenes flotantes </h3>
<p>También podemos hacer flotar elementos en línea (normalmente una imagen), con las clases:
</p>
<h4 name=".float-left"> <code>.float-left</code> </h4>
<p>El siguiente código:
</p>
<pre class="eval"><span class="plain">&lt;p&gt; &lt;span class='float-left'&gt; [[imagen:mdc-colabora.png]] &lt;/span&gt; 
  Anímate a participar,  &lt;br /&gt;Necesitamos tu ayuda. &lt;br/&gt; 
  La unión hace la fuerza&lt;br /&gt; Juntos serémos imparables. &lt;br /&gt;&lt;/p&gt;</span>
</pre>
<p>Se visualiza así:
</p>
<p> <span class="float-left"> <img alt="imagen:mdc-colabora.png" src="File:es/Media_Gallery/Mdc-colabora.png"> </span> Anímate a participar,  <br>Necesitamos tu ayuda. <br> La unión hace la fuerza<br> Juntos serémos imparables. <br> </p>
<p><br>
</p>
<h4 name=".float-right"> <code>.float-right</code> </h4>
<p>El siguiente código:
</p>
<pre class="eval"><span class="plain">&lt;p&gt; &lt;span class='float-right'&gt; [[imagen:mdc-colabora.png]] &lt;/span&gt; 
  Anímate a participar,  &lt;br /&gt;Necesitamos tu ayuda. &lt;br/&gt; 
  La unión hace la fuerza, &lt;br /&gt; Juntos seremos imparables. &lt;br /&gt;&lt;/p&gt;</span>
</pre>
<p>Se visualiza así:
</p>
<p> <span class="float-right"> <img alt="imagen:mdc-colabora.png" src="File:es/Media_Gallery/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>
<p><br>
</p>
<h3 name="Breadcrumbs"> Breadcrumbs </h3>
<p>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:
</p><p>El siguiente código:
</p>
<pre class="eval"><span class="plain">&lt;breadcrumbs&gt;&lt;/breadcrumbs&gt;</span>
</pre>
<p>Se visualiza así:
</p><p>
</p><p>Por ello en ciertas situaciones puede resultar conveniente crear el breadcrumbs manualmente:
</p><p>El siguiente código:
</p>
<pre class="eval"> <span class="plain">&lt;div class="breadcrumbs"&gt; [[Portada]] &gt; [[MDC:Como ayudar|MDC]] &gt; '''Clases CSS''' &lt;/div&gt; </span>
</pre>
<p>Se visualiza así:
</p>
<div class="breadcrumbs"><a href="es">Portada</a> &gt; <a href="Project:es/Como_ayudar">MDC</a> &gt; <b>Clases CSS</b> </div>
<p><br>
</p>
<h3 name="Tablas"> Tablas </h3>
<p>Para darle estilo a las tablas y adaptarlas a las necesidades especificas de cada página disponemos de las siguientes clases CSS:
</p>
<ul><li> <code>.standard-table</code> Estilo básico de tabla estándar.
</li><li> <code>.fullwidth-table</code> Tabla con un ancho fijo del 100%.
</li></ul>
<p><br>
</p>
<h4 name=".standard-table"> .standard-table </h4>
<p>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.
</p><p>El siguiente código:
</p>
<pre class="eval">&lt;table class="standard-table"&gt;
&lt;tr&gt; &lt;th&gt;Encabezado 1&lt;/th&gt; &lt;th&gt;Encabezado 2&lt;/th&gt; &lt;/tr&gt;
&lt;tr&gt; &lt;td&gt;Este es un ejemplo de:&lt;/td&gt; &lt;td&gt;&lt;code&gt; standard-table &lt;/code&gt; &lt;/td&gt; &lt;/tr&gt;
&lt;/table&gt; 
</pre>
<p><br>
Se visualiza así:
</p>
<table class="standard-table">
<tbody><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>
</tbody></table>
<p><br>
</p>
<h4 name=".fullwidth-table"> .fullwidth-table </h4>
<p>Sirve para crear tablas con estilo que ocupen el 100% del espacio disponible.
</p><p>El siguiente código:
</p>
<pre class="eval">&lt;table class="fullwidth-table"&gt;
&lt;tr&gt; &lt;th&gt;Encabezado 1&lt;/th&gt; &lt;th&gt;Encabezado 2&lt;/th&gt; &lt;/tr&gt;
&lt;tr&gt; &lt;td&gt;Este es un ejemplo de:&lt;/td&gt; &lt;td&gt;&lt;code&gt; fullwidth-table &lt;/code&gt; &lt;/td&gt; &lt;/tr&gt;
&lt;/table&gt; 
</pre>
<p><br>
Se visualiza así:
</p>
<table class="fullwidth-table">
<tbody><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>
</tbody></table>
<p><br>
</p>
<hr>
<p><span class="comment">Categorías</span>
</p><p><span class="comment">interwiki links</span>
</p>{{ wiki.languages( { "en": "Project:en/Custom_CSS_Classes", "de": "Help:de/Custom_CSS_Classes", "fr": "Help:fr/Classes_CSS_particuli\u00e8res", "ja": "Project:ja/Custom_CSS_Classes" } ) }}
Revertir a esta revisión