c ascading s tyle s heets css n.
Skip this Video
Loading SlideShow in 5 Seconds..
C ascading S tyle S heets (CSS) PowerPoint Presentation
Download Presentation
C ascading S tyle S heets (CSS)

play fullscreen
1 / 75
Download Presentation

C ascading S tyle S heets (CSS) - PowerPoint PPT Presentation

milos
124 Views
Download Presentation

C ascading S tyle S heets (CSS)

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Cascading Style Sheets (CSS) David Pinto

  2. Web Standards Web Recommendations Standards • XHTML 1.0 or higher • CSS Level 1 & CSS Level 2 • DOM Level 1 & DOM Level 2 • ECMAScript 262 (current JavaScript)

  3. XHTML • XHTML 1.0 Transitional • XHTML 1.0 Strict • XHTML 1.1 • XHTML 2.0 (W3C Working Draft) No más desarrollo en HTML!

  4. Cascading Style Sheets • Los estilos definen cómo desplegar la información (elementos HTML/XHTML/XML) • Fueron agregados a HTML 4.0 para solucionar un problema • Los archivos externos de estilo separan presentación de información y ahorran mucho trabajo • Se usan archivos .css • Permite el cambio de apariencia y presentación con solo editar un archivo

  5. CSS: Motivación • El concepto de piel (skin) • Diseño que se coloca por encima de la estructura (esqueleto). • Ejemplo: Teléfonos • Estructura: • Modelo del teléfono • Piel: • Placas de colores

  6. CSS: Motivaciónhttp://www.csszengarden.com

  7. CSS: Motivaciónhttp://www.csszengarden.com

  8. CSS: Motivaciónhttp://www.csszengarden.com

  9. CSS: Motivaciónhttp://www.csszengarden.com

  10. CSS: Motivaciónhttp://www.csszengarden.com

  11. Archivo HTML <html> <head> <link rel="stylesheet" type="text/css" href="ejemplo1.css" /> </head> <body> <h1>This header is 36 pt</h1> <h2>This header is blue</h2> <p>This paragraph has a left margin of 50 pixels</p> </body> </html> Archivo CSS body {background-color: yellow} h1 {font-size: 36pt} h2 {color: blue} p {margin-left: 50px} Archivo CSS body {background-color: blue} h1 {font-size: 12pt} h2 {color: yellow} p {margin-left: 5px} CSS: Ejemplo (Probar este ejemplo)

  12. CSS: Sintaxis • Tres partes: • Un selector • Una propiedad • Un valor • Sintaxis: • selector {property:value}

  13. Uso: body {color:black} p {font-family:"sans serif"} p {text-align:center;color:red} Uso: p{text-align:center;color:black;font-family:arial} h1,h2,h3,h4,h5,h6{color:green} CSS: Sintaxis

  14. CSS: El selector class Se pueden definir diferentes estilos para el mismo elemento • Definición: • p.right {text-align:right} • p.center {text-align:center} • Uso: • <p class="right">This paragraph will be right-aligned.</p> • <p class="center">This paragraph will be center-aligned.</p> • <p class="center bold">This is a paragraph.</p>

  15. CSS: El selector class Se puede omitir el elemento para indicar que se aplicará para cualquier elemento • Definición: • .center {text-align:center} • Uso: • <h1 class="center">This heading will be center-aligned</h1> • <p class="center">This paragraph will also be center-aligned.</p>

  16. CSS: Otros • Definición: • input[type="text"] {background-color:blue} • Comentarios: /* Este es un comentario */ p{text-align:center; /* Este es otro comentario */ color:black;font-family:arial}

  17. CSS: El selector id Se puede también definir estilos con el selector id • Definición: • #green {color:green} • p#para1{text-align:center;color:red} • Uso: <p id="para1"> Este párrafo está centrado y en color rojo. </p>

  18. CSS: Modo de referencia • Archivos HTML / XHTML • Referencia externa: <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> • Referencia interna: <head> <style type="text/css">hr {color:sienna}p {margin-left:20px}body {background-image:url("images/back40.gif")} </style> </head> • Referencia en línea: <p style="color:sienna;margin-left:20px">This is a paragraph.</p>

  19. CSS: Modo de referencia • Archivos XML <?xml version="1.0" encoding="UTF-8" standalone="yes"?> <?xml-stylesheet type="text/css" href="tutorials.css"?> <tutorials> <tutorial> <name>XML Tutorial</name> <url>http://www.mytutorial.com/xml/tutorial</url> </tutorial> <tutorial> <name>HTML Tutorial</name> <url>http://www. mytutorial.com/html/tutorial</url> </tutorial> </tutorials>

  20. CSS: Precedencia de valores • Valores por default del navegador • Hoja de estilo externa • Hoja de estilo interna (en la sección de encabezado) • Estilo en línea (dentro de un elemento)

  21. CSS: Background • Propiedades usadas para el efecto background • background-color • background-image • background-repeat • background-attachment • background-position

  22. CSS: background-color • body {background-color:#b0c4de} • h1 {background-color:#6495ed} • p {background-color:#e0ffff} • div {background-color:#ffffff} • Modos de referencia para el color: • nombre - "red“, “white”, “blue”, etc • RGB - un valor como "rgb(255,0,0)" • Hex – un valor como "#ff0000"

  23. CSS: background-image • body {background-image:url(‘imagen.gif')} • body {background-image:url('imagen.jpg')} • body{background-image:url(‘img/imagen.png');}

  24. CSS: background-repeat • body{background-image:url('gradient2.png');background-repeat:repeat-x;} • body{background-image:url('img_tree.png');background-repeat:no-repeat;}

  25. CSS: background-repeat background-position • body{background-image:url('img_tree.png');background-repeat:no-repeat;background-position:top right;} • Versión resumida: body {background:#ffffff url('img_tree.png') no-repeat top right} Se requiere un orden: • background-color • background-image • background-repeat • background-attachment • background-position

  26. CSS: background-attachment body { background-image:url('smiley.gif'); background-repeat:no-repeat; background-attachment:fixed }

  27. CSS: Propiedades de background

  28. CSS: Ejercicio • Crear un archivo de estilo para el documento XML de la práctica 10. • Usar propiedades de background.

  29. CSS: Texto • Color del texto • body {color:blue} • h1 {color:#00ff00} • h2 {color:rgb(255,0,0)} • Alineación • h1 {text-align:center} • p.date {text-align:right} • p.main {text-align:justify}

  30. CSS: Texto • Decoración • h1 {text-decoration:overline} • h2 {text-decoration:line-through} • h3 {text-decoration:underline} • h4 {text-decoration:blink} • a {text-decoration:none} • Transformación • p.uppercase {text-transform:uppercase} • p.lowercase {text-transform:lowercase} • p.capitalize {text-transform:capitalize} • Identación • p {text-indent:50px}

  31. CSS: Propiedades de texto

  32. CSS: Font • p{font-family:"Times New Roman",Georgia,Serif}

  33. CSS: Font • font-style • p.normal {font-style:normal} • p.italic {font-style:italic} • p.oblique {font-style:oblique} • Tres tipos: • normal – El texto se muestra de manera normal • italic – El texto se muestra en itálica • oblique – El texto está inclinado (similar a itálica, pero es soportado menos)

  34. CSS: Font • font-size -> default = (16px=1em) • h1 {font-size:40px} • h2 {font-size:30px} • p {font-size:14px} • h1 {font-size:2.5em} /* 40px/16=2.5em */ • h2 {font-size:1.875em} /* 30px/16=1.875em */ • p {font-size:0.875em} /* 14px/16=0.875em */ • body {font-size:100%} • h1 {font-size:2.5em} • h2 {font-size:1.875em} • p {font-size:0.875em}

  35. CSS: Propiedades de font

  36. CSS: Ejercicio • Modificar el archivo CSS del ejercicio anterior e incluir estilo para diferentes elementos de texto.

  37. width:250px;padding:10px;border:5px solid gray;margin:10px; 250px (width)+ 20px (padding)+ 10px (border)+ 20px (margin)= 300px width:220px;padding:10px;border:5px solid gray;margin:0px; CSS: El modelo de la caja

  38. CSS: El modelo de la caja en ciertos navegadores <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html><head><style type="text/css">div.ex{width:220px;padding:10px;border:5px solid gray;margin:0px;}</style></head>

  39. p.one{border-style:solid;border-width:5px;}p.two{border-style:solid;border-width:medium;} p{border-top-style:dotted;border-right-style:solid;border-bottom-style:dotted;border-left-style:solid;} p.one{border-style:solid;border-color:red;}p.two{border-style:solid;border-color:#98bf21;} border-style:dotted solid; border-style:dotted solid double dashed; border-style:dotted solid double; border-style:dotted solid; border-style:dotted; CSS: Border

  40. CSS: Border (versión corta) • border:5px solid red; • Orden de los valores de la propiedad border • border-width • border-style • border-color

  41. CSS: Outlines

  42. CSS: Márgenes • margin-top:100px;margin-bottom:100px;margin-right:50px;margin-left:50px; • p.ex1 {margin-top:2cm} • p.bottommargin {margin-bottom:25% • En corto: • margin:100px 50px;

  43. CSS: Márgenes

  44. CSS: Padding • La propiedad padding limpia una área alrededor del contenido de un elemento (dentro del borde). Se encuentra afectado por el color de fondo del elemento. • padding-top:25px;padding-bottom:25px;padding-right:50px;padding-left:50px • padding:25px 50px 75px 100px; • padding:25px 50px 75px; • padding:25px 50px; • padding:25px;

  45. CSS: Padding

  46. CSS: Ejercicio • Crear una página simple en HTML que contenga elementos de tipo párrafo (<p>). • Experimentar en la hoja de estilos con el modelo de caja, usando diferentes elementos. • Incluir una imagen (dentro de la hoja de estilo) que no se desplace, a pesar de que el usuario si lo haga en la página HTML.

  47. CSS: list-style-type (listas no ordenadas) • Listas no ordenadas • ul.circle {list-style-type:circle} • ul.square {list-style-type:square}

  48. CSS: list-style-type (listas ordenadas) • Listas ordenadas • ol.upper-roman {list-style-type:upper-roman} • ol.lower-alpha {list-style-type:lower-alpha}