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> <meta charset="UTF-8"> <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; }
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> <meta charset="UTF-8"> <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; }