Scribd
Cargar
9 vistas22 páginas

HTML CSS

El documento contiene una serie de preguntas y respuestas sobre HTML y CSS, abarcando temas como etiquetas, atributos, selectores y pseudoclases. Se presentan preguntas de opción múltiple con respuestas correctas destacadas. El contenido está diseñado para evaluar el conocimiento sobre la estructura y el estilo de páginas web.

Cargado por

gabriellamegui
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
9 vistas22 páginas

HTML CSS

El documento contiene una serie de preguntas y respuestas sobre HTML y CSS, abarcando temas como etiquetas, atributos, selectores y pseudoclases. Se presentan preguntas de opción múltiple con respuestas correctas destacadas. El contenido está diseñado para evaluar el conocimiento sobre la estructura y el estilo de páginas web.

Cargado por

gabriellamegui
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 22

HTML

1. ¿Qué etiqueta HTML define el cuerpo de la página?

• a) <section>
• b) <main>
• c) <body>
• d) <footer>
• Respuesta correcta: c) <body>

2. ¿Cuál es el propósito de la etiqueta <title> en HTML?

• a) Agregar un título dentro de la página


• b) Mostrar el título en la barra del navegador
• c) Aplicar estilos de título
• d) Cambiar el color de fondo
• Respuesta correcta: b) Mostrar el título en la barra del navegador
3. ¿Cómo se define un encabezado de nivel 1 en HTML?

o a) <header>
o b) <h1>
o c) <head>
o d) <h6>

4. ¿Cuál es la forma correcta de combinar múltiples clases en un solo elemento HTML?

• a) <div class="clase1, clase2">


• b) <div class="clase1 clase2">
• c) <div class=".clase1 .clase2">
• d) <div class="clase1.clase2">
• Respuesta correcta: b) <div class="clase1 clase2">
5. ¿Qué etiqueta HTML se usa para mostrar una lista numerada?

• a) <ul>
• b) <ol>
• c) <li>
• d) <dl>
• Respuesta correcta: b) <ol>

6. ¿Cuál de las siguientes opciones muestra una lista con viñetas?

• a) <ul>
• b) <ol>
• c) <li>
• d) <list>
• Respuesta correcta: a) <ul>

7. ¿Qué etiqueta HTML se usa para definir una lista de definiciones?

• a) <ul>
• b) <ol>
• c) <dl>
• d) <li>
• Respuesta correcta: c) <dl>

8. ¿Cómo seleccionas el tercer <li> dentro de una lista <ul> en CSS?

• a) ul > li:nth-child(3)
• b) ul > li:nth-of-type(3)
• c) ul li:nth-child(3)
• d) li:nth-type(3)
• Respuesta correcta: a) ul > li:nth-child(3)
9. ¿Qué etiqueta HTML representa una celda en una tabla?

• a) <tr>
• b) <th>
• c) <td>
• d) <table>
• Respuesta correcta: c) <td>

10. ¿Qué etiqueta HTML representa una tabla de datos?

• a) <data>
• b) <tab>
• c) <table>
• d) <db>
• Respuesta correcta: c) <table>
11. ¿Qué atributo se usa para proporcionar un texto alternativo a una imagen?

• a) title
• b) src
• c) alt
• d) description
• Respuesta correcta: c) alt
12. ¿Cuál es el propósito de la etiqueta <fieldset> en HTML?

• a) Alinear texto
• b) Agrupar campos en un formulario
• c) Definir un campo de texto
• d) Crear una celda de tabla
• Respuesta correcta: b) Agrupar campos en un formulario
CSS

13. ¿Cuál es la forma correcta de enlazar una hoja de estilos externa en HTML?

o a) <stylesheet>style.css</stylesheet>
o b) <link href="style.css">
o c) <link rel="stylesheet" href="style.css">
o d) <style src="style.css">
o Respuesta correcta: c) <link rel="stylesheet" href="style.css">

14. ¿Qué etiqueta HTML se utiliza para enlaces?

