CSS Fundamentals Quiz
45 Questions
0 Views

Choose a study mode

Play Quiz
Study Flashcards
Spaced Repetition
Chat to lesson

Podcast

Play an AI-generated podcast conversation about this lesson

Questions and Answers

¿Cuál de las siguientes opciones describe correctamente la relación entre el borde y el margen en un elemento?

  • El margen es la línea que rodea el contenido y el relleno, mientras que el borde es un espacio en blanco.
  • El borde es la línea que rodea el contenido y el relleno, y el margen es el espacio en blanco que se define alrededor del borde. (correct)
  • El borde y el margen son lo mismo; ambos se utilizan indistintamente.
  • El borde es un espacio en blanco alrededor del margen.

    • Si se establece la propiedad max-width de un elemento en none, ¿qué implicación tiene?

  • El elemento tendrá el ancho máximo posible.
  • No se define un ancho máximo para el elemento. (correct)
  • El elemento no tendrá ningún ancho.
  • El elemento heredará el valor del ancho máximo de su elemento padre.

    • ¿Qué significa especificar un valor en porcentaje (%) al definir la altura de un elemento?

  • La altura se define como un porcentaje de la altura del elemento padre. (correct)
  • La altura será un porcentaje de la altura de la ventana del navegador.
  • La altura será siempre de 100 píxeles.
  • La altura se define como porcentaje de la suma de las otras dimensiones del elemento.

    • Si la propiedad min-height de un elemento se establece en inherit, ¿qué sucede?

    <p>El elemento heredará la altura mínima de su elemento padre.</p> Signup and view all the answers

    ¿Cuál de las siguientes NO es una unidad de medida válida para asignar un valor a la propiedad width o height de un elemento en CSS?

    <p>em</p> Signup and view all the answers

    ¿Cuál es la función principal de un selector en CSS?

    <p>Indicar al navegador el elemento HTML al que se aplicará una regla.</p> Signup and view all the answers

    ¿Qué representa la declaración en una regla CSS?

    <p>Una sola regla que especifica la propiedad a la que se dará estilo.</p> Signup and view all the answers

    ¿Cuál es la función del asterisco (*) cuando se utiliza como selector en CSS?

    <p>Selecciona todos los elementos del documento.</p> Signup and view all the answers

    Si en un documento CSS se utiliza el selector 'p', ¿a qué elementos se aplicarán los estilos?

    <p>A los elementos de tipo párrafo.</p> Signup and view all the answers

    ¿Cuál es el orden correcto de una regla CSS?

    <p>Selector, propiedad, valor de la propiedad.</p> Signup and view all the answers

    Si se quiere aplicar un color de texto azul a todo el documento HTML, ¿cómo sería la regla CSS?

    <ul> <li>{ color: blue; }</li> </ul> Signup and view all the answers

    ¿Qué indica la parte 'color: red;' dentro de una regla CSS?

    <p>La propiedad a cambiar es el color y su nuevo valor es rojo.</p> Signup and view all the answers

    ¿Cuál de las siguientes NO es una parte de una regla CSS?

    <p>Etiqueta HTML</p> Signup and view all the answers

    ¿Cuál es la sintaxis correcta para un selector de clase en CSS?

    <p>.nombreDeClase { propiedadesDeEstilo }</p> Signup and view all the answers

    ¿Qué tipo de selector se utiliza para aplicar estilos a un elemento específico mediante su atributo ID en CSS?

    <p>Selector de ID</p> Signup and view all the answers

    ¿Cuál de las siguientes opciones NO es una sintaxis válida para un selector de atributo en CSS?

    <p>[attr^value] { propiedadesDeEstilo }</p> Signup and view all the answers

    ¿Qué se logra al utilizar un selector de pseudo-clase como :hover en CSS?

    <p>Modificar el estilo de un elemento cuando el usuario pasa el ratón sobre él.</p> Signup and view all the answers

    Si se tiene un selector div.contenedor p, ¿qué tipo de elementos se verán afectados por esta regla?

    <p>Todos los elementos <code>&lt;p&gt;</code> que son hijos directos de un <code>&lt;div&gt;</code> con la clase <code>contenedor</code>.</p> Signup and view all the answers

    ¿Cuál es la sintaxis para seleccionar todos los elementos que tengan un atributo específico, sin importar su valor?

    <p>[attr] { propiedadesDeEstilo }</p> Signup and view all the answers

    ¿Cuál de los siguientes selectores de atributo en CSS coincide con un valor de atributo que comienza con un valor específico?

    <p>[attr^=value]</p> Signup and view all the answers

    ¿Cuál de las siguientes opciones demuestra la sintaxis correcta para un selector de pseudo-clase en CSS?

    <p>selector:pseudo-clase { propiedadesDeEstilo }</p> Signup and view all the answers

    ¿Cuál de las siguientes unidades de medida CSS es considerada una unidad absoluta?

    <p>cm</p> Signup and view all the answers

    Si se establece un tamaño de fuente de 2em en un elemento, ¿cómo se calcula su tamaño?

    <p>Dos veces el tamaño de la fuente del elemento actual.</p> Signup and view all the answers

    ¿Qué unidad de medida relativa se basa en el ancho del carácter '0' (cero) de la fuente utilizada?

    <p>ch</p> Signup and view all the answers

    ¿Cuál es la característica principal de las unidades relativas en CSS?

    <p>Varían su tamaño en función del tamaño de otros elementos.</p> Signup and view all the answers

    ¿Qué unidad de medida CSS se refiere al 1% del ancho del viewport?

    <p>vw</p> Signup and view all the answers

    En el modelo de caja CSS, ¿qué representa el 'relleno'?

    <p>El espacio entre el borde y el contenido.</p> Signup and view all the answers

    ¿Cuál unidad de medida relativa se define en relación al tamaño de la fuente del elemento raíz?

    <p>rem</p> Signup and view all the answers

    Si un elemento tiene un ancho de 50%, ¿cómo se calcula este ancho?

    <p>El 50% del ancho del elemento contenedor.</p> Signup and view all the answers

    ¿Cuál es la extensión correcta que debe tener un archivo de hoja de estilos CSS?

    <p>.css</p> Signup and view all the answers

    ¿Qué atributo de la etiqueta <link> especifica la relación entre el documento HTML y el archivo CSS?

    <p>rel</p> Signup and view all the answers

    ¿Cuál es el valor que debe tener el atributo type de la etiqueta <link> cuando se enlaza un archivo CSS?

    <p>text/css</p> Signup and view all the answers

    ¿Qué atributo de la etiqueta <link> se usa para especificar la ubicación del archivo CSS externo?

    <p>href</p> Signup and view all the answers

    Si se tiene un directorio llamado 'styles' dentro del mismo directorio que el archivo HTML, y dentro de 'styles' se encuentra el archivo 'estilos.css', ¿cómo escribirías la URL en el atributo href?

    <p>styles/estilos.css</p> Signup and view all the answers

    ¿Cuál de las siguientes opciones describe mejor cómo se aplican los estilos CSS en HTML?

    <p>Se escriben en un archivo externo y se enlazan al HTML.</p> Signup and view all the answers

    ¿Cuál atributo de la etiqueta <link> define en qué tipo de dispositivo se va a aplicar el estilo CSS?

    <p>media</p> Signup and view all the answers

    Entre las opciones dadas, ¿Cuál es una forma de mencionar los Tipos de Unidades de Medida al aplicar un estilo?

    <p>1px</p> Signup and view all the answers

    ¿Cuál es la principal diferencia entre un selector descendiente y un selector hijo en CSS?

    <p>Los selectores descendientes no requieren una relación directa entre padres e hijos, pero el selector hijo sí la necesita.</p> Signup and view all the answers

    ¿Cómo se define la sintaxis general de una regla CSS?

    <p>selector {propiedad: valor;}</p> Signup and view all the answers

    ¿Qué carácter se utiliza en CSS para separar la propiedad de su valor dentro de una declaración?

    <p>Dos puntos (:)</p> Signup and view all the answers

    ¿Cuál es la función del punto y coma (;) en una regla CSS?

    <p>Separar una declaración de la siguiente.</p> Signup and view all the answers

    ¿Cuál es una desventaja principal de usar CSS en línea?

    <p>Las reglas no son visibles para otras páginas.</p> Signup and view all the answers

    ¿Dónde se deben incluir las reglas CSS cuando se insertan directamente en el HTML?

    <p>Solo dentro de la sección <head>.</p> Signup and view all the answers

    Si tienes un elemento <h1> y otro <h2> ambos con el mismo estilo definido con CSS en línea, ¿qué ocurre?

    <p>Cada elemento tendrá su propio estilo independiente.</p> Signup and view all the answers

    Si tienes un archivo HTML que usa CSS insertado, ¿en qué afecta este estilo a otras páginas?

    <p>El estilo no se aplicará a ninguna otra página.</p> Signup and view all the answers

    Study Notes

    Estilos Básicos: Tamaño, Color y Fuente

    • CSS (Cascading Style Sheets): Un lenguaje de hojas de estilos para controlar la presentación de documentos electrónicos (HTML y XHTML). Separa el contenido de la presentación.
    • Regla Predeterminada: La estructura CSS básica, que incluye un selector, una declaración y propiedades.
    • Selector: Indica al navegador el elemento HTML al que se aplicará la regla de estilo. Ejemplos incluyen el selector universal (*), selector de tipo (p), selector de clase (.nivel2), y selector de ID (#selector).
    • Declaración: Especifica una propiedad de estilo y su valor para un elemento seleccionado. Ejemplo: color: red;.
    • Propiedades: Características que pueden ser ajustadas para un elemento, como color, font-size, font-family.
    • Valor de la propiedad: El valor que se asigna a la propiedad, como red, 20px o un nombre de fuente.
    • Tipos de Selectores:
      • Selector universal (*): Selecciona todos los elementos en un documento.
      • Selector de tipo (p, h1, etc.): Selecciona elementos con un tipo de etiqueta específico.
      • Selector de clase (.nombreClase): Selecciona elementos con una clase específica.
      • Selector de ID (#nombreID): Selecciona elementos con un ID específico.
      • Selector de atributo ([atributo]): Selecciona elementos que tienen un atributo específico.

    Pseudo-clases

    • Pseudo-clase: Modifica el estilo de un elemento en función de su estado (e.g., cuando el usuario se posiciona sobre un enlace).
    • Ejemplos de pseudo-clases: :link, :visited, :hover, :active. Estas modificarían la apariencia de un enlace cuando se está visitando, se pasa el ratón encima, está activo, etcétera.

    Unidades de Medida

    • Unidades Absolutas: No cambian, como cm, mm, in (pulgadas), pt (puntos), pc (picas).
    • Unidades Relativas: Cambian en función de otras medidas, como em, ex, ch, rem, vw, vh, vmin, vmax, %.

    Propiedades de Estilos

    • height, max-height, max-width, min-height, min-width, width: Definen las dimensiones de un elemento. Los valores posibles pueden incluir valores numéricos acompañados de sus unidades (p. ej., 20px, 10%).
    • font-family, font-size, font-style, font-variant, font-weight, font: Proporcionan control sobre la apariencia de las fuentes del texto en un elemento. Los posibles valores pueden incluir nombres de fuentes, tamaños, estilos (como cursiva), variantes, gruesos (negritas o delgados).

    Inclusión de Estilos

    • Dentro de un elemento: Se incluyen en el propio elemento HTML, empleando el atributo style. Ejemplo: <p style="color: blue;">Texto azul.</p>.
    • Hoja de estilos externa: El documento CSS se almacena en un archivo separado con extensión .css y se enlaza con la etiqueta <link> en el elemento <head> del HTML.
    • Hoja de estilo en el mismo documento: Se incluye dentro de una etiqueta <style> dentro del elemento <head> del documento HTML.

    Recursos Adicionales

    • Se proporciona un enlace a un video para mayor aprendizaje del tema.

    Studying That Suits You

    Use AI to generate personalized quizzes and flashcards to suit your learning preferences.

    Quiz Team

    Related Documents

    Lectura 5 - Estilos Básicos, Tamaño, Color y Fuente PDF

    Description

    Este cuestionario pone a prueba tus conocimientos sobre los fundamentos de CSS, desde la relación entre bordes y márgenes hasta la definición de reglas. Responde a preguntas sobre selectores, unidades de medida y propiedades clave para demostrar tu comprensión del diseño web. ¡Prepárate para desafiar tus habilidades en CSS!

    More Like This

    CSS Selectors and Properties Quiz
    7 questions

    CSS Selectors and Properties Quiz

    AdmiringFlugelhorn avatar
    AdmiringFlugelhorn
    CSS Properties for Customization
    40 questions

    CSS Properties for Customization

    WorkableStrength8904 avatar
    WorkableStrength8904
    Introduction to CSS Properties and Box Model
    5 questions

    Introduction to CSS Properties and Box Model

    SweetheartFarce avatar
    SweetheartFarce
    Introduction to CSS Basics
    50 questions

    Introduction to CSS Basics

    ReformedConnemara2249 avatar
    ReformedConnemara2249
    Use Quizgecko on...
    Browser
    Open
    Browser
    Browser