Font size
WorksheetsCSS INT
Total questions: 98
Worksheet time: 1hrs 17mins
¿Que significa CSS?
Estilo de hojas en cascada
Cascada de hojas con estilo
Hojas de estilo en cascada
Hojas en cascada con estilo
¿Para que se utiliza el CSS?
Se utiliza para organizar la presentación y aspecto de una página web.
Solo se utiliza para animar elementos de una pagina web.
Para que se vea bonita una aplicacion.
Se utiliza para añadir color, formas, codigo y caracteristicas especiales a una pagina web.
Seleccione la sintaxis correcta de CSS.
Seleccione todas las formas en la que se puede adjuntar CSS a un documento
Externas
Embebidas
Internas
En linea
De internet
¿Cual es la sintaxis para colocar CSS de manera externa?
¿Cual es la propiedad que coloca sangría a un texto?
text-align
text-indent
text-center
text-decoration
¿Cual es la salida de un elemento h1, con el estilo de la imagen?
¿Con cuál de los siguientes link hace una referencia a una hoja de estilo externa de forma correcta?
<link rel=stylesheet type=text/css href=style.css />
<link rel="styleshet" type="text/css" href="style.css">
<link rel=stylesheet type=text/css href=style.css>
<link rel="stylesheet" type="text/css" href="style.css" />
En CSS, para cambiar el color de fondo de un elemento se usa
color
bgcolor
background-color
backcolor
Con esta etiqueta <link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" /> enlazamos un/a:
Hoja de estilos externa
Código javascript
Fuente web
El formato más utilizado en las fuentes web son:
SVG Font (.svg, .svgz)
OpenType (.ttf, .otf),
TrueType (.ttf)
WOFF Web Open Font Format (.woff)
La propiedad CSS margin: 10em 5em significa:
margin-top, margin-bottom = 10em
margin-right, margin-left = 5em
margin-right, margin-left = 10em
margin-top, margin-bottom = 5em
margin-top, margin-right = 10em
margin-bottom, margin-left = 5em
Propiedad que permite determinar un borde alrededor de un elemento HTML
border
padding
margin
float
¿De las etiquetas a continuación cuál tiene un impacto directo sobre la página de resultados de búsqueda que ofrece Google sobre un determinado sitio web?
<h1>
<a href=”#” rel=”nofollow”>anchor</a>
<title>
<strong>
¿Cuál es la forma más eficiente de aplicar estilos CSS en un documento HTML?
En línea
Incrustado en la cabecera
Hojas de estilo externas
Mediante PHP
¿Cómo se indica que el color del texto es de color rojo?
color: red ;
color: #FF0000;
color: RGBa(255, 0, 0, 0.8);
Todas las respuestas son correctas
color: rojo;
¿Cómo se indica que todos los elementos "span" tienen el texto en negrita?
span {text-color:bold}
span {text-weight:bold}
span {font-style:bold}
span {font-weight:bold}
¿Qué propiedad se emplea para cambiar el tipo de letra de un elemento?
text-type
font-type
font-family
text-family
Que harías para seleccionar todas las imágenes y todos los enlaces que estén dentro de la etiqueta "section".
section img section a {...}
section img, section a {...}
section img a {...}
section, img a {...}
Elementos block
son posicionados uno sobre otro hacia abajo en la página.
son posicionados lado a lado, uno al lado del otro en la misma
son posicionados en las esquinas de la página
Ninguna opción es correcta
Elementos inline
son posicionados uno sobre otro hacia abajo en la página.
son posicionados lado a lado, uno al lado del otro en la misma línea, sin ningún salto de línea a menos que ya no haya más espacio horizontal
para ubicarlos.
son posicionados en las esquinas de la página
Ninguna opción es correcta
Una página web es en
realidad un grupo de cajas ordenadas siguiendo ciertas reglas. Estas reglas son
establecidas por estilos provistos por los navegadores o por los diseñadores usando CSS.
La afirmación es VERDADERA
La afirmación es FALSA
HTML y CSS no tienen nada que ver
Existen tres opciones para escribir las reglas en CSS. ¿La imagen corresponde?
Estilo en línea
Hoja de estilo interna mediante <style></style>
Archivo CSS
Ninguna opción es correcta
Existen tres opciones para escribir las reglas en CSS. ¿La imagen corresponde?
Estilo en línea
<style></style>
Archivo CSS
Ninguna opción es correcta
Existen tres opciones para escribir las reglas en CSS. ¿La imagen corresponde?
Estilo en línea
<style></style>
Archivo CSS externo
Ninguna opción es correcta
Existen selectores básicos. ¿La imagen corresponde a la definición en CSS a un selector?
Selector Universal
Selector de Tipo
Selector de Clase
Selector de Atributo
Selector ID
Existen selectores básicos. ¿La imagen corresponde a la definición en CSS a un selector?
Selector Universal
Selector de Tipo
Selector de Clase
Selector de Atributo
Selector ID
Existen selectores básicos. ¿La imagen corresponde a la definición en CSS a un selector?
Selector Universal
Selector de Tipo
Selector de Clase
Selector de Atributo
Selector ID
Existen selectores básicos. ¿La imagen corresponde a la definición en CSS a un selector?
Selector Universal
Selector de Tipo
Selector de Clase
Selector de Atributo
Selector ID
Existen selectores básicos. ¿La imagen corresponde a la definición en CSS a un selector?
Selector Universal
Selector de Tipo
Selector de Clase
Selector de Atributo
Selector ID
¿Cómo se escribe un comentario en CSS3?
-- mi comentario
<!-- mi comentario -->
// mi comentario
/* mi comentario */
¿Cómo se hace en CSS para que el texto esté centrado?
center: true
text-center: true
text-align: center
align: center
En CSS3, ¿cuál de estas declaraciones define un borde redondeado con un radio de 20px en la esquina inferior derecha?
border-radius: 40px 20px 20px 80px;
border-radius: 40px 20px;
border-radius: 20px 20px 40px 20px;
border-radius: 20px 40px 60px 80px;
¿Cuál es la propiedad CSS que se utiliza para determinar el espacio entre el borde de un elemento y su contenido?
border
padding
margin
float
Escoge 2 maneras de agrega margen solamente a la parte de arriba de un elemento
margin: top 10px;
margin: up 30px;
margin-top: 15px;
top-margin : 5px;
margin: 10px 0 0 0;
¿ En qué elemento del archivo HTML se pone el enlace a un archivo CSS separado?
entre <head> y </head>
entre <title> y </title>
entre <body> y </body>
entre <h1> y </h1>
¿ Cómo se llama una pieza completa de CSS ?
Declaración
Selector
Regla
Propiedad
En una regla CSS
¿ cómo se llama la palabra FUERA de las llaves { } ?
Declaración
Selector
Regla
Propiedad
En una regla CSS
¿ cómo se llama CADA LÍNEA DENTRO de las llaves { } ?
Propiedad
Declaración
Selector
Valor
Cada declaración CSS contiene ...
selector
propiedad
propiedad y valor
valor
En una declaración CSS
¿ cuál es el símbolo que separa una propiedad de su valor ?
= signo igual
: dos puntos
; punto y coma
" comillas
CADA declaración CSS termina con ...
: dos puntos
; punto y coma
} llave
signo mayor
Para cambiar el fondo de un documento HTML
¿ a qué SELECTOR se aplicará la regla CSS ?
head
header
body
div
¿ Qué propiedad CSS determina que una etiqueta HTML sea
un BLOQUE o un elemento EN LÍNEA ?
box-sizing
display
border
padding
¿ Qué características tienen las etiquetas tipo BLOQUE ?
Ocupan todo el ancho disponible
Quedan una abajo de la otra
Su altura depende de su contenido
Todas son correctas
¿ Qué propiedad CSS controla el espacio exterior de bloques HTML ?
border
box-sizing
margin
padding
¿ Qué propiedad CSS controla el "relleno" de bloques HTML ?
border
box-sizing
margin
padding
Los argumentos para la función RGB si se quiere obtener el color verde son:
255,0,0
255,255,255
0,255,0
125,125,125
El argumento alpha en la función rgba() permite aplicar transparencia al color, una transparencia completa se logra con el valor 1.
La propiedad flex de display permite que los elementos hijos se alineen de forma horizontal
Verdadero
Falso
La propiedad "flex-direction: column" permite crear columnas para agregar contenido a la página
Verdadero
Falso
La propiedad "justify-content:center" permite que los hijos se centren horizontalmente.
Verdadero
Falso
La propiedad "justify-content:space-around" podría ser útil para crear un menú horizontal
Verdadero
Falso
Con la propiedad "flex-wrap: wrap" se puede indicar que los elementos hijos no se ajusten en varias filas, sino que siempre permanezcan en una fila, aunque signifique un desbordamiento.
Verdadero
Falso
¿Cuál es el valor predeterminado de la propiedad flex-direction?
column-reverse
row
column
¿Qué propiedad se utiliza para permitir que un elemento flexible crezca para ocupar el espacio disponible?
flex-shrink
flex-grow
flex-basis
¿Cómo se especifica el orden visual de un elemento flexible?
order
flex-order
order-index
¿Cuál es la función principal de la propiedad flex-shrink en Flexbox?
Controla la capacidad de un elemento flexible para crecer y ocupar el espacio disponible.
Define el tamaño inicial de un elemento flexible antes de que comience a distribuirse el espacio adicional.
Determina la capacidad de un elemento flexible para contraerse y ocupar menos espacio cuando sea necesario
¿Cuál es la función principal de la propiedad flex-basis en Flexbox?
Establece el tamaño inicial de un elemento flexible antes de que comience la distribución del espacio adicional.
Controla la capacidad de un elemento flexible para crecer y ocupar el espacio disponible.
Determina el tamaño base de un elemento flexible antes de que se apliquen las propiedades flex-grow y flex-shrink
¿Cuál es la función de la propiedad gap en este contexto?
Define el espacio entre elementos flexibles dentro de un contenedor.
Establece la separación entre las filas y columnas de una cuadrícula creada con Flexbox
Especifica el margen exterior de los elementos hijos en un diseño flexible.
¿Cuál es el propósito principal de la propiedad flex-wrap en Flexbox?
Controla la capacidad de un elemento flexible para crecer y ocupar el espacio disponible.
Establece la dirección en la que los elementos flexibles se colocan dentro de un contenedor (fila o columna).
Determina si los elementos flexibles deben envolverse en múltiples líneas si no pueden ajustarse en la dirección principal
¿Cuál es la función principal de la propiedad align-items en Flexbox?
Alinea los elementos flexibles en la dirección transversal del contenedor.
Controla la capacidad de un elemento flexible para crecer y ocupar el espacio disponible.
Alinea los elementos flexibles a lo largo del eje transversal del contenedor
¿Qué valor de `position` se utiliza para hacer que un elemento se comporte como `relative` hasta que alcance un cierto punto de desplazamiento, momento en el cual se comporta como `fixed`?
sticky
scroll
static
absolute
¿Cuál de estas NO es una propiedad de Flexbox?
grid-column
justify-content
display: flex;
align-items
¿Qué lenguaje aporta el diseño, la estética y los detalles en HTML5?
Lenguaje C++
CSS
Dream Weaver
Lenguaje Ensamblador
¿Cuáles de los siguientes selectores usa una pseudo-clase?
a:hover
a.hover
a>hover
Cuales son las 4 posibilidades de Flex-direction
column-inverse,row-left,column-right, column-reverse
row,row-reverse,column, column-reverse
row-flex,row-reverse-flex,column-flex, column-reverse-flex
Selector general para dar estilo a todas las imagenes en css
<img id="destacada" src="imagen1.png" />
<img id="destacada" src="imagen2.png" />
.destacada
#destacada
img
ninguna de las anteriores
Selector para asignar estilo a la imagen1.
<img id="destacada1" src="imagen1.png" />
<img id="destacada2" src="imagen2.png" />
.destacada2
#destacada2
.destacada1
#destacada1
pseudo-clase que se activa cuando el usuario se desplaza sobre un elemento con el puntero del mouse.
:hover
:filter
:attachment
ninguna de las anteriores
propiedad para aplicar filtros sobre una imagen
hover
filter
attachment
ninguna de las anteriores
asignar un filtro en escala de grises
filter: opacity(.5);
filter: sepia(60%);
filter: saturate(180%);
filter: grayscale(80%);
asignar un filtro de transparencia
filter: opacity(.5);
filter: sepia(60%);
filter: saturate(180%);
filter: grayscale(80%);
Propiedad que permite redondear bordes en una imagen
transform: rotateY(180deg);
border-radius:50%;
transform: rotate(360deg);
ninguna de las anteriores
propiedad que permitirá asignar una sombra al borde de una imagen.
box-shadow
transform
border-radius
todas las anteriores
establece el margen para los cuatro lados
webkit
transform
border
margin
El contenido es recortado, si es necesario, para que se ajuste verticalmente dentro del área de relleno.
padding:0;
display:flex;
margin:auto;
overflow:hidden;
El código css para lograr este posicionamiento según la imagen es:
flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
El código css para lograr este posicionamiento según la imagen es:
flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
Tipos de posicionamiento:
top, left, right, bottom
static, relative, absolute, fixed, sticky
sticky, mixed, relax, relative, absolute
width, height, margin, border
Se refiere al proceso de adaptar una página al viewport (área visible del navegador que se muestra en la pantalla) de todo tipo de dispositivos, como tablets o móviles:
Diseño media query
Diseño responsivo
Diseño adaptativo
Diseño de pantalla
Técnicas del diseño responsivo:
Mobile style & Desktop style
Mobile form & Desktop form
Mobile design & Desktop design
Mobile first & Desktop first
Para contener variables en CSS es necesario hacer uso de la pseudo-clase : (a) , seguido de llaves.
Al utilizar la propiedad display: flex en el elemento padre, los elementos hijos se colocarán en:
Filas
Columnas
Teniendo en cuenta el código, ¿Qué verías en el navegador?
¿Cuál es la primera propiedad que le pasamos al contenedor padre para especificar que vamos a trabajar con grid?
display: auto;
display: grid-container;
display: grid-template;
display: grid;
¿Qué propiedad se utiliza para definir las columnas del grid?
grid-columns;
grid-layout-columns;
grid-template-columns;
columns;
Para alinear verticalmente toda la malla de grid, ¿Cuál propiedad se utiliza?
justify-content
align-content
align-items
justify-items
Para alinear horizontalmente solo un elemento hijo ¿Cuál propiedad se utiliza?
align-items
justify-content
justify-items
justify-self
Qué propiedad nos permite modificar la posición natural de cualquier elemento del documento HTML.
relative
absolute
sticky
Tipos de posicionamiento:
top, left, right, bottom
static, relative, absolute, fixed, sticky
sticky, mixed, relax, relative, absolute
width, height, margin, border
El modulo de GRID es un sistema basado en .................
filas
columnas
celdas
El elemento padre de GRID se llama CONTENEDOR
Verdadero
Falso
Se puede ajustar el espaciado entre los grid (celdas) usando la siguiente propiedad:
column-gap
row-gap
todas son correctas (menos 1 parecida a esta)
gap
todas son incorrectas
¿Cuál es el propósito de grid CSS?
Crear animaciones interactivas en una página web.
Añadir elementos decorativos a una página web.
Optimizar el rendimiento del sitio web.
Proporcionar un sistema de maquetación para crear diseños web complejos y responsivos.
¿Cómo se alinean los elementos de la cuadrícula horizontalmente en CSS?
justify-content
align-items
align-content
justify-items
