CSS: lenguaje de estilo para las páginas web.
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 21
Visitas el mes pasado: 43
Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:
Si este sitio te parece interesante puedes contribuir con una pequeña aportación.
Se llaman medios a las distintas tecnologías que hay para presentar un documento de html. El más común es la pantalla de ordenador, pero el documento también puede imprimirse, verse en el móvil, abrirse con un dispositivo braille, con un sintetizador de voz. etc.
El lenguaje CSS permite crear distintas hojas de estilo para un mismo documento, de forma que puede aplicarse cada una de ellas a un medio distinto, así de una misma página puede haber una versión para pantalla, otra para imprimir, otra para móviles, otra para lenguaje braille, etc.
Si queremos que el documento no se vea igual en un medio que en otro, debemos crear diferentes hojas de estilo para cada medio. Estas pueden estar enlazadas en el documento principal de dos formas:
link
que enlaza la hoja de
estilos. En este ejemplo se enlaza a una hoja de estilos que indica una versión para
imprimir:<link rel="stylesheet" type="text/css" href="imprimir.css" media="print" />
@ import
. Enlazamos también a una hoja de estilos externa de la
siguiente manera:@import url("estilo.css") print;
@media
, insertando el código en la misma página.La etiqueta link
es la forma clásica de enlazar archivos externos. Mediante el atributo
media
indicamos el tipo de medio al que va dirigido. La página se abrirá con
ese estilo sólo en los medios que le indiquemos. Podemos indicar más de uno, siempre que
los escribamos separados por comas:
La regla @import
es otra forma de enlazar un archivo externo. observese que
tiene que estar dentro del código CSS, con lo que se enlaza una hoja de estilos con otra
hoja de estilos.
Cualquier regla @import debe preceder a todas las reglas especificadas en una hoja de estilo.
por tanto estas reglas siempre debe estar en primer lugar de la hoja, solo puede ser precedida
por otra regla @import
.
Observese que tampoco tiene llaves. Escribimos @import
e inmediatamente
después la dirección del archivo que queremos aplicar, mediante la formula: url("ruta_archivo.css")
,
aunque también podemos escribir directamente la ruta entre comillas. Después escribiremos
el tipo de medio al que se aplica la hoja. Podemos escribir la regla @import
de cualquiera
de estas dos formas:
@import "ruta_fichero.css" print;
@import url("ruta_fichero.css") print;
Es importante escribir la regla en una sola línea y acabarla siempre con el punto y coma (;), para indicar claramente donde empieza y acaba cada regla.
para especificar más de un tipo de medio para una hoja, los pondremos seguidos y separados por comas:
@import url("ruta_fichero.css") print, braille, embossed ;
Si no especificamos ningún medio se entiende que la hoja sirve para todos los medios.
La regla @media
permite insertar el código CSS en la misma página que estamos.
su sintaxis es la siguiente:
@media tipo_de_medio { -Código CSS para este medio- }
Donde pone "tipo de medio se especifica el tipo de medio, si hay más de uno pueden ponerse separados por comas. Entre llaves pondremos todo el código CSS que aplicamos a ese tipo de medio. Ejemplo:
@media tv, projection { body: { background-color: lime; } h1 { font-size: 2em; color: purpre; text-align: center; } h2 { font-size: 1.5em; color: blue; text-align: center; } p { font-size: 1em; color: olive; text-align: justify; } }
Los tipos de medios indican los dispositivos para mostrar la página. En la hoja de estilos podemos escribir los siguientes:
all
: Para todos los dispositivos. es el valor por defecto.braille
: Para los dispositivos táctiles de braille.embossed
: Para las impresoras de paginas braille.handheld
: Para teléfonos móviles y dispositivos de mano
(pantalla pequeña y ancho de banda limitada).print
: Para impresoras y documentos vistos en pantalla en modo
"vista previa a impresión".projection
: Para proyectores y presentaciones proyectadas.screen
: Para las pantallas de ordenadores en color. (PC, Mac, ...)speech
: Para los sintetizadores de voz.tty
: Para medios que usan una rejilla de caracteres de espacio fijo (Ej:
teletipos, terminales, dispositivos portátiles con monitor de baja resolución, etc.). tv
: Para televisores y dispositivos similares. (resolución baja, con color y sonido).Lo normal al crear una página es definir un estilo general para todos los medios, y algunos más específicos para otros medios. Cualquier página que quiera tener un poco de calidad debe ofrecer una versión para imprimir al usuario, por lo que he elegido este medio para ver cómo puede diferenciarse el estilo de un medio a otro.
En las versiones para imprimir se suelen eliminar contenidos superfluos, se modifican o eliminan algunas imágenes y los colores de fondo y se modifican los contenidos de texto para facilitar su lectura. veamos cómo se hace esto.
ocultar contenidos superfluos
Hay partes de la página que no tiene sentido imprimirlas, tales como menús de navegación,
imágenes de fondo, pie de página, partes de la cabecera, etc. Ocultar estas partes que no
se van a imprimir es tan
fácil como aplicarles la propiedad display: none
. Ejemplo:
#cabecera, #menu, #lateral, #pie {display: none; }
corregir la estructura de la página
Al quitar algunos bloques, el cuerpo principal puede quedar desajustado respecto de la anchura de la página. Debemos pues ajustar el ancho del contenido a imprimir al ancho de la página. colocar o corregir los márgenes si es necesario, y reajustar el contenido de los elementos que se van a imprimir.
modificar el tipo y colores de letra
Debemos asegurarnos de que el tipo de letra es facilmente legible, si hace falta lo cambiamos, y es conveniente que el color del texto sea en negro, ya que aunque la mayoría de impresoras admiten los colores, con páginas con el texto en negro, permitimos al usuario ahorrar costes.
Imprimir los enlaces
En un medio impreso no tiene sentido poner enlaces, pero sí que podemos indicar la
dirección del enlace, sobre todo cuando es una página externa. para ello podemos
usar la propiedad content
vista en la página anterior de la siguiente
forma:
a:after {content: attr(href); }
En este ejemplo se imprime la ruta del enlace (el valor del atributo href
)
después de su referencia. Si queremos que se imprima antes usaremos el seudoelemento
:before
, pudiendo también incluir algún texto (tal como se ve en el uso
de la propiedad content
en el apartado anterior).
El inconveniente de usar el código anterior es que se imprimen también los enlaces
internos, lo cual no tiene sentido dar la referencia. para ello la solución consiste
en dar a los enlaces externos en el código html un atributo class
y hacer
referencia a ellos en el selector de la regla CSS. Ejemplo:
todos los enlaces externos deberán llevar el atributo:
<a class="externo" href="http: ..."> ...</a>
Y la regla CSS a aplicar será:
.externo:after {content: attr(href); }
Debemos comprobar cómo quedará nuestra página impresa, a cada paso que demos, para darle el aspecto deseado. No hace falta imprimirla cada vez que hagamos un cambio; basta con mirar en el navegador en "archivo/vista preliminar" para ver como queda nuestra página impresa.
Si seguimos sólo el manual de CSS continuaremos en e siguiente tema:
Si seguimos el manual de HTML y el de CSS al mismo tiempo, continuaremos en el siguiente tema de HTML:
Sugerencias:
aprendeweb@aprende-web.net. Envia un
Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog
Más sobre anyelguti en http://anyelguti.16mb.com