o a) <link>
o b) <a>
o c) <href>
o d) <url>
15. ¿Qué propiedad CSS se utiliza para cambiar el color de fondo de un elemento?

o a) background-image
o b) color
o c) background-color
o d) font-color

16. ¿Cómo se especifica un color en formato hexadecimal?

o a) #rrggbb
o b) rgb(rr, gg, bb)
o c) rgba(rr, gg, bb, a)
o d) color(rr, gg, bb)
o Respuesta correcta: a) #rrggbb
Selectores CSS:
SELECTORES BÁSICOS (p, .clase, #id)

PSEUDOCLASES (:hover, :active, :focus)

PSEUDOELEMENTOS (::before, ::after).


17. ¿QUÉ SELECTOR SELECCIONA TODOS LOS ELEMENTOS QUE SON EL PRIMER HIJO DENTRO DE SU
CONTENEDOR?
18. a) :nth-of-type(1)
19. b) :first-child
20. c) :nth-child(1)
21. d) :first-of-type
22. Respuesta correcta: b) :first-child

23. ¿Qué selector selecciona todos los elementos de una clase excepto el primer elemento hijo?

• a) :not(:first-child)
• b) :nth-child(n+2)
• c) :nth-of-type(1)
• d) :not(:nth-child(1))
• Respuesta correcta: b) :nth-child(n+2)

24. ¿Cuál es el selector CSS para un ID?

• a) .id
• b) #id
• c) id
• d) *id
• Respuesta correcta: b) #id

25. ¿Cuál es el selector CSS para un elemento de clase?

• a) #clase
• b) .clase
• c) clase
• d) *clase
• Respuesta correcta: b) .clase

26. ¿Cuál de los siguientes selectores selecciona solo los elementos <p> que son hijos directos de un <div>?

• a) div > p
• b) div p
• c) p + div
• d) div ~ p
• Respuesta correcta: a) div > p

27. ¿Qué selector CSS selecciona elementos con la clase "activo" dentro de un ID llamado "menu"?

• a) #menu activo
• b) #menu .activo
• c) menu#activo
• d) menu.activo

Respuesta correcta: b) #menu .activo


28. ¿Cuál de los siguientes selectores aplica estilo a un elemento con ambas clases rojo y grande?

• a) .rojo.grande
• b) .rojo .grande
• c) #rojo #grande
• d) #rojo.grande
• Respuesta correcta: a) .rojo.grande

Preguntas sobre Pseudoelementos


1. ¿Qué pseudoelemento se usa para agregar contenido antes de un elemento sin modificar el HTML?
o a) :first-line
o b) ::before
o c) ::first-letter
o d) ::content
o Respuesta correcta: b) ::before

2. ¿Cómo seleccionarías la primera línea de un párrafo en CSS?


o a) p::line
o b) p:line
o c) p::first-line
o d) p:first-line
o Respuesta correcta: c) p::first-line

3. ¿Qué pseudoelemento CSS permite cambiar el estilo del primer carácter en una línea de texto?
o a) ::before
o b) ::first-letter
o c) :first-letter
o d) ::first-line
o Respuesta correcta: b) ::first-letter

4. ¿Cuál de los siguientes pseudoelementos es utilizado para agregar contenido después de un elemento?
o a) ::after
o b) :after
o c) ::append
o d) ::last
o Respuesta correcta: a) ::after

5. ¿Qué pseudoelemento CSS es usado para aplicar un estilo a cada línea de texto generada en un elemento de
bloque?
o a) ::before
o b) ::line
o c) ::first-line
o d) ::text-line
o Respuesta correcta: c) ::first-line

6. ¿Cuál es el propósito principal del pseudoelemento ::selection?


