Descargado 191 veces
Más contenido relacionado
Similar a Diseño web con css
Diseño web con css
- 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 CSSMenor 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 dedesarrollo 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ásicade 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 CSSen 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="background-color: #FF0000;"> <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="text/css"> body {background-color: #FF0000;} </style> </head> <body> <p>Esta es una página con fondo rojo</p> </body> </html>
- 11. 3. Externo: enlacea 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="stylesheet" type="text/css" href="style/style.css" /> </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 IIIselector {atributo:valor;}
- 14. Tipos de selectoresSelectores simples Selectores de clase Selectores de ID
- 15. Selectores simples Eneste 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 clasesUna 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 IDUna 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-imagerepeat background-attachment background-position background
- 25.
- 26. Listas list-style-type list-style-imagelist-style-position
- 27. Atributos para cajas Parte VIII
- 28. Estructura dela caja
- 29. Posicionamiento CSSParte IX
- 30. Posicionamiento CSSposition left top height width visibility z-index clip overflow
- 31.
- 32. Float Cualquier elementopuede 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.
- 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="empty-cells: show;"> border-collapse <table border="3" style="border-collapse: collapse;"> border-spacing <table border="3" style="border-collapse: collapse;border-spacing:0.5em 1em;"> table-layout
- 35. Cursores yestilo Parte XII
- 36. Cursores yestilo 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