Módulo 2 / 2ª parte

Cómo se define la presentación de los elementos de una página web

Objetivos de este módulo:
  • Aprender a modificar el estilo de una lista.
  • Aprender a modificar el estilo del texto.
  • Conocer las novedades de CSS3 respecto al uso de los colores.
  • Conocer el funcionamiento y las reglas básicas de los mecanismos "cascada" y "herencia" que se emplean para calcular el valor de una propiedad.
  • Conocer el mecanismo de especificidad de las reglas.
  • Aprender a escribir un CSS que sea fácil de leer y mantener.
  • Conocer el modelo de caja (box model)
2.2- CSS: definir el estilo de una lista (1)

Propiedades de CSS:
  • list-style-type
  • list-style-position 
  • list-style-image.
Práctica 18 con NotePad++:


2.3- CSS: definir el estilo de una lista (2)
2.4- CSS: definir el estilo del texto (1)

Propiedades de CSS:
  • font-family
  • font-size
  • font-weight
  • font-style
  • font-variant
Práctica 20 con NotePad++:


2.5- CSS: definir el estilo del texto (2)

Propiedades de CSS:
  • text-align
  • text-indent
  • text-decoration
  • text-transform
2.6- CSS: definir el estilo del texto (3)

Propiedades de CSS:
  • letter-spacing
  • word-spacing
  • line-height
  • white-space
Práctica 22 con NotePad++:


2.7- CSS: colores en CSS3

Herramienta para construir paletas de colores: HSL color picker

2.8- CSS: ejemplo de uso de colores transparentes

2.9- CSS: cascada y herencia (1) 

La cascada y la herencia son dos mecanismos de CSS que definen las reglas que se aplican para decidir el valor final que toma una propiedad de un elemento concreto de una página web. En el cálculo se tiene que tener en cuenta el valor especificado, el valor calculado, el valor usado y el valor real.

2.10- CSS: cascada y herencia (2)

2.11- CSS: especificidad de las reglas

2.12- CSS: escribir un CSS que sea fácil de leer 


2.13- CSS: ordenar un CSS


2.14- CSS: Modelo de caja (1)

Los elementos de bloque, como los párrafos y listas, se comportan como cajas con un contenido, un relleno, un borde y un margen.


2.15- CSS: Modelo de caja (2)

La nueva propiedad box-sizing permite indicar la forma de calcular la anchura de un elemento de bloque de una página web.

No hay comentarios:

Publicar un comentario