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

La respuesta correcta es A. Falso.
El padding se define como el espacio de relleno interior entre el contenido y el borde del elemento. El margen exterior se denomina técnicamente 'margin'. Confundirlos es un error común en el modelo de caja de CSS.

La respuesta correcta es p#viejo p.nuevo. Aunque en HTML anidar párrafos dentro de párrafos no es semánticamente correcto, el selector CSS se construye uniendo el ID con '#' y la clase con '.'. El espacio entre ambos indica que el segundo es un descendiente del primero. Es un ejercicio de sintaxis de selectores combinados.

La respuesta correcta es a:visited. El pseudo-clase :visited se utiliza para aplicar estilos a los enlaces que el usuario ya ha visitado.

La respuesta correcta es .nuevo. El punto inicial indica al navegador que se trata de un selector de clase. Esto aplicará el estilo a cualquier etiqueta (div, p, span, etc.) que incluya el atributo class="nuevo". Es uno de los selectores más versátiles y utilizados en CSS.

La respuesta correcta es h1 + p. Este selector utiliza el combinador adyacente para seleccionar cada elemento p que sigue inmediatamente a un elemento h1. Es útil para aplicar estilos específicos a párrafos que están directamente después de un encabezado.

La respuesta correcta es div p a (o similar con clase). Se utilizan espacios para indicar descendencia múltiple en cualquier nivel de profundidad. Esto seleccionará cualquier enlace que tenga un párrafo como ancestro y este a su vez un contenedor. Es un selector muy común para dar estilo a textos dentro de artículos o secciones.

La respuesta correcta es la asociación de p/div como bloque y strong/em como línea. Los elementos de bloque ocupan todo el ancho disponible y comienzan en una nueva línea. Los elementos en línea solo ocupan el espacio necesario para su contenido. Por ejemplo, una etiqueta div siempre fuerza un salto, mientras que strong resalta texto dentro de un párrafo.

La respuesta correcta es A. Falso.
El valor 'inline' pertenece a la propiedad 'display' y sirve para que un elemento no genere saltos de línea y solo ocupe su ancho de contenido. No tiene nada que ver con dibujar líneas o bordes.

La respuesta correcta es A. La respuesta correcta es list-style-type.
Esta propiedad permite cambiar el punto de la lista por círculos, cuadrados o números romanos. Las opciones 'list-point' o 'list-type' no existen en la especificación estándar de CSS.

La respuesta correcta es p.tronic. Se escribe el nombre de la etiqueta 'p' seguido inmediatamente de un punto y el nombre de la clase 'tronic'. Esto filtrará para que solo los párrafos con esa clase se vean afectados, ignorando otros elementos que pudieran tener la misma clase. Es más específico que usar solo '.tronic'.

La respuesta correcta es table p. Al separar 'table' y 'p' con un espacio, le indicamos al navegador que busque todos los párrafos que sean descendientes de una tabla. Esto afectará a cualquier párrafo, esté dentro de una celda (td) o de un encabezado de tabla (th). Es un selector de descendencia clásico.

La respuesta correcta es A. La respuesta correcta es Verdadero.
En el modelo de caja de CSS, el 'margin' representa el espacio vacío situado fuera del borde de un elemento. Sirve para separar un elemento de sus vecinos. Por contra, el padding es el espacio que queda por dentro del borde.

La respuesta correcta es A. La respuesta correcta es Verdadero.
Un elemento con 'position: absolute' se posiciona respecto al ancestro más cercano que tenga una posición distinta de 'static'. Si no encuentra ninguno, se posicionará respecto al cuerpo del documento (body).

La respuesta correcta es class. El atributo 'class' permite asignar uno o varios nombres de clase a un elemento HTML para que reciba estilos desde CSS. A diferencia de 'id', las clases se pueden reutilizar en múltiples elementos de la misma página. Es la base de la mayoría de frameworks de diseño modernos.

La respuesta correcta es A, B, C y D. La respuesta correcta es que todas las opciones mencionadas funcionan.
Se puede aplicar la propiedad tanto a la etiqueta contenedora 'ul' como a cada elemento 'li'.

