CSS CASCADING STYLE SHEETS http www w 3
- Slides: 9
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, 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 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 {color: #CC 9900; }
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 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 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 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/ • 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/