1 / 9

CSS: Cascading Style Sheets

CSS: Cascading Style Sheets. http://www.w3c.es/Divulgacion/GuiasBreves/HojasEstilo. 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)

helga
Download Presentation

CSS: Cascading Style Sheets

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CSS: Cascading Style Sheets http://www.w3c.es/Divulgacion/GuiasBreves/HojasEstilo

  2. 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

  3. ¿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.

  4. Sintaxis Básica Declaración Selector { propiedad: valor; ...} Ejemplo: H1 {color:#CC9900;}

  5. 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">

  6. 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 "-//W3C//DTD XHTML 1.1//EN"> <html> <head> <title>Título</title> <link rel="stylesheet" type="text/css" href="http://www.w3.org/css/officeFloats.css" /> </head> <body> . . . . </body> </html>

  7. 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 "-//W3C//DTD XHTML 1.1//EN"> <html> <head> <title>hoja de estilo interna</title> <style type="text/css"> body { padding-left: 11em; font-family: Georgia, "Times New Roman", serif; color: red; background-color: #d8da3d; } h1 { font-family: Helvetica, Geneva, Arial, sans-serif; } </style> </head> <body> <h1>Aquí se aplicará el estilo de letra para el Título</h1> </body> </html>

  8. 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.

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

More Related