La respuesta correcta es A. ody { font: 0.
9em/1.4 Arial, Helvetica, sans-serif; color: #000; }. Esta sintaxis utiliza la propiedad abreviada 'font' que incluye tamaño, interlineado y familia tipográfica de forma eficiente.

La respuesta correcta es px. Es la unidad de medida absoluta más común en el diseño web para definir dimensiones fijas. Se utiliza para bordes, anchos de contenedor o tamaños de fuente que no deben variar. Otras unidades como 'em' o '%' son relativas, a diferencia del píxel.

La respuesta correcta es input:focus. Esta es una pseudo-clase que se activa cuando el usuario hace clic o navega con el tabulador hacia un elemento de entrada. Permite mejorar la accesibilidad resaltando el campo activo. No debe confundirse con :, que actúa al pasar el ratón por encima.

La respuesta correcta es p#nuevo a:hover. Combina un selector de ID para el párrafo, un selector de descendencia para el enlace y la pseudo-clase :hover para el estado del ratón. Esta técnica permite crear efectos visuales interactivos cuando el usuario interactúa con la interfaz. Sin el :hover, el estilo sería estático y permanente.

La respuesta correcta es A. Falso.
Por defecto, el estilo de borde (border-style) es 'none'. Si solo defines el ancho pero no el estilo, el borde no se mostrará en absoluto.

La respuesta correcta es div.nueva p > a. Primero se identifica el contenedor por su clase con un punto, luego el párrafo descendiente y finalmente el hijo directo con el símbolo '>'. Esta combinación garantiza una especificidad alta en el diseño. Otros selectores menos específicos podrían afectar a enlaces que no cumplen todas las condiciones.

La respuesta correcta es A. SS.
CSS es el lenguaje específico diseñado para separar el contenido de la presentación en la web. Mientras que XHTML define la estructura y Javascript el comportamiento, CSS controla colores y fuentes.

La respuesta correcta es clear. Esta propiedad se utiliza para evitar que los elementos siguientes floten alrededor de un elemento anterior con la propiedad 'float'. Puede tomar valores como 'left', 'right' o 'both' para limpiar ambos lados. Es fundamental en diseños clásicos basados en cajas flotantes.

La respuesta correcta es table#nuevo. Este selector es una combinación de un selector de tipo (table) y un selector de ID (#nuevo) pegados sin espacios. Esto indica que se busca específicamente una etiqueta de tabla que tenga ese ID concreto. Si hubiera un espacio, buscaría un elemento con ese ID dentro de una tabla.

La respuesta correcta es form *. El asterisco '*' es el selector universal que representa a todos los elementos. Al ponerlo después de 'form' con un espacio, estamos seleccionando absolutamente todos los elementos que sean hijos o descendientes del formulario. Es útil para resetear estilos o aplicar márgenes generales dentro de formularios.

La respuesta correcta es #nuevo. El símbolo de almohadilla o sostenido se utiliza para seleccionar un elemento único identificado por el atributo 'id'. A diferencia de las clases, un ID solo debe aparecer una vez en cada página HTML. Proporciona la mayor prioridad de estilo entre los selectores básicos.

La respuesta correcta es D. La respuesta correcta es top right bottom left.
En CSS, cuando se usan las cuatro medidas en una sola línea, se sigue el sentido de las agujas del reloj. Se empieza por la parte superior (top) y se avanza hacia la derecha.

La respuesta correcta es C y G. La opción C es correcta porque el color de fondo de la frase es blanco, lo que la hace visible. La opción G es correcta porque la despedida no se ve, lo que implica que su fondo o su texto la ocultan.

La respuesta correcta es div table#nuevo (o similar). Se especifica primero el elemento padre (el contenedor) y luego la tabla con su ID pegado. Esto asegura que solo se estilice esa tabla específica cuando está contenida adecuadamente. Es un ejemplo de selector de descendencia con especificidad de ID.

La respuesta correcta es background. Esta propiedad abreviada permite definir tanto el color como la imagen, repetición y posición de un fondo en una sola línea. También se pueden usar por separado como 'background-color' o 'background-image'. Es vital para la estética visual de cualquier sitio web.

La respuesta correcta utiliza el combinador de hijo directo '>'. Este selector asegura que solo se seleccionen los párrafos que están un nivel justo por debajo del contenedor. Si usáramos solo un espacio, seleccionaríamos todos los párrafos descendientes sin importar la profundidad. Es vital para un control preciso de la estructura DOM.

La respuesta correcta es ol#nueva li. Se especifica la etiqueta 'ol' para lista ordenada, seguida de '#' para identificar el ID único 'nueva'. Finalmente, se añade 'li' para seleccionar los elementos individuales de dicha lista. Al usar un ID, el selector es extremadamente específico y eficiente para el navegador.

La respuesta correcta es A. La respuesta correcta es table .
nuevo. El espacio entre 'table' y '.nuevo' indica una relación de descendencia, seleccionando elementos con esa clase dentro de la tabla. 'table.nuevo' (sin espacio) buscaría una tabla que tuviera ella misma esa clase.

La respuesta correcta es h4. En HTML y CSS, los encabezados se definen mediante la letra 'h' seguida del nivel de importancia del 1 al 6. Seleccionar 'h4' aplicará los estilos a todos los niveles de cuarto rango. No requiere puntos ni almohadillas porque es un selector de etiqueta.

La respuesta correcta es table #nuevo. Se utiliza el nombre de la etiqueta seguido de un espacio y el selector de ID. Esto garantiza que solo se seleccione el elemento con ese ID si se encuentra dentro de una estructura de tabla. Aunque los ID deben ser únicos, esta forma de escribirlo refuerza la jerarquía esperada.

La respuesta correcta es form. Este es un selector de tipo o de etiqueta que aplica las reglas de estilo a todos los elementos del documento. No necesita prefijos como puntos o almohadillas. Es la forma más directa de dar un estilo base a todos los contenedores de entrada de datos.

La respuesta correcta es a,p. El uso de la coma funciona como un selector múltiple o agrupador en CSS. Esto permite aplicar el mismo bloque de declaraciones a distintos elementos simultáneamente para ahorrar código. Sin la coma, el significado cambiaría a una relación de descendencia o jerarquía.

La respuesta correcta es table img,table a. Es necesario especificar la base 'table' para ambos elementos si queremos que la restricción de estar dentro de la tabla se aplique a los dos. Si escribiéramos 'table img, a', estaríamos seleccionando todas las imágenes de tablas y todos los enlaces de todo el documento. El agrupamiento con comas requiere repetir el contexto si se desea mantener la jerarquía.

La respuesta correcta es G. La respuesta es "Párrafo 1 y Párrafo 2" porque el selector adyacente (h2 + p) busca todos los párrafos que se encuentren inmediatamente después de cualquier h2.
En el código de la imagen ocurre lo siguiente:
1. Párrafo 1: Está justo debajo del primer <h2>Subtítulo 1</h2>, por lo que se pone de color verde.
2. Párrafo 2: Está justo debajo del segundo <h2>Subtítulo 2</h2>, por lo que también se pone de color verde.
Como el selector no está limitado a un ID o clase específica, se aplica a todas las parejas de h2 y p que aparezcan en el documento siempre que sean vecinos directos.