1 / 75

C ascading S tyle S heets (CSS)

C ascading S tyle S heets (CSS). David Pinto. 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). XHTML. XHTML 1.0 Transitional XHTML 1.0 Strict XHTML 1.1

milos
Download Presentation

C ascading S tyle S heets (CSS)

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

More Related