1. Introducción a las Hojas de estilo (CSS)
Descargar como PPT, PDF0 recomendaciones760 vistas
CSS, o hojas de estilo en cascada, es un lenguaje que define la presentación de documentos estructurados en HTML o XML, separando su estructura de su apariencia. Existen tres métodos para incluir CSS en un documento XHTML: mediante hojas de estilo externas, internas o estilos en línea. Cada método tiene ventajas y desventajas, siendo las hojas de estilo externas las más recomendadas por su capacidad de mantener una separación clara entre contenido y diseño.
1. Introducción a las Hojas de estilo (CSS)
- 1. 0. CSS: Introducción ¿Qué es CSS? Cascading Style Sheets (Hojas de estilo en cascada) CSS es un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML). La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación. 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.
- 2. 1. CSS: Funcionamiento básico Estilos definidos sin utilizar CSS Estilos definidos con CSS
- 3. 2. Cómo incluir CSS en un documento XHTML CSS proporciona tres caminos diferentes para aplicar las reglas de estilo a una página Web: •Una hoja de estilo externa •Una hoja de estilo interna •Un estilo en línea
- 4. 2. Cómo incluir CSS en un documento XHTML •Una hoja de estilo externa 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. Para ver esta pelt cula, debe disponer de QuickTimeª y de un descompresor TIFF (sin comprimir). Esta es la manera de programar más potente, porque separa completamente las reglas de formateo para la página HTML de la estructura básica de la página.
- 5. 2. Cómo incluir CSS en un documento XHTML •Una hoja de estilo externa En la página HTML se enlaza el archivo .CSS externo mediante la etiqueta <link> Cuando el navegador carga la página HTML anterior, antes de mostrar sus contenidos también descarga los archivos CSS externos enlazados (mediante la etiqueta <link>) y aplica los estilos a los contenidos de la página.
- 6. 2. Cómo incluir CSS en un documento XHTML Normalmente, la etiqueta <link> incluye cuatro atributos cuando se enlaza un archivo CSS: ▪ rel= indica el tipo de relación que tiene el recurso enlazado (en este caso, el archivo CSS) y la página HTML. Para los archivos CSS, siempre se utiliza el valor stylesheet ▪ type= indica el tipo de recurso enlazado. Sus valores están estandarizados y para los archivos CSS su valor siempre es text/css ▪ href= indica la URL del archivo CSS que contiene los estilos. La URL indicada puede ser relativa o absoluta y puede apuntar a un recurso interno o externo al sitio web. ▪ media= indica el medio en el que se van a aplicar los estilos del archivo CSS.
- 7. 2. Cómo incluir CSS en un documento XHTML Aunque generalmente se emplea la etiqueta <link> para enlazar los archivos CSS externos, también se puede utilizar la etiqueta <style>. En este caso, para incluir en la página HTML los estilos definidos en archivos CSS externos se utiliza una regla especial de tipo @import. La URL del archivo CSS externo se indica mediante una cadena de texto encerrada con comillas simples o dobles o mediante la palabra reservada url(). De esta forma, las siguientes reglas @import son equivalentes: @import '/css/estilos.css'; @import "/css/estilos.css"; @import url('/css/estilos.css'); @import url("/css/estilos.css");
- 8. 2. Cómo incluir CSS en un documento XHTML •Una hoja de estilo interna Es una hoja de estilo que está incrustada dentro de un documento HTML. (Dentro del elemento <head> ).
- 9. 2. Cómo incluir CSS en un documento XHTML •Una hoja de estilo interna Este método se emplea cuando se define un número pequeño de estilos o cuando se quieren incluir estilos específicos en una determinada página HTML que completen los estilos que se incluyen por defecto en todas las páginas del sitio Web. El principal inconveniente es que si se quiere hacer una modificación en los estilos definidos, es necesario modificar todas las páginas que incluyen el estilo que se va a modificar. Se emplea la etiqueta <style> de HTML y solamente se pueden incluir en la cabecera del documento
- 10. 2. Cómo incluir CSS en un documento XHTML •Un estilo en línea Es un método para insertar el lenguaje de estilo de página, directamente, dentro de una etiqueta HTML. Esta forma de incluir CSS directamente en los elementos HTML no es totalmente adecuada. El incrustar la descripción del formateo dentro del documento de la página Web, a nivel de código se convierte en una tarea larga y tediosa. Solamente se utiliza en determinadas situaciones en las que se debe incluir un estilo muy específico para un solo elemento concreto.