path: root/files/es/web/css/introducción/media/index.html

---
title: Media
slug: Web/CSS/Introducción/Media
translation_of: Web/Progressive_web_apps/Responsive/Media_types
---
<p>{{CSSTutorialTOC}} {{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Tables", "Tables")}}</p>

<p>Esta es la ultima sección de la primera parte del tutorial de <a href="/es/docs/Web/CSS/Introducción" title="es/docs/Web/CSS/Introducción">Introducción a CSS</a>. Muchas páginas de este tutorial se han enfocado en las propiedades y valores de CSS que especifican como mostrar un documento. Esta sección indaga otra vez en el propósito y la estructura de las hojas de estilo.</p>

<h2 class="clearLeft" id="Información_Media">Información: Media</h2>

<p>El propósito de CSS es especificar cómo los documentos son presentados al usuario. La presentación puede tener más de una forma.</p>

<p>Por ejemplo, probablemente estes leyendo esta página en algún aparato doméstico (un celular, tu pc). Pero también podrías querer proyectarlo para una audiencia mas grande o imprimirlo. Estos medios pueden tener diferentes características. CSS te provee diferentes maneras de presentar un documento en distintos medios.</p>

<p>Para especificar reglas para un medio en particular, usa {{CSSXref("@media")}} seguido por el tipo de medio, seguido por llaves que encierren las reglas.</p>

<div class="tuto_example">
<div class="tuto_type">Ejemplo</div>

<p>Un documento en un web site tiene una barra de navegación que permite a los usuarios moverse en el sitio.</p>

<p>En el lenguaje de marcado, el elemento padre de esta área tiene el <strong>id</strong> <code>nav-area</code>. (En {{HTMLVersionInline(5)}}, esto puede ser marcado con el elemento {{HTMLElement("nav")}} en vez de un {{HTMLElement("div")}} con un atributo <strong>id</strong>.)</p>

<p>Cuando vas a imprimir el documento esa área de navegación no tiene ningún propósito, entonces con las hojas de estilo puedes removerlo completamente:</p>

<pre class="brush:css">@media print {
  #nav-area {display: none;}
  }
</pre>
</div>

<p>Algunos de los tipos de medios comunes son:</p>

<table class="standard-table">
 <tbody>
  <tr>
   <td><code>screen</code></td>
   <td>Pantalla de computadora</td>
  </tr>
  <tr>
   <td><code>print</code></td>
   <td>Medio paginado</td>
  </tr>
  <tr>
   <td style="padding-right: 1em;"><code>projection</code></td>
   <td>Pantalla proyectada</td>
  </tr>
  <tr>
   <td><code>all</code></td>
   <td>Todos (por defecto)</td>
  </tr>
 </tbody>
</table>

<div class="tuto_details">
<div class="tuto_type">Mas detalles</div>

<p>Existen otras maneras de especificar un conjunto de reglas para los distintos medios.</p>

<p>El lenguaje de marcado del documento puede permitir que el tipo de medio sea determinado cuando la hoja de estilo esta enlazada al documento. Por ejemplo, en HTML puedes especificar el tipo de medio con un atributo <code>media</code> en la etiqueta LINK.</p>

<p>En CSS puedes usar {{CSSXref("@import")}} al inicio de la hoja de estilo para importar otra hoja de estilo de una URL, opcionalmente especificando el tipo de medio.</p>

<p>Al usar estas técnicas puedes separar las reglas de estilo para los diferentes medios en distintos archivos. Esta es una manera útil de estructurar tus hojas de estilo.</p>

<p>Para más detalles de los tipos de medio, ve <a href="http://www.w3.org/TR/CSS21/media.html">Media</a> en la especificación de CSS.</p>

<p>Existen mas ejemplos de la propiedad {{cssxref("display")}} en una página posterior de este tutorial: <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/XML_data" title="en-US/docs/Web/Guide/CSS/Getting_Started/XML_data">XML data</a>.</p>
</div>

<h3 id="Imprimir">Imprimir</h3>

<p>CSS tiene algún soporte especifico para impresión y para medios páginados en general.</p>

<p>Una regla {{cssxref("@page")}} puede determinar los márgenes de la página. Para impresión de doble cara, puedes definir los márgenes separadamente para <code>@page:left</code> y <code>@page:right</code>.</p>

<p>Para medios impresios, normalmente usas unidades apropiadas de lonfigutd como pulgadas (<code>in</code>) y puntos (<code>pt</code> = 1/72 inch), o centimetros (<code>cm</code>) y milimetros (<code>mm</code>). Es igualmente apropiado usar ems (<code>em</code>) para conincidir el tamaño de la fuente, y porcentajes (<code>%</code>).</p>

<p>Tu puedes controlar como los saltos de línea del contenido de un documento, al usar las propiedades {{cssxref("page-break-before")}}, {{cssxref("page-break-after")}} y{{cssxref("page-break-inside")}}.</p>

<div class="tuto_example">
<div class="tuto_type">Ejemplo</div>

<p>Esta regla determina los márgenes a una pulgada en todos los lados:</p>

<pre class="brush:css">@page {margin: 1in;}
</pre>

<p>Esta regla asegura que cada elemento H1 empiece en una nueva página:</p>

<pre class="brush:css">h1 {page-break-before: always;}
</pre>
</div>

<div class="tuto_details">
<div class="tuto_type">Más detalles</div>

<p>Para más detalles del soporte de CSS para medios paginados, ver <a href="http://www.w3.org/TR/CSS21/page.html">Paged media</a> en la especificación de CSS.</p>

<p>Como otras características de CSS, imprimir depende de tu navegador y su configuración. Por ejemplo, Mozilla te suple con unos márgenes por defecto, cabeceras y pies de página cuando imprimes. Cuando otros usuarios imprimen tu documento, probablemente no puedas predecir el navegador y la configuración usada, por lo que no podrás controlar los resutlados completamente.</p>
</div>

<h3 id="Interfaces_de_Usuario">Interfaces de Usuario</h3>

<p>CSS tiene algunas propiedades especificas para aparatos que soportanuna interfaz de usuario, como monitores. Esto hace que la apariencia del documento cambie dinámicamente mientras el usuario trabaja con la interfaz.</p>

<p>No existe un tipo especial de medio para aparatos con interfaz de usuario.</p>

<p>Si existen cinco selectores especiales:</p>

<table class="standard-table">
 <tbody>
  <tr>
   <td><strong>Selector</strong></td>
   <td><strong>Selects</strong></td>
  </tr>
  <tr>
   <td><code>E{{cssxref(":hover")}}</code></td>
   <td>Cualquier elemento E que tenga el puntero sobre él</td>
  </tr>
  <tr>
   <td><code>E{{cssxref(":focus")}}</code></td>
   <td>Cualquier elemento E que tenga el foco del teclado</td>
  </tr>
  <tr>
   <td><code>E{{cssxref(":active")}}</code></td>
   <td>Cualquier elemento E que este envuelto en la acción actual del usuario</td>
  </tr>
  <tr>
   <td><code>E{{cssxref(":link")}}</code></td>
   <td>Cualquier elemento E que es un hipervinculo a una URL no visitada por el usuario</td>
  </tr>
  <tr>
   <td><code>E{{cssxref(":visited")}}</code></td>
   <td>Cualquier elemento E que es un hipervinculo a una URL que el usuario ya visito</td>
  </tr>
 </tbody>
</table>

<div class="note">
<p><strong>Nota: </strong>La información que puede ser obtenida con el selector :visited esta restringida en {{gecko("2.0")}}. Ver <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector" title="en-US/docs/Web/Guide/CSS/Privacy and the :visited selector">Privacy and the :visited selector</a> para más detalles.</p>
</div>

<p>La propiedad {{cssxref("cursor")}} especifica la forma del puntero: Algunas de las formas comunes son las siguientes.</p>

<p>Coloca el mouse sobre los items en este lista para ver la forma actual del puntero en tu navegador:</p>

<table class="standard-table">
 <tbody>
  <tr>
   <td><strong>Selector</strong></td>
   <td><strong>Selects</strong></td>
  </tr>
  <tr style="cursor: pointer;">
   <td><code>pointer</code></td>
   <td>Indicating a link</td>
  </tr>
  <tr style="cursor: wait;">
   <td><code>wait</code></td>
   <td>Indicating that the program cannot accept input</td>
  </tr>
  <tr style="cursor: progress;">
   <td><code>progress</code></td>
   <td>Indicating that the program is working, but can still accept input</td>
  </tr>
  <tr style="cursor: default;">
   <td><code>default</code></td>
   <td>The default (usually an arrow)</td>
  </tr>
 </tbody>
</table>

<p>Una propiedad {{cssxref("outline")}} crea un contorno que a menudo es usado para indicar el foco del teclado. Sus valores son similares a la propiedad {{cssxref("border")}}, excepto que no puedes especificar lados individuales.</p>

<p>Otras características de las interfaces de usuario son implementadas usando atributos. Por ejemplo, un elemento que esta deshabilitado o es de solo lectura tiene el atributo <strong>disabled</strong> o el atributo <strong>readonly</strong>. Selectores puede especificar estos atributos como cualquier otro, usando corchetes: <code>{{mediawiki.external('disabled')}}</code> o <code>{{mediawiki.external('readonly')}}</code>.</p>

<div class="tuto_example">
<div class="tuto_type">Ejemplo</div>

<p>Estas reglas especifican estilos para un boton que cambia dinámicamente cuando el usuario interactúa con el:</p>

<pre class="brush:css">.green-button {
  background-color:#cec;
  color:#black;
  border:2px outset #cec;
  }

.green-button[disabled] {
  background-color:#cdc;
  color:#777;
  }

.green-button:active {
  border-style: inset;
  }
</pre>

<p>Esta wiki no soporta una interfaz de usuario en la página, entonces estos botones no hacen "click". A continuación se presentan una imágenes estáticas para ilustrar la idea:</p>

<table style="background-color: #fff; border: 2px outset #36b; padding: 1em;">
 <tbody>
  <tr>
   <td>
    <table>
     <tbody>
      <tr>
       <td><span style="background-color: #cdc; border: 2px outset #cec; color: #777; cursor: default; height: 2em; margin-right: 1em; padding: .5em 1em; width: 8em;">Click Me</span></td>
       <td><span style="background-color: #cec; border: 2px outset #cec; cursor: move; height: 2em; margin-right: 1em; padding: .5em 1em; width: 8em;">Click Me</span></td>
       <td><span style="background-color: #cec; border: 2px inset #cec; cursor: move; height: 2em; margin-right: 1em; padding: .5em 1em; width: 8em;">Click Me</span></td>
      </tr>
      <tr style="line-height: 25%;">
       <td> </td>
      </tr>
      <tr style="font-style: italic;">
       <td>disabled</td>
       <td>normal</td>
       <td>active</td>
      </tr>
     </tbody>
    </table>
   </td>
  </tr>
 </tbody>
</table>

<p>Un botón completamente funcional también tiene un contorno oscuro alrededor cuando esta por defecto, y un contorno punteado en él cuando tiene el foco del teclado. También podría un efecto flotante (hover) cuando el puntero este sobre el.</p>
</div>

<div class="tuto_details">
<div class="tuto_type">Más detalles</div>

<p>Para más información sobre interfaces de usuario en CSS, ver <a href="http://www.w3.org/TR/CSS21/ui.html">User interface</a> en la especificación de CSS.</p>

<p>Existe un ejemplo del lenguaje de marcado usado por Mozilla para interfaces de usuario, XUL, en la Parte II de este tutorial.</p>
</div>

<h2 id="Acción_Imprimir_un_documento">Acción: Imprimir un documento</h2>

<ol>
 <li>Abrir un nuevo documento HTML, <code>doc4.html</code>. Copiar y pegar el contenido de aqui:

  <pre class="brush:html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Print sample&lt;/title&gt;
    &lt;link rel="stylesheet" href="style4.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;Section A&lt;/h1&gt;
    &lt;p&gt;This is the first section...&lt;/p&gt;
    &lt;h1&gt;Section B&lt;/h1&gt;
    &lt;p&gt;This is the second section...&lt;/p&gt;
    &lt;div id="print-head"&gt;
      Heading for paged media
    &lt;/div&gt;
    &lt;div id="print-foot"&gt;
      Page:
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
 </li>
 <li>Abrir una nueva hoja de estilo, <code>style4.css</code>. Copiar y pegar el contenido de aqui:
  <pre class="brush:css">/*** Print sample ***/

/* defaults  for screen */
#print-head,
#print-foot {
  display: none;
  }

/* print only */
@media print {

h1 {
  page-break-before: always;
  padding-top: 2em;
  }

h1:first-child {
  page-break-before: avoid;
  counter-reset: page;
  }

#print-head {
  display: block;
  position: fixed;
  top: 0pt;
  left:0pt;
  right: 0pt;

  font-size: 200%;
  text-align: center;
  }

#print-foot {
  display: block;
  position: fixed;
  bottom: 0pt;
  right: 0pt;

  font-size: 200%;
  }

