Guía Breve de CSS ¿Qué es?, ¿Para qué sirve?, ¿Cómo funciona?

Revisor (del W3C) para hojas de estilos CSS

CSS Play – extraordinaria colección de CSS para experimentar(inglés)

Dynamic Drive CSS Library – recopilación de recursos CSS (inglés)

css.nu – documentación sobre CSS.

Layout Gala – hojas de estilos CSS listas para descargar y modificar a tu gusto.

a list apart – información sobre CSS (inglés)

Listamatic – información y tutoriales y ejemplos sobre CSS (inglés)

css zen garden – the Beauty in CSS Design (inglés)

css/edge – información sobre css (inglés)

htmlhelp – Hojas de estilo en cascada (castellano/inglés)

CSS Drive – Galería y ejemplos css por categorías (inglés)

CSS Vault – The Web´s CSS Site (inglés)

CSS Manía – Trabajos con CSS

CSS Reboot – Galería de páginas diseñadas con CSS (inglés)

71 menús con pestañas en CSS – Menús con CSS basados en la navegación con pestañas. (inglés)

Brainjar – Tutoriales y experimentos con css (inglés)

Intensivstation CSS – documentación, plantillas css y enlaces CSS (inglés y alemán)

CSS, Accesibility and Standards Links – enlaces sobre con CSS. (inglés)

w3schools.com/css – Tutoriales de CSS. (inglés)

Generador de cajas con borde redondeado en CSS

Cajas con borde redondeado en CSS

Fuente: Cuervo Blanco

Artículo original de: Brett Merkey – Traducido por Manuel Jiménez para WebTaller.com

http://home.tampabay.rr.com/bmerkey/cheatsheet.htm

Es bastante evidente que trabajar con CSS nos ahorra mucho tiempo, en muchos aspectos de la maquetación, pero también es verdad que muchas veces se convierte en un quebradero de cabeza, cuando por razones que no comprendemos, hay un div que no vemos por ningun lado, aunque lo podamos ver perfectamente en el codigo fuente, o el dichoso div que se empeña en mostrarse en una linea a parte, porque no cabe donde nosotros lo queremos colocar.

Pero ahora, existen herramientas que nos facilitan el trabajo, ya no tendremos que hacer pruebas y pruebas, hasta encontrar que era lo que nos faltaba o lo que sobraba.

Podremos comprobar en el momento, los límites de cada elemento, sus márgenes, bordes, estilos heredados, etc. y todo ello desde un entorno gráfico, facilmente utilizable, solo necesitaremos poner el raton sobre el elemento que queremos visualizar.

Y todo esto gracias a Firebug, un plugin para Firefox , que nos sera de gran ayuda para entender, porque ese div no se muestra como nosotros queremos.

También nos permitirá modificar propiedades de nuestros estilos CSS y ver los cambios inmediatamente, sin necesidad de tener que guardar y recargar la pantalla.

Visualizar Internet Explorer y Firefox simultaneamente

Cuando estamos montando un sitio web, es recomendable visualizarlo desde diferentes navegadores. Lo normal es utilizar al menos 2 navegadores, que son los más utilizados por los usuarios, Internet Explorer y Firefox, es evidente, que a mayor número de navegadores que usemos, nos aseguraremos más, de que nuestros sitio se visualice igual para todo el mundo.

CSSVista es una aplicación independiente, que se divide en 2 sectores, uno donde podremos visualizar el código de la hoja de estilos al igual que editarlo, y el otro se divide en dos partes donde podremos visualizar el sitio desde Firefox e IE simultaneamente.

Una de sus ventajas principales es la de poder editar y visualizar sin necesidad de guardar y recargar, tan solo tendremos que editar la hoja de estilo y ver los cambios, que se producen en los diferentes navegadores.

La aplicación es gratuita, y se encuentra en versión 0.1. El único inconveniente es que para que funcione tienes que bajarte e instalar el Microsoft .NET Framework Version 2.0, que pesa unos 23 Mb.

• CSSVista
• Microsoft .NET Framework Version 2.0

Para añadir más utilidades, enviad comentarios

El diseño tradicional de páginas web se basaba en el uso de tablas para definir las estructuras de las páginas y posicionar cada uno de los bloques que forman las páginas: cabecera, menús, contenidos, columnas laterales, pies de página, etc.

