Ayuda ejercicios unidad 17: Estilos CSS Avanzados

Ejercicio 3: Controles de Fondo.

1 Abre el archivo estiloblog.css.

2 En la etiqueta body añade la siguiente línea:

body {

  font-family: Tahoma;

  font-size: 14px;

  letter-spacing: 1px;

  color: black;



  background: url(imagenes/fondo_body.gif) no-repeat;

}

3 Escribe el siguiente estilo para el bloque con id contenedor:

#contenedor {

  background: white url(imagenes/fondo.gif) no-repeat;

}

4 Escribe el siguiente estilo para el bloque con id seccion:

#seccion {

  background: white url(imagenes/fondo_seccion.gif) no-repeat;

}

5 En estilo para la clase titulo añade la siguiente línea:

.titulo {

  font-size: 18px;



  background: url(imagenes/titulo.gif) no-repeat;

}

6 En el estilo para los enlaces de los párrafos añade la siguiente línea:

p a, li a {

  text-decoration: none;

  color: black;



  background-color: #CF6;

}

Ejercicio 4: Controles de Márgenes y Bordes.

1 Abre el archivo estiloblog.css.

2 En la etiqueta body añade la siguiente línea:

body {

  font-family: Tahoma;

  font-size: 14px;

  letter-spacing: 1px;

  color: black;

  background: url(imagenes/fondo_body.gif) no-repeat;



  margin: 0;

}

3 En el estilo para el elemento con id seccion añade estas líneas:

#seccion {

  background: white url(imagenes/fondo_seccion.gif) no-repeat;



  border-right: 2px solid black;

  border-left: 2px solid black;

  border-bottom: 2px solid black;

  padding: 20px;

  padding-top: 90px;

}

4 Crea este estilo para los formularios dentro del bloque con id seccion:

#seccion form {

  margin-bottom: 10px;

}

5 Crea este estilo para el bloque con id contenido:

#contenido {

  padding: 190px 300px 30px 30px;

}

6 A la clase titulo añádele estas líneas:

.titulo {

  font-size: 18px;

  background: url(imagenes/titulo.gif) no-repeat;



  padding-top: 30px;

  padding-left: 35px;

}

7 Al estilo de los enlaces que se encuentran dentro de un párrafo añádele estas líneas:

p a, li a {

  text-decoration: none;

  color: black;

  background-color: #CCFF66;



  padding-left: 2px;

  padding-right: 2px;

}

8 y 9 A la lista dentro de seccion, añádele estas líneas:

#seccion ul {

  list-style-type: none;



  padding: 0;

  margin: 35px 0 0;

}

10 Crea la clase y defínele el borde inferior:

.borde_inferior {

  border-bottom: #000 1px solid;

}

Ejercicio 5: Controles de Bloque.

1 Abre el archivo estiloblog.css.

2 Al estilo para el elemento con id contenedor añádele esta línea:

#contenedor {

  background: white url(imagenes/fondo.gif) no-repeat;



  width: 800px;

}

3 Al estilo para el elemento con id seccion añádele esta línea:

#seccion {

  background: white url(imagenes/fondo_seccion.gif) no-repeat;

  border-right: 2px solid black;

  border-left: 2px solid black;

  border-bottom: 2px solid black;

  padding: 20px;

  padding-top: 90px;



  width: 136px;

}

Ejercicio 6: Controles de Posición.

1 Abre el archivo estiloblog.css.

2 Añade estas líneas al estilo para el elemento con id seccion:

#seccion {

  background: white url(imagenes/fondo_seccion.gif) no-repeat;

  border-right: 2px solid black;

  border-left: 2px solid black;

  border-bottom: 2px solid black;

  padding: 20px;

  padding-top: 90px;

  width: 136px;



  position: absolute;

  top: 166px;

  left: 533px;

}

 Cursos Informática Gratuitos