#print-foot:after {
  content: counter(page);
  counter-increment: page;
  }

} /* end print only */
</pre>
 </li>
 <li>Ve este documento en tu navegador; este usa el estilo por defecto de tu navegador.</li>
 <li>Imprime (o previsualiza) el documento; la hoja de estilo coloca cada sección en una página separada, y agrega una cabecera y un pie de página por cada una. Si tu navegador soporta contadores, le agregará un número de página al pie.
  <table>
   <tbody>
    <tr>
     <td>
      <table style="border: 2px outset #36b; padding: 1em;">
       <tbody>
        <tr>
         <td>
          <table style="margin-right: 2em; width: 15em;">
           <tbody>
            <tr>
             <td>
              <div style="font-size: 110%; text-align: center; margin-bottom: .5em;">Heading for paged media</div>

              <div style="font-size: 150%; font-weight: bold;">Section A</div>

              <div style="font-size: 75%;">This is the first section...</div>

              <div style="font-size: 150%; text-align: right; margin-top: 12em;">Page: 1</div>
             </td>
            </tr>
           </tbody>
          </table>
         </td>
        </tr>
       </tbody>
      </table>
     </td>
     <td>
      <table style="border: 2px outset #36b; padding: 1em;">
       <tbody>
        <tr>
         <td>
          <table style="margin-right: 2em; width: 15em;">
           <tbody>
            <tr>
             <td>
              <div style="font-size: 110%; text-align: center; margin-bottom: .5em;">Heading for paged media</div>

              <div style="font-size: 150%; font-weight: bold;">Section B</div>

              <div style="font-size: 75%;">This is the second section...</div>

              <div style="font-size: 150%; text-align: right; margin-top: 12em;">Page: 2</div>
             </td>
            </tr>
           </tbody>
          </table>
         </td>
        </tr>
       </tbody>
      </table>
     </td>
    </tr>
   </tbody>
  </table>
 </li>
