2. ¿QUÉ ES CSS?
CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o
presentación de los documentos electrónicos definidos con HTML y XHTML.
CSS es la mejor forma de separar los contenidos y su presentación, y es
imprescindible para crear páginas web complejas.
3. LENGUAJE CSS
Una vez creados los contenidos, se utiliza el lenguaje CSS para definir el
aspecto de cada elemento: color, tamaño y tipo de letra del texto, separación
horizontal y vertical entre elementos, posición de cada elemento dentro de la
página, etc.
4. EL MODELO DE CAJAS
El modelo de cajas es el comportamiento de CSS que hace que todos los
elementos de las páginas se representen mediante cajas rectangulares. Las
cajas de una página se crean automáticamente. Cada vez que se inserta una
etiqueta HTML, se crea una nueva caja rectangular que encierra los contenidos
de ese elemento.
5. ¿CÓMO FUNCIONA?
Las hojas de estilo están compuestas por una o más reglas.
Las regla tiene dos partes: un selector y la declaración.
A su vez la declaración está compuesta por una propiedad y el valor que se le
asigne:
h1 {color: red;}
DONDE:
h1 es el selector y {color: red;} es la declaración.
6. TIPOGRAFÍA
CSS define numerosas propiedades para modificar la apariencia del texto. A
pesar de que no dispone de tantas posibilidades como los lenguajes y
programas específicos para crear documentos impresos, CSS permite aplicar
estilos complejos y muy variados al texto de las páginas web.
A continuación se muestran varias reglas CSS que establecen el color del texto
de diferentes formas:
h1{color: #369;}
p{color: black;}
a, span{color: #B1251E;}
div{color: rgb(71,98,176);}
7. VENTAJAS
• Separación de forma y contenido: diseñador y programador pueden
trabajar independientemente.
• Tráfico en el servidor: Las páginas pueden reducir su tamaño entre un 40%
y un 60%, y los navegadores guardan la hoja de estilos en la caché, esto
reduce los costos de envío de información.
• Tiempos de carga: Por la gran reducción en el peso de las páginas, mejora
la experiencia del usuario, que valora de un sitio el menor tiempo en la
descarga.
8. • Precisión: La utilización de CSS permite un control mucho mayor sobre el
diseño.
• Mantenimiento: Reduce notablemente el tiempo de mantenimiento cuando
es necesario introducir un cambio porque se modifica un solo archivo.
• Posicionamiento: Las páginas diseñadas con CSS tienen un código más
limpio porque no llevan diseño, sólo contenido. Esto es semánticamente más
correcto y la página aparecerá mejor posicionada en los buscadores. Google
navega obviando el diseño.
9. DESVENTAJAS
• Navegadores como ie6 interpretan los estándares a su manera por lo que
hay que recurrir a CSS hacks.
• Tiempo, es más fácil por ejemplo diseñar con tablas y valerse de las
herramientas de estilo inline, sin embargo esto hace más pesado el sitio y
definitivamente unfriendly a los buscadores.