CSS CASCADING STYLE SHEETS http www w 3

  • Slides: 9
Download presentation
CSS: CASCADING STYLE SHEETS http: //www. w 3 c. es/Divulgacion/Guias. Breves/Hojas. Estilo

CSS: CASCADING STYLE SHEETS http: //www. w 3 c. es/Divulgacion/Guias. Breves/Hojas. Estilo

Introducción • CSS nos permite: • Separar presentación de contenido • Mayor flexibilidad, escalabilidad,

Introducción • CSS nos permite: • Separar presentación de contenido • Mayor flexibilidad, escalabilidad, y posibilidades en la presentación de contenidos web • Dinamismo (junto a JScript y DOM) • Correctamente utilizado reduce el peso de las páginas

¿Qué es CSS? Hojas de Estilo en Cascada (Cascading Style Sheets), es un mecanismo

¿Qué es CSS? Hojas de Estilo en Cascada (Cascading Style Sheets), es un mecanismo simple que describe cómo se va a mostrar un documento en la pantalla, o cómo se va a imprimir, o incluso cómo va a ser pronunciada la información presente en ese documento a través de un dispositivo de lectura. ¿Cómo funciona? CSS funciona a base de reglas, es decir, declaraciones sobre el estilo de uno o más elementos. Las hojas de estilo están compuestas por una o más de esas reglas aplicadas a un documento HTML o XML. La 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.

Sintaxis Básica Declaración Selector { propiedad: valor; . . . } Ejemplo: H 1

Sintaxis Básica Declaración Selector { propiedad: valor; . . . } Ejemplo: H 1 {color: #CC 9900; }

Aplicar CSS • En la Cabecera (<HEAD>) <STYLE TYPE="text/css"> <!-P {text-align: right} --> </STYLE>

Aplicar CSS • En la Cabecera (<HEAD>) <STYLE TYPE="text/css"> <!-P {text-align: right} --> </STYLE> • Estilo como atributo <P STYLE="text-align: right">Estilo propio</P> • Hoja de estilo externa <LINK REL="stylesheet" TYPE="text/css" HREF="estilo. css">

Formas de dar estilo a un documento Utilizando una hoja de estilo externa que

Formas de dar estilo a un documento Utilizando una hoja de estilo externa que estará vinculada a un documento a través del elemento <link>, el cual debe ir situado en la sección <head>. <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 1//EN"> <html> <head> <title>Título</title> <link rel="stylesheet" type="text/css" href="http: //www. w 3. org/css/office. Floats. css" /> </head> <body>. . </body> </html>

Utilizando el elemento <style>, en el interior del documento al que se le quiere

Utilizando el elemento <style>, en el interior del documento al que se le quiere dar estilo, y que generalmente se situaría en la sección <head>. De esta forma los estilos serán reconocidos antes de que la página se cargue por completo. <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 1//EN"> <html> <head> <title>hoja de estilo interna</title> <style type="text/css"> body { padding-left: 11 em; font-family: Georgia, "Times New Roman", serif; color: red; background-color: #d 8 da 3 d; } h 1 { font-family: Helvetica, Geneva, Arial, sans-serif; } </style> </head> <body> <h 1>Aquí se aplicará el estilo de letra para el Título</h 1> </body> </html>

Asignación II Corte: A ser realizado en grupos de 3 personas. • Realizar una

Asignación II Corte: A ser realizado en grupos de 3 personas. • Realizar una pagina con 2 párrafos de 3 líneas donde se especifiquen todas las propiedades de ccs aplicadas al texto • Realizar una pagina con 2 cajas de texto y donde se especifiquen todas las propiedades de ccs aplicadas a las cajas de texto • Realizar una pagina que contenga un formulario con una tabla y se especifiquen todas las propiedades de ccs aplicadas a una tabla.

Enlaces de Interés • http: //www. csszengarden. com/ • http: //www. maestrosdelweb. com/editorial/listcss/ •

Enlaces de Interés • http: //www. csszengarden. com/ • http: //www. maestrosdelweb. com/editorial/listcss/ • http: //librosweb. es/css/capitulo_9. html • http: //www. w 3. org/Style/Examples/011/firstcss. es. html#ex ternal • http: //www. w 3. org/Style/CSS/ • http: //www. cssya. com. ar/