</ol>

<table style="background-color: #fffff4; border: 1px solid #36b; padding: 1em; width: 100%;">
 <caption>Retos</caption>
 <tbody>
  <tr>
   <td>Mueve las relgas de estilo especificas para imprimir a un archivo CSS separado.
    <p>Lee la página de referencia {{CSSXref("@import")}} para buscar detalles de como importar el nuevo archivo CSS especifico para imrpimir dentro de tu hoja de estilo style4.css.</p>

    <p>Haz que las encabezamientos se vuelvan azules cuando el puntero del mouse este sobre ellos.</p>
   </td>
  </tr>
 </tbody>
</table>

<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Media" title="en-US/docs/Web/Guide/CSS/Getting_started/Challenge_solutions#Media">Ver soluciones a estos retos.</a></p>

<h2 id="¿Qué_sigue">¿Qué sigue?</h2>

<p>Si has tenido dificultades entendiendo esta página, o si tienes algún comentario, por favor contribuye en la página de <a href="/Talk:en-US/docs/Web/Guide/CSS/Getting_Started/Media" title="Talk:en-US/docs/Web/Guide/CSS/Getting_Started/Media">Discussion</a>.</p>

<p>Hasta aquí, todas las reglas de estilo en este tutorial han estado en archivos especificos. Las reglas y sus valores son fijos. La siguiente página describe como cambiar las reglas dinámicamente al usar un lenguaje de programación: <strong><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/JavaScript" title="en-US/docs/Web/Guide/CSS/Getting_Started/JavaScript">JavaScript</a></strong></p>