css

1. 1Todos los párrafos deben tener color rojo.
   
   [blank_start]p {[blank_end]
   [blank_start]color: red;[blank_end]
   }

   1. Ap {
   2. Bcolor: red;
2. 2Pon el párrafo con el id="para1" a rojo.
   
   <!DOCTYPE html>
   <html>
   <head>
   [blank_start]<style>[blank_end]
   [blank_start]#para1 {[blank_end]
   [blank_start]color: red;[blank_end]
   [blank_start]}[blank_end]
   [blank_start]</style>[blank_end]
   </head>
   <body>
   
   <h1>This is a Heading</h1>
   <p id="para1">This is a paragraph.</p>
   <p>This is another paragraph.</p>
   
   </body>
   </html>
   

   1. A<style>
   2. B#para1 {
   3. Ccolor: red;
   4. D}
   5. E</style>
3. 3Para la clase "coloreame" pon el color rojo.
   
   <!DOCTYPE html>
   <html>
   <head>
   <style>
   [blank_start].colortext {[blank_end]
   [blank_start]color: red;[blank_end]
   [blank_start]}[blank_end]
   </style>
   </head>
   <body>
   
   <h1>Pidiendo colores</h1>
   <p>Yo quiero ser negro.</p>
   <p class="coloreame">yo tmabien quiero ser rojo.</p>
   <p class="coloreame">quiero ser rojo.</p>
   
   </body>
   </html>

   1. A.colortext {
   2. Bcolor: red;
   3. C}
