Qué es CSS y con qué se come?
2 recomendaciones4,353 vistas
CSS, o 'Cascading Style Sheets', es un mecanismo que permite añadir estilo a los documentos web, separando la estructura de un documento HTML de su presentación. Su uso mejora la semántica, optimiza la carga de páginas y facilita el mantenimiento, además de mejorar el posicionamiento en los motores de búsqueda. A pesar de sus ventajas, existen desventajas como la compatibilidad con ciertos navegadores antiguos que requieren hacks específicos.
Qué es CSS y con qué se come?
- 1. Qué es CSS? y con qué se come.
- 2. Qué es CSS? | algunas definiciones La w3c nos dice: “Cascading Style Sheets (CSS) es un mecanismo simple para añadir estilo a los documentos web.” Wikipedia.org complementa: “CSS es usado para definir la presentación de un documento estructurado escrito en HTML o XML (Xhtml por extensión)”
- 3. “La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación.”
- 4. Pero…Por qué ??? | Por qué separar estructura y presentación? semántica El término semántica se refiere a los aspectos del significado, sentido o interpretación del significado de un determinado elemento, símbolo, palabra, expresión o representación formal.
- 5. Y la semántica a qué nos lleva? a las búsquedas! La semántica aplicada a la Web hace que todo signifique lo que deba significar y tenga la relevancia que deba tener …. La idea es que todo tenga sentido.
- 6. Un Ejemplo por favor! En un documento común y corriente encontramos elementos como: •Titulo •Subtítulo •Párrafo
- 7. Seguimos con el Ejemplo: Ahora bien, nosotros (los humanos), al ver un documento y con cierto aprendizaje de fondo, podemos reconocer un titulo al ver un TITULO Pero los buscadores no! Y si los buscadores no pueden hacerlo… cómo van a arrojar información lo suficientemente acertada o relevante a tus consultas?
- 8. Seguimos con el Ejemplo: Es por eso que la W3c define estándares para la estructura de los documentos escritos en HTML y XML asi como lo hace para la presentación con CSS De tal modo que en código html: •<h1>Titulo</h1> •<h2>Subtítulo</h2> •<p>Párrafo</p>
- 9. Pero esto ya no es CSS…. (bueno pa’ allá vamos :) Una vez definidas ciertas reglas de estructura con la semántica como base, esta el problema del estilo…veámos otro ejemplo pero más gráfico:
- 10. Este es facebook. ya estructurado y semánticamente amigable a los buscadores pero sin estilo (con el CSS deshabilitado)… apesta verdad?
- 11. Un vez definida la estructura del Html (XHtml, etc), debemos definir su estilo…
- 12. …y es ahí DONDE entra el CSS. (Perfil de facebook con CSS activo)
- 13. Ventajas que tiene usar CSS: 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é, ésto 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. Precisión. La utilización de CSS permite un control mucho mayor sobre el diseño,.
- 14. Ventajas que tiene usar CSS: 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.
- 15. ¿Cómo funciona? | Lo más básico 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;} h1 es el selector {color: red;} es la declaración
- 16. ¿Cómo funciona? | Lo más básico Una hoja de estilos puede estar llena de cientos de reglas como la anterior, y se aplican a lo documentos HTML bajo los siguientes métodos: Una hoja de estilo externa, que es una hoja de estilo que está almacenada en un archivo diferente al archivo donde se almacena el código HTML de la página Web Una hoja de estilo interna, que es una hoja de estilo que está incrustada dentro de un documento HTML. Un estilo en línea, que es un método para insertar el lenguaje de estilo de página, directamente, dentro de una etiqueta HTML. Esta manera de proceder no es excesivamente adecuada. Fácil, verdad?
- 17. …bueno, no tanto (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.
- 18. Que puedo hacer si aprendo CSS? •Manejar el estilo a tu antojo de los más importantes CMS: Wordpress, Joomla, Drupal etc. •Hacer volar tus paginas web pues cargaran más rápido. •Al separar la presentación de su estructura tu página será más amigable a los motores de búsqueda como Google •Podrás mantener tu sito Web y hacerle cambio más fácilmente: de hecho puedes cambiarle ellook and feel completo al sitio con tan solo modificar el archivo css
- 19. Algunos tips si quieres basar la presentación de tu sitio web en CSS • Usa el 960.gs o 96 grid system para diagramar. • Ten en cuenta los distintos navegadores asi como los hacktricks para ie6 (no queremos olvidar a nadie) •Lean nettuts+ , Smashing Magazine y alistapart siempre hablan de CSS entre sus post • Cualquier ayuda que les pueda brindar: juanrules@gmail.com
- 21. Fuentes http://www.w3c.es/divulgacion/guiasbreves/HojasEstilo (Qué es CSS) http://www.branded07.com/2009/07/11/ie6-web-design-tricks/ (ie6 Tricks) http://es.wikipedia.org/wiki/Css (hojas de estilo en cascada)