- 1. Hojas de estilo en cascada (CSS)
- Introduccin a las hojas de estilos
- 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
-
- 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
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:
-
- 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 .
- 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
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:
-
- 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
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