CSS

877 views
836 views

Published on

CSS, divs and a little about forms

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
877
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
52
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

CSS

  1. 1. Laboratorio N° 2 pacd1985
  2. 2. <ul><li>Los estilos son mecanismos para definir la apariencia física de los elementos html. </li></ul><ul><li>Pueden ser añadidos directamente a los elementos utilizando el atributo style o indirectamente con hojas de estilo (archivos CSS). </li></ul>
  3. 4. <ul><li>Este atributo se ha extendido a la mayoría de los elementos html. </li></ul><ul><li>style=“nom_elem1:val_elem1;nom_elem2:val_elem2;…&quot; </li></ul>
  4. 5. <ul><li>Algunos ejemplos: </li></ul><ul><li>style=&quot;background-color:yellow“ </li></ul><ul><li>style=&quot;font-size:10px&quot; </li></ul><ul><li>style=&quot;font-family:Times&quot; </li></ul><ul><li>style=&quot;text-align:center&quot; </li></ul>
  5. 6. <ul><li><body style=&quot;background-color:PowderBlue;&quot;> </li></ul><ul><li><h1>Este es un header simple.</h1> </li></ul><ul><li><p style=&quot;font-family:verdana;color:red&quot;> </li></ul><ul><li>Este es un texto en verdana de color rojo. </li></ul><ul><li></p> </li></ul><ul><li><p style=&quot;font-family:times;color:green&quot;> </li></ul><ul><li>Este es un texto en times de color verde. </li></ul><ul><li></p> </li></ul><ul><li><p style=&quot;font-size:30px&quot;> </li></ul><ul><li>Este texto es de 30 pixeles de tamaño </li></ul><ul><li></p> </li></ul><ul><li></body> </li></ul>
  6. 7. <ul><li>Los estilos son normalmente almacenados en hojas de estilo. </li></ul><ul><li>Una hoja de estilo puede ser aplicada a varias páginas web. Esto centraliza los cambios. </li></ul><ul><li>Una página web puede utilizar mas de una hoja de estilo. </li></ul>
  7. 8. <ul><li>p,li,th,td </li></ul><ul><li>{ </li></ul><ul><li>font-size: 75%; </li></ul><ul><li>} </li></ul><ul><li>body </li></ul><ul><li>{ </li></ul><ul><li>background-color: #ffffff; </li></ul><ul><li>} </li></ul><ul><li>h1,h2,h3,hr </li></ul><ul><li>{ </li></ul><ul><li>color:black; </li></ul><ul><li>} </li></ul>
  8. 9. <ul><li>Una hoja de estilo puede ser interna o externa. </li></ul><ul><li>Las hojas de estilo internas son creadas dentro del documento html y utilizan el tag style y son creadas dentro del head. </li></ul><ul><li>Una hoja de estilo externa tiene la extensión .css . </li></ul>
  9. 10. <ul><li>Un ejemplo de hoja de estilo interna. </li></ul><ul><li><head> </li></ul><ul><li><style type=&quot;text/css&quot;> </li></ul><ul><li>hr {color: sienna} </li></ul><ul><li>p {margin-left: 20px} </li></ul><ul><li>body {background-image: url(&quot;images/back40.gif&quot;)} </li></ul><ul><li></style> </li></ul><ul><li></head> </li></ul>
  10. 11. <ul><li>Un ejemplo de hoja de estilo externa referenciada. </li></ul><ul><li><head> </li></ul><ul><li><link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=“estilo.css&quot; /> </li></ul><ul><li></head> </li></ul><ul><li>En este caso, la hoja de estilo se llama estilo.css . </li></ul>
  11. 12. <ul><li>¿Qué estilo será usado si hay mas de uno especificado para un mismo elemento html? </li></ul><ul><li>Se podría decir que hay una hoja de estilo “virtual” en la que la prioridad de definiciones es la siguiente: </li></ul><ul><li>Default del navegador </li></ul><ul><li>Hoja de estilo externa </li></ul><ul><li>Hoja de estilo interna </li></ul><ul><li>Atributo style (más alta prioridad) </li></ul>
  12. 13. <ul><li>Si la referencia a una hoja de estilo externa es colocada debajo de una hoja de estilo interna, la externa tiene mayor prioridad. </li></ul>
  13. 14. <ul><li>Tiene tres partes: </li></ul><ul><li>El selector. Es el tag html que se desea definir. </li></ul><ul><li>La propiedad. Es el atributo que se desea definir. </li></ul><ul><li>El valor. Es el valor del atributo. </li></ul>
  14. 15. <ul><li>selector {propiedad: valor} </li></ul><ul><li>Si el valor tiene más de una palabra se deben poner entre comillas. </li></ul><ul><li>p {font-family: &quot;sans serif&quot;} </li></ul><ul><li>Se pueden agrupar selectores así: </li></ul><ul><li>h1,h2,h3,h4,h5,h6 { color: green } </li></ul>
  15. 16. <ul><li>Es una buena práctica definir una propiedad por línea. </li></ul><ul><li>p { </li></ul><ul><li>text-align: center; </li></ul><ul><li>color: black; </li></ul><ul><li>font-family: arial </li></ul><ul><li>} </li></ul>
  16. 17. <ul><li>Se puede definir distintos estilos por elemento clasificándolos. </li></ul><ul><li>p.right {text-align: right} </li></ul><ul><li>p.center {text-align: center} </li></ul><ul><li>En el html: </li></ul><ul><li><p class=&quot;right&quot;> Párrafo a la derecha. </p> </li></ul><ul><li><p class=&quot;center&quot;> Párrafo al centro. </p> </li></ul>
  17. 18. <ul><li>En general: </li></ul><ul><li><[sel] class=“clase1 clase2 …&quot;> Párrafo.</[sel]> </li></ul><ul><li>Tambi én podemos definir clases independientes de un selector para asignarlas indistintamente a cualquier tag. </li></ul><ul><li>.center {text-align: center} </li></ul>
  18. 19. <ul><li>Se puede lograr lo mismo utilizando el atributo id en vez de class . </li></ul><ul><li>#green {color: green} </li></ul><ul><li>p#para1 { text-align: center; color: red } </li></ul><ul><li>Los elementos que tengan el atributo id con el valor “green” y los elementos <p> con el atributo id con el valor “para1” . </li></ul>
  19. 20. <ul><li>También se pueden hacer comentarios. </li></ul><ul><li>/* This is a comment */ </li></ul><ul><li>Para inidicar que un estilo se aplica a todos los elementos se utiliza el selector * . </li></ul><ul><li>Veamos como funcionan las prioridades en la definiciones de estilos. Por ejemplo, tenemos una hoja de estilo externa con la siguiente definición: </li></ul>
  20. 21. <ul><li>h3 </li></ul><ul><li>{ </li></ul><ul><li>color: red; </li></ul><ul><li>text-align: left; </li></ul><ul><li>font-size: 8pt </li></ul><ul><li>} </li></ul>
  21. 22. <ul><li>Y también tenemos una hoja de estilo interna con la siguiente definición: </li></ul><ul><li>h3 </li></ul><ul><li>{ </li></ul><ul><li>text-align: right; </li></ul><ul><li>font-size: 20pt </li></ul><ul><li>} </li></ul>
  22. 23. <ul><li>Ahora, la hoja de estilo “virtual” ser ía: </li></ul><ul><li>h3 </li></ul><ul><li>{ </li></ul><ul><li>color: red; </li></ul><ul><li>text-align: right; </li></ul><ul><li>font-size: 20pt </li></ul><ul><li>} </li></ul>
  23. 24. <ul><li>Define el espacio entre los elementos html. </li></ul>
  24. 25. <ul><li>Define el espacio entre el borde del elemento y el contenido del elemento. </li></ul>
  25. 26. <ul><li>Este tag define una sección de un documento html. </li></ul><ul><li>Se usa para agrupar elementos y formatearlos con estilos. </li></ul><ul><li>Se le puede aplicar los estilos de la misma manera que a cualquier otro elemento html. </li></ul>
  26. 27. <ul><li>Un ejemplo sencillo: </li></ul><ul><li><html> </li></ul><ul><li><body> </li></ul><ul><li><h3>This is a header</h3> </li></ul><ul><li><p>This is a paragraph.</p> </li></ul><ul><li><div style=&quot;color:#00FF00&quot;> </li></ul><ul><li><h3>This is a header</h3> </li></ul><ul><li><p>This is a paragraph.</p> </li></ul><ul><li></div> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  27. 29. <ul><li>Funciona básicamente igual que <div> , aunque se usa más para estilizar contenidos específicos o manipularlos con javascript. </li></ul><ul><li>span.blue {color:lightskyblue;font-weight:bold} </li></ul><ul><li>span.green {color:darkolivegreen;font-weight:bold} </li></ul>
  28. 30. <p> My mother has <span class=&quot;blue&quot;>light blue</span> eyes and my father has <span class=&quot;green&quot;>dark green</span> eyes. </p>
  29. 31. <ul><li>Un formulario se define con el tag <form> . </li></ul><ul><li>Define un área donde poner elementos que generalmente permiten al usuario ingresar información. </li></ul><ul><li>Estos elementos pueden ser inputs, textareas, selects, etc. </li></ul>
  30. 32. <ul><li>Los elementos más usados dentro de un formulario son los <input > . </li></ul><ul><li>Estos pueden ser: </li></ul><ul><li>Text Fields </li></ul><ul><li>Radio Buttons </li></ul><ul><li>Checkboxes </li></ul><ul><li>Submit </li></ul>
  31. 33. <ul><li>Text Fields </li></ul><ul><li><form> First name: <input type=&quot;text&quot; name=&quot;firstname&quot; /> <br /> Last name: <input type=&quot;text&quot; name=&quot;lastname&quot; /> </li></ul><ul><li></form> </li></ul>
  32. 35. <ul><li>Radio Buttons </li></ul><ul><li><form> <input type=&quot;radio&quot; name=&quot;sex&quot; value=&quot;male&quot; /> Male <br /> <input type=&quot;radio&quot; name=&quot;sex&quot; value=&quot;female&quot; /> Female </li></ul><ul><li></form> </li></ul>
  33. 37. <ul><li>Checkboxes </li></ul><ul><li><form> I have a bike: <input type=&quot;checkbox&quot; name=&quot;vehicle&quot; value=&quot;Bike&quot; /> <br /> I have a car: <input type=&quot;checkbox&quot; name=&quot;vehicle&quot; value=&quot;Car&quot; /> <br /> I have an airplane: <input type=&quot;checkbox&quot; name=&quot;vehicle&quot; value=&quot;Airplane&quot; /> </li></ul><ul><li></form> </li></ul>
  34. 39. <ul><li>Submit </li></ul><ul><li><form name=&quot;input&quot; action=&quot;html_form_submit.php&quot; method=&quot;get&quot;> Username: <input type=&quot;text&quot; name=&quot;user&quot; /> <input type=&quot;submit&quot; value=&quot;Submit&quot; /> </li></ul><ul><li></form> </li></ul>
  35. 41. <ul><li>Es un input multil ínea que puede contener un número ilimitado de caracteres. </li></ul><ul><li>Su tamaño puede ser especificado con los atributos rows y cols o con las propiedades de estilo height y width . </li></ul><ul><li><textarea rows=&quot;2&quot; cols=&quot;20&quot;> bla bla bla bla bla bla bla bla bla bla bla bla … </li></ul><ul><li></textarea> </li></ul>
  36. 43. <ul><li>Sirve para mostrar al usuario una lista desplegable de opciones. </li></ul><ul><li><select name=&quot;carlist&quot;> </li></ul><ul><li><option value=&quot;volvo&quot;>Volvo</option> </li></ul><ul><li><option value=&quot;saab&quot;>Saab</option> </li></ul><ul><li><option value=&quot;mercedes&quot;>Mercedes</option> </li></ul><ul><li><option value=&quot;audi&quot;>Audi</option> </li></ul><ul><li></select> </li></ul>

×