Cuando creamos un nuevo documento HTML en nuestro editor favorito, no nos fijamos que se agregan un par de líneas de código que por ignorancia desconocemos, pero tienen gran importancia a la hora de renderizar la página y validar su estructura. En este momento, nos referiremos al DOCTYPE y los DTD.

Un buen uso al CSS en un sitio web, es teniendo múltiples hojas de estilo con diferentes apariencias; así el usuario puede escoger el que más le plazca, según su ánimo, o como sea. A esto se le puede agregar en un JavaScript que cambie según la hora (día, noche), estación (verano, invierno), etc. Las posibilidades son muchas. Vamos al grano. Primero, se necesita llamar las 2 hojas de estilo: la principal (stylesheet) y la opcional (alternate stylesheet). <link rel="stylesheet" type="text/css" href="normal.css" title="normal"><br / <link rel="alternate stylesheet" type="text/css" href="oscuro.css" title="oscuro">

Al diseñar para la web, cada uno tiene sus mañas y sus costumbres. Actualmente, el mayor uso que se le da a la hoja de estilos, es para estilizar textos, dado el temor de diseñadores en meterse en este estraño mundo de códigos desconocidos, y que se sabe, que no es simple de implementarse. Un gotoAndPlay(); es el mismo desde Flash Player 5 a 8, Win o Mac; position: relative; puede no funcionar igual en IE, Firefox, Win, Mac… un lío. Un tema recurrente e importante de mencionar, se refiere sobre las medidas usadas para referirse a la tipografía desplegada en un sitio web. Algunos usan px, otros em. Incluso pt….. A continuación, una definición de cada uno, sus pros y contras:

#3 – 22 Noviembre 2005

Cuando hacemos un rollover, lo usual es tener 2 o más imagenes cortadas iguales, pero con diferentes estilos (otro color, forma, sombra, etc) y cuando construimos el código que la hace funcionar, se usa comunmente: #menu a {<br /      background: url("boton.gif") top left no-repeat;<br / }<br / #menu a:hover {<br /      background-image: url("boton_over.gif");<br / }<br / #menu a:active {<br /      background-image: url("boton_activo.gif");<br / } A continuación, muestro una manera simple de ahorrar la carga de la imagen (gif o jpg). En realidad no es magia lo que haremos, solamente un truco que en vez de cargar una nueva imagen al hacer el hover, se trabajará por sobre una misma imagen, la que contendrá todas las instancias necesarias. Entonces lo bueno es que esta imagen se cargue completa la primera vez, y al hacer el hover, ésta se desplazará lo necesario para que muestre donde se encuentre la parte correspondiente a esa istancia; lo mismo si tiene un active. Pero le agregaremos algo más.

Es muy difundido hoy en día el CSS dentro del diseño de sitios web, y existe una gran exigencia por parte del usuario para que se puedan ver bien sus sitios en las más diferentes plataformas y los ya innúmeros browsers. Un importante medio que no es muy utilizado, y que sin embargo es muy fácil de ser aplicado para un resultado óptimo, es el de crear una hoja de estilos exclusivamente para que la página, y los ítems que desees sean impresos de la mejor forma posible, permitiendo al usuario ahorrar tinta y mejorar la visualización del contenido. Para esto, es necesaria una hoja de estilos nueva y el llamado respectivo entre : <link rel="stylesheet" type="text/css" media="print" href="print.css" />

#2- 14 Noviembre 2005  

Usaremos un HTML lo más simple posible, para sí no tener conflictos de browsers (es bueno evitarlo desde el principio). Nótese que usé en vez de . Para browsers modernos esto es innecesario, pero se incluye precisamente para compatibilidad con browsers antiguos (nuevamente, para evitar conflictos). Además, se verá de todas formas en todos los browsers y no incomodará el CSS.

Aquí mostraré una manera de centrar un objeto (en este caso un imagen, aunque puede ser un div) en el centro del navegador utilizando CSS. Insertando una imagen : Inserte una imagen y agréguele un ID (en este caso, “centro”)

#1 – 3 Noviembre 2005