Your SlideShare is downloading. ×
Diseño web con css
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Diseño web con css

1,320
views

Published on


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

No Downloads
Views
Total Views
1,320
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
163
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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