Documentos de Académico
Documentos de Profesional
Documentos de Cultura
font-family
Sólo se pueden especificar fuentes que tenga el usuario instaladas en
su sistema operativo. ¿Pero cómo sabemos cuales son?. Existen
algunas fuentes que se considera seguras y que por tanto podemos
contar con que estarán disponibles en casi cualquier sistema
operativo.
Además de esto podemos introducir una lista de fuentes separadas
por comas. De este modo en caso de que no se encuentre la primera
fuente especificada se intentará con las posteriores.
ü ESTILOS EN LINEA
ü ESTILOS INTERNOS
ü ESTILOS EXTERNOS
ESTILOS EN LINEA
Esta forma de aplicar estilos, se debe evitar siempre que sea
posible ya que es una mala práctica.
A cualquier etiqueta HTML puedes añadirle la propiedad "style" y
dentro de ella añadir tantos estilos como desees separados por
punto y coma, por ejemplo:
• Tipo de etiqueta
h1 {
color: white;
}
• Por clase
.rojo {
color: red;
}
• Por ID
#principal {
color: blue;
}
HERENCIA DE ESTILOS
PADDING:
ü El padding define el espacio entre el borde y el contenido.
ü El padding es transparente.
BORDER:
ü El border permite especificar el estilo del borde del
elemento.
MARGIN:
ü El margin define el espacio alrededor de los elementos.
ü El margin es transparente.
EJEMPLO DE MODELO DE CAJAS
EJEMPLO DE MODELO DE CAJAS
¿El ancho es realmente 300px?
¡La respuesta es NO!
ü El ancho total de un element debe ser calculado como:
Ancho total = width + left padding + right padding + left
border + right border + left margin + right margin
ü El alto total de un element debe ser calculado como:
Total element height = height + top padding + bottom padding
+ top border + bottom border + top margin + bottom margin
Entonces…
300px + (25px)*2 + (25px)*2 + (25px)*2 = 450px
EJERCICIO - CSS3
FOTOGRAMAS (KEYFRAMES)
Para definir los fotogramas de una animación utilizaremos la
regla @keyframes, la cuál es muy sencilla de utilizar y se basa
en el siguiente esquema:
ANIMACIONES
FOTOGRAMAS (KEYFRAMES)