CSS en XML - Soluciones

Se ofrecen a continuación unas posibles soluciones de los ejercicios CSS en XML . Estos ejercicios se pueden resolver de varias maneras.

CSS - Ejercicio 1 - Párrafos

CSS - Ejercicio 1-1 - Solución

titulo, autor, fechaPublicacion {
  display: block;
}

CSS - Ejercicio 1-2 - Solución

titulo, autor, fechaPublicacion {
  display: block;
  font-family: sans-serif;
}

titulo {
  font-weight: bold;
}

fechaPublicacion {
  border-bottom: black 1px solid;
  margin-bottom: 10px;
}

CSS - Ejercicio 1-3 - Solución

biblioteca {
  font-family: sans-serif;
}

libro, titulo, autor, fechaPublicacion {
  display: block;
}

titulo {
  font-weight: bold;
}

fechaPublicacion {
}

libro {
  background-color: lightgreen;
  border: black 2px solid;
  margin: 10px;
  padding: 10px;
}

CSS - Ejercicio 1-4 - Solución

libro, titulo, autor, fechaPublicacion {
  display: block;
}

biblioteca {
  background-color: lightgrey;
  font-family: sans-serif;
}

libro {
  background-color: lightgreen;
  border: black 2px solid;
  margin: 10px;
}

titulo {
  background-color: white;
  border-bottom: black 2px solid;
  font-weight: bold;
  padding-left: 5px;
}

autor {
  padding-left: 5px;
}

fechaPublicacion {
  padding-left: 5px;
}

CSS - Ejercicio 2 - Listas

CSS - Ejercicio 2-1 - Solución

nombreCentro {
  display: block;
}

web {
  display: block;
}

ciclo {
  display: block;
}

nombre, grado, decretoTitulo {
  display: list-item;
  list-style: disc inside;
  margin-left: 10px;
}

CSS - Ejercicio 2-2 - Solución

ies {
  font-family: sans-serif;
}

nombreCentro {
  display: block;
  font-size: 150%;
  margin: 10px;
}

web {
  display: block;
  margin: 10px;
}

ciclo {
  display: block;
}

nombre {
  display: block;
  margin-left: 10px;
  margin-top: 10px;
}

grado, decretoTitulo {
  display: list-item;
  list-style: disc inside;
  margin-left: 20px;
}

CSS - Ejercicio 2-3 - Solución

ies {
  font-family: sans-serif;
}

nombreCentro {
  display: block;
  font-size: 150%;
  margin: 10px;
}

web {
  display: block;
  margin: 10px;
}

ciclo {
  display: block;
  counter-reset: contador;
  margin-bottom: 10px;
}

nombre:before, grado:before, decretoTitulo:before {
  content: counter(contador, lower-alpha) ". ";
}

nombre, grado, decretoTitulo {
  display: block;
  margin-left: 40px;
  counter-increment: contador;
  list-style: lower-alpha inside;
}

CSS - Ejercicio 2-4 - Solución

ies {
  font-family: sans-serif;
}

nombreCentro {
  display: block;
  font-size: 150%;
  margin: 10px;
}

web {
  display: block;
  margin: 10px;
}

ciclos {
  counter-reset: cuentaciclos;
}

ciclo {
  display: block;
}

nombre:before {
  content: counter(cuentaciclos) ". ";
  counter-increment: cuentaciclos;
}

nombre {
  display: block;
  margin-top: 10px;
  margin-left: 30px;
  text-indent: -15px;
}

grado, decretoTitulo {
  display: list-item;
  list-style: disc inside;
  margin-left: 40px;
}

CSS - Ejercicio 3 - Tablas

CSS - Ejercicio 3-1 - Solución

ies {
  font-family: sans-serif;
}

nombreCentro {
  display: block;
  font-size: 120%;
}

web {
  display: block;
  margin-bottom: 10px;
}

ciclos {
  display: table;
  border-spacing: 10px;
  border: black 1px solid;
  margin-left: auto;
  margin-right: auto;
}

ciclo {
  display: table-row;
}

nombre, grado, decretoTitulo {
  background-color: white;
  border: black 1px solid;
  display: table-cell;
  padding: 10px;
}

CSS - Ejercicio 3-2 - Solución

ies {
  font-family: sans-serif;
  display: table;
  border-spacing: 10px;
  border: black 1px solid;
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
}

nombreCentro {
  display: table-caption;
  text-align: center;
  background-color: #DDDDDD;
  font-size: 150%;
  text-align: center;
  margin-bottom: 5px;
}

web {
  display: none;
}

ciclos {
}

ciclo {
  display: table-row;
}

nombre, grado, decretoTitulo {
  background-color: white;
  border: black 1px solid;
  display: table-cell;
  padding: 10px;
}

CSS - Ejercicio 3-3 - Solución

ies {
  font-family: sans-serif;
}

nombreCentro {
  display: block;
  float: left;
  font-size: 120%;
}

web {
  display: block;
  float: right;
  font-size: 120%;
  margin-bottom: 10px;
}

ciclos {
  display: block;
  clear: both;
}

ciclo {
  display: table;
  border-spacing: 10px;
  border: black 1px solid;
  font-size: 120%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  width: 50%;
}

nombre {
  display: table-caption;
  background-color: #DDDDDD;
  text-align: center;
  margin-bottom: 5px;
}

grado, decretoTitulo {
  background-color: white;
  border: black 1px solid;
  display: table-cell;
  padding: 10px;
}

CSS - Ejercicio 3-4 - Solución

ies {
  font-family: sans-serif;
}

nombreCentro {
  display: block;
  float: right;
  font-size: 120%;
}

web {
  display: block;
  float: left;
  font-size: 120%;
  margin-bottom: 10px;
}

ciclos {
  display: block;
  clear: both;
}

ciclo {
  display: table;
  border-spacing: 10px;
  border: black 1px solid;
  float: left;
  margin: 10px;
}

nombre, grado, decretoTitulo {
  background-color: lightgreen;
  display: table-row;
  padding: 10px;
}