CSS (Cascading Style Sheets) es un lenguaje para describir la presentación de documentos HTML y XHTML de forma independiente a su contenido. El documento introduce CSS, explicando que permite definir estilos para fuentes, fondos, texto, bordes y listas de forma independiente al contenido. Además, explica los diferentes mecanismos para incluir hojas de estilo, como la etiqueta <style>, enlaces externos o importaciones, y el concepto de alcance y prioridad de las declaraciones CSS.
Este documento explica los conceptos básicos de CSS (Hojas de Estilo en Cascada), incluyendo la definición de XHTML, tipos de documentos, sintaxis básica de CSS, colores, unidades, cascada, herencia, cajas, clases e IDs, divs, alineación de texto y otras propiedades. También incluye ejemplos y recursos para aprender más sobre CSS.
Las Hojas de Estilo en Cascada (CSS) permiten separar la presentación de los documentos HTML de su contenido. CSS permite controlar el formato y diseño de los documentos de forma organizada y eficiente. Las hojas de estilo pueden aplicarse a varias páginas web y centralizar los cambios de diseño.
El documento explica los conceptos básicos de las hojas de estilo en cascada (CSS), incluyendo su historia, las diferentes formas de aplicar CSS a las páginas web mediante hojas externas, internas o en línea, y el uso de selectores de ID y clase para estilizar elementos específicos sin necesidad de repetir código.
Cuenta la leyenda que al construir un documento HTML se tenía que definir cada una de las propiedades en las diferentes etiquetas para mejorar su apariencia. Así las cosas, se pensó en una estrategia que permitiera independizar la parte visual del contenido propio del documento HTML.
CSS son las siglas de Cascade Style Sheets, que quiere decir en español “Hojas de Estilos en Cascada”. Se trata de una especificación sobre los estilos físicos aplicables a un documento HTML y trata de dar la separación definitiva de la lógica (estructura) y la presentación del documento HTML.
Este documento presenta una introducción a las hojas de estilo CSS. Explica qué son las hojas de estilo CSS y cómo separan la estructura de un documento HTML de su presentación. Luego describe las tres formas de aplicar estilos CSS a un documento: hoja de estilo externa, interna o en línea. Finalmente, introduce conceptos como selectores, propiedades de fuentes, colores, posicionamiento y otras características que permiten dar formato a los contenidos HTML.
El documento describe lo que es CSS y sus principales características. CSS permite separar el contenido de un documento HTML de su presentación y estilo visual, facilitando el mantenimiento. Se explican los diferentes métodos para asociar una hoja de estilos CSS a un documento HTML y se define la terminología básica de CSS como reglas, selectores, declaraciones, propiedades y valores.
Que es CSS? Presentacion Basica para CSSjosuew2013
CSS es un lenguaje de diseño y presentación usado para definir y estilar la apariencia y formato de un documento HTML. CSS separa el contenido de una página de su presentación visual, permitiendo modificar el diseño sin alterar la estructura del documento. Surgió para facilitar el diseño atractivo de páginas web y atraer más clientes a sitios empresariales.
Este documento explica los conceptos básicos de CSS (Hojas de Estilo en Cascada), incluyendo la definición de XHTML, tipos de documentos, sintaxis básica de CSS, colores, unidades, cascada, herencia, cajas, clases e IDs, divs, alineación de texto y otras propiedades. También incluye ejemplos y recursos para aprender más sobre CSS.
Las Hojas de Estilo en Cascada (CSS) permiten separar la presentación de los documentos HTML de su contenido. CSS permite controlar el formato y diseño de los documentos de forma organizada y eficiente. Las hojas de estilo pueden aplicarse a varias páginas web y centralizar los cambios de diseño.
El documento explica los conceptos básicos de las hojas de estilo en cascada (CSS), incluyendo su historia, las diferentes formas de aplicar CSS a las páginas web mediante hojas externas, internas o en línea, y el uso de selectores de ID y clase para estilizar elementos específicos sin necesidad de repetir código.
Cuenta la leyenda que al construir un documento HTML se tenía que definir cada una de las propiedades en las diferentes etiquetas para mejorar su apariencia. Así las cosas, se pensó en una estrategia que permitiera independizar la parte visual del contenido propio del documento HTML.
CSS son las siglas de Cascade Style Sheets, que quiere decir en español “Hojas de Estilos en Cascada”. Se trata de una especificación sobre los estilos físicos aplicables a un documento HTML y trata de dar la separación definitiva de la lógica (estructura) y la presentación del documento HTML.
Este documento presenta una introducción a las hojas de estilo CSS. Explica qué son las hojas de estilo CSS y cómo separan la estructura de un documento HTML de su presentación. Luego describe las tres formas de aplicar estilos CSS a un documento: hoja de estilo externa, interna o en línea. Finalmente, introduce conceptos como selectores, propiedades de fuentes, colores, posicionamiento y otras características que permiten dar formato a los contenidos HTML.
El documento describe lo que es CSS y sus principales características. CSS permite separar el contenido de un documento HTML de su presentación y estilo visual, facilitando el mantenimiento. Se explican los diferentes métodos para asociar una hoja de estilos CSS a un documento HTML y se define la terminología básica de CSS como reglas, selectores, declaraciones, propiedades y valores.
Que es CSS? Presentacion Basica para CSSjosuew2013
CSS es un lenguaje de diseño y presentación usado para definir y estilar la apariencia y formato de un documento HTML. CSS separa el contenido de una página de su presentación visual, permitiendo modificar el diseño sin alterar la estructura del documento. Surgió para facilitar el diseño atractivo de páginas web y atraer más clientes a sitios empresariales.
Este documento describe los lenguajes web del lado del cliente como HTML, CSS y JavaScript. Explica que HTML se usa para estructurar el contenido, CSS para definir la apariencia y JavaScript para agregar comportamiento interactivo. También describe los diferentes tipos de selectores en CSS y cómo se pueden incluir hojas de estilo externas en archivos CSS vinculados desde HTML.
Este documento describe las hojas de estilo en cascada (CSS) y cómo se pueden usar para separar la estructura del contenido de una página web de su presentación. CSS permite definir estilos que se pueden aplicar a elementos HTML de manera flexible y reutilizable. Se explican conceptos como selectores, propiedades, valores y cómo vincular hojas de estilo externas o internas a documentos HTML. CSS ofrece ventajas como centralizar y reutilizar estilos fácilmente para lograr diseños web consistentes.
Este documento presenta una introducción a HTML y JavaScript. Explica los objetivos y temas del curso, incluyendo conceptos básicos sobre Internet, la WWW, HTML, CSS y JavaScript. También describe elementos clave de HTML como etiquetas, atributos, estructura de documentos, tablas, hipervínculos, imágenes y formularios.
Este documento describe cómo crear el diseño de una página web utilizando hojas de estilos en cascada (CSS). Explica las ventajas de usar CSS, como separar el contenido del diseño y ahorrar ancho de banda. Luego detalla cómo crear la estructura HTML de la página y definir las capas y estilos CSS para la cabecera, barra de navegación, contenido, barra lateral y pie de página.
CSS es un lenguaje de hojas de estilos creado para controlar el aspecto y presentación de documentos HTML y XHTML. CSS separa el contenido de un documento de su presentación, lo que permite crear páginas web complejas. Primero se usa HTML para marcar el contenido y luego CSS para definir el aspecto y estilo de cada elemento.
Este documento introduce los conceptos básicos de CSS3. Explica que CSS permite controlar la apariencia de una página web y complementa al HTML. Luego describe algunas propiedades CSS como color, fuente y alineación de texto, y cómo estas pueden aplicarse a elementos HTML individuales o grupos de elementos. Finalmente, introduce conceptos como la herencia de estilos entre elementos anidados.
El documento introduce las hojas de estilo en cascada (CSS) y sus ventajas sobre el uso de HTML para aplicar formato. CSS permite definir estilos para partes específicas de una página web, una página completa o un sitio web entero de una manera más flexible y precisa que HTML. El documento luego explica varios usos básicos de CSS como definir estilos para etiquetas, divisiones y páginas completas.
Este documento presenta las nuevas características de CSS3, incluyendo bordes redondeados, fondos con imágenes, opacidad, sombras de texto, recorte de texto, fuentes web, transiciones, diseño multicolumna y más. Explica los prefijos de los navegadores necesarios para probar estas características y proporciona ejemplos interactivos para ilustrar su uso.
El documento presenta una introducción a HTML5 y CSS3. Explica que HTML5 tiene como objetivo mejorar y simplificar HTML mediante la adición de nuevas etiquetas y características como audio, vídeo, almacenamiento offline y APIs, mientras que CSS3 aporta nuevos selectores, unidades, propiedades y funciones para mejorar el diseño y maquetación web. También introduce los media queries de CSS3 para adaptar el diseño a diferentes dispositivos.
Este documento presenta una introducción a HTML y JavaScript. Cubre temas como Internet, la World Wide Web, la historia y elementos de HTML, CSS, JavaScript y el futuro de estas tecnologías. También describe los objetivos y temas del curso, incluyendo conceptos fundamentales sobre estos lenguajes de programación web.
El documento describe diferentes tipos de estilos en CSS, incluyendo estilos de etiqueta (mediante clases y en línea), estilos de encabezado que afectan a todo un documento, y estilos importados desde una hoja de estilos externa. Provee varios ejemplos de cómo aplicar estilos a elementos como inputs, textareas, selects y links. También explica cómo crear y enlazar una hoja de estilos externa para aplicar estilos de forma consistente a través de múltiples páginas.
CSS es un lenguaje de diseño para definir la presentación de documentos HTML y XML. Existen 3 formas de incluir hojas de estilo CSS en una página web: externa, interna y en línea. CSS ofrece ventajas como el control centralizado del diseño y la accesibilidad al permitir estilos personalizados.
Este documento describe HTML y CSS. HTML es el lenguaje de marcado usado para crear páginas web, el cual contiene etiquetas que describen el contenido. CSS es usado para definir los estilos y aspecto visual de los sitios web, separando la estructura del contenido de su presentación. Juntos, HTML y CSS permiten crear y diseñar páginas y sitios web.
Buenas prácticas en XHTML, CSS y AccesibilidadFRONTDAYS
Presentación usada en el curso "Buenas prácticas en XHTML, CSS y Accesibilidad" impartido por Borja Delgado en Madrid el jueves 10 de Septiembre de 2009.
El documento describe la historia y conceptos básicos de HTML. Explica que HTML fue desarrollado originalmente por Tim Berners-Lee en 1991 y se ha convertido en el estándar para publicar documentos en la World Wide Web. Luego resume las etiquetas y atributos básicos de HTML para formato de texto, elementos gráficos, formato y presentación.
El documento describe los orígenes y características básicas del lenguaje HTML y CSS. Explica que HTML surgió en la década de 1980 como un sistema de hipertexto propuesto por Tim Berners-Lee para compartir datos, y que actualmente es el lenguaje estándar para crear páginas web. También define conceptos clave como etiquetas, atributos, elementos en línea y en bloque, y la estructura básica de un documento HTML. Por otro lado, introduce CSS como un lenguaje para aplicar estilos y diseños a las págin
Este documento presenta una guía de estudio sobre hojas de estilo en cascada (CSS). Explica conceptos clave como reglas, selectores, declaraciones, propiedades y valores. También describe diferentes métodos para enlazar hojas de estilo CSS a documentos HTML/XHTML, como incluir CSS en el mismo documento, definirlo en un archivo externo o usar el atributo style. Resalta las ventajas de usar hojas de estilo externas para facilitar el mantenimiento y reutilización de estilos.
Este documento presenta un taller sobre maquetación web que incluye los beneficios de seguir los estándares web y tener una metodología de maquetación. El taller consiste en tres ejercicios: 1) etiquetar el contenido semánticamente, 2) organizar el contenido con <div> y <span>, y 3) crear la hoja de estilos CSS. El documento también proporciona recursos adicionales sobre HTML5, CSS3 y frameworks.
Este documento describe las hojas de estilo en cascada (CSS), una tecnología que permite controlar la apariencia de una página web. CSS permite especificar estilos como tamaños de fuente, colores y ubicación de texto e imágenes. Las reglas de estilo pueden definirse directamente en el código HTML o en un archivo CSS externo. Bootstrap es un framework de CSS que incluye componentes predefinidos como botones, tablas e íconos para facilitar el desarrollo de sitios web.
Se presenta breve explicación de que son las tecnologías cliente así mismo como las tecnologías servidor. Ademas de saber como y cuando se usan cualquiera de estas.
El documento compara diferentes tecnologías para el desarrollo web, incluyendo ASP.NET, JSP, PHP, Perl, JavaScript, VBScript, applets de Java, HTML, Flash y CSS. ASP.NET y JSP son marcos de servidor que usan C# y Java respectivamente, mientras que PHP y Perl son lenguajes de scripting del lado del servidor. JavaScript, VBScript y applets de Java permiten interactividad en el lado del cliente. HTML define la estructura de los documentos, Flash agrega animación e interactividad, y CSS controla la presentación.
Este documento describe los lenguajes web del lado del cliente como HTML, CSS y JavaScript. Explica que HTML se usa para estructurar el contenido, CSS para definir la apariencia y JavaScript para agregar comportamiento interactivo. También describe los diferentes tipos de selectores en CSS y cómo se pueden incluir hojas de estilo externas en archivos CSS vinculados desde HTML.
Este documento describe las hojas de estilo en cascada (CSS) y cómo se pueden usar para separar la estructura del contenido de una página web de su presentación. CSS permite definir estilos que se pueden aplicar a elementos HTML de manera flexible y reutilizable. Se explican conceptos como selectores, propiedades, valores y cómo vincular hojas de estilo externas o internas a documentos HTML. CSS ofrece ventajas como centralizar y reutilizar estilos fácilmente para lograr diseños web consistentes.
Este documento presenta una introducción a HTML y JavaScript. Explica los objetivos y temas del curso, incluyendo conceptos básicos sobre Internet, la WWW, HTML, CSS y JavaScript. También describe elementos clave de HTML como etiquetas, atributos, estructura de documentos, tablas, hipervínculos, imágenes y formularios.
Este documento describe cómo crear el diseño de una página web utilizando hojas de estilos en cascada (CSS). Explica las ventajas de usar CSS, como separar el contenido del diseño y ahorrar ancho de banda. Luego detalla cómo crear la estructura HTML de la página y definir las capas y estilos CSS para la cabecera, barra de navegación, contenido, barra lateral y pie de página.
CSS es un lenguaje de hojas de estilos creado para controlar el aspecto y presentación de documentos HTML y XHTML. CSS separa el contenido de un documento de su presentación, lo que permite crear páginas web complejas. Primero se usa HTML para marcar el contenido y luego CSS para definir el aspecto y estilo de cada elemento.
Este documento introduce los conceptos básicos de CSS3. Explica que CSS permite controlar la apariencia de una página web y complementa al HTML. Luego describe algunas propiedades CSS como color, fuente y alineación de texto, y cómo estas pueden aplicarse a elementos HTML individuales o grupos de elementos. Finalmente, introduce conceptos como la herencia de estilos entre elementos anidados.
El documento introduce las hojas de estilo en cascada (CSS) y sus ventajas sobre el uso de HTML para aplicar formato. CSS permite definir estilos para partes específicas de una página web, una página completa o un sitio web entero de una manera más flexible y precisa que HTML. El documento luego explica varios usos básicos de CSS como definir estilos para etiquetas, divisiones y páginas completas.
Este documento presenta las nuevas características de CSS3, incluyendo bordes redondeados, fondos con imágenes, opacidad, sombras de texto, recorte de texto, fuentes web, transiciones, diseño multicolumna y más. Explica los prefijos de los navegadores necesarios para probar estas características y proporciona ejemplos interactivos para ilustrar su uso.
El documento presenta una introducción a HTML5 y CSS3. Explica que HTML5 tiene como objetivo mejorar y simplificar HTML mediante la adición de nuevas etiquetas y características como audio, vídeo, almacenamiento offline y APIs, mientras que CSS3 aporta nuevos selectores, unidades, propiedades y funciones para mejorar el diseño y maquetación web. También introduce los media queries de CSS3 para adaptar el diseño a diferentes dispositivos.
Este documento presenta una introducción a HTML y JavaScript. Cubre temas como Internet, la World Wide Web, la historia y elementos de HTML, CSS, JavaScript y el futuro de estas tecnologías. También describe los objetivos y temas del curso, incluyendo conceptos fundamentales sobre estos lenguajes de programación web.
El documento describe diferentes tipos de estilos en CSS, incluyendo estilos de etiqueta (mediante clases y en línea), estilos de encabezado que afectan a todo un documento, y estilos importados desde una hoja de estilos externa. Provee varios ejemplos de cómo aplicar estilos a elementos como inputs, textareas, selects y links. También explica cómo crear y enlazar una hoja de estilos externa para aplicar estilos de forma consistente a través de múltiples páginas.
CSS es un lenguaje de diseño para definir la presentación de documentos HTML y XML. Existen 3 formas de incluir hojas de estilo CSS en una página web: externa, interna y en línea. CSS ofrece ventajas como el control centralizado del diseño y la accesibilidad al permitir estilos personalizados.
Este documento describe HTML y CSS. HTML es el lenguaje de marcado usado para crear páginas web, el cual contiene etiquetas que describen el contenido. CSS es usado para definir los estilos y aspecto visual de los sitios web, separando la estructura del contenido de su presentación. Juntos, HTML y CSS permiten crear y diseñar páginas y sitios web.
Buenas prácticas en XHTML, CSS y AccesibilidadFRONTDAYS
Presentación usada en el curso "Buenas prácticas en XHTML, CSS y Accesibilidad" impartido por Borja Delgado en Madrid el jueves 10 de Septiembre de 2009.
El documento describe la historia y conceptos básicos de HTML. Explica que HTML fue desarrollado originalmente por Tim Berners-Lee en 1991 y se ha convertido en el estándar para publicar documentos en la World Wide Web. Luego resume las etiquetas y atributos básicos de HTML para formato de texto, elementos gráficos, formato y presentación.
El documento describe los orígenes y características básicas del lenguaje HTML y CSS. Explica que HTML surgió en la década de 1980 como un sistema de hipertexto propuesto por Tim Berners-Lee para compartir datos, y que actualmente es el lenguaje estándar para crear páginas web. También define conceptos clave como etiquetas, atributos, elementos en línea y en bloque, y la estructura básica de un documento HTML. Por otro lado, introduce CSS como un lenguaje para aplicar estilos y diseños a las págin
Este documento presenta una guía de estudio sobre hojas de estilo en cascada (CSS). Explica conceptos clave como reglas, selectores, declaraciones, propiedades y valores. También describe diferentes métodos para enlazar hojas de estilo CSS a documentos HTML/XHTML, como incluir CSS en el mismo documento, definirlo en un archivo externo o usar el atributo style. Resalta las ventajas de usar hojas de estilo externas para facilitar el mantenimiento y reutilización de estilos.
Este documento presenta un taller sobre maquetación web que incluye los beneficios de seguir los estándares web y tener una metodología de maquetación. El taller consiste en tres ejercicios: 1) etiquetar el contenido semánticamente, 2) organizar el contenido con <div> y <span>, y 3) crear la hoja de estilos CSS. El documento también proporciona recursos adicionales sobre HTML5, CSS3 y frameworks.
Este documento describe las hojas de estilo en cascada (CSS), una tecnología que permite controlar la apariencia de una página web. CSS permite especificar estilos como tamaños de fuente, colores y ubicación de texto e imágenes. Las reglas de estilo pueden definirse directamente en el código HTML o en un archivo CSS externo. Bootstrap es un framework de CSS que incluye componentes predefinidos como botones, tablas e íconos para facilitar el desarrollo de sitios web.
Se presenta breve explicación de que son las tecnologías cliente así mismo como las tecnologías servidor. Ademas de saber como y cuando se usan cualquiera de estas.
El documento compara diferentes tecnologías para el desarrollo web, incluyendo ASP.NET, JSP, PHP, Perl, JavaScript, VBScript, applets de Java, HTML, Flash y CSS. ASP.NET y JSP son marcos de servidor que usan C# y Java respectivamente, mientras que PHP y Perl son lenguajes de scripting del lado del servidor. JavaScript, VBScript y applets de Java permiten interactividad en el lado del cliente. HTML define la estructura de los documentos, Flash agrega animación e interactividad, y CSS controla la presentación.
Lenguajes del lado del servidor y lenguajes del lado del usuarioJessica
PHP es un lenguaje de programación creado para desarrollar páginas web dinámicas. Sus principales ventajas son que es multiplataforma, permite conectarse a bases de datos, y cuenta con una amplia documentación y librerías. Python es otro lenguaje de programación de código abierto que se caracteriza por su sintaxis limpia y legible, y es multiplataforma y multiparadigma.
El documento describe la arquitectura de dos niveles de las aplicaciones web, con el nivel del cliente y el nivel del servidor. Explica los lenguajes de programación del lado del cliente como HTML, JavaScript y Flash, y los lenguajes del lado del servidor como PHP y ASP. También discute los navegadores y servidores web más populares como Apache.
Este documento describe JavaScript como el lenguaje de programación estándar para el procesamiento del lado del cliente en las páginas web, el cual fue desarrollado originalmente por Netscape y Sun Microsystems y es compatible con los principales navegadores. Explica que JavaScript permite crear páginas dinámicas, validar formularios, manipular elementos en la página, intercambiar información entre ventanas y comunicarse con plugins, entre otras aplicaciones. También proporciona un enlace a un manual en línea de JavaScript con ejemplos de código.
Este documento describe varios lenguajes de programación del lado del cliente para el desarrollo web. Explica que HTML se usa para estructurar el contenido, JavaScript y applets de Java permiten interactividad, y CSS controla el diseño y la presentación. También cubre Visual Basic Script y DHTML.
Este documento describe la programación en el lado del cliente en la Web. Explica que las aplicaciones en el lado del cliente pueden mejorar la velocidad y rendimiento al manejar objetos y eventos localmente sin necesidad de comunicación con el servidor. Detalla las tecnologías como lenguajes de script como JavaScript y VBScript que permiten codificar aplicaciones pequeñas en el navegador para manipular objetos en la página, controlar eventos del usuario y validar formularios.
El documento trata sobre programación del lado del servidor. Explica que existen dos tipos de aplicaciones web: aplicaciones en el lado del cliente, donde el código se ejecuta en el navegador del usuario, y aplicaciones en el lado del servidor, donde el código se ejecuta en el servidor y envía el resultado al cliente. También describe lenguajes comunes para programación del lado del servidor como PHP, ASP y Perl, e introduce conceptos básicos de PHP como sintaxis, variables, constantes y comentarios.
Este documento describe CSS (Hoja de Estilo en Cascada), incluyendo su propósito de separar el contenido del diseño visual, y tres formas de incluir CSS en un documento HTML: en un archivo externo, internamente o directamente en elementos HTML. Luego, explica la estructura básica de una regla CSS y un ejercicio para crear la estructura básica de un sitio web con HTML y CSS externos.
Este documento proporciona una introducción a CSS (Hoja de Estilos en Cascada), incluyendo su definición y especificación, cómo funciona básicamente y cómo se puede incluir en XHTML, la sintaxis y uso de comentarios, selectores, agrupación de reglas, herencia, colisiones de estilos, unidades de medida y colores.
El documento resume los conceptos clave del lenguaje de presentación CSS. Explica que CSS separa el contenido de una página web de su presentación visual, permitiendo definir estilos que se aplican a elementos HTML. Describe la sintaxis básica de CSS y cómo pueden definirse estilos internamente en una página o en archivos externos. También explica los diferentes tipos de medios para los que se pueden aplicar estilos, como pantallas, impresoras y dispositivos móviles.
Este documento presenta una introducción a CSS (Cascading Style Sheets), incluyendo su historia, ventajas, formas básicas de aplicar estilos, propiedades como cascada, herencia, valores y selectores. También cubre temas avanzados como CSS 3, incluyendo nuevas características para backgrounds, bordes, fuentes, diseños de múltiples columnas y posicionamiento en cuadrícula.
DEBER HOJA DE ESTILO (CSS) blog blogger blogspotLISSYCE
Este documento introduce los conceptos básicos de CSS (Cascading Style Sheets) o hojas de estilo en cascada. Explica que CSS permite aplicar formato a los documentos HTML de manera más precisa que el propio HTML. También describe algunas de las características y ventajas de CSS como definir distancias entre líneas, aplicar sangrías a párrafos, posicionar elementos con precisión y definir visibilidad y estilos de texto. Además, resume los diferentes usos de CSS como definir estilos para una etiqueta, parte o toda una pá
El documento introduce las hojas de estilos en cascada (CSS), describiendo sus características y ventajas, como permitir definir el formato de una página de manera separada del contenido. Explica que CSS permite definir estilos para una etiqueta, sección o página entera y aplicarlos de manera uniforme. También cubre cómo vincular una hoja de estilos externa para aplicar formatos a todo un sitio web de forma cohesionada.
El documento presenta una introducción a CSS (Cascading Style Sheets), incluyendo su definición como lenguaje de hojas de estilos para controlar la presentación de documentos HTML y XHTML. Explica las ventajas de CSS como separar contenido de presentación y mejorar la accesibilidad. También cubre cómo trabajar con CSS externo mediante enlaces y etiquetas link/style, y los diferentes medios como screen e print.
El documento describe los conceptos básicos de los estilos CSS, incluyendo elementos de bloque e inline, el modelo de caja, y tres métodos para asignar estilos CSS a elementos HTML: en línea, embebidos y archivos externos. Se proveen ejemplos para ilustrar cómo aplicar estilos usando cada uno de estos métodos.
Este documento introduce las hojas de estilo en cascada (CSS) como una forma de aplicar formato y estilo a documentos HTML de manera separada del contenido. CSS permite controlar aspectos como los colores, fuentes, márgenes y bordes de elementos en la página. Se explican conceptos básicos de CSS como sintaxis, selectores y atributos comunes. También se proporcionan ejemplos de cómo aplicar estilos a diferentes partes de una página como párrafos, divisiones y la página completa.
Este documento presenta una introducción a HTML, CSS y JavaScript. Incluye definiciones de cada tecnología, explicaciones de su sintaxis y características clave. También muestra ejemplos de código para ilustrar conceptos como etiquetas HTML, selectores y propiedades CSS, y variables, funciones y eventos en JavaScript. El documento proporciona una visión general concisa pero completa de estas tres tecnologías web fundamentales.
Este documento presenta los objetivos y temas de un curso sobre HTML y JavaScript. Los objetivos son proveer conceptos fundamentales sobre estos lenguajes para proyectos informáticos. Los temas incluyen Internet, HTML, CSS, elementos HTML, tablas, hipervínculos, imágenes, formularios, JavaScript y más.
1) CSS permite controlar la presentación de documentos desde una hoja de estilo única y aplicar diferentes presentaciones a diferentes medios como pantalla e impresión. 2) CSS define la apariencia de elementos HTML mediante hojas de estilo que contienen reglas de estilo con selectores, declaraciones y propiedades. 3) Existen varias formas de aplicar hojas de estilo CSS como de forma directa dentro del documento HTML, indirecta dentro del documento, o externa mediante enlace desde el documento.
Este manual proporciona una introducción rápida a CSS con dos secciones. La primera sección explica conceptos básicos de CSS como herencia, cascada y reglas, y presenta diferentes tipos de selectores y propiedades. La segunda sección incluye enlaces a ejemplos y otros manuales sobre CSS. El manual está destinado a apoyar a los estudiantes en el aprendizaje y aplicación de CSS para el desarrollo de páginas web.
Este manual proporciona una introducción rápida a CSS para estudiantes. Se divide en dos secciones principales: 1) desarrollo de hojas de estilo CSS, incluyendo selectores, propiedades y el modelo de cajas, y 2) enlaces a ejemplos y otros manuales de CSS. El objetivo es apoyar a los estudiantes en el aprendizaje y aplicación de CSS para el desarrollo de páginas web.
Este manual proporciona una introducción rápida a CSS con dos secciones. La primera sección explica conceptos básicos de CSS como herencia, cascada y reglas, y presenta diferentes tipos de selectores y propiedades. La segunda sección incluye enlaces a ejemplos y otros manuales sobre CSS. El manual está destinado a apoyar a los estudiantes en el aprendizaje y aplicación de CSS para el desarrollo de páginas web.
Este documento es un manual de referencia de CSS1 publicado en 2003 por Jorge Sánchez. Explica las ventajas y desventajas de CSS, sus versiones, cómo insertar código CSS en documentos HTML y archivos separados, y categorías de estilos CSS1 como formatos de fuente, texto, márgenes, bordes, listas y posicionamiento.
Similar a Programacion cliente hojas_deestilo_ (20)
1. Tecnología Web
g
Tema 2: Programación en el lado cliente
Hojas de estilo (CSS)
Autor: Sara Lana, Carlos González
DIATEL-EUITTM/UPM
CSS: Introducción
CSS (Cascading Style Shteets) es un lenguaje creado para
describir el formato de presentación de documentos HTML
Y XHTML.
Proporciona una total independencia entre contenidos y
presentación.
presentación
Su definición y uso son posteriores a 1995
Admitido como recomendación por el W3C.
Versiones: CSS 1 (1995), CSS 2.1 (1998).
(1995) 2 1 (1998)
No todos los motores de los navegadores soportan la
totalidad de la especificación.
Tecnología Web Tema 2: Hojas de estilo Transparencia 2
2. CSS: Introducción
Permiten superar los trucos normalmente empleados para
diseñar páginas Web, tales como:
p g ,
Uso de tablas
Imágenes transparentes
g p
Conversión de texto en imágenes.
Utilización de elemento y atributos de p
presentación: font,
,
background, color, face, align, width,…)
Las CSS permiten especificar estilos para:
Tipos de letra.
Fondos.
Texto.
Bordes.
Listas.
Tecnología Web Tema 2: Hojas de estilo Transparencia 3
Mecanismos de inclusión de estilos CSS: Introducción
Existen diferentes mecanismos para incluir CSS:
Inclusión directa en los elementos del documento
utilizando el atributo style.
Inclusión en el mismo documento utilización la
etiqueta style.
q y
Enlace a un documento externo (.css) utilizando la
etiqueta link
link.
Enlace a un documento externo (.css) la regla de
estilo @import.
Tecnología Web Tema 2: Hojas de estilo Transparencia 4
3. Alcance de los estilos CSS: Introducción
El alcance de los estilos definidos mediante CSS depende
del mecanismo de inclusión utilizado:
Inclusión mediante atributo style: el alcance es el
propio elemento al que pertenece el atributo.
Inclusión mediante etiquetas style/link o reglas de
estilo @import: el alcance depende de la propia
definición de cada regla:
Bloque de estilos globalmente aplicables a un
mismo tipo de elemento.
Clase de estilo aplicable a distintos elementos
mediante la utilización del atributo class.
Tecnología Web Tema 2: Hojas de estilo Transparencia 5
Inclusión de estilos: atributo style CSS: Atributo style
La CSS se incluye como atributo asociado al elemento que
caracteriza.
caracteriza
El alcance del estilo es el propio elemento.
Desde el punto de vista de mantenimiento y peso de la
página no proporciona ninguna ventaja sobre la utilización
de atributos de presentación.
Su uso debe estar limitado a situaciones puntuales.
<etiqueta style="estilo: valor">…
q y
</etiqueta>
Tecnología Web Tema 2: Hojas de estilo Transparencia 6
4. Página sin estilos propios definidos CSS: Ejemplo atributo style
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
p g g g
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Tema 2: Página sin estilos propios</title>
</head>
<body>
<h1 align="center">Nuevos avances en física</h1>
<h2>Transformando el oro en plomo.</h2>
<p> En un alarde de originalidad un equipo de la Universidad de Fresnedillo ha
patentado una té i para l t
t t d técnica la transmutación d oro en plomo. P
t ió de l Para más d t ll
á detalles
consultar la <a href="tesis.htm">Tesis de transmutación.</a></p>
<h2>Máquina de la inactividad perpetua.</h2>
perpetua </h2>
<p >En contra del tradicional intento de construir la máquina del movimiento
perpetuo, el profesor Perpetuo de la Serna ha desarrollado una máquina
totalmente inactiva Para recibir una muestra gratuita por sólo 99 9 Euros
inactiva. 99,9
rellene nuestro <a href="perpetuo.html">formulario de pedido</a>.</p>
</body>
</html>
Tecnología Web Tema 2: Hojas de estilo Transparencia 7
Página sin estilos propios definidos CSS: Ejemplo atributo style
Tecnología Web Tema 2: Hojas de estilo Transparencia 8
5. Atributo style en una etiqueta CSS: Ejemplo atributo style
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict //EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
p g g g
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
p q y yp
<title>Tema 2: Utilización de atributo ‘style’</title>
</head>
<body>
<h1 style="text-align: center;" >Nuevos avances en física</h1>
<h2>Transformando el oro en plomo.</h2>
<p style="color: #9050FF; font-family: Arial; font-size: 1.2em;">
En un alarde de originalidad un equipo de la Universidad de Fresnedillo ha
patentado una técnica para la transmutación de oro en plomo. Para más detalles
consultar la <a href="tesis.htm">Tesis de transmutación.</a></p>
---------------------------
</body>
</html>
Tecnología Web Tema 2: Hojas de estilo Transparencia 9
Atributo style en una etiqueta CSS: Ejemplos de Etiqueta style
Tecnología Web Tema 2: Hojas de estilo Transparencia 10
6. Definición de Reglas (ruleset) CSS: Definición de Reglas
ruleset::
selector [’,’ S* selector ]* S*
’{’ declaration? [’;’ S* declaration? ]* ’}’
selector::
simple_selector [’,’ S* selector ]*
declaration::
d l ti
property_name ’:’ value
#titulo, .titulo, span.destacado, div * .destacado {
font-weight : bold ;
font-size : 1.2em ;
color : #2255AA ;
}
Tecnología Web Tema 2: Hojas de estilo Transparencia 11
Inclusión de estilos: etiqueta style CSS: Etiqueta style
Como elemento hijo de head:
<style type=“text/css”>
y yp /
/* definiciones de reglas (ruleset) */
</style>
<style type=“text/css”>
/* <![CDATA[ */
#titulo, .titulo, span.destacado, div * .destacado {
font-weight : bold ;
font-size : 1.2em ;
color : #2255AA ;
}
/* ]] */
</style>
Tecnología Web Tema 2: Hojas de estilo Transparencia 12
7. Página con Bloque de estilos. CSS: Ejemplos de Etiqueta style
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict //EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
p g g g
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Tema 2: Utilización de bloque style</title>
<style type="text/css">
/
/*<![CDATA[*/
[ [ /
h1{ text-align: center; }
p { color: #9050FF; font-family: Arial; font-size: 1.2em; }
/ ]]> /
/*]]>*/
</style>
</head>
<body>
---------------------------
</body>
</html>
Tecnología Web Tema 2: Hojas de estilo Transparencia 13
Página sin estilos propios definidos CSS: Ejemplo atributo style
Tecnología Web Tema 2: Hojas de estilo Transparencia 14
8. Utilización de hojas de estilo externas CSS: Enlaces e importaciones
No es necesario que los estilos estén en el mismo
documento que los utiliza.
utiliza
Se pueden utilizar definiciones de estilos en archivos
externos dos formas:
Mediante enlaces a ficheros de estilos externos
externos.
Mediante importaciones de ficheros de estilo.
La principal diferencia entre uno y otro es que el segundo
método permite combinar las importaciones de estilos con
declaraciones globales en la página.
Tecnología Web Tema 2: Hojas de estilo Transparencia 15
Utilización de hojas de estilo externas CSS: Enlaces e importaciones
Como enlace: Tipo relación con el recurso
<link rel
rel= "stylesheet"
stylesheet
Tipo de recurso enlazado
type= "text/css"
URL del archivo css
g
href= "estiloglobal.css"
media= "print" Medio o dispositivo al que va
destinado: screen, print, speech, …
>
Se pueden enlazar varias hojas de estilo.
Como importación:
<style type= "text/css">
@import url("estiloglobal.css");
@i l(" il l b l ")
@import url("estiloimpresion.css") print;
</style>
Se pueden importar varias hojas de estilo
Tecnología Web Tema 2: Hojas de estilo Transparencia 16
9. Clases de hoja de estilo CSS: Enlaces e importaciones
Se usa el atributo rel para especificar el rol de cada hoja:
Persistente: el agente de usuario debe aplicarla siempre.
<link type="text/css" rel="stylesheet" />
Preferente: seleccionada como hoja por defecto por el diseñador.
<link t
li k type="text/css" rel="stylesheet“
" / " l " l h “
title="<nombre_hoja>" />
Alternativa: proporcionada como complementaria. El usuario la
podrá seleccionar a través de las herramientas del UA.
<link type="text/css" rel="alternate stylesheet"
title="<nombre_hoja>" />
Consultar:
p p y
http://html.conclase.net/w3c/html401-es/present/styles.html#h-14.3.1
Tecnología Web Tema 2: Hojas de estilo Transparencia 17
Clases de hoja de estilo CSS: Enlaces e importaciones
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict //EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" href="global0.css" type="text/css" />
rel stylesheet href global0.css type text/css
<link rel="alternate stylesheet" href="global1.css"
type="text/css" title="Estilo
type "text/css" title "Estilo 1 (global1)" />
<link rel="alternate stylesheet" href="global2.css"
type="text/css" title="Estilo 2 (global2)" />
<title> Tema 2: Hojas de Estilos (Persistente, preferente y alternativa) </title>
</head>
<body>
---------------------------
</body>
</html>
Tecnología Web Tema 2: Hojas de estilo Transparencia 18
10. Clases de hoja de estilo CSS: Enlaces e importaciones
Tecnología Web Tema 2: Hojas de estilo Transparencia 19
Clases de hoja de estilo CSS: Enlaces e importaciones
global0
body{
font-family: Arial, "Helvetica", sans-serif;
font-size: .8em;
width: 800px;
color: #134d86;
}
h1{
text-align: center;
g ;
}
p{
margin: 0.1em;
}
Tecnología Web Tema 2: Hojas de estilo Transparencia 20
11. Clases de hoja de estilo CSS: Enlaces e importaciones
global1
h1{ p{
background: #134d86; border: dotted 1px #134d86;
color: #FFFFFF; padding: 0.2em;
} margin: 0;
h2{ background: #eeeeee;
;
text-decoration: underline; font-size: 1.2em;
o t s e e ;
} }
Tecnología Web Tema 2: Hojas de estilo Transparencia 21
Clases de hoja de estilo CSS: Enlaces e importaciones
global2
a:link, a:hover, a:visited{ a:hover{
border-bottom: d
b d b dotted 1px #eeeeee;
d color: #eeeeee;
font-family: Tahoma; background: #134d86;
color: #134d86; }
background: #cccccc; body{
p
padding: 0.2em;
g ; p ;
width: 450px;
text-decoration: underline; }
}
Tecnología Web Tema 2: Hojas de estilo Transparencia 22
12. Anidamiento de hoja de estilo CSS: prioridad de las declaraciones
Clasificación de hojas de estilo atendiendo a quién las
define:
Hojas definidas por el Agente de Usuario (UA): es
la primera que se aplica, define el estilo inicial por
defecto para todos los elementos.
p
Hojas definidas por el Usuario: posibilitan la
adaptación de las hojas por defecto a las necesidades
del usuario. La forma de definición dependen del UA
utilizado.
Hojas definidas por el diseñador: mediante alguno
j p g
de los mecanismos estudiados.
Tecnología Web Tema 2: Hojas de estilo Transparencia 23
Anidamiento de hoja de estilo CSS: prioridad de las declaraciones
Tecnología Web Tema 2: Hojas de estilo Transparencia 24
13. Anidamiento de hoja de estilo CSS: prioridad de las declaraciones
Tecnología Web Tema 2: Hojas de estilo Transparencia 25
Anidamiento de hoja de estilo CSS: prioridad de las declaraciones
Importancia de las reglas atendiendo al creador:
CSS CSS CSS
CSS CSS
Agente Diseñador Usuario
Usuario Diseñador
Usuario !important !important
Importancia de las reglas atendiendo a su especificidad:
A mayor especificidad del selector, mayor importancia
selector
de la regla asociada.
A igual especificidad del selector, mayor importancia la
última regla definida.
g
Tecnología Web Tema 2: Hojas de estilo Transparencia 26
14. Anidamiento de hoja de estilo CSS: Jerarquía de procesamiento
modelo Orden de prioridades si hay varias definiciones que
entran en conflicto
Etiqueta link Tiene prioridad el último fichero enlazado
Regla @import Tiene prioridad el último fichero importado
Etiqueta style Tiene prioridad sobre los ficheros importados o enlazados
Atributo style Substituye a cualquier estilo anterior
Esta estructura jerárquica es la que da el nombre
de ‘en cascada’ a las hojas de estilo.
Tecnología Web Tema 2: Hojas de estilo Transparencia 27
CSS: Jerarquía de
Ejemplo de anidamiento de hoja de estilo procesamiento
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict //EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
p g g g
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" href="global0.css" type="text/css" />
<style type="text/css">
type text/css >
/*<![CDATA[*/
p { color: rgb(80,125,140);
font-family: Arial;
y ;
font-size: 1.2em; }
p a { color: #CC0000; }
]]
/*]]>*/
</style>
<title>Tema 2: Jerarquía de reglas</title>
</head>
Tecnología Web Tema 2: Hojas de estilo Transparencia 28
15. CSS: Jerarquía de
Ejemplo de anidamiento de hoja de estilo procesamiento
<body>
<h1>Nuevos avances en física</h1>
<h2>Transformando el oro en plomo.</h2>
<p> -------------- </p>
<h2>Máquina de la inactividad perpetua.</h2>
<p style="background: #EEE; font-size: 1.2em; border: dashed 1px #9050FF;
padding: 2px; "> -------- </p>
</body>
/b d
</html>
Tecnología Web Tema 2: Hojas de estilo Transparencia 29
Selectores CSS: Selectores
Los selectores permiten definir diferentes estilos
globalmente aplicables a un mismo tipo de elemento
(bloque de estilo) o aplicable a distintos elementos
mediante la utilización del atributo class (clase de
estilo).
estilo)
Selectores básicos:
Selector universal (*)
Selector de etiqueta (h1)
Selector de clase (.contenido)
Selector descendente (di span, a .destacado)
S l t d d t (div d t d )
Selector de id (#menuIzq)
Tecnología Web Tema 2: Hojas de estilo Transparencia 30
16. Selectores CSS: Selectores
Selectores avanzados:
Selector de hijo (div destacado > span)
(div.destacado
Selector de atributo (acronym[title])
Selector de adyacencia (label.acceso +
select[type input])
select[type=input])
Pseudo-selectores:
Selector de pseudo-elemento (p:first-letter)
Selector de pseudo-clase (a:hover)
p ( )
Consultar:
p g
http://www.w3c.es/Divulgacion/GuiasReferencia/CSS21/
Tecnología Web Tema 2: Hojas de estilo Transparencia 31
Selectores Universal y de etiqueta CSS: Selectores.
Selector Universal (*): referencia a todos los elementos
de la página
página.
Selector de Etiqueta (e): referencia los elementos cuyo
valor de etiqueta coincide con el del selector.
*{
border: 0;
text-align: left ;
}
h1,h2,h3{
h1 h2 h3{
font-weight: bold ;
font-decoration: underline ;
}
Tecnología Web Tema 2: Hojas de estilo Transparencia 32
17. Ejemplo Selectores CSS: Selectores.
Selector de clase(.<nombre_clase>): referencia a
cualquier elemento de la página cuyo atributo class
contenga el nombre del selector.
.lOscura{ color: #00C;}
.lGrande{ font-size : 0.9em ; }
.lPequenia{ font-size : 0.5em ;}
<span class="lOscura">letra oscura</span>
<span class="lAzul lGrande">letra oscura
class= lAzul lGrande >letra
grande</span>
<span class="lAzul lPequenia">letra oscura
pequeña</span>
Tecnología Web Tema 2: Hojas de estilo Transparencia 33
Pseudo-Selectores CSS: Selectores.
Los pseudo-elementos y las pseudo-clases permiten
aplicar propiedades a información que no forma parte del
árbol del documento.
Pseudo-clases
:first-child Referencia al primer hijo de un elemento.
:link Aplicable a enlaces que todavía no han sido visitados.
:visited Aplicable a enlaces que han sido visitados.
:hover, :active, :focus Aplicable ante ciertas interacciones de los usuarios.
Pseudo-elementos
:first-line Referencia la primera línea de un párrafo.
:first-letter Referencia la primera letra de un texto
Tecnología Web Tema 2: Hojas de estilo Transparencia 34
18. Propiedades de texto CSS: propiedades
Propiedades aplicables a elementos de texto
text-transform
text transform uppercase, lowercase,
uppercase lowercase capitalize
text-align left, right, center, justify
text-ident XX unidades, %
letter-spacing XX unidades, %
line-height normal, XX unidades, %
text-decoration underline, overline, line-through, blink
En las CSS se admiten dos tipos de medida: absolutas (in, cm,
mm, pt pc,) relati as (p em, ex).
mm pt, pc ) y relativas (px, em e )
p absoluto{ letter spacing: 25px;}
p.absoluto{ letter-spacing:
p.relativo{letter-spacing: 1.2em;}
Tecnología Web Tema 2: Hojas de estilo Transparencia 35
Tipos de letra, colores y fondos CSS: propiedades
Propiedades aplicables a los tipos de letra
font family
font-family verdana, arial, helvetica, sans-serif, etc
sans serif,
font-style normal, italic, oblique
font weight
font-weight lighter, normal,
lighter normal bold
font-size XX unidades, %
Propiedades aplicables a los colores y fondos
color (aqua, blue, white, red, green, black, ...), valor RGB
background-color transparent, nombreColor,
transparent nombreColor valor RGB
background-image url( “fichero” )
rgb(255,0,0) rgb(0,0,255) rgb(0,255,0)
#FF0000 #0000FF #00FF00
b( )
rgb(255,125,125) b( )
rgb(78,117,163) b( )
rgb(125,146,99)
#FF7D7D #4E75A3 #7D9163
Tecnología Web Tema 2: Hojas de estilo Transparencia 36
19. Márgenes y rellenos CSS: propiedades
Propiedades aplicables a los márgenes y relleno
margin-top XX unidades, %
margin-bottom XX unidades, %
margin-left XX unidades, %
margin-top XX unidades, %
padding-top XX unidades, %
padding-bottom XX unidades, %
padding-left XX unidades, %
padd g g t
padding-right XX unidades, %
u dades,
El relleno (padding) determina la distancia entre el borde y el contenido.
contenido
Tecnología Web Tema 2: Hojas de estilo Transparencia 37
Bordes CSS: propiedades
Propiedades aplicables a los bordes
border-top-width thin, medium, thick, XX unidades
border-bottom-width thin, medium, thick,
thin medium thick XX unidades
border-left-width thin, medium, thick, XX unidades
border-right-width thin, medium, thick, XX unidades
border-width g
Engloba las cuatro anteriores
none, dottet, dashed, solid, double, groove, ridge, inset,
border-style
outset
border-color nombreColor, valor RGB
Tecnología Web Tema 2: Hojas de estilo Transparencia 38
20. Visibilidad CSS: propiedades
Propiedades de visibilidad
visibility hidden, visible, collapse, inherit
display inline, block, none, list-item, run-in, inline-block, inherit,…
clip
p rect( x1, y1, x2, y2 , auto, inherit
( ,y , ,y ,
overflow auto, scroll, hidden,, visible, inherit
width XX unidades
height XX unidades
vertical-align
e tical align baseline, sub, super, t
b li b top, t t t
text-top, middle
iddl
visibility define si el elemento se ve o no al cargar la página.
i ibilit e página
display define si el elemento ocupa o no lugar en el flujo HTML.
clip define el área de recorte del elemento. Solo se verá la parte definida por rect
elemento
overflow indica si el tratamiento a aplicar ante desbordamientos del contenido de
un elemento.
Tecnología Web Tema 2: Hojas de estilo Transparencia 39
Ejemplo CSS
body {
.titulo {
font-family: Arial, "Helvetica", sans-serif;
text-align: left;
font-size: .8em;
8em;
font-weight: bold;
width: 650px;
font-size: 1.2em;
color: #134d86;
margin-top: 1.5em;
margin: 20px; }
width: 100%;
id h 00%
border: solid 1px #134d86;
*{
background: rgb(250,240,220);
margin: 0;
}
padding: 0; }
h1.titulo {
a:link, a:hover, a:visited {
, ,
text-align:
text align: center;
font-family: Tahoma;
font-size: 1.5em;
color: #134d86;
margin-bottom: 1.5em; }
background: #cccccc;
text-decoration: underline; }
p.titulo + p {
padding: 2px; }
a:hover {
l
color: #eeeeee;
p.titulo + p:first-letter {
background: #134d86; }
font-size: 180%; }
Tecnología Web Tema 2: Hojas de estilo Transparencia 40
21. Ejemplo CSS
p.fondoOscuro {
border: solid 1px rgb(230 230 255);
rgb(230,230,255);
border-left: 0;
border-right: 0;
background: #134d86; }
p.fondoOscuro a:link, a:visited {
color:#134d86;
background: rgb(250,240,220); }
p.fondoOscuro a:hover {
color: rgb(250,240,220);
background: #134066;
border: dotted 1px rgb(250,240,220); }
p g ( , , );
.lClara{
color: rgb(250,240,220); }
Tecnología Web Tema 2: Hojas de estilo Transparencia 41
Ejemplo CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict //EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" href=“selectores.css" type="text/css" />
y yp / /
<title>Tema 2: Selectores</title>
</head>
y
<body>
<h1 class="titulo">Nuevos avances en física</h1>
<p class="titulo">Transformando el oro en plomo.</p>
p p p
<p class="fondoOscuro lClara"> ---------- Para más detalles consultar la
<a href="tesis.htm">Tesis de transmutación.</a>
</p>
<p class="titulo">Máquina de la inactividad perpetua.</p>
<p>--------- Para recibir una muestra gratuita por sólo 99,9 Euros rellene nuestro
<a h f "
href="perpetuo.html">formulario de pedido.</a>
h l" f l i d did /
</p>
</body>
</html>
</ht l>
Tecnología Web Tema 2: Hojas de estilo Transparencia 42
22. Ejemplo CSS
Tecnología Web Tema 2: Hojas de estilo Transparencia 43
Tendencias CSS: Maquetación de Sitios Web
Orígenes: Uso intensivo de elemento table
Maquetación de sitios web mediante tablas haciendo
uso de border=0, utilización del elemento div para
implementación de capas.
Tendencia Actual: independencia entre diseño y estilo.
Utilización del elemento div como fundamento para el
diseño/maquetación web.
di ñ / t ió b
Utilización del elemento table para la presentación de
datos tabulados.
Tecnología Web Tema 2: Hojas de estilo Transparencia 44
23. Utilización de Div CSS: Maquetación de Sitios Web
Utilización de atributo id para diferenciar los principales
elementos de maquetación (cabecera menú contenidos
(cabecera, menú, contenidos,
pie).
Existencia de un contenedor principal en el que se ubican
todos los elementos.
elementos
Utilización de las propiedades de posicionamiento
(position, clear y float) y tamaño (width y height).
Tecnología Web Tema 2: Hojas de estilo Transparencia 45
Ejemplo de utilización de Div CSS: Maquetación de Sitios Web
Tecnología Web Tema 2: Hojas de estilo Transparencia 46
24. Ejemplo de utilización de Div CSS: Maquetación de Sitios Web
/* estilos basicos */ #menuIzq{
div{ float: left;
border: dotted 1px #134d86; width: 15%;
margin: 4px; min-height: 250px;
background: rgb(220,230,255); }
text-align: center; #contenido{
} float: right;
min-height: 250px;
g p ;
/* bl
bloques */ width: 81%;
#contenedor{
width: 650px; }
background: #FFB; #pie{
} clear: both;
}
#cabecera{
height: 90px;
}
Tecnología Web Tema 2: Hojas de estilo Transparencia 47
Ejemplo de utilización de Div CSS: Maquetación de Sitios Web
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict //EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" href=“div.css" type="text/css" />
y yp / /
<title>Tema 2: Diseño mediante divs</title>
</head>
<body>
<div id="contenedor">
<div id="cabecera">Cabecera</div>
<div id="menuIzq">Menu</div>
<div id="contenido">Contenido</div>
<div id="pie">Pie</div>
</div>
</body>
</html>
Tecnología Web Tema 2: Hojas de estilo Transparencia 48
25. Posicionamiento CSS: Maquetación de Sitios Web
El objetivo es tener mayor control sobre la colocación de
elementos contenedores de una página (div y span)
span).
Propiedades implicadas en el posicionamiento:
position: Aplicable a todas las etiquetas. Aunque lo
habitual es usarla con DIV ó SPAN.
Valores posibles: static, absolute, relative
left indica la distancia por la izquierda.
izquierda
top indica la distancia por la arriba.
width indica anchura.
Tecnología Web Tema 2: Hojas de estilo Transparencia 49
Posicionamiento CSS: Maquetación de Sitios Web
static
Se sigue el flujo normal de HTML sin fijarse en las
coordenadas.
absolute
Las coordenadas definen un posición absoluta
respecto al comienzo de la página o del elemento que
á
lo contiene.
relative
Las coordenadas definen un posición relativa respecto
al elemento HTML anterior.
Tecnología Web Tema 2: Hojas de estilo Transparencia 50
26. Posicionamiento CSS: Maquetación de Sitios Web
Cuando varios elementos se superponen es necesario
controlar cuales están encima de los otros. Para ello se
otros
usa la propiedad z-index.
El elemento que tenga el valor de z-index más alto se
visualizará encima de los demás.
<div style=“position:absolute; top:20px; left:20px;
width:250px; height:100px; z-index:0”>
<img src=“debajo.gif”>
</div>
<div style=“position:absolute; top:40px; left:50px;
width:100px; height:300px; z-index:1”>
z index:1 >
<img src=“encima.gif”>
</div>
Tecnología Web Tema 2: Hojas de estilo Transparencia 51