DISEÑO DE INTERFACES WEB · Tema 4: Hojas de estilos

La respuesta correcta es table p. Este selector de tipo descendiente selecciona todos los elementos 'p' que se encuentran en cualquier nivel de profundidad dentro de una 'table'. El espacio en blanco entre ambos selectores es el operador que define esta jerarquía. Es fundamental para dar formato a los textos informativos o descriptivos que residen dentro de estructuras tabulares.

La respuesta correcta es px. Esta unidad de medida representa los píxeles de la pantalla y es una unidad de longitud absoluta muy común en el diseño web tradicional. Se utiliza para definir anchos, altos, tamaños de fuente y márgenes con gran precisión. Es la abreviatura estándar reconocida por todos los navegadores para este propósito.

La respuesta correcta es h4. En HTML y CSS, las etiquetas de encabezado van del h1 al h6, representando diferentes niveles de importancia jerárquica. Para seleccionar específicamente los de nivel 4, se utiliza el selector de tipo que coincide con el nombre de la etiqueta h4. No requiere de símbolos adicionales como puntos o almohadillas por ser un elemento básico de HTML.

La respuesta correcta es div > p. Este selector utiliza el combinador de hijo directo (>) para aplicar estilos únicamente a los elementos p que cuenten con un div como padre inmediato. Al no usar el espacio (selector de descendiente), se asegura de no afectar a párrafos anidados en niveles más profundos. Es una herramienta fundamental para mantener un control preciso sobre la estructura del DOM.

La respuesta correcta es background. Esta es una propiedad 'shorthand' o abreviada que permite agrupar múltiples propiedades relacionadas con el fondo, como color e imagen, en una sola línea. Facilita la escritura de código más limpio y eficiente al no tener que declarar background-color y background-image por separado. Es una de las propiedades más versátiles de CSS para el diseño visual.

La respuesta correcta es B. En CSS, el valor por defecto de border-style es 'none', lo que significa que el borde no se mostrará a menos que se especifique explícitamente un estilo como solid, dashed o dotted.

La respuesta correcta es .nuevo. El punto (.) es el prefijo reglamentario en CSS para indicar que el siguiente texto corresponde al nombre de una clase. Si solo se escribe el nombre sin el punto, el navegador lo interpretaría erróneamente como un selector de etiqueta. Al usar el punto, se asegura que todos los elementos con ese atributo class sean afectados por el estilo.

La respuesta correcta es B. La palabra 'inline' es un valor para la propiedad 'display' que determina cómo se comporta el elemento en el flujo del texto, no tiene nada que ver con bordes o líneas interiores.

La respuesta correcta es A. Esta propiedad permite definir la apariencia del marcador de los elementos de lista, como discos, círculos, cuadrados o números.

La respuesta correcta es clear. Esta propiedad especifica si un elemento debe ser movido debajo de elementos flotantes que lo preceden. Es esencial para restaurar el flujo normal del documento cuando se utilizan diseños basados en floats. Valores comunes incluyen left, right o both para limpiar ambos lados.

La respuesta correcta es #nuevo. En CSS, el símbolo de almohadilla (#) se utiliza para referenciar un identificador único (id) definido en el HTML. Dado que los IDs deben ser únicos por página, este selector es altamente específico y solo afectará a un elemento. Es útil para aplicar estilos muy particulares a componentes singulares de la interfaz.

La respuesta correcta es form. Se trata de un selector de tipo que selecciona todos los elementos que coinciden con el nombre de la etiqueta HTML especificada. Al ser una etiqueta estructural básica, no requiere prefijos como puntos o almohadillas. Este selector aplicará las reglas a cada etiqueta <form> presente en la página sin distinción.

La respuesta correcta es form . El asterisco () es el selector universal que coincide con cualquier elemento, y al combinarlo con la etiqueta 'form' y un espacio, selecciona todos los descendientes sin importar su tipo. Esto incluye inputs, labels, selects, botones o cualquier otra etiqueta anidada. Es útil para resetear estilos o aplicar propiedades generales a todos los componentes de un formulario a la vez.

La respuesta correcta es div p a. Este selector de descendientes utiliza espacios para indicar que se deben seleccionar todos los elementos 'a' que se encuentren en cualquier nivel dentro de un 'p', el cual a su vez debe estar dentro de un 'div'. Al no usar el símbolo de hijo directo (>), permite que haya otros elementos intermedios. Es la forma estándar de navegar jerarquías profundas en CSS.

La respuesta correcta es a: visited. La pseudo-clase : visited se utiliza para seleccionar enlaces que el usuario ya ha visitado en su historial de navegación. Se aplica directamente a la etiqueta 'a' mediante el uso de dos puntos. Por motivos de privacidad, los estilos aplicables mediante esta pseudo-clase están limitados por los navegadores modernos (principalmente colores).

