UAJMS Ejercicios HTML

G U I A D E L A B O R A T O R I O # 13
HOJAS DE ESTILO EN CASCADA
Cascading Style Sheets (CSS)

1.- Entendiendo el modelo de Cajas

Una caja puede contener muchos tipos de objetos.
a.- Padding
Estilo que permite definir espacio entre el contenido y el borde del contenido.

Se pueden crear PADDING individuales:

Otras formas cortas:

Taller I - Lic. Octavio Aguilar M. 1

UAJMS Ejercicios HTML

b.- border
Estilo que permite definir el ancho de la línea en la caja.

d.- margin
Estilo que permite definir la separación de una etiqueta de otra.

Taller I - Lic. Octavio Aguilar M. 2

UAJMS Ejercicios HTML

e.- Display
Establece el tipo de caja generada por un elemento, algunos usos:

Ejemplo:

Otro ejemplo:

Taller I - Lic. Octavio Aguilar M. 3

UAJMS Ejercicios HTML

1.- Ejercicio #1.

La página tiene las siguientes características principales:

a) Las dos cajas son idénticas y tienen borde, fondo y esquinas curveadas.
b) El texto siguiente es un enlace y si colocamos el mouse encima, esta cambia de
color.
c) Usar border-radius (Redondear esquinas)

2.- Ejercicio #2.

Taller I - Lic. Octavio Aguilar M. 4

UAJMS Ejercicios HTML

3.- Ejercicio #3.

Características principales:
a) Las 2 cajas son idénticas y están sombreadas.
b) Usar : box-shadow (Sombras)

Taller I - Lic. Octavio Aguilar M. 5