LA EVALUACIÓN DE LA ATENCIÓN : METODOLOGÍA DEL ESTUDIO CASCADE
Hojas de estilo CSS (Cascade Style Sheets)
-
Upload
juan-rodriguez -
Category
Technology
-
view
3.356 -
download
8
description
Introducción a las hojas de estilo CSS (Cascade Style Sheets)
Transcript of Hojas de estilo CSS (Cascade Style Sheets)
- 1. Hojas de estilo en cascada (CSS)
- Introduccin a las hojas de estilos
- CSS Cascade Style Sheets
- Juan Ignacio Rodrguez de Len
- jileon (arroba) parcan.es
2. Qu son las hojas de estilo?
- Las hojas de estilo son una forma sencilla de modificar la apariencia de una pgina web cambiando tipografa, colores, fondos, efectos de texto, etc...
3. Ventajas de usar CSS
- Consistencia en el estilo de las pginas
- Mayor control sobre la apariencia y la disposicin de los elementos
- Optimizacin de la descarga
- Cdigo HTML ms simple y fcil de mantener
- Interaccin con javascript
4. Estructura del CSS
- Una hoja de estilos se compone de una serie de reglas ( rules )
- Cada regla, a su vez, consiste en un selector y una declaracin
- El selector definecuandose debe aplicar la regla
- La declaracin consiste en una lista de caractersticas que definen el estilo
5. Ejemplo
- h1 {
-
- color: blue;
-
- background-color: silver;
-
- }
- El selector es h1: Esta regla slo se aplica a los encabezados de nivel 1
- La declaracin define dos caractersticas: Las letras sern azules y el fondo gris plata.
6. Las declaraciones (1)
- Las declaraciones consisten en dos valores separados por el caracter dos puntos (:)
- La primera parte es el nombre del atributo a modificar
- la segunda parte es el valor de dicho atributo
- font-size: 12pt;
7. Las declaraciones (2)
- La lista de declaraciones debe ir separada por el caracter punto y coma (;)
- Si se ponen varios valores y no se separan adecuadamente, la declaracin fallar
- Si una declaracin no se refleja en la pgina, lo primero que hay que hacer es mirar si la declaracin anterior termina en punto y coma.
8. Aplicando CSS
- Hay tres formas de aplicar hojas de estilo a una pgina:
-
- En lnea (inline)
-
- Declaracin interna (Internal)
-
- Declaracin externa (External)
9. En linea (inline)
- Consiste en definir la apariencia de una etiqueta dentro de la misma, usando el atributostyle .
-
Hola
- NO se recomienda este estilo, porque debemos intentar en lo posible separar el contenido de los datos de la presentacin de los mismos.
10. Representacin Interna
- Incluyendo las declaraciones de estilo en la seccinheadde la pgina HTML
- p { color: navy; }
- ...
11. Representacin externa
- Consiste en enlazar con un archivo externo que incluye las declaraciones de la hoja de estilos.
- ...
12. Longitudes y porcentajes
- Hay una serie de unidades que se pueden usar para expresar una longitud:
-
- px pixels
-
- em El ancho que ocupa la m en la fuente actual
-
- ex La altura de la x en la fuente actual
-
- pt puntos tipogrficos (1 punto equivale a 1/72 pulgadas)
-
- cm, mm, in Centmetros, milmetros, pulgadas
-
- Cuando el valor es 0, no es necesario indicar las unidades
13. Colores
- Para especificar colores se pueden usar tres sintxis diferentes:
-
- Usando los nombres predefinidos de 17 colores:
-
-
- aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow
-
-
- Usando la expresin 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
-
- Usando la expresin #RRGGGG, donde RR, GG y BBson los componente rojo, verde y azul en hexadecimal
14. La propiedad display
- Controla la forma de visualizacin de cada elemento, puede tener los siguientes valores:
-
- none El elemento no se visualizar
-
- block El elemento se mostrar como un bloque, con un salto de lnea antes y otro despus
-
- inline El elemento se mostrar como un elemento en lnea, sin saltos antes ni despus
-
- list-item El elemento forma parte de una lista
15. Posicionamiento
- Podemos indicar las posiciones de los elementos de cuatro maneras distintas
-
- Static
-
- Relative
-
- Absolute
-
- Fixed
16. Posicionamiento con Static
- Statices el valor por defecto, posiciona las cosas segn el orden en que estan dispuestas en la pgina HTML
17. Posicionamiento con Relative
- Relativees muy parecidad a lastatic , pero podemos desplazar el elemento desde la posicin predeterminada dando valores a los atributosleft ,right ,topybottom .
18. Posicionamiento con Absolute
- Absolutenos permite ubicar un elemento de forma absoluta, es decir, indicando su posicin con respecto a la pgina, de nuevo usando los atributosleft ,right ,topybottom .
19. Posicionamiento con Fixed
- Fixedes similar aAbsolute , la diferencia es que el elemento quedar fijo en la posicion indicada, aun cuando nos desplazemos por el contenido. Las propiedadesleft ,right ,topybottomse toman en referencia a la ventana del navegador, en vez de a la pgina.
20. Elemento flotantes
- Un elemento puede definir un valor del atributofloat , asignadole un valor denone(por defecto),leftoright . En ese caso, el elemento se desplazar en el eje x en la direccin indicada, y el resto de los contenidos de la pgina fluir en el espacio libre que quede
- Un uso habitual es posicionar una foto a la derecha, por ejemplo, y que el texto se ajuste por la izquierda.
21. Ejemplo de elemento float