hojas de_estilo_css

1,185 views

Published on

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

No Downloads
Views
Total views
1,185
On SlideShare
0
From Embeds
0
Number of Embeds
533
Actions
Shares
0
Downloads
29
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

hojas de_estilo_css

  1. 1. Hojas de estilo (CSS) Santiago Molina Dpto. de Computación UNAN - León
  2. 2. Agenda• Motivación• Introducción: ¿Qué es CSS?• Sintaxis CSS• Cómo agregar CSS a un doc HTML• CSS Id y Class• Estilos con CSS – Background (fondo), Texto, Fuentes, Enlaces, Listas, Tablas• CSS box model – Box model, Border, Outline, Margin, Padding• CSS Avanzado – Dimension, Display, Positioning, Floating, Navigation Bar, Images Sprite
  3. 3. La peor forma de crear estilos<p><font face="Arial">Bienvenido a planetaCriptón.¡Usted<b>nunca, <i>nunca, <u>NUNCA</u></i></b> encontrar&aaacute;<font size="+1"color="red">mejores precios</font> que losnuestros!</font></p>Bienvenido a planeta Criptón. ¡Ustednunca, nunca, NUNCA encontrará mejores preciosque los nuestros!
  4. 4. ¿Qué es CSS?• CSS: Cascading Style Sheets• Describe la apariencia, disposición y presentación de la información en una página Web.• Describe cómo será mostrada la información y no lo que será visualizado.• Los estilos fueron agregados a HTML 4.0 para resolver un problema• Puede estar incrustado en un doc HTML o en un archivo separado (.css).
  5. 5. Sintaxis CSS Crédito: W3Schoolselector { property: value; property: value; ... property: value;}
  6. 6. Comentarios CSS• Los usamos para explicar el código y de ayuda para recordar lo que hemos hecho.• Un comentario CSS inicia con /*; y termina con */ /*Esto es un comentario*/ p{ text-align:center; /*Esto es otro comentario*/ color:black; font-family:arial; }
  7. 7. Agregar CSS a doc HTML• Hay tres formas de hacerlo: – Hoja de estilo externa – Hoja de estilo interno – Estilo “inline”
  8. 8. CSS Externo<head> <link rel="stylesheet" type="text/css" href=“filename" /></head><head> <link rel="stylesheet" type="text/css" href=“mystyle.css" /> <link rel="stylesheet" type="text/css" href="http://www.google.com/uds/css/gsearch.css" /></head>• Se pueden enlazar múltiples archivos css • En caso de conflicto (dos hojas definen un estilo para el mismo elemento HTML), la propiedad de la última hoja se aplica.
  9. 9. CSS Interno• Utilizado cuando un documento tiene un único estilo.<head> <style type="text/css"> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style></head>
  10. 10. Estilo inline• No se recomienda, pero puede ser útil:• Se aplica usando la propiedad style en un elemento HTML<p style="color:sienna;margin-left:20px">Este es un párrafo</p>
  11. 11. Múltiples estilos en cascada• ¿Qué estilo será usado cuando haya más de un estilo especificado para un elemento HTML?P Navegador (default)RIO CSS externoR “VIRTUAL – CSS”ID CSS internoAD Estilo inline
  12. 12. Selectores Id y class• CSS permite especificar tus propios selectores llamados “id” y “class”.• El selector “id” se usa para especificar un estilo para un solo elemento, único. #para1 { text-align:center; color:red; }
  13. 13. Selectores class• El selector “class” se usa para especificar un estilo para un grupo de elementos. – Suele ser usado en varios elementos.• Esto permite especificar un estilo particular para cualquier elemento HTML con la misma clase.• El selector “class” utiliza el atributo class.• Es definido con un “.”
  14. 14. Selector class.center {text-align:center;}• Se puede especificar que sólo ciertos elementos HTML serán afectados por la clase.
  15. 15. Propiedades CSS para coloresp{ color: red; background-color: yellow;}• color: color del texto del elemento• background-color: color detrás del elemento
  16. 16. Especificando coloresp { color: red; }h2 { color: rgb(128, 0, 196); }h4 { color: #FF8800; }• Nombre de colores comunes• Código RGB• Códigos hexadecimales
  17. 17. Styling Backgrounds• Definir efectos de fondo de un elemento• Propiedades: – background-color – background-image – background-repeat – background-attachment – background-position
  18. 18. background-image• Especifica una imagen a usar como fondo de un elemento• Por defecto, la imagen es repetida para cubrir el elemento enteramente.body{ background-image:url(gradient2.png);}
  19. 19. Imagen de fondo: repeat H. o V.• Algunas imágenes deseamos que se repitan horizontal o verticalmente.• Repetir horizontalmente: repeat-x• Repetir verticalmente: repeat-ybody{ background-image:url(gradient2.png); background-repeat: repeat-x;}
  20. 20. Imagen de fondo: no-repeat• En ocasiones queremos que la imagen se repita una vez:body{ background-image:url(gradient2.png); background-repeat: no-repeat;}
  21. 21. Imagen de fondo: attachment• ¿La imagen estará fija o hará scrolling con el resto del texto? – background-attachment: fixed – background-attachment: scroll
  22. 22. Imagen de fondo: posición• También quisiéramos cambiar la posición de la imagen para que no estorbe al texto:body{ background-image:url(gradient2.png); background-repeat: no-repeat; background-position:right top;}
  23. 23. Background – shorthand property• Especificar todas las propiedades en una sola línea:body {background:#ffffff url(img_tree.png) no-repeat right top;}• Se debe seguir el siguiente orden: • background-color • background-image • background-repeat • background-attachment • background-position
  24. 24. Styling text• Propiedades para cambiar el estilo del texto: – color – text-align: alineación del texto dentro de su elemento. – text-decoration: decoraciones como subrayado – text-transform: uppercase, lowercase, capitalize – text-indent: indentación del texto
  25. 25. Text alingmenth1 {text-align:center;}p.date {text-align:right;}p.main {text-align:justify;}
  26. 26. Text decoration• Para fijar o quitar decoraciones al texto: – overline, underline, line-through, blinkh1 {text-decoration:overline;}h2 {text-decoration:line-through;}h3 {text-decoration:underline;}h4 {text-decoration:blink;}
  27. 27. Text transformation• Para especificar texto en mayúsculas, minúsculas o capitalizar la primera letra de cada palabra.p.uppercase {text-transform:uppercase;}p.lowercase {text-transform:lowercase;}p.capitalize {text-transform:capitalize;}
  28. 28. Text indentation• Para dar sangría a la primera línea del texto p {text-indent:50px;}• Más propiedades: – http://www.w3schools.com/css/css_text.asp
  29. 29. Styling Fonts• CSS Font families: hay dos tipos de nombres de familia de fuentes: – Generic family: un grupo de fuentes con aspecto similar (Serif, Monospace) – Font family: una familia de fuentes específica (Times New Roman, Arial)
  30. 30. Font-family (propiedad)• Establecer varios nombres de fuentes.• Empezar con la fuente que deseamos y terminar con una familia genéricap{font-family:"Times New Roman", Times, serif;}
  31. 31. Font size• El valor especificado a la propiedad font-size puede ser absoluto o relativo: – Tamaño absoluto: • Establece el texto al tamaño especificado • No se permite al usuario cambiar el tamaño del texto en todos los navegadores • Útil cuando se conoce el tamaño físico de la salida – Tamaño relativo: • Establece tamaño relativo alrededor de los elementos • Se le permite al usuario cambiar el tamaño del texto en los navegadores
  32. 32. font-sizeh1 {font-size:40px;}h2 {font-size:30px;}p {font-size:14px;}• vague font sizes: xx-small, x-small, small, medium, large, x-large, xx-large• relative font sizes: smaller, larger• percentage font size: 90%, 120%• unidades: pixels (px), point (pt), m-size (em): –16px, 16pt, 1.16em
  33. 33. font-style y font-weight• font-style: Usado para especificar texto en itálica• Valores posibles: normal, italic, obliquep.normal {font-style:normal;}p.italic {font-style:italic;}p.oblique {font-style:oblique;}• font-weight: Usado para especificar grosor del texto• Valores posibles: normal, bold, bolder, 100, etc.p { font-weight: bold; }
  34. 34. Styling links• Puede atribuírsele un estilo diferente a un enlace según el estado de éste.• Hay 4 estados: – a:link – normal, enlace no visitado – a:visited – enlace que ha sido visitado – a:hover – cuando se pasa el ratón encima – a:active – cuando se da clic en el enlace
  35. 35. Styling links [2]a:link {color:#FF0000;} /* unvisited link */a:visited {color:#00FF00;} /* visited link */a:hover {color:#FF00FF;} /* mouse over link */a:active {color:#0000FF;} /* selected link */• Cuando se crea estilo para diferentes estados del enlace: – a:hover DEBE ir después de a:link y a:visited – a:active DEBE ir después de a:hover
  36. 36. Listas• Con las propiedades para listas podemos establecer: – Marcadores para listas ordenadas – Marcadores para listas desordenadas – Imagen como marcador de listaul.a {list-style-type: circle;}ul.b {list-style-type: square;}ol.c {list-style-type: upper-roman;}ol.d {list-style-type: lower-alpha;}
  37. 37. Listas: list-style-type (propiedad)Valores para listas desordenadas Valores para listas ordenadasnone: Sin marcador decimaldisc (default) decimal-leading-zero: 01, 02, 03…circle lower-roman: i, ii, iii, iv, v, visquare upper-roman: I, II, III, IV, V lower-alpha: a, b, c, d upper-alpha: A, B, C, D lower-greek: alpha, beta, gamma…
  38. 38. Styling Tables• Bordes table, th, td{ border: 1px solid black; }• Width, Height Table { width:100%; } th{ height:50px; }
  39. 39. Styling Tables [2]• Text alignment td{ text-align:right; vertical-align:bottom; }• Padding td{ padding:15px; }
  40. 40. CSS Box Model• En CSS el término es usado cuando hablamos de diseño y disposición.• Esencialmente es una caja que envuelve a los elementos HTML y consiste de: márgenes, bordes, padding y contenido.
  41. 41. CSS Box Model• Margin: no tiene color de fondo y es transparente.• Border: es afectado por el color de fondo de la caja.• Padding: área alrededor del contenido. Afectado por el color de fondo de la caja.• Content: donde el texto e imágenes aparecen.
  42. 42. CSS Box Model: alto y ancho de un elemento• Al especificar el ancho (width) y alto (height) de un elemento, nada más lo hacemos para el área de contenido.• Hay que sumar el padding, border y margin para conocer el ancho total. Ejemplo: width: 250px; padding: 10px; border: 5px solid gray; margin: 10px; Total: 300px
  43. 43. CSS Border• Las propiedades permiten especificar el estilo y color del borde de un elemento.• border-style: dotted, dashed, solid, double, groove, ridge, in set, outset• border-width: 10px, thin, medium, thick. – No funciona si no se establece border-style• border-color: name, rgb, hex
  44. 44. Border: lados individuales• En CSS es posible especificar diferentes bordes para los diferentes lados.p{ border-top-style:dotted; border-right-style:solid; border-bottom-style:dotted; border-left-style:solid;}
  45. 45. border-style: single property• border-style:dotted solid double dashed; – top border es dotted – right border es solid – bottom border es double – left border es dashed• border-style:dotted solid double; – top border es dotted – right and left border es solid – bottom border es double• border-style:dotted solid; – top and bottom borders dotted – right and left borders solid• border-style:dotted; – Todos los bordes dotted
  46. 46. Margin• No posee color de fondo, completamente transparente.• Los márgenes top, right, bottom y left pueden ser cambiados independientemente.• Valores posibles: auto, length (px, pt, em), %p.margin{margin-top:100px;margin-bottom:100px;margin-right:50px;margin-left:50px;}
  47. 47. Margin - Shorthand propertymargin:25px 50px 75px 100px; • top, right, bottom, leftmargin:25px 50px 75px; • top, right y left, bottommargin:25px 50px; • top y bottom, right y leftmargin:25px; • todos igual
  48. 48. Padding• Define el espacio entre el borde y contenido de un elemento.• Es afectado por el color de fondo del elemento.• Valores posibles: %, fixed length(px, pt, em)p.padding{padding-top:25px;padding-bottom:25px;padding-right:50px;padding-left:50px;}
  49. 49. Padding - Shorthand property• padding:25px 50px 75px 100px; – top, right, bottom, left• padding:25px 50px 75px; – top, right y left, bottom• padding:25px 50px; – top y bottom, right y left• padding:25px; – todos igual
  50. 50. CSS Avanzado• Agrupando selectorsh1,h2,p{color:green;}• Anidando selectorsp{color:blue;text-align:center;}.marked{background-color:blue;}.marked p{color:white;}
  51. 51. Propiedad display• Establece el tipo de box model con que un elemento se visualiza.• Puede ser: none, inline, block, compact,…• Usarlo poco, porque altera radicalmente el esquema de la página.h2 { display: inline;}
  52. 52. Propiedad visibility• Establece si un elemento será mostrado o no en pantalla.• El elemento mantiene su espacio, aunque no sea mostrado.• Valores: visible (default) o hidden• Puede usarse para mostrar/ocultar contenido HTML dinámico en respuesta a eventos.p.secret { visibility: hidden; }
  53. 53. Propiedad position• Static: posicionamiento por defecto. – El elemento es siempre posicionado de acuerdo con el flujo normal de la página.• Fixed: el elemento es posicionado relativo a la ventana del navegador. No se mueve si hay scrolling.p.pos_fixed{position:fixed;top:30px;right:5px;}
  54. 54. Propiedad position [2]• Relativeh2.pos_left{position:relative;left:-20px;}h2.pos_right{position:relative;left:20px;}• Absoluteh2{position:absolute;left:100px;top:150px;}
  55. 55. Propiedad z-index• Overlapping de elementos – Algunos elementos pueden solaparse cuando se cambia su flujo normal – La propiedad z-index especifica el orden de pila (delante, atrás de) un elementoimg{position:absolute;left:0px;top:0px;z-index:-1}
  56. 56. Barra de navegación• Básicamente se requiere de una lista de enlaces: ul y li• Remover bullets, margin y padding de ul• Establecer float:left para <li> y especificar display:block y width para <a>
  57. 57. LayoutsCréditos: Denis Espinoza
  58. 58. Sprites• Una imagen sprite es una colección de imágenes, todas en un solo archivo. Cliente Servidor Web HTTP request (n) <img .. /> REDUCIR HTTP RRQ <img …/> <img … /> <img …/>

×