Colegio Nacional Nicolás Esguerra

Etapa 11

Nicolás Medina – 803

Colegio Nacional Nicolás Esguerra

Mira a través de la página web a

continuación para los nuevos
estilos.
Abra la hoja de estilo
Con tu compañero, comenta qué
partes del código CSS crees que
hacen que la página se vea
diferente.
¿Qué hace que toda la página
sea azul?
¿Cómo se colocan las imágenes
a la izquierda de todos los
demás elementos?
¿Qué hizo las esquinas de la
imagen redondeadas?
En los siguientes niveles,
cambiará y agregará nuevos
estilos en esta página.

Nicolás Medina – 803

Colegio Nacional Nicolás Esguerra

Encuentre el código en la hoja

de estilo que hace que el
fondo de toda la página se
vuelva azul claro.
Cambia el código para hacer de
la página un color diferente.
Intenta cambiar el color de
fondo de solo los párrafos.

Nicolás Medina – 803

Colegio Nacional Nicolás Esguerra

Encuentra el bodyconjunto de
reglas en la hoja de estilo.
Discutir con un compañero que
piensa que va a pasar si se
agrega text-align, coloru otras
propiedades de texto para el
bodyconjunto de reglas.
Pruebe algunas propiedades
diferentes para comprobar sus
conjeturas.

Nicolás Medina – 803

Colegio Nacional Nicolás Esguerra

Encuentre las reglas en la

hoja de estilo que establece
el ancho y el color de los
bordes de la imagen.
Cambia el color y el ancho
de tus bordes.
Pruebe algunos estilos
diferentes de borde.
Elegir dotted, dashed, solid,
ydouble
Coloque un borde en otro
tipo de elemento de página,
como uno de los
encabezados o los párrafos.

Nicolás Medina – 803

Colegio Nacional Nicolás Esguerra

Mira la border-
radiuspropiedad
dentro de tu
imgconjunto de
reglas
Discute con tu
pareja lo que crees
que hace la
propiedad.
Pruebe diferentes
valores para el
radio del borde y
decida cuál le
gusta más.

Nicolás Medina – 803

Colegio Nacional Nicolás Esguerra

Mira la
floatpropieda
d dentro de
tu
imgconjunto
de reglas
Discute con tu
pareja lo que
crees que
hace la
propiedad.
Cambiar el
valor de lefta
right.

Nicolás Medina – 803

Colegio Nacional Nicolás Esguerra

Encuentra la propiedad
en la hoja de estilo que
controla el ancho de
las imágenes.
Cambia el ancho de las
imágenes para que
sean más grandes o
más pequeñas.
Cree una nueva regla
con una
heightpropiedad para
controlar la altura de
las imágenes.
Use la widthpropiedad
en el pconjunto de
reglas para cambiar el
ancho de sus párrafos.

Nicolás Medina – 803

Colegio Nacional Nicolás Esguerra

Los márgenes
especifican cuánto
espacio debe haber
alrededor de un
elemento.

Encuentra la
marginpropiedad en el
imgconjunto de reglas.
Cambie el margen para
que sea más grande y
discuta el efecto con un
compañero.
Elige otro tipo de
elemento y dale un
margen, también.

Nicolás Medina – 803

 Pruebe algunas de estas
nuevas propiedades CSS en
Colegio Nacional Nicolás Esguerra
su sitio web personal.

Agregue el estilo de su
elección a su sitio web.
Asegúrese de usar al
menos tres nuevas
propiedades CSS.
Lista de verificación
Se utilizan al menos tres de
las siguientes propiedades
de CSS:

background-color
height
width
border-style
border-radius
border-width
float
margin
¡Sin embargo, te animamos
a que uses más de tres!
Nicolás Medina – 803 Explore propiedades CSS
Colegio Nacional Nicolás Esguerra

Nicolás Medina – 803

Colegio Nacional Nicolás Esguerra

Nicolás Medina – 803