B3T8 CSS

Question 1

Indica varios FW de CSS

Answer 1

Bootstrap
Material
Tailwind

Question 2

Indica varios preprocesadores de CSS

Answer 2

LESS
SASS
STYLUS
PostCSS

Question 3

Indica las at-rules

Answer 3

@charset
@import
@media
@font-face
@layer –> Capa de cascada para agrupar prioridades

Ej. de @layer

@layer reset;
@layer typography;
@layer them;

–> La que menos prioridad tendría sería la capa reset, luego typografy y luego them

Question 4

Indica las pseudo-clases

Answer 4

:active
:hover
:visited
:invalid
:empty
:required
:first-child()
:ntchild()–> Hijo inésimo
:not(selector)
:lang()
:root

Question 5

Indica los pseudoelementos

Answer 5

::after
::before
::first-line
::fist-letter

Question 6

Formas de posicionar elementos. Propiedad position. Posibles configuraciones

Answer 6

• Static: por defecto. Orden natural
• Relative:en base a su posición static
• Absolute:en base al contenedor padre
• Fixed: en base al documento
• Sticky: fijo en pantalla

Question 7

Propiedad display. Posibles configuraciones

Answer 7

• none: no renderiza hueco
• inline
• block
• inline-block
• flex
• grid

Question 8

Propiedad visibility

Answer 8

visible
hidden –> Deja hueco

Question 9

Unidades de medidas absolutas

Answer 9

-in: pulgadas
-cm
-pc: picas
-mm
-pt:puntos
-px:pixel
-Q: cuarto de mm

Question 10

Unidades de medidas relativas

Answer 10

-em–>M tamaño de la fuente del navegador
-ex–> X mitad de em
-ch–>ancho del cero
-rem–> fuente del root
-% porcentaje
-vw: 1vw es la centésima parte del ancho de la ventana:: Cambia el tamaño en función de la anchura de la ventana
-vh:1vh es la centésima parte del alto de la ventana:: Cambia el tamañoen función del alto de la ventana

Question 11

Como se crea una variable en css y como se usa

Answer 11

CREACIÓN
:root {
–color-destacado:red;
}

USO
div{
color:var(–color-destacado);
}

Question 12

Ejemplo y uso de estilos creados con SASS

Answer 12

CREACIÓN
@mixin card($ancho,$alto){
width:$ancho;
height:$alto;
}

USO:
.card-1 {
@include card(300px, 200px);
}

Question 13

Diferencia entre asignar estos estilos
a+b{color:blue}
a~b{color:black}

Answer 13

a+b{color:blue} –> hermanos directos. Tiene que haber un elemento b justo después de un elemento a. Misma jerarquía y orden.

a~b{color:black} –> Hermanos a misma altura con independencia de si van juntos o no. Cualquier elemento b que vaya detrás de un elemento a (separados o no por algún elemento pero MISMA ALTURA)

Question 14

Comentarios en css

Answer 14

La sintaxis de comentarios /* */ es usada para comentarios de una o múltiples líneas. No hay otra forma de especificar comentarios en hojas de estilos externas.
Sin embargo, cuando se usa el elemento **<style>**, **se puede usar <!-- -->** para ocultar CSS para navegadores antiguos, aunque no es recomendable.</style>