o a) Estilizar los elementos seleccionados en una lista.
o b) Estilizar el texto resaltado o seleccionado por el usuario.
o c) Estilizar solo el primer párrafo.
o d) Crear un elemento interactivo.
o Respuesta correcta: b) Estilizar el texto resaltado o seleccionado por el
usuario.
7. ¿Qué pseudoelemento permite aplicar un estilo al texto que representa una primera letra grande, como en un
libro?
o a) ::first-letter
o b) ::dropcap
o c) ::first-line
o d) ::capital
o Respuesta correcta: a) ::first-letter

8. ¿Cómo aplicarías un estilo a los elementos de la lista que tienen un pseudoelemento ::marker en CSS?
o a) li::before
o b) li::marker
o c) li:marker
o d) li::after
o Respuesta correcta: b) li::marker

9. ¿Qué pseudoelemento puedes usar para aplicar estilo al marcador de una lista en CSS?
o a) ::list-item
o b) ::list
o c) ::marker
o d) ::before
o Respuesta correcta: c) ::marker

10. ¿Cómo seleccionarías el pseudoelemento ::placeholder para estilizar el texto de sugerencia en un campo de
entrada?
o a) input::placeholder
o b) input:placeholder
o c) input::hint
o d) input:hint
o Respuesta correcta: a) input::placeholder

11. ¿Qué significa ::before en CSS?

• a) Inserta un pseudo-elemento antes del contenido de un elemento.


• b) Selecciona el primer hijo de un elemento.
• c) Aplica un estilo al contenido de un elemento.
• d) Inserta un elemento antes del contenedor.
• Respuesta correcta: a) Inserta un pseudo-elemento antes del contenido de un
elemento.

Preguntas sobre Pseudoclases

1. ¿Qué pseudoclase CSS selecciona el último hijo de un elemento?


o a) :last-of-type
o b) :last-child
o c) :only-child
o d) :nth-last-child
o Respuesta correcta: b) :last-child

2. ¿Cuál pseudoclase CSS aplicas para dar estilo a un enlace que ha sido visitado?
o a) :link
o b) :hover
o c) :visited
o d) :active
o Respuesta correcta: c) :visited
3. ¿Qué pseudoclase selecciona un elemento al que el usuario le ha hecho clic?
o a) :focus
o b) :hover
o c) :visited
o d) :active
o Respuesta correcta: d) :active

4. ¿Cómo seleccionas todos los elementos de un tipo específico que no tienen un hermano?
o a) :last-of-type
o b) :first-of-type
o c) :only-of-type
o d) :nth-of-type(1)
o Respuesta correcta: c) :only-of-type

5. ¿Qué pseudoclase CSS selecciona todos los elementos que son el primer hijo de su contenedor?
o a) :first-of-type
o b) :nth-child(1)
o c) :only-child
o d) :first-child
o Respuesta correcta: d) :first-child

6. ¿Cuál pseudoclase se usa para aplicar un estilo cuando un elemento tiene el foco, como en un campo de
formulario?
o a) :hover
o b) :focus
o c) :selected
o d) :checked
o Respuesta correcta: b) :focus

7. ¿Qué pseudoclase selecciona elementos que son el tercer hijo en su contenedor?


o a) :nth-of-type(3)
o b) :nth-child(3)
o c) :third-child
o d) :only-child(3)
o Respuesta correcta: b) :nth-child(3)

8. ¿Cómo seleccionarías un elemento de un formulario que ha sido marcado, como en una casilla de
verificación?
o a) :selected
o b) :focus
o c) :hover
o d) :checked
o Respuesta correcta: d) :checked

9. ¿Cuál pseudoclase CSS selecciona el primer elemento de su tipo en un contenedor?


o a) :nth-child(1)
o b) :first-of-type
o c) :only-child
o d) :first-child
o Respuesta correcta: b) :first-of-type
10. ¿Qué pseudoclase selecciona todos los elementos que están deshabilitados, como en un formulario?
o a) :focus
o b) :enabled
o c) :readonly
o d) :disabled
o Respuesta correcta: d) :disabled

11. ¿Cuál de los siguientes selectores selecciona todos los elementos <div> que tienen al menos una clase?
• a) div[class]
• b) div[.class]
• c) div#class
• d) div~class
• Respuesta correcta: a) div[class]

12. ¿Cuál es la forma correcta de seleccionar un elemento con clase activa solo si está dentro de un
contenedor con clase menu?
• a) menu .activa
• b) .menu .activa
• c) #menu #activa
• d) .menu#activa
• Respuesta correcta: b) .menu .activa

13. ¿Cómo seleccionas un elemento con la clase btn que también tiene una clase primario?
• a) .btn[primario]
• b) .btn.primario
• c) #btn.primario
• d) btn.primario
• Respuesta correcta: b) .btn.primario

14. ¿Cómo defines en CSS que un elemento con clase btn cambie de color cuando el cursor está encima?
• a) .btn:focus
• b) .btn:hover
• c) .btn:active
• d) .btn:click
• Respuesta correcta: b) .btn:hover

15. ¿Cómo seleccionarías en CSS todos los elementos que tienen clase importante, pero que no son elementos
<div>?
• a) div.importante
• b) .importante:not(div)
• c) .importante:!div
• d) *importante:not(div)
• Respuesta correcta: b) .importante:not(div)

16. ¿Qué significa .menu-item:nth-of-type(2) en CSS?


• a) Aplica el estilo a todos los elementos de clase menu-item.
• b) Aplica el estilo al segundo elemento con clase menu-item.
• c) Selecciona el segundo elemento de tipo menu-item.
• d) Selecciona el primer hijo de menu-item.
• Respuesta correcta: b) Aplica el estilo al segundo elemento con clase menu-item.
Preguntas sobre selectores básicos (p, *):

1. ¿Qué efecto tiene el selector * en términos de rendimiento cuando se aplica en una página web muy grande?
o a) Mejora el rendimiento porque aplica estilos a todos los elementos
simultáneamente
o b) No tiene impacto en el rendimiento
o c) Puede disminuir el rendimiento debido a la gran cantidad de elementos que
debe procesar
o d) Solo afecta los elementos que tienen atributos id o class

Respuesta correcta: c) Puede disminuir el rendimiento debido a la gran cantidad de


elementos que debe procesar

2. Si aplicas el selector p + p en CSS, ¿qué párrafos se seleccionan?


o a) El primer párrafo en la página
o b) Todos los párrafos
o c) El segundo párrafo, pero solo si está inmediatamente después de otro
párrafo
o d) Los párrafos que están dentro de un contenedor <div>

Respuesta correcta: c) El segundo párrafo, pero solo si está inmediatamente después


de otro párrafo

3. ¿Qué selector CSS usarías para seleccionar todos los elementos <p> dentro de una sección con la clase
contenido?
o a) .contenido p
o b) p .contenido
o c) #contenido p
o d) contenido p

Respuesta correcta: a) .contenido p

4. ¿Qué ocurre si se aplica el selector * > p en un archivo CSS?


o a) Selecciona todos los elementos <p>
o b) Selecciona todos los elementos <p> que son hijos directos de cualquier otro
elemento
o c) Selecciona solo los elementos <p> que son padres directos de otros
elementos
o d) Selecciona todos los elementos de la página

Respuesta correcta: b) Selecciona todos los elementos <p> que son hijos directos de

5. ¿Cómo seleccionarías todos los párrafos <p> que son precedidos por un elemento <h2>?
o a) h2 + p
o b) h2 ~ p
o c) p + h2
o d) h2 p

Respuesta correcta: b) h2 ~ p

6. ¿Qué efecto tendría el selector div p?


o a) Selecciona todos los elementos <p> dentro de cualquier <div>
o b) Selecciona solo el primer párrafo de cada <div>
o c) Selecciona solo los <div> que contienen un párrafo
o d) Selecciona todos los elementos <div> y <p> en la página

Respuesta correcta: a) Selecciona todos los elementos <p> dentro de cualquier <div>
7. ¿Cómo seleccionarías todos los elementos de lista (<li>) dentro de una lista ordenada (<ol>) sin utilizar clases o
IDs?
o a) ol li
o b) li ol
o c) * ol li
o d) ol > li

Respuesta correcta: a) ol li

8. ¿Qué selector CSS aplica estilos solo a los elementos <p> que están dentro de un <section> con el ID content?
o a) #content p
o b) section p
o c) #content > p
o d) p#content

Respuesta correcta: a) #content p

9. ¿Qué hace el selector * + *?


o a) Selecciona todos los elementos con una clase llamada *
o b) Selecciona todos los elementos que tienen un hermano inmediato
o c) Selecciona el primer elemento de la página
o d) Selecciona todos los elementos de la página

Respuesta correcta: b) Selecciona todos los elementos que tienen un hermano


inmediato

10. ¿Cómo seleccionarías todos los <p> que están dentro de un <header> pero no de un <footer>?
o a) header p
o b) header > p
o c) header p:not(footer p)
o d) header p, footer p

Respuesta correcta: c) header p:not(footer p)

Preguntas sobre selectores de clase (.clase):

1. ¿Qué selector CSS se usaría para seleccionar todos los elementos con la clase active que están dentro de un
contenedor con la clase container?
o a) .container.active
o b) .container .active
o c) container .active
o d) .active .container

Respuesta correcta: b) .container .active

2. ¿Cómo seleccionas todos los elementos de clase item que son precedidos por un elemento con la clase header?
o a) .header + .item
o b) .header ~ .item
o c) .header .item
o d) .header > .item

Respuesta correcta: b) .header ~ .item


3. ¿Qué selector CSS selecciona solo los elementos <p> que tienen la clase importante?

• a) p.importante
• b) #p.importante
• c) .p#importante
• d) .importante p

4. ¿Qué hace el selector .box:hover en CSS?


o a) Aplica estilos a todos los elementos con la clase box
o b) Aplica estilos a los elementos con la clase box cuando el mouse está sobre
ellos
o c) Aplica estilos solo a los elementos box dentro de un contenedor hover
o d) Aplica estilos a cualquier elemento dentro de un contenedor con la clase
box

5. ¿Cómo seleccionarías todos los elementos con la clase menu que están dentro de un <nav> y tienen un hijo con la
clase active?
o a) nav .menu > .active
o b) nav .menu .active
o c) .menu > nav.active
o d) nav .active.menu

6. ¿Qué selector utilizarías para seleccionar todos los elementos de clase highlight pero solo si están dentro de un
<section> con la clase content?
o a) .content .highlight
o b) section .highlight
o c) .content.highlight
o d) section .content .highlight

7. ¿Cómo seleccionarías todos los elementos con la clase error que están dentro de un formulario con la clase
contact?
o a) .contact .error
o b) form.contact .error
o c) form .contact .error
o d) .contact > .error

8. Si tienes un contenedor con elementos de clase active, ¿cómo seleccionarías el último elemento de esa clase?
o a) .active:last-child
o b) .active:last-of-type
o c) .active:nth-last-child(1)
o d) .active:last

9. ¿Qué selector CSS usarías para seleccionar todos los elementos con la clase item que son hijos directos de un
contenedor con la clase list?
o a) .list > .item
o b) .list .item
o c) .item .list
o d) .list + .item

10. ¿Qué selector usarías para seleccionar todos los elementos con la clase active que están precedidos por un
elemento con la clase highlighted?
o a) .highlighted + .active
o b) .highlighted ~ .active
o c) .active + .highlighted
o d) .active ~ .highlighted
11. ¿Cómo seleccionarías todos los elementos con la clase card que tienen un hermano directo con la clase featured?
o a) .card + .featured
o b) .card ~ .featured
o c) .card > .featured
o d) .card .featured

Respuesta correcta: b) .card ~ .featured

12. ¿Qué significa la pseudo-clase :hover en CSS?

• a) Activa cuando el elemento está visible.


• b) Estilo aplicado cuando el elemento es tocado o presionado.
• c) Estilo aplicado cuando el elemento es colocado encima del cursor.
• d) Aplica el estilo cuando el usuario hace clic en el elemento.

Respuesta correcta: c) Estilo aplicado cuando el elemento es colocado encima del


cursor.

13. ¿Qué pseudo-clase CSS aplicas para estilizar el primer elemento de un tipo específico dentro de un
contenedor?

• a) :first-of-type
• b) :first-child
• c) :nth-child(1)
• d) :only-child

Respuesta correcta: a) :first-of-type

14. ¿Qué hace la pseudo-clase :nth-of-type(2n) en CSS?

• a) Selecciona cada segundo elemento del mismo tipo.


• b) Selecciona cada segundo hijo del contenedor.
• c) Selecciona solo el segundo hijo.
• d) Selecciona solo el primer y segundo hijo.

Respuesta correcta: a) Selecciona cada segundo elemento del mismo tipo.

15. ¿Cómo se seleccionan todos los elementos de una clase específica llamada contenedor?

• a) #contenedor
• b) .contenedor
• c) contenedor
• d) *contenedor
Preguntas sobre selectores de ID (#id):

1. ¿Qué sucede si usas el selector #header en CSS y tienes múltiples elementos con el ID header en el HTML?
o a) Se selecciona solo el primer elemento con ese ID
o b) Se seleccionan todos los elementos con ese ID
o c) Los elementos con el ID header no se seleccionan
o d) El navegador genera un error debido a los IDs duplicados

Respuesta correcta: d) El navegador genera un error debido a los IDs duplicados

2. ¿Cómo seleccionarías un elemento con el ID main que está dentro de un contenedor con el ID wrapper?
o a) #wrapper #main
o b) #main #wrapper
o c) #main .wrapper
o d) .wrapper #main

Respuesta correcta: a) #wrapper #main

3. ¿Qué selector usarías para aplicar un estilo a un elemento con el ID submit solo cuando el mouse esté sobre él?
o a) #submit:hover
o b) #submit:active
o c) #submit:focus
o d) submit:hover

Respuesta correcta: a) #submit:hover

4. ¿Qué selector utilizarías para seleccionar todos los elementos con el ID button que están dentro de un contenedor
con el ID wrapper?
o a) #wrapper button
o b) #wrapper #button
o c) button #wrapper
o d) #button.wrapper

Respuesta correcta: b) #wrapper #button

5. ¿Cómo aplicarías un estilo a un elemento con el ID footer cuando se le haga clic?


o a) #footer:active
o b) #footer:focus
o c) #footer:click
o d) footer:active

Respuesta correcta: a) #footer:active

6. ¿Cómo seleccionarías el primer elemento con el ID content que está dentro de un contenedor con el ID main?
o a) #main > #content
o b) #main #content
o c) #content:first-child
o d) #content:first-of-type
7. ¿Qué selector CSS usarías para seleccionar todos los elementos con el ID nav dentro de un div que tiene la clase
container?
o a) .container #nav
o b) #nav .container
o c) .container nav
o d) #container nav

Respuesta correcta: a) .container #nav


8. ¿Qué ocurre si aplicas un selector #section en un documento con múltiples elementos que comparten el mismo ID
section?
o a) Solo se selecciona el primer elemento con ese ID
o b) No se selecciona ninguno
o c) Se seleccionan todos los elementos con ese ID
o d) El navegador genera un error

Respuesta correcta: d) El navegador genera un error

9. ¿Cómo aplicarías un estilo a un elemento con el ID main cuando se desplaza la página hacia él?
o a) #main:focus
o b) #main:active
o c) #main:scroll
o d) #main:target

Respuesta correcta: d) #main:target

10. ¿Cómo seleccionas un elemento con el ID form y lo estilizas cuando recibe el foco?
o a) #form:focus
o b) form:focus
o c) #form:active
o d) form#form:focus

Respuesta correcta: a) #form:focus

También podría gustarte