12 - Definición de estilos por medio de clases.




Problema:

Problema 1:

Definir en la hoja de estilo estas dos clases:

.subrayado {
  color:#00aa00;
  text-decoration:underline;
}
.tachado {
  color:#00aa00;
  text-decoration:line-through;
}

Luego, en la página html, definir un título con nivel h1 (subrayar todo el título). Seguidamente un párrafo que tenga algunas palabras subrayadas y otras tachadas (utilizar el elemento span para asignar estilos a una palabra)

<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<h1 class="subrayado">Estructuras repetitivas en Java</h1>
<p>
Hasta ahora hemos empleado estructuras <span class="subrayado">
SECUENCIALES</span> y <span class="subrayado">CONDICIONALES</span>.
 Existe otro tipo de estructuras tan importantes como las anteriores
 que son las estructuras <span class="subrayado">REPETITIVAS</span>.
</p>
<p>
Las estructuras repetitivas son más 
<span class="tachado">sencillas</span> complejas. 
</p>
</body>
</html>

.subrayado {
  color:#00aa00;
  text-decoration:underline;
}
.tachado {
  color:#00aa00;
  text-decoration:line-through;
}


Problema 2:

Definir estas dos reglas en la hoja de estilo externa. Luego crear una página HTML que contenga 3 preguntas y 3 respuestas. A cada pregunta y respuesta disponerla en un párrafo distinto. Asignar los estilos .pregunta y .respueta

.pregunta {
  font-family:verdana;
  font-size:14px;
  font-style:italic;
  color:#0000aa;
}
.respuesta {
  font-family:verdana;
  font-size:12px;
  font-style:normal;
  text-align:justify;
  color:#555555;
}

<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<p class="pregunta">¿Cuál de estos tres lenguajes es el más utilizado?</p>
<p class="respuesta">Java</p>
<p class="respuesta">C</p>
<p class="respuesta">C++</p>

<p class="pregunta">¿Qué posición se ubica el lenguaje C#?</p>
<p class="respuesta">4</p>
<p class="respuesta">5</p>
<p class="respuesta">10</p>

<p class="pregunta">¿Qué posición ocupa el PHP?</p>
<p class="respuesta">7</p>
<p class="respuesta">10</p>
<p class="respuesta">20</p>
</body>
</html>

.pregunta {
  font-family:verdana;
  font-size:14px;
  font-style:italic;
  color:#0000aa;
}
.respuesta {
  font-family:verdana;
  font-size:12px;
  font-style:normal;
  text-align:justify;
  color:#555555;
}
Ver solución


Retornar