4. 4Color rojo para los párrafos y para h1.
   
   <!DOCTYPE html>
   <html>
   <head>
   <style>
   [blank_start]p, h1 {[blank_end]
   [blank_start]color:red;[blank_end]
   }
   </style>
   </head>
   <body>
   
   <h1>Debería ser rojo</h1>
   <h2>Debería ser negro</h2>
   <p>yo también quiero ser rojo.</p>
   <p>quiero ser rojo.</p>
   </body>
   </html>

   1. Ap, h1 {
   2. Bcolor:red;
5. 5Añade una css externa.
   
   <!DOCTYPE html>
   <html>
   <head>
   <[blank_start]link[blank_end] [blank_start]rel=[blank_end]"stylesheet" [blank_start]href=[blank_end]"mystyle.css">
   </head>
   <body>
   
   <h1>Estudiando CSS</h1>
   <p>Primero leo teoría</p>
   <p>Segundo: hago ejercicios.</p>
   </body>
   </html>
   

   1. Alink
   2. Brel=
   3. Chref=
6. 6Pon color de fondo "linen" a todo el apartado body, usando una css interna.
   
   <!DOCTYPE html>
   <html>
   <head>
   [blank_start]<style>[blank_end]
   [blank_start]body {[blank_end]
   [blank_start]background-color: linen;[blank_end]
   [blank_start]}[blank_end]
   [blank_start]</style>[blank_end]
   </head>
   <body>
   
   <h1>Harry Potter y sus amigos</h1>
   <p>Hermione es una</p>
   <p>Ron es otro amigo.</p>
   
   </body>
   </html>

   1. A<style>
   2. Bbody {
   3. Cbackground-color: linen;
   4. D}
   5. E</style>
7. 7Pon de fondo de la página, una imagen llamada: paper.gif
   
   <!DOCTYPE html>
   <html>
   <head>
   <style>
   body {
   [blank_start]background-image: url("paper.gif");[blank_end]
   }
   </style>
   </head>
   <body>
   
   <h1>Leviosa</h1>
   <p>Es un conjuro de levitación.</p>
   <p>Se dice leviosa, no leviosaaaaaaa.</p>
   </body>
   </html>
   

   1. Abackground-image: url("paper.gif");
8. 8Especifica que la imagen de fondo no se repita.
   
   <!DOCTYPE html>
   <html>
   <head>
   <style>
   body {
   background-image: url("img_tree.png");
   [blank_start]background-repeat: no-repeat;[blank_end]
   background-position: top right;
   }
   </style>
   </head>
   <body>
   
   <h1>El padrino</h1>
   <p>Era Sirius Black.</p>
   <p>Uno de los mejores amigos de James.</p>
   </body>
   </html>

   1. Abackground-repeat: no-repeat;
9. 9Pon a <p> un borde de 10px, sólido y verde (green).
   
   <!DOCTYPE html>
   <html>
   <head>
   <style>
   [blank_start]p {[blank_end]
   [blank_start]border: 10px solid green;[blank_end]
   [blank_start]}[blank_end]
   </style>
   </head>
   <body>
   
   <h1>Luna Lovegood</h1>
   <p>Es un gran personaje.</p>
   </body>
   </html>

   1. Aborder: 10px solid green;
   2. Bp {
   3. C}
10. 10cambia el color a todos los <p> que son descendientes de <div>, a rojo.
    
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    [blank_start]div p {[blank_end]
    [blank_start]color: red;[blank_end]
    }
    </style>
    </head>
    <body>
    
    <div>
    <p>Ahora en Twitter podemos hacer fleets.</p>
    <p>Una especie de copia de los stories de Instagram.</p>
    <span><p>Parece que serán permanentes.</p></span>
    </div>
    <p>Mientras tanto, seguimos sin poder editar tuits.</p>
    <p>Habrá que seguir esperando.</p>
    </body>
    </html>

    1. Adiv p {
    2. Bcolor: red;

11. 11Cambia de color todos los <p>m que son hijos de <div> a rojo
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    [blank_start]div > p {[blank_end]
    color: red;
    }
    </style>
    </head>
    <body>
    
    <div>
    <p>Ahora en Twitter podemos hacer fleets.</p>
    <p>Una especie de copia de los stories de Instagram.</p>
    <span><p>Parece que serán permanentes.</p></span>
    </div>
    <p>Mientras tanto, seguimos sin poder editar tuits.</p>
    <p>Habrá que seguir esperando.</p>
    </body>
    </html>

    1. Adiv > p {
12. 12Cambia el color a todos los <p>, que están justo debajo de <div> a rojo.
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    [blank_start]div + p {[blank_end]
    color: red;
    }
    </style>
    </head>
    <body>
    
    <div>
    <p>Ahora en Twitter podemos hacer fleets.</p>
    <p>Una especie de copia de los stories de Instagram.</p>
    <span><p>Parece que serán permanentes.</p></span>
    </div>
    <p>Mientras tanto, seguimos sin poder editar tuits.</p>
    <p>Habrá que seguir esperando.</p>
    </body>
    </html>

    1. Adiv + p {
13. 13cambia el color de los <p> que son hijos de <div> a rojo
    
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    [blank_start]div ~ p {[blank_end]
    color: red;
    }
    </style>
    </head>
    <body>
    
    <div>
    <p>Ahora en Twitter podemos hacer fleets.</p>
    <p>Una especie de copia de los stories de Instagram.</p>
    <span><p>Parece que serán permanentes.</p></span>
    </div>
    <p>Mientras tanto, seguimos sin poder editar tuits.</p>
    <p>Habrá que seguir esperando.</p>
    </body>
    </html>

    1. Adiv ~ p {
14. 14Color amarillo (yellow) al pasar el ratón por encima de un link
    Color rojo (red) a un enlace no visitado
    Color negro (black) a un enlace seleccionado.
    Color azul (blue) a un enlace visitado
    
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    [blank_start]a:link[blank_end] {
    background-color: red;
    }
    [blank_start]a:visited[blank_end] {
    background-color: blue;
    }
    [blank_start]a:hover[blank_end] { background-color: yellow;
    }
    [blank_start]a:active[blank_end] {
    background-color: black;
    }
    </style>
    </head>
    <body>
    <h1>Enlaces</h1>
    <p>Vamos a cambiar colores.</p>
    <p><a href="https://www.w3schools.com">W3Schools.com</a></p>
    </body>
    </html>
    

    1. Aa:link
    2. Ba:visited
    3. Ca:hover
    4. Da:active
15. 15Cambia el color de un <p> con la clase ron, cuando el ratón pase por encima a color azul (blue).
    
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    [blank_start]p.ron:hover {[blank_end]
    background-color: blue;
    }
    </style>
    </head>
    <body>
    
    <h1>Ron</h1>
    <p>Es algo tonto.</p>
    <p class="ron">Es pelirrojo.</p>
    </body>
    </html>
    

    1. Ap.ron:hover {

Descripción

Grado Superior Lenguaje de marcas Test sobre css, creado por Paula G.R. el 28/11/2020.

Autor

Paula G.R.

Idioma

Español

Visitas

3

Historial

Creado el 28 nov 2020 · actualizado el 28 nov 2020

Etiquetas

csslenguaje de marcasgrado superior

Valoración

Aún sin valoraciones

Valora este test

Valora este test

Más sobre CSS y maquetación web