La respuesta correcta es p.tronic. Al escribir el nombre de la etiqueta (p) inmediatamente seguido del punto y la clase (.tronic), el selector se vuelve restrictivo. Solo afectará a los párrafos que tengan asignada esa clase específica, ignorando otros elementos que pudieran usar la misma clase o párrafos normales. Es una técnica excelente para ganar especificidad sin recurrir a IDs.

La respuesta correcta es div.nueva p > a. Este selector combina un selector de clase para el contenedor (div.nueva) seguido de un descendiente tipo párrafo y finalmente el combinador de hijo directo para el enlace. La estructura garantiza que solo se seleccionen enlaces que cuelguen directamente de un párrafo dentro de ese contenedor específico. Es una combinación de especificidad y relación jerárquica.

La respuesta correcta es a,p. El uso de la coma (, ) actúa como un selector de agrupación en CSS, permitiendo aplicar el mismo bloque de estilos a múltiples tipos de selectores simultáneamente. En este caso, tanto los enlaces (a) como los párrafos (p) recibirán las reglas definidas. Es una técnica excelente para reducir la redundancia en las hojas de estilo.

La respuesta correcta es table#nuevo. Este selector es extremadamente preciso al especificar tanto el tipo de elemento (table) como su identificador único (#nuevo). Aunque solo con #nuevo funcionaría si el ID es único, añadir la etiqueta table incrementa la especificidad y claridad del código. Es la forma recomendada cuando queremos asegurar que el estilo solo se aplique a tablas con ese ID.

La respuesta correcta es A. Según el modelo de caja de CSS, la propiedad 'margin' crea espacio alrededor de los elementos, por fuera de cualquier borde definido.

La respuesta correcta es class. Este atributo global de HTML permite asignar una o más clases a un elemento para que sea identificado por los selectores de clase en CSS. Es la forma estándar y más utilizada para aplicar estilos reutilizables en un documento web. A diferencia del id, una misma clase puede ser usada por múltiples elementos.

La respuesta correcta es table img, table a. Este selector utiliza tanto la agrupación (coma) como la descendencia (espacio) para aplicar estilos a dos tipos diferentes de elementos en un mismo contexto. Primero selecciona las imágenes dentro de tablas y luego los enlaces dentro de tablas. Es la forma correcta de evitar que el estilo se aplique a imágenes o enlaces que estén fuera de las tablas en el resto del documento.

La respuesta correcta es input:focus. La pseudo-clase : focus se activa cuando un elemento recibe el foco, ya sea mediante el clic del ratón o la navegación por teclado. Aplicada a la etiqueta 'input', permite resaltar visualmente el campo que el usuario está editando actualmente. Es una práctica esencial para mejorar la accesibilidad y la experiencia de usuario en formularios.

La respuesta correcta es h1 + p. El combinador de hermano adyacente (+) selecciona un elemento que aparece inmediatamente después de otro elemento específico, compartiendo el mismo padre. En este caso, seleccionará los párrafos que sigan directamente a un encabezado h1. Es muy útil para aplicar márgenes especiales al primer párrafo que sigue a un título.

La respuesta correcta es p#nuevo a: hover. Este selector combina el selector de elemento y de ID (p#nuevo) con el pseudo-selector de estado : hover aplicado al elemento ancla (a), asegurando que solo los enlaces dentro del párrafo específico se vean afectados al pasar el ratón.

La respuesta correcta es table #nuevo. Al separar la etiqueta table del selector de ID con un espacio, estamos indicando una relación de descendencia. Esto significa que el navegador buscará cualquier elemento que tenga el ID 'nuevo' siempre y cuando esté ubicado dentro de un elemento tabla. Es una técnica útil para contextualizar estilos de componentes compartidos.

La respuesta correcta es ol#nueva li. Este selector identifica primero la lista ordenada (ol) por su ID único (#nueva) y luego, mediante un espacio, selecciona todos los items de lista (li) que descienden de ella. Esto asegura que los estilos de lista solo se apliquen a los elementos li de esa lista específica y no a otras listas de la página. Es una ruta jerárquica clara y eficiente.

La respuesta correcta es div table#nuevo. Este selector indica que se busca un elemento table con el id específico 'nuevo' que sea descendiente de un elemento div. El espacio entre div y table indica la relación de descendencia. Es una forma de asegurar que solo se afecte a esa tabla específica cuando se encuentra en un contexto determinado.

La respuesta correcta es A. Un elemento con 'position: absolute' se posiciona relativo a su ancestro posicionado más cercano (ya sea relative, absolute, fixed o sticky).

La respuesta correcta es p#viejo p.nuevo. Este selector utiliza una combinación de etiquetas con ID y clase para definir una ruta muy específica. Indica que el objetivo es un párrafo (.nuevo) que desciende de un párrafo superior identificado como (#viejo). Aunque anidar párrafos no es una práctica común en HTML válido, el selector CSS describe correctamente esta jerarquía teórica.