Estilos CSS

SEPTIEMBRE 2022

Estilos CSS

Para principiantes

Color y fondo

• color : color del texto
• background-color:Color de fondo
• background-image:imagen de fondo
• Background-size:Tamaño del fondo
• opacity:opacidad de un elemento

Estilos para fuentes

• font-size: Tamaño de la fuente
• font-weight: Anchura de los caracteres.
• font-family:Familias de fuentes
• font-style:Estilo de la fuente
• font-variant:Convierte a mayúsculas

Estilos para texto

• text-indent: Desplazamiento de la primera línea del texto
• text-align: Anchura de los caracteres.
• text-decoration: Efectos de subrayado y tachado
• text-transform:Transformación a mayúsculas / minúsculas
• vertical-align:Alineación vertical

Estilos para tablas

• empty-cells: Visibilidad de los bordes de celdas sin contenido
• border-spacing: Espaciado entre los bordes de celdas adyacentes
• border-collapse:Selección del modelo de los bordes
• table-layout:Formato de las celdas, filas y columnas
• caption-side:Posición del título respecto la tabla

Tabla

Pseudo-clases para los estados de un elemento

• focus: Visibilidad de los bordes de celdas sin contenido
• active: Espaciado entre los bordes de celdas adyacentes
• hover:Selección del modelo de los bordes
• visited:Formato de las celdas, filas y columnas
• link:Posición del título respecto la tabla

Márgenes, relleno y bordes

• border-radius:Curvatura del borde
• border-style: Espaciado entre los bordes de celdas adyacentes
• padding:Curvatura del borde
• border-color:Formato de las celdas, filas y columnas
• border:Posición del título respecto la tabla
• Margin:Ancho de los margenes

Comportamiento y contenedores

• display:Comportamiento del contenedor
• position: Esquema de posicionamiento
• top right bottom left:Desplazamiento de la caja
• visibility:Muestra u oculta un elemento ocupando el espacio
• float:Posicionamiento flotante

Ejemplos

SEPTIEMBRE 202

Como funciona los estilos mas importantes css

Colores y fondos

Estilos para fuentes

Vista

Estilos para texto

Vista

Estilo para tablas

Vista

Enero

Evento 1

Lorem ipsum dolor sit amet, consectetuer.

30

31

Lorem ipsum dolor sit amet, consectetuer.

Evento 2

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

Evento 3

Lorem ipsum dolor sit amet, consectetuer.

27

28

29

30

31

Márgenes, relleno y bordes

Vista

MUCHAS GRACIAS POR SU ATENCIÓN!

Siéntase en la libertad de repasar las diapositivas cuantas veces desee para comprender cada una de las etiquetas. Le deseamos un provechoso aprendizaje!