Diseño web con css

1,726 views

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,726
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
189
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Diseño web con css

  1. 1. Diseño web con CSS Instituto Superior de Electrónica Gamma
  2. 2. ¿Qué es CSS? Parte I
  3. 3. ¿Qué es CSS? <ul><li>“ Cascading Style Sheets” (Hojas de Estilo en Cascada), separan el contenido del diseño . </li></ul><ul><li>Con este lenguaje, aplicamos reglas de estilo a las distintas etiquetas del documento HTML. </li></ul><ul><li>Una regla de estilo contiene uno o más atributos como: color de fondo, color de texto, posición, márgenes, fuentes de texto, etc. </li></ul>
  4. 4. Ventajas de CSS <ul><li>Menor tiempo de desarrollo de las páginas. </li></ul><ul><li>Mayor orden de nuestro código. </li></ul><ul><li>Menos peso en las páginas. </li></ul><ul><li>Mayor flexibilidad en los cambios </li></ul><ul><li>Al ser un standard de la W3C, todos los navegadores lo soportan. </li></ul><ul><li>Una misma página puede tener diferentes presentaciones para diferentes medios (Pantalla, impresión, móviles, etc.) </li></ul>
  5. 5. El proceso de desarrollo con CSS <ul><li>Obtener el documento HTML </li></ul><ul><li>Crear las reglas de estilo. </li></ul><ul><li>Adjuntar hoja de estilos al documento. </li></ul><ul><li>Si se desean hacer cambios en la visualidad (layout) del documento, editar las reglas de estilo CSS. </li></ul>
  6. 6. ¿ Cómo funciona CSS? Parte II
  7. 7. Sintaxis básica de CSS <ul><li>selector { atributo : valor ;} </li></ul>A qué etiqueta o etiquetas HTML se aplicará la propiedad (ej., “body”) El atributo CSS al que se le desea asignar un valor (ej. , “background-color”) El valor de la propiedad (ej. “#FF0000 que es el valor para “rojo”)
  8. 8. ¿ Dónde se escribe el código CSS? <ul><li>Se pueden escribir en tres lugares: </li></ul><ul><li>En línea (usando el atributo style ) </li></ul><ul><li>Interno (la etiqueta style ) </li></ul><ul><li>Externo ( enlazar a una hoja de estilos) </li></ul>
  9. 9. 1. Escribir CSS en línea: el atributo style <ul><li>Podemos asignar la propiedad escribiendo directamente en el elemento HTML al que deseamos dar estilo. </li></ul><html> <head> <title>Ejemplo</title> </head> <body style=&quot;background-color: #FF0000;&quot;> <p>Esta es una página con fondo rojo</p> </body> </html>
  10. 10. 2. Interno: la etiqueta style <ul><li>Podemos insertar una etiqueta style directamente en el documento HTML, dentro de ella incluimos una o varias reglas . </li></ul><html> <head> <title>Ejemplo</title> <style type=&quot;text/css&quot;> body {background-color: #FF0000;} </style> </head> <body> <p>Esta es una página con fondo rojo</p> </body> </html>
  11. 11. 3. Externo: enlace a una hoja de estilos <ul><li>Una hoja de estilos es un archivo de texto con la extensión .css que se vincula con una etiqueta link dentro del documento HTML. </li></ul><html> <head> <title>Mi documento</title> <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style/style.css&quot; /> </head> <body> ...
  12. 12. 3. Externo: ventajas de usar una hoja de estilos externa <ul><li>Al usar una hoja externa, podemos usar un único archivo .css que guarde el diseño de todas las páginas de un mismo sitio. </li></ul>
  13. 13. Selectores Parte III selector {atributo:valor;}
  14. 14. Tipos de selectores <ul><li>Selectores simples </li></ul><ul><li>Selectores de clase </li></ul><ul><li>Selectores de ID </li></ul>
  15. 15. Selectores simples <ul><li>En este caso, el selector es el nombre del tipo de etiqueta HTML a la que aplicaremos la regla. </li></ul>body {background-color:#FF0000;} h1 { font-color: #000000; font-size: 20px; } p { color: red; display: block; background-color: black; }
  16. 16. Selectores de clases <ul><li>Una clase es una regla de estilo que se puede aplicar a todas etiquetas que se estimen convenientes. </li></ul><ul><li>Se pueden aplicar varias clases a un mismo elemento HTML </li></ul><ul><li>Una clase tiene un nombre definido por el usuario. </li></ul><ul><li>En el documento .css, ese nombre se define con un punto </li></ul><ul><li>En el documento HTML, ese nombre se referencia con el atributo HTML “class”. </li></ul>.miClase { font-color: #000000; } <p class=“miClase”> Hola!!! </p> <H1 class=“miClase”> Historia de Chile </p> estilos.css index.html
  17. 17. Selectores de ID <ul><li>Una ID es un identificador único asociado a un elemento HTML. </li></ul><ul><li>Un elemento HTML no puede tener más de una ID. </li></ul><ul><li>En el documento .css se definen con un caracter gato (#). </li></ul><ul><li>En el documento HTML se definen con el atributo HTML “id” </li></ul>#cabeza { border: 1px dotted #0000FF; } <div id=“cabeza” > Instituto GAMMA </p> estilos.css index.html
  18. 18. Atributos para fuentes Parte IV
  19. 19. Atributos para fuentes <ul><li>font-family </li></ul><ul><li>font-style </li></ul><ul><li>font-variant </li></ul><ul><li>font-weight </li></ul><ul><li>font-size </li></ul><ul><li>font  </li></ul>
  20. 20. Atributos para el texto Parte V
  21. 21. Atributos para el texto <ul><li>word-spacing </li></ul><ul><li>letter-spacing </li></ul><ul><li>text-decoration </li></ul><ul><li>vertical-align </li></ul><ul><li>text-transform </li></ul><ul><li>text-align </li></ul><ul><li>text-indent </li></ul><ul><li>line-height </li></ul><ul><li>text-indent </li></ul><ul><li>white-space </li></ul><ul><li>display </li></ul>
  22. 22. Color y Background Parte VI
  23. 23. Color <ul><li>El atributo “color” puede declararse: </li></ul><ul><ul><li>Por su nombre ( ej. red, aqua, black, blue, etc) </li></ul></ul><ul><ul><li>Hexadecimal (ej. #FF0000) </li></ul></ul><ul><ul><li>RGB (ej. 255,0,0) </li></ul></ul>
  24. 24. Background <ul><li>background-color </li></ul><ul><li>background-image </li></ul><ul><li>repeat </li></ul><ul><li>background-attachment </li></ul><ul><li>background-position </li></ul><ul><li>background </li></ul>
  25. 25. Listas Parte VII
  26. 26. Listas <ul><li>list-style-type </li></ul><ul><li>list-style-image </li></ul><ul><li>list-style-position </li></ul>
  27. 27. Atributos para cajas Parte VIII
  28. 28. Estructura de la caja
  29. 29. Posicionamiento CSS Parte IX
  30. 30. Posicionamiento CSS <ul><li>position </li></ul><ul><li>left </li></ul><ul><li>top </li></ul><ul><li>height </li></ul><ul><li>width </li></ul><ul><li>visibility </li></ul><ul><li>z-index </li></ul><ul><li>clip </li></ul><ul><li>overflow </li></ul>
  31. 31. Float Parte X
  32. 32. Float <ul><li>Cualquier elemento puede flotar en una página. Al asignar “float” a cualquier elemento lo convertimos en una caja , debiéndole asignar una anchura determinada. </li></ul><ul><li>float </li></ul><ul><ul><li>right </li></ul></ul><ul><ul><li>left </li></ul></ul><ul><ul><li>none </li></ul></ul><ul><li>clear </li></ul><ul><ul><li>none </li></ul></ul><ul><ul><li>left </li></ul></ul><ul><ul><li>right </li></ul></ul><ul><ul><li>Both </li></ul></ul>
  33. 33. Tablas Parte XI
  34. 34. Tablas <ul><li>Caption </li></ul><ul><ul><li>Asignar “caption” en el documento HTML para definir cuál es el título de la tabla </li></ul></ul><ul><ul><li>Caption en CSS </li></ul></ul><ul><li>Celdas vacías </li></ul><ul><ul><li><table style=&quot;empty-cells: show;&quot;> </li></ul></ul><ul><li>border-collapse </li></ul><ul><ul><li><table border=&quot;3&quot; style=&quot;border-collapse: collapse;&quot;> </li></ul></ul><ul><li>border-spacing </li></ul><ul><ul><li><table border=&quot;3&quot; style=&quot;border-collapse: collapse;border-spacing:0.5em 1em;&quot;> </li></ul></ul><ul><li>table-layout </li></ul>
  35. 35. Cursores y estilo Parte XII
  36. 36. Cursores y estilo <ul><li>auto </li></ul><ul><li>crosshair </li></ul><ul><li>default </li></ul><ul><li>pointer </li></ul><ul><li>move </li></ul><ul><li>e-resize </li></ul><ul><li>ne-resize </li></ul><ul><li>nw-resize </li></ul><ul><li>n-resize </li></ul><ul><li>se-resize </li></ul><ul><li>sw-resize </li></ul><ul><li>w-resize </li></ul><ul><li>s-resize </li></ul><ul><li>text </li></ul><ul><li>wait </li></ul><ul><li>progress </li></ul><ul><li>help </li></ul><ul><li>Ejemplos: http://www.ignside.net/man/css/cursores.php </li></ul>

×