Sin embargo, la estructura basada en tablas es compleja (complica en exceso el código HTML), poco flexible (no permite cambios sencillos en la estructura) y es poco semántica (no es sencillo dotar de significado a la estructura).

Por estos motivos, la estructura basada en tablas ha dado paso a la estructura basada exclusivamente en CSS. Aunque crear la estructura de las páginas sólo con CSS presenta en ocasiones retos importantes, en general es más sencilla y flexible.

En las próximas secciones se muestra cómo crear algunas de las estructuras o layouts más habituales de los diseños web utilizando exclusivamente CSS.

Diseño a 2 columnas con cabecera y pie de página

El objetivo de este diseño es definir una estructura de página con cabecera y pie, un menú lateral de navegación y una zona de contenidos. La anchura de la página se fija en 700px, la anchura del menú es de 150px y la anchura de los contenidos es de 550px:

Figura 12.7. Esquema del diseño a 2 columnas con cabecera y pie de página

La solución CSS se basa en el uso de la propiedad float para los elementos posicionados como el menú y los contenidos y el uso de la propiedad clear en elementos como la cabecera y el pie de página para evitar los solapamientos ocasionados por los elementos posicionados con float.

Figura 12.8. Propiedades CSS necesarias en el diseño a dos columnas con cabecera y pie de página

El código HTML y CSS mínimos para definir la estructura de la página sin aplicar ningún estilo adicional son los siguientes:

Codigo:

#contenedor {

  width: 700px;

}



#cabecera {



}#menu {

  float: left;

  width: 150px;

}



#contenido {

  float: left;

  width: 550px;

}

 #pie {

  clear: both;

}

 <body>

<div id="contenedor">

    <div id="cabecera">

  </div>

<div id="menu">

</div>

<div id="contenido">

</div>

<div id="pie">

  </div>

 </div>

</body>

En los estilos CSS anteriores se ha optado por desplazar tanto el menú como los contenidos hacia la izquierda de la página (float: left). Sin embargo, en este caso también se podría desplazar el menú hacia la izquierda (float:left) y los contenidos hacia la derecha (float: right).

El diseño anterior es de anchura fija, lo que significa que no se adapta a la anchura de la ventana del navegador. Para conseguir una página de anchura variable y que se adapte de forma dinámica a la ventana del navegador, se deben aplicar las siguientes reglas CSS:

Codigo:

#contenedor {



}



#cabecera {



}



#menu {

 float: left;

 width: 15%;

}



#contenido {

  float: left;

  width: 85%;

 }



#pie {

  clear: both;

}

Si se indican la anchuras de los bloques que forman la página en porcentajes, el diseño final es dinámico. Para crear diseños de anchura fija, basta con establecer las anchuras de los bloques en píxel.

Diseño a 3 columnas con cabecera y pie de página

Además del diseño a dos columnas, el diseño más utilizado es el de tres columnas con cabecera y pie de página. En este caso, los contenidos se dividen en dos zonas diferenciadas: zona principal de contenidos y zona lateral de contenidos auxiliares:

Figura 12.9. Esquema del diseño a tres columnas con cabecera y pie de página

La solución CSS emplea la misma estrategia del diseño a dos columnas y se basa en utilizar las propiedades float y clear:

Figura 12.10. Propiedades CSS necesarias en el diseño a 3 columnas con cabecera y pie de página

El código HTML y CSS mínimos para definir la estructura de la página sin aplicar ningún estilo adicional son los siguientes:

Codigo:

#contenedor {



}



#cabecera {}



#menu {

 float: left;

 width: 15%;

}



#contenido {

  float: left;

  width: 85%;

}

#contenido #principal {

 float: left;

 width: 80%;

}

#contenido #secundario {

  float: left;

  width: 20%;

}



#pie {

  clear: both;

}

<body>

<div id="contenedor">

 <div id="cabecera">

  </div>

     <div id="menu">

   </div>

     <div id="contenido">

     <div id="principal">

     </div>

       <div id="secundario">

     </div>

   </div>

     <div id="pie">

   </div>

 </div>

</body>

El código anterior crea una página con anchura variable que se adapta a la ventana del navegador. Para definir una página con anchura fija, solamente es necesario sustituir las anchuras en porcentajes por anchuras en píxel.

Al igual que sucedía en el diseño a dos columnas, se puede optar por posicionar todos los elementos mediante float: left o se puede utilizar float: left para el menú y la zona principal de contenidos y float: right para el contenedor de los contenidos y la zona secundaria de contenidos.