Hojas de estilo CSS (Cascade Style Sheets)

3,715 views
3,523 views

Published on

Introducción a las hojas de estilo CSS (Cascade Style Sheets)

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,715
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
151
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Hojas de estilo CSS (Cascade Style Sheets)

  1. 1. Hojas de estilo en cascada (CSS) <ul><li>Introducción a las hojas de estilos </li></ul><ul><li>CSS – Cascade Style Sheets </li></ul><ul><li>Juan Ignacio Rodríguez de León </li></ul><ul><li>jileon (arroba) parcan.es </li></ul>
  2. 2. ¿Qué son las hojas de estilo? <ul><li>Las hojas de estilo son una forma sencilla de modificar la apariencia de una página web cambiando tipografía, colores, fondos, efectos de texto, etc... </li></ul>
  3. 3. Ventajas de usar CSS <ul><li>Consistencia en el estilo de las páginas </li></ul><ul><li>Mayor control sobre la apariencia y la disposición de los elementos </li></ul><ul><li>Optimización de la descarga </li></ul><ul><li>Código HTML más simple y fácil de mantener </li></ul><ul><li>Interacción con javascript </li></ul>
  4. 4. Estructura del CSS <ul><li>Una hoja de estilos se compone de una serie de reglas ( rules ) </li></ul><ul><li>Cada regla, a su vez, consiste en un selector y una declaración </li></ul><ul><li>El selector define cuando se debe aplicar la regla </li></ul><ul><li>La declaración consiste en una lista de características que definen el estilo </li></ul>
  5. 5. Ejemplo <ul><li>h1 { </li></ul><ul><ul><li>color: blue; </li></ul></ul><ul><ul><li>background-color: silver; </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><li>El selector es h1: Esta regla sólo se aplica a los encabezados de nivel 1 </li></ul><ul><li>La declaración define dos características: Las letras serán azules y el fondo gris plata. </li></ul>
  6. 6. Las declaraciones (1) <ul><li>Las declaraciones consisten en dos valores separados por el caracter dos puntos (:) </li></ul><ul><li>La primera parte es el nombre del atributo a modificar </li></ul><ul><li>la segunda parte es el valor de dicho atributo </li></ul><ul><li>font-size: 12pt; </li></ul>
  7. 7. Las declaraciones (2) <ul><li>La lista de declaraciones debe ir separada por el caracter punto y coma (;) </li></ul><ul><li>Si se ponen varios valores y no se separan adecuadamente, la declaración fallará </li></ul><ul><li>Si una declaración no se refleja en la página, lo primero que hay que hacer es mirar si la declaración anterior termina en punto y coma. </li></ul>
  8. 8. Aplicando CSS <ul><li>Hay tres formas de aplicar hojas de estilo a una página: </li></ul><ul><ul><li>En línea (inline) </li></ul></ul><ul><ul><li>Declaración interna (Internal) </li></ul></ul><ul><ul><li>Declaración externa (External) </li></ul></ul>
  9. 9. En linea (inline) <ul><li>Consiste en definir la apariencia de una etiqueta dentro de la misma, usando el atributo style . </li></ul><ul><li><p style=”color: navy”>Hola</p> </li></ul><ul><li>NO se recomienda este estilo, porque debemos intentar en lo posible separar el contenido de los datos de la presentación de los mismos. </li></ul>
  10. 10. Representación Interna <ul><li>Incluyendo las declaraciones de estilo en la sección head de la página HTML </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><style> </li></ul><ul><li>p { color: navy; } </li></ul><ul><li></style> </li></ul><ul><li></head> </li></ul><ul><li><Body>... </li></ul>
  11. 11. Representación externa <ul><li>Consiste en enlazar con un archivo externo que incluye las declaraciones de la hoja de estilos. </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><link rel=”stylesheet” type=”text/css” href=”estilo.css”> </li></ul><ul><li></head> </li></ul><ul><li><Body> </li></ul><ul><li>... </li></ul>
  12. 12. Longitudes y porcentajes <ul><li>Hay una serie de unidades que se pueden usar para expresar una longitud: </li></ul><ul><ul><li>px – pixels </li></ul></ul><ul><ul><li>em – El ancho que ocupa la m en la fuente actual </li></ul></ul><ul><ul><li>ex – La altura de la x en la fuente actual </li></ul></ul><ul><ul><li>pt – puntos tipográficos (1 punto equivale a 1/72 pulgadas) </li></ul></ul><ul><ul><li>cm, mm, in – Centímetros, milímetros, pulgadas </li></ul></ul><ul><ul><li>Cuando el valor es 0, no es necesario indicar las unidades </li></ul></ul>
  13. 13. Colores <ul><li>Para especificar colores se pueden usar tres sintáxis diferentes: </li></ul><ul><ul><li>Usando los nombres predefinidos de 17 colores: </li></ul></ul><ul><ul><ul><li>aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow </li></ul></ul></ul><ul><ul><li>Usando la expresión rgb(r,g,b), donde r, g y b son los componente rojo, verde y azul del color en valores decimales entre 0 y 255 </li></ul></ul><ul><ul><li>Usando la expresión #RRGGGG, donde RR, GG y BB son los componente rojo, verde y azul en hexadecimal </li></ul></ul>
  14. 14. La propiedad display <ul><li>Controla la forma de visualización de cada elemento, puede tener los siguientes valores: </li></ul><ul><ul><li>none – El elemento no se visualizará </li></ul></ul><ul><ul><li>block – El elemento se mostrará como un bloque, con un salto de línea antes y otro después </li></ul></ul><ul><ul><li>inline – El elemento se mostrará como un elemento en línea, sin saltos antes ni después </li></ul></ul><ul><ul><li>list-item – El elemento forma parte de una lista </li></ul></ul>
  15. 15. Posicionamiento <ul><li>Podemos indicar las posiciones de los elementos de cuatro maneras distintas </li></ul><ul><ul><li>Static </li></ul></ul><ul><ul><li>Relative </li></ul></ul><ul><ul><li>Absolute </li></ul></ul><ul><ul><li>Fixed </li></ul></ul>
  16. 16. Posicionamiento con Static <ul><li>Static es el valor por defecto, posiciona las cosas según el orden en que estan dispuestas en la página HTML </li></ul>
  17. 17. Posicionamiento con Relative <ul><li>Relative es muy parecidad a la static , pero podemos desplazar el elemento desde la posición predeterminada dando valores a los atributos left , right , top y bottom . </li></ul>
  18. 18. Posicionamiento con Absolute <ul><li>Absolute nos permite ubicar un elemento de forma absoluta, es decir, indicando su posición con respecto a la página, de nuevo usando los atributos left , right , top y bottom . </li></ul>
  19. 19. Posicionamiento con Fixed <ul><li>Fixed es similar a Absolute , la diferencia es que el elemento quedará fijo en la posicion indicada, aun cuando nos desplazemos por el contenido. Las propiedades left , right , top y bottom se toman en referencia a la ventana del navegador, en vez de a la página. </li></ul>
  20. 20. Elemento flotantes <ul><li>Un elemento puede definir un valor del atributo float , asignadole un valor de none (por defecto), left o right . En ese caso, el elemento se desplazará en el eje x en la dirección indicada, y el resto de los contenidos de la página fluirá en el espacio libre que quede </li></ul><ul><li>Un uso habitual es posicionar una foto a la derecha, por ejemplo, y que el texto se ajuste por la izquierda. </li></ul>
  21. 21. Ejemplo de elemento float

×