Lenguaje de marcas

¿Qué elementos selecciona .aviso en CSS? .aviso { color: red; }. Solo un elemento con id="aviso". Todos los elementos con class="aviso". Todos los <aviso>. Solo el <body>.

¿Qué elemento selecciona #menu en CSS? #menu { background: #ccc; }. Todas las listas. El elemento identificado con id="menu". Todos los elementos con class="menu". Todos los <menu> y <nav>.

¿Qué diferencia explica el material entre class e id?. class siempre tiene mayor especificidad que id. Ambos se usan siempre en todos los elementos. Una clase puede repetirse; el id identifica un elemento único. El id se aplica solo a tablas.

¿Qué elementos selecciona p.intro? p.intro { color: red; }. Solo el primer párrafo. Todos los descendientes de <p>. Solo los <p> con class="intro". Todos los <p> y todos los .intro.

¿Para qué sirve separar selectores por comas? h1, h2, .titulo { color: blue; }. Seleccionar solo descendientes. Aplicar las reglas solo al primero. Seleccionar solo hermanos adyacentes. Aplicar las mismas declaraciones a cada selector.

Con la regla div p, ¿qué párrafos se seleccionan? div p { color: red; }. Solo los hijos directos de div. Todos los párrafos del documento sin excepción. Todos los párrafos descendientes de un <div>, aunque haya etiquetas intermedias. Solo los siguientes hermanos de div.

¿A qué párrafo se aplica esta regla? <style>div > p {color:red;}</style> <div> <p>Directo</p> <section><p>Anidado</p></section> </div>. A los dos. A ninguno. Solo a Anidado. Solo a Directo.

¿Cuál de estos selectores representa hermanos inmediatamente adyacentes?. div ~ p. div + p. div p. div > p.

¿Qué párrafos quedarán rojos? <style>p ~ p {color:red;}</style> <div> <p>Primero</p> <p>Uno</p> <span>Separador</span> <p>Dos</p> </div>. Solo Uno. Uno y Dos. Ninguno. Solo Dos.

¿Qué indica el selector input[type="text"]? input[type="text"] { width: 100px; }. Solo los primeros input. Todos los elementos con clase text. Todos los <input> con cualquier type. Los <input> cuyo type es exactamente text.

¿Qué selecciona p[class]? p[class] { text-transform: uppercase; }. Los <p> que tengan atributo class, sea cual sea su valor. Solo los párrafos con class="p". Todos los párrafos. Solo los elementos con id="class".

¿Qué pseudo-clase cambia el estilo al pasar el ratón por encima? a:hover { color: orange; }. :active. :focus. :hover. :visited.

¿Qué pseudo-clase señala que un campo tiene el foco? input:focus { background: #eee; }. :link. :focus. :first-child. :visited.

¿Qué pseudo-clase aplica estilos a enlaces ya visitados? a:visited { color: purple; }. :hover. :focus. :not. :visited.

Con el HTML siguiente, ¿se aplica p:first-child al párrafo? <style>div p:first-child {color:red;}</style> <div><h2>Título</h2><p>Texto</p></div>. No, porque :first-child solo afecta a enlaces. Sí, porque está dentro de div. No, porque <h2> es el primer hijo de <div>. Sí, porque es el primer párrafo.

¿Qué pseudo-elemento modifica la primera letra del contenido? p::first-letter { color: red; }. ::after. ::first-letter. ::first-line. ::before.

¿Qué hace este CSS con los párrafos de clase aviso? p.aviso::before { content: "Atención: "; }. Borra el contenido original. Añade el texto Atención: antes del párrafo. Añade el texto al final del párrafo. Muestra una ventana emergente.

Si ambas reglas afectan al mismo <p>, ¿qué color prevalece? p { color: red; } p { color: blue; }. Ninguno, se anulan. Rojo. Azul. Negro.

¿Qué color tendrá el párrafo dentro de <div>? div p { color: red; } p { color: blue; } <div><p>Hola</p></div>. El navegador no aplica ninguna regla. Azul. Rojo. Verde.

¿Qué valor de display no genera caja para el elemento?. none. block. inline. inline-block.

¿Qué valor de display permite ubicar un <li> en línea en este ejemplo? li { display: inline; }. inline. block. table-row. none.

¿Qué hace float: left en un elemento? #menu { float: left; width: 200px; }. Lo fija a la ventana durante el scroll. Lo mueve siempre a la esquina superior izquierda del documento. Lo oculta. Lo hace flotar a la izquierda permitiendo que el contenido siguiente fluya a su lado.

¿Qué propiedad evita que un pie de página quede junto a flotantes de ambos lados? #pie { clear: both; }. margin: none;. float: both;. clear: both;. display: inline;.

¿Qué valor de position mantiene el elemento fijo respecto de la ventana al hacer scroll?. absolute. relative. static. fixed.

¿Qué hace transform: rotate(-10deg)? div { transform: rotate(-10deg); }. Desplaza el elemento 10 píxeles. Amplía el tamaño al doble. Gira el elemento 10 grados en sentido antihorario. Inclina solo el texto horizontalmente.

¿Qué selecciona input:not(.excluido)? input:not(.excluido) { background: blue; }. Todos los elementos excepto los input. Los input que NO tienen la clase excluido. Solo los input que tienen esa clase. Solo los elementos con id excluido.

Qué añade esta regla al contenido del párrafo? p::after { content: " (Autor)"; }. El texto (Autor) al principio. Una clase CSS llamada Autor. Un nuevo párrafo vacío. El texto (Autor) al final.

¿Qué propiedad produce un cambio gradual de anchura al recibir el foco? input { width: 100px; transition: width .35s ease-in-out; } input:focus { width: 250px; }. font-size. transform. border-radius. transition.

¿Qué efecto visual crea esta propiedad background? div { background: linear-gradient(yellow, red); }. Degradado lineal de amarillo a rojo. Degradado radial de amarillo a rojo. Color sólido amarillo. Imagen repetida con colores alternos.

¿Qué diferencia hay entre position: relative y position: absolute según el tema?. Ambas mantienen exactamente la misma posición sin desplazamiento. relative desplaza desde la posición natural; absolute saca la caja del flujo normal. relative impide usar top y left; absolute los permite. relative siempre fija la caja a la ventana; absolute la oculta.