Taller de Css

1,784 views
1,662 views

Published on

Published in: Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,784
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
71
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Taller de Css

  1. 1. Taller (CSS) Rafael Castillo Guerrero
  2. 2. Hojas Estilo Cascada (CSS) oXHTML:Lenguaje de Etiquetado de Hipertexto Extensible(Extensible HyperText Markup Language). Es una versiónmás estricta y limpia de HTML que nace ante la limitaciónde uso de éste con las cada vez más abundantesherramientas basadas en XML. XHTML extiende HTML 4.0combinando la sintaxis de HTML, diseñado para mostrardatos, con la de XML, diseñado para describir los datos. http://www.w3c.es/divulgacion/a-z/ <2>
  3. 3. Hojas Estilo Cascada (CSS) oDefinición del Tipo de Documento:El DOCTYPE informa a los navegadores qué DTD seha aplicado al crear el marcado del documento, yeste DTD a su vez, informa a los navegadores cómoprocesar la página. <3>
  4. 4. Hojas Estilo Cascada (CSS) oDefinición del Tipo de Documento:Transitional: Es un DTD que añadiéndole los elementos y atributosen desuso.<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>Este codigo se escribe antes que la primera etiqueta que abre lapagina web.<html> <body> <4>
  5. 5. Hojas Estilo Cascada (CSS) oDefinición del Tipo de Documento:Strict: Este DTD, es el más ajustado al estandard. No puedecontener ni Frames, ni elementos ni atributos en desuso.<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>Este codigo se escribe antes que la primera etiqueta que abre lapagina web.<html> <body> <5>
  6. 6. Hojas Estilo Cascada (CSS) oDefinición del Tipo de Documento:Frameset: Una DTD como la Transitional, pero que permite utilizarframes.<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>Este codigo se escribe antes que la primera etiqueta que abre lapagina web.<html> <body> <6>
  7. 7. Hojas Estilo Cascada (CSS) o Definición del Tipo de Documento:El W3C recomienda empezar todos nuestros documentos XHTML conel siguiente código.<?xml version=”1.0” encoding=”UTF-8”?>Éste, sirve para especificar al navegador la codificación de caracteresy la versión XML que se está utilizando. No obstante no todos losnavegadores interpretan adecuadamente esta etiqueta o código, antelo cual se utiliza:<meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8” /> <7>
  8. 8. Hojas Estilo Cascada (CSS) oXHTML:• Todos los elementos y atributos en minúscula <HTML> --> incorrecto <html> --> correcto• Todos los valores de atributos entre comillas <img src=hola.jpg> --> incorrecto <img src=”hola.jpg”> --> correcto• Todos los atributos deben tener un valor. <input type=”ckeckbox” name=”pais” value=”España” checked /> <8>
  9. 9. Hojas Estilo Cascada (CSS) oXHTML:• Todos los atributos deben tener un valor. <input type=”ckeckbox” name=”pais” value=”España” checked /> --> incorrecto <input type=”ckeckbox” name=”pais” value=”España” checked=”checked” /> --> correcto <9>
  10. 10. Hojas Estilo Cascada (CSS) oXHTML:1. compact=”compact” 8. ismap=”ismap”2. checked=”checked” 9. nohref=”nohref ”3. declare=”declare” 10. noshade=”noshade”4. readonly=”readonly” 11. nowrap=”nowrap”5. disabled=”disabled” 12. multiple=”multiple”6. selected=”selected” 13. noresize=”noresize”7. defer=”defer” <10>
  11. 11. Hojas Estilo Cascada (CSS) oXHTML:• Todas las etiquetas deben ir cerradas <br /> <hr /> <img src=”” title=”información de la imagen” />• Todas las etiquetas correctamente anidadas <h1> <em> Titulo </em> </h1>• Es necesaria la declaración de tipo de documento <11>
  12. 12. Hojas Estilo Cascada (CSS) oHistoria de las CSS W3C - 1995 CSS1 - 1996 CSS2 - 1998 Como ha sido la incorporación de CSS en los navegadores...? <12>
  13. 13. Hojas Estilo Cascada (CSS) oProgramas Dreamweaver GoLive FrontPage Block de Notas Archivo > Guardar Como > tipo > Todos los archivos <13>
  14. 14. Hojas Estilo Cascada (CSS) oSintaxis en CSS Selector Propiedad Valor Ejemplo: selector { propiedad : valor; } <14>
  15. 15. Hojas Estilo Cascada (CSS) oEjemplo: selector { propiedad : valor; } <15>
  16. 16. Hojas Estilo Cascada (CSS) oComentarios: /* comentario */Unidades de Medida: Tarea, buscar la unidades de medida que se utilizan en CSS Tarea, cómo aplicar color en CSS <16>
  17. 17. Hojas Estilo Cascada (CSS) o HTML y CSS: Integrado en la etiqueta HTML <h1 style="color: #000;">Titulo</h1> Integrado en la página HTML <head> <style type="text/css"> h1 {color: #000; } </style>aquí van más etiquetas </head> <17>
  18. 18. Hojas Estilo Cascada (CSS) o HTML y CSS: Integrado desde un archivo externo <head>aquí van más etiquetas <link rel="stylesheet" href="estilo.css" type="text/css" media="screen" />aquí van más etiquetas </head> archivo: estilo.css h1 { color: #000; } <18>
  19. 19. Hojas Estilo Cascada (CSS) oHTML y CSS: Importado <head> <style> <!-- @import url(estilo2.css); --> </head> @import es una propiedad de CSS2 <19>
  20. 20. Hojas Estilo Cascada (CSS) oCSS y el color: - hexadecimal clásica: #FF33CC - hexadecimal abreviada: #F3C , esto corresponde a #FF33CC, no puede ser usado para un color como #83CE4A - notación decimal: color: rgb(0,0 255) - notación en porcentaje: rgb(10%,20%,100%) - palabras color: red, se pueden designar 17 colores básicos. <20>
  21. 21. Hojas Estilo Cascada (CSS) oCSS y las unidades de medida: unidad Descripción valor ejemplo cm Centímetro entero 3cm in Pulgada (inch), equivale a 2,54 cm real 0.1 in pt Punto, equivale a 1/72 de pulgada entero 48pt px Pixel. equivale al elemento más pequeño de entero 420px resolución de pantalla mm Milimetro entero 40mm % Porcentaje entero 15% pc Pica, equivale a 12 puntos real 4.5pc <21>
  22. 22. Hojas Estilo Cascada (CSS) oCSS, noción de cascada: - Propiedades del navegador - Hojas de estilo externa - Hojas de estilo internas - Hojas de estilo en línea <22>
  23. 23. Hojas Estilo Cascada (CSS) oCSS, herencia Es similar a la aplicación en HTML ejemplo: <h1> <em> Titulo </em> </h1> a a es padre del b estilo b, a y b son c padres del estilo c. b es hijo del estilo a, y c es hijo de los estilos a y b. <23>
  24. 24. Hojas Estilo Cascada (CSS) oCSS, elementos de caja La caja, por lo general se le conoce como: - Contenedor - Bloque margin = margen externo border = borde padding = margen interno contenido <24>
  25. 25. Hojas Estilo Cascada (CSS) oCSS, elementos de caja Que dice el consorcio W3C acerca del uso del elemento CAJA <25>
  26. 26. Hojas Estilo Cascada (CSS) oCSS, elementos de caja p{ width:250px; border: 10px solid #99C; padding: 15px; margin: 20px; background-color:#FF0; } <26>
  27. 27. Hojas Estilo Cascada (CSS) oCSS, Nociones de Clase id #nombre_de_la_clase { declaración: valor; o declaraciones: valor; } class .nombre_de_la_clase { declaración: valor; o declaraciones: valor; } <27>
  28. 28. Hojas Estilo Cascada (CSS) o CSS, Nociones de Clase <div id=”inicio”>aquí van más etiquetas </div> #inicio { declaración: valor; o declaraciones: valor; } <28>
  29. 29. Hojas Estilo Cascada (CSS) o CSS, Nociones de Clase <p class=”textual”>aquí van más etiquetas </div> .textual { declaración: valor; o declaraciones: valor; } <29>
  30. 30. Hojas Estilo Cascada (CSS) o CSS, div Indica una división en la página, pueden estar contenidos en otros “div”. <div id=”cabecera”> -->en la página htmlaquí van más etiquetas </div> en la hoja CSS #cabecera { declaración: valor; o declaraciones: valor; } <30>
  31. 31. Hojas Estilo Cascada (CSS) oCSS, div Indica una división en la página, pueden estar contenidos en otros “div”. <div id=”cabecera”> -->en la página html en la hoja CSS #cabecera { declaración: valor; o declaraciones: valor; } <31>
  32. 32. Hojas Estilo Cascada (CSS) oCSS, CookClass Acá vemos de todo ¿cómo alinear listados de opciones? ul.menu li { display: inline; margin: 0; } <32>
  33. 33. Hojas Estilo Cascada (CSS) oCSS, CookClass Acá vemos de todo Librería de layout de Useme http://useme.cl/labs/layouts/ Little Boxes http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html <33>
  34. 34. Hojas Estilo Cascada (CSS) oCSS, aplicaciones específicas <34>
  35. 35. Hojas Estilo Cascada (CSS) oCSS, textos Sangría p{ text-indent: 15px; } p{ text-indent: 15%; } <35>
  36. 36. Hojas Estilo Cascada (CSS) oCSS, textos Decoración underline = texto subrayado blink = texto intermitente overline = subrayado sobre el texto line-through = texto tachado none = elimina todo tipo de formatos h2 { text-decoration: underline; } <36>
  37. 37. Hojas Estilo Cascada (CSS) oCSS, textos Interlineado h2 { line-height: 150%; } Alineación horizontal left, right, center, justify p{ text-align: left; } <37>
  38. 38. Hojas Estilo Cascada (CSS) oBibliografía http://www.estandaresweb.es/ http://www.w3c.es http://cssbeauty.com http://useme.cl/labs/layouts/ http://www.w3schools.com/css/css_list.asp http://www.unmatchedstyle.com/ http://cssvault.com/ http://www.alzado.org/articulo.php?id_art=193 <38>

×