Your SlideShare is downloading. ×
0
Hojas de estilo (CSS)    Santiago Molina  Dpto. de Computación      UNAN - León
Agenda•   Motivación•   Introducción: ¿Qué es CSS?•   Sintaxis CSS•   Cómo agregar CSS a un doc HTML•   CSS Id y Class•   ...
La peor forma de crear estilos<p><font face="Arial">Bienvenido a planetaCriptón.¡Usted<b>nunca, <i>nunca, <u>NUNCA</u></i>...
¿Qué es CSS?• CSS: Cascading Style Sheets• Describe la apariencia, disposición y presentación  de la información en una pá...
Sintaxis CSS                     Crédito: W3Schoolselector {       property: value;       property: value;       ...      ...
Comentarios CSS• Los usamos para explicar el código y de ayuda  para recordar lo que hemos hecho.• Un comentario CSS inici...
Agregar CSS a doc HTML• Hay tres formas de hacerlo:  – Hoja de estilo externa  – Hoja de estilo interno  – Estilo “inline”
CSS Externo<head>  <link rel="stylesheet" type="text/css" href=“filename" /></head><head>  <link rel="stylesheet" type="te...
CSS Interno• Utilizado cuando un documento tiene un  único estilo.<head>  <style type="text/css">  hr {color:sienna;}  p {...
Estilo inline• No se recomienda, pero puede ser útil:• Se aplica usando la propiedad style en un  elemento HTML<p style="c...
Múltiples estilos en cascada• ¿Qué estilo será usado cuando haya más de  un estilo especificado para un elemento  HTML?P  ...
Selectores Id y class• CSS permite especificar tus propios selectores  llamados “id” y “class”.• El selector “id” se usa p...
Selectores class• El selector “class” se usa para especificar un  estilo para un grupo de elementos.  – Suele ser usado en...
Selector class.center {text-align:center;}• Se puede especificar que sólo ciertos  elementos HTML serán afectados por la c...
Propiedades CSS para coloresp{     color: red;     background-color: yellow;}• color: color del texto del elemento• backgr...
Especificando coloresp { color: red; }h2 { color: rgb(128, 0, 196); }h4 { color: #FF8800; }• Nombre de colores comunes• Có...
Styling Backgrounds• Definir efectos de fondo de un elemento• Propiedades:  – background-color  – background-image  – back...
background-image• Especifica una imagen a usar como fondo de  un elemento• Por defecto, la imagen es repetida para cubrir ...
Imagen de fondo: repeat H. o V.• Algunas imágenes deseamos que se repitan  horizontal o verticalmente.• Repetir horizontal...
Imagen de fondo: no-repeat• En ocasiones queremos que la imagen se  repita una vez:body{  background-image:url(gradient2.p...
Imagen de fondo: attachment• ¿La imagen estará fija o hará scrolling con el  resto del texto?  – background-attachment: fi...
Imagen de fondo: posición• También quisiéramos cambiar la posición de la  imagen para que no estorbe al texto:body{  backg...
Background – shorthand property• Especificar todas las propiedades en una sola  línea:body {background:#ffffff url(img_tre...
Styling text• Propiedades para cambiar el estilo del texto:  – color  – text-align: alineación del texto dentro de su    e...
Text alingmenth1 {text-align:center;}p.date {text-align:right;}p.main {text-align:justify;}
Text decoration• Para fijar o quitar decoraciones al texto:  – overline, underline, line-through, blinkh1 {text-decoration...
Text transformation• Para especificar texto en  mayúsculas, minúsculas o capitalizar la  primera letra de cada palabra.p.u...
Text indentation• Para dar sangría a la primera línea del texto  p {text-indent:50px;}• Más propiedades:  – http://www.w3s...
Styling Fonts• CSS Font families: hay dos tipos de nombres  de familia de fuentes:  – Generic family: un grupo de fuentes ...
Font-family (propiedad)• Establecer varios nombres de fuentes.• Empezar con la fuente que deseamos y  terminar con una fam...
Font size• El valor especificado a la propiedad font-size  puede ser absoluto o relativo:   – Tamaño absoluto:      • Esta...
font-sizeh1 {font-size:40px;}h2 {font-size:30px;}p {font-size:14px;}• vague font sizes: xx-small, x-small, small, medium, ...
font-style y font-weight• font-style: Usado para especificar texto en itálica• Valores posibles: normal, italic, obliquep....
Styling links• Puede atribuírsele un estilo diferente a un  enlace según el estado de éste.• Hay 4 estados:  – a:link – no...
Styling links [2]a:link {color:#FF0000;} /* unvisited link */a:visited {color:#00FF00;} /* visited link */a:hover {color:#...
Listas• Con las propiedades para listas podemos  establecer:   – Marcadores para listas ordenadas   – Marcadores para list...
Listas: list-style-type (propiedad)Valores para listas desordenadas   Valores para listas ordenadasnone: Sin marcador     ...
Styling Tables• Bordes      table, th, td{             border: 1px solid black;      }• Width, Height      Table {        ...
Styling Tables [2]• Text alignment      td{            text-align:right;            vertical-align:bottom;      }• Padding...
CSS Box Model• En CSS el término es usado cuando hablamos  de diseño y disposición.• Esencialmente es una caja que envuelv...
CSS Box Model• Margin: no tiene color de fondo y es transparente.• Border: es afectado por el color de fondo de la caja.• ...
CSS Box Model: alto y ancho de un              elemento• Al especificar el ancho (width) y alto (height) de  un elemento, ...
CSS Border• Las propiedades permiten especificar el estilo  y color del borde de un elemento.• border-style:  dotted, dash...
Border: lados individuales• En CSS es posible especificar diferentes bordes  para los diferentes lados.p{     border-top-s...
border-style: single property• border-style:dotted solid double dashed;   –   top border es dotted   –   right border es s...
Margin• No posee color de fondo, completamente  transparente.• Los márgenes top, right, bottom y left pueden  ser cambiado...
Margin - Shorthand propertymargin:25px 50px 75px 100px;  • top, right, bottom, leftmargin:25px 50px 75px;  • top, right y ...
Padding• Define el espacio entre el borde y contenido  de un elemento.• Es afectado por el color de fondo del  elemento.• ...
Padding - Shorthand property• padding:25px 50px 75px 100px;  – top, right, bottom, left• padding:25px 50px 75px;  – top, r...
CSS Avanzado• Agrupando selectorsh1,h2,p{color:green;}• Anidando selectorsp{color:blue;text-align:center;}.marked{backgrou...
Propiedad display• Establece el tipo de box model con que un  elemento se visualiza.• Puede ser: none, inline, block, comp...
Propiedad visibility• Establece si un elemento será mostrado o no  en pantalla.• El elemento mantiene su espacio, aunque n...
Propiedad position• Static: posicionamiento por defecto.    – El elemento es siempre posicionado de acuerdo      con el fl...
Propiedad position [2]• Relativeh2.pos_left{position:relative;left:-20px;}h2.pos_right{position:relative;left:20px;}• Abso...
Propiedad z-index• Overlapping de elementos    – Algunos elementos pueden solaparse cuando se      cambia su flujo normal ...
Barra de navegación• Básicamente se requiere de una lista de  enlaces: ul y li• Remover bullets, margin y padding de ul• E...
LayoutsCréditos: Denis Espinoza
Sprites• Una imagen sprite es una colección de  imágenes, todas en un solo archivo.    Cliente                       Servi...
Upcoming SlideShare
Loading in...5
×

hojas de_estilo_css

958

Published on

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

No Downloads
Views
Total Views
958
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
27
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of " 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 …/>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×