Ir al contenido principal

Ejemplo tres con HTML y CSS


 En el siguiente enlace se muestra el código no modificado que da solución a la anterior imagen.
codigo_sin_modifica

Ahora se debe aplicar los siguientes cambios al código, esta vez la parte de CSS se debe hacer en un archivo aparte y en el archivo principal (.html) se llama el archivo .css.

  • Tienes que tener en cuenta los siguientes requisitos:
    • El texto principal:
      • El color del texto es azul: #00F.
      • El color de fondo del texto es verde claro: #CFC.
      • El tipo de letra es la secuencia: Georgia, Cambria, serif.
      • El tamaño del texto: 16px.
    • El encabezado de nivel 1:
      • El color del texto es rojo claro: #F00.
      • El tipo de letra es la secuencia: Verdana, Calibri, sans-serif.
      • El tamaño del texto: 32px.
    • El encabezado de nivel 2:
      • El color del texto es rojo claro: #A00.
      • El tipo de letra es la secuencia: Verdana, Calibri, sans-serif.
      • El tamaño del texto: 24px.
    • El color de los campos de los datos del libro es verde oscuro: #060.
    • El texto "Internet" y la "Web" cuando actúan como sustantivos:
      • El tamaño del texto: 20px.
      • Texto en negrita.
    • El texto "Hypertext Markup Language", "Cascading Style Sheets" y los acrónimos "HTML" y "CSS":
      • El color del texto es blanco: #FFF.
      • El color de fondo del texto es negro: #000.
      • Texto en cursiva.
    Consejo: puedes utilizar las etiquetas de HTML como <span>, <em> y <strong> para aplicar un estilo CSS a cualquier parte del texto.
 En los siguientes enlace se muestran el código .html y el código .css.
Los dos archivos deben estar en la misma carpeta de lo posible.
código.html
código.css

Comentarios

Publicar un comentario

Entradas más populares de este blog

Formulario usando colores

Formulario usando colores Se desea obtener la siguiente imagen: Código  en html <!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8" /> <title>Registro - iDESWEB</title> <style> body {   font-family: Arial, Helvetica, sans-serif;   width: 90%;   margin: 0 auto; } header {   text-align: center; } h1, h2 {   font-family: Georgia, serif; } h1 {   font-size: 3em; } fieldset {   margin: 1em auto; } legend {   font-size: 1.2em;   font-weight: bold;   text-transform: uppercase; } label {   font-weight: bold;   display: block; } input:focus, select:focus {   background-color: yellow; } input:hover, select:hover {   background-color: red; } #boton-crear {   font-size: 2em;   padding: 0.5em; } .inline {   display: inline; } .centrado {   text-align: center; } </style> </head...
Publicar un comentario
Leer más

Listas usando números romanos, círculos, cuadros y letras griegas

Listas usando números romanos, círculos, cuadros y letras griegas A partir de la página web que se te proporciona, debes escribir las reglas CSS necesarias para lograr una página web que tenga el mismo aspecto que la siguiente imagen: Código en html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Ejemplo de listas</title> <style> .lista-sin {   list-style-type: none; } .lista-circulos {   list-style-type: circle;  <!--jcon esta parte se modifica que aparezca la lista-circulos con círculos y así con los demas--> } .lista-cuadrados {    list-style-type: square; } .lista-romanos {   list-style-type: lower-roman; } .lista-griegos {   list-style-type: lower-greek; } </style> </head> <body> <p>Lista sin elemento gráfico:</p> <ul class="lista-sin"> <li>...
1 comentario
Leer más

Curriculum Vitae

Ejercicio: A partir de la página web que se te proporciona, debes crear una página web que tenga el mismo aspecto que la siguiente imagen: Código  htm l: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Curriculum Vitae de Bruce Wayne</title> <style> body {   font-family: Arial,Verdana,sans-serif; } h1 {  <!--Este se usa para el como se va a ver todos los lineas con h1-->   font-family: Georgia,Times,serif;   font-size: 32px;   font-variant: small-caps; } h2 { <!--Este se usa para el como se va a ver todos los lineas con h2-->   font-family: Georgia,Times,serif;   font-size: 24px;   font-style: italic;   font-variant: small-caps; } li  {   font-weight: bold; } strong {   font-weight: normal; } </style> </head> <body> <h1>Curriculum Vitae de Bruce Wayne</h1> <h2>Datos personales...
1 comentario
Leer más