Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.
Tables
Esta es la ultima sección de la primera parte del tutorial de Introducción a CSS. 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.
Información: Media
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.
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.
Para especificar reglas para un medio en particular, usa @media seguido por el tipo de medio, seguido por llaves que encierren las reglas.
Un documento en un web site tiene una barra de navegación que permite a los usuarios moverse en el sitio.
En el lenguaje de marcado, el elemento padre de esta área tiene el id nav-area. (En HTML5, esto puede ser marcado con el elemento <nav> en vez de un <div> con un atributo id.)
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:
@media print {
#nav-area {display: none;}
}
Algunos de los tipos de medios comunes son:
screen |
Pantalla de computadora |
print |
Medio paginado |
projection |
Pantalla proyectada |
all |
Todos (por defecto) |
Existen otras maneras de especificar un conjunto de reglas para los distintos medios.
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 media en la etiqueta LINK.
En CSS puedes usar @import al inicio de la hoja de estilo para importar otra hoja de estilo de una URL, opcionalmente especificando el tipo de medio.
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.
Para más detalles de los tipos de medio, ve Media en la especificación de CSS.
Existen mas ejemplos de la propiedad display en una página posterior de este tutorial: XML data.
Imprimir
CSS tiene algún soporte especifico para impresión y para medios páginados en general.
Una regla @page puede determinar los márgenes de la página. Para impresión de doble cara, puedes definir los márgenes separadamente para @page:left y @page:right.
Para medios impresios, normalmente usas unidades apropiadas de lonfigutd como pulgadas (in) y puntos (pt = 1/72 inch), o centimetros (cm) y milimetros (mm). Es igualmente apropiado usar ems (em) para conincidir el tamaño de la fuente, y porcentajes (%).
Tu puedes controlar como los saltos de línea del contenido de un documento, al usar las propiedades page-break-before, page-break-after ypage-break-inside.
Esta regla determina los márgenes a una pulgada en todos los lados:
@page {margin: 1in;}
Esta regla asegura que cada elemento H1 empiece en una nueva página:
h1 {page-break-before: always;}
Para más detalles del soporte de CSS para medios paginados, ver Paged media en la especificación de CSS.
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.
Interfaces de Usuario
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.
No existe un tipo especial de medio para aparatos con interfaz de usuario.
Si existen cinco selectores especiales:
| Selector | Selects |
E |
Cualquier elemento E que tenga el puntero sobre él |
E |
Cualquier elemento E que tenga el foco del teclado |
E |
Cualquier elemento E que este envuelto en la acción actual del usuario |
E |
Cualquier elemento E que es un hipervinculo a una URL no visitada por el usuario |
E |
Cualquier elemento E que es un hipervinculo a una URL que el usuario ya visito |
Nota: La información que puede ser obtenida con el selector :visited esta restringida en Gecko 2.0. Ver Privacy and the :visited selector para más detalles.
La propiedad cursor especifica la forma del puntero: Algunas de las formas comunes son las siguientes.
Coloca el mouse sobre los items en este lista para ver la forma actual del puntero en tu navegador:
| Selector | Selects |
pointer |
Indicating a link |
wait |
Indicating that the program cannot accept input |
progress |
Indicating that the program is working, but can still accept input |
default |
The default (usually an arrow) |
Una propiedad outline crea un contorno que a menudo es usado para indicar el foco del teclado. Sus valores son similares a la propiedad border, excepto que no puedes especificar lados individuales.
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 disabled o el atributo readonly. Selectores puede especificar estos atributos como cualquier otro, usando corchetes: [disabled] o [readonly].
Estas reglas especifican estilos para un boton que cambia dinámicamente cuando el usuario interactúa con el:
.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;
}
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:
|
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.
Para más información sobre interfaces de usuario en CSS, ver User interface en la especificación de CSS.
Existe un ejemplo del lenguaje de marcado usado por Mozilla para interfaces de usuario, XUL, en la Parte II de este tutorial.
Acción: Imprimir un documento
- Abrir un nuevo documento HTML,
doc4.html. Copiar y pegar el contenido de aqui:<!DOCTYPE html> <html> <head> <title>Print sample</title> <link rel="stylesheet" href="style4.css"> </head> <body> <h1>Section A</h1> <p>This is the first section...</p> <h1>Section B</h1> <p>This is the second section...</p> <div id="print-head"> Heading for paged media </div> <div id="print-foot"> Page: </div> </body> </html> - Abrir una nueva hoja de estilo,
style4.css. Copiar y pegar el contenido de aqui:/*** 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 */ - Ve este documento en tu navegador; este usa el estilo por defecto de tu navegador.
- 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.
Heading for paged mediaSection AThis is the first section...Page: 1Heading for paged mediaSection BThis is the second section...Page: 2
| Mueve las relgas de estilo especificas para imprimir a un archivo CSS separado.
Lee la página de referencia Haz que las encabezamientos se vuelvan azules cuando el puntero del mouse este sobre ellos. |
¿Qué sigue?
Si has tenido dificultades entendiendo esta página, o si tienes algún comentario, por favor contribuye en la página de Discussion.
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: JavaScript