b3t8 - CSS3

Question 1

Cuándo se espera la versión CSS4? Por qué?

Answer 1

No se espera, ya que CSS se evoluciona desde la versión 3 mediante la adición de nuevos modules

Question 2

Qué modelos de colocación se incluyen en CSS3?

Answer 2

FlexBox y Grid

Question 3

Cómo se activa el modelo de caja flexible en CSS3?

Answer 3

Con la propiedad “display: flex” del contenedor

Question 4

Qué properties principales se usan en flexbox?

Question 5

Cómo se amplía la funcionalidad de CSS3?

Answer 5

Mediante la creación de nuevos modules, tematizados, que a su vez tienen versiones

css3-color
selectors-3
selectors-4
…

Question 6

En CSS2, cómo es el modelo de posicionamiento?

Answer 6

Absoluto, relativo …

Question 7

En qué versión de CSS se incluyen las capas y cómo se llama la propiedad para controlarlas

Answer 7

En CSS2, con la propiedad z-index

Question 8

Cuál es el mime type de css?

Answer 8

text/css

Question 9

Qué 3 principales preprocesadores CSS se usan? Qué son y para qué sirven

Answer 9

LESS ( Leaner Style Sheets)
SASS (Syntactically Awesome Style Sheets)
STYLUS

PostCSS

Son otro lenguaje que añade nuevas funcionalidades que no tiene CSS, como variables, bucles, anidamientos, mixins, extends … y sirven para desarrollar CSS de forma más sencilla. Requieren luego pasarles un proceso para convertir el documento del preprocesador a uno CSS

Question 10

Cuál es la extensión de un archivo de lenguaje SASS

Answer 10

SCSS

Question 11

Qué es Chocolatey? Y Brew?

Answer 11

Chocolatey: Es un gestor de paquetes para windows
Brew: Es un gestor de paquetes para mac y linux

Question 12

Para qué sirve el concepto de mixin de los preprocesadores CSS?

Answer 12

Sirve para crear “macros” o plantillas, a las que le puedes pasar parámetros para aplicar esa plantilla o macro pero con diferencias. Por ejemplo para crear el mixin “card” a la que le pasas parámetros de ancho, color, borde, … y que luego puedes aplicar a selectores por ejemplo.
En LESS o SASS o similar, se usan los mixin con “@include [nombremixin] (parametros)”

Question 13

Qué hace la sentencia “lessc styles.less styles.css”

Answer 13

Compila un fichero del preprocesador less a un fichero css

Question 14

Qué 4 principales frameworks de CSS3 existen?

Answer 14

Bootstrap
Foundation
Bulma
Materialize

Question 15

En Bootstrap, qué breakingpoints o prefijos para construir elementos responsive¿

Answer 15

(ninguno) : X-small
sm: small
md: medium
lg: large
xl: xtra large
xxl: extra extra large

Por ejemplo “container-md” para aplicar esta clase a un elemento html

Question 16

Qué tres formas hay de dar estilos a una página html con CSS?

Answer 16

• Externo: definir un fichero css y relacionarlo en la página html con
• Interno: dentro del nodo head de un html, incluir el nodo y dentro definir los estilos css
• local: dentro de un elemento de html, incluir el atributo “style”

Question 17

Qué tres tipos de selectores donde se especifican varias etiquetas hay?

Answer 17

1. Agrupamiento: Para poner selectores independientes-→ p, div, i{…}
2. Contextuales: Para aplicar a etiquetas que están dentro de otras etiquetas a cualquier nivel de profundidad -→ div p {…}. Aquí se aplica a los p que están dentro de div aunque haya hijos intermedios
3. Hijos directos Para aplicar a etiquetas que están dentro de otras etiquetas directamente-→ div > p {…}. Aquí se aplica a los p que están dentro de div, pero solo si es un hijo directo

Question 18

Qué 5 selectores básicos hay para aplicar estilos a un elemento

Answer 18

• * { propiedad: valor; propiedad:valor;} → Aplica a todos los elementos
• etiqueta { propiedad: valor; propiedad:valor;} → Aplica a ese tipo de etiqueta
• # identificador { propiedad: valor; propiedad:valor;} → Aplica al elemento con ese id
• .clase { propiedad: valor; propiedad:valor;} → Aplica a cualquier etiqueta que aplique esa clase
• etiqueta.clase { propiedad: valor; propiedad:valor;} →Aplica a las etiquetas de ese tipo, que apliquen esa clase

Question 19

Qué significa este selector?
a ~ b

y este?

a + b

Answer 19

a ~ b: aplica el estilo a b, siempre que sea hermano, directo o no, de a, y además b esté DESPUÉS de a

a + b: aplica el estilo a b, siempre que sea hermano DIRECTO o adyacente de a, y además b esté DESPUÉS de a

Question 20

Cómo es el selector para seleccionar todos los elementos que tengan definido un atributo?

Answer 20

etiqueta[atributo] {..estilo..}

a[title] {color = red;}

a[class~=pestaña] {color = red;} (este selecciona los elementos a que tengan entre sus clases aplicadas la clase pestaña)

Question 21

Qué es el método querySelector?

Answer 21

Es un método javascript que tienen el nodo “document” del arbol DOM, al que se le pasa como parámetro una expresión “selector” de CSS y devuelve el primer elemento HTML que seleccione la expresión

document.querySelector(‘a.enlaceImportante’);

también existe querySelectorAll, para que traiga todos los nodos seleccionados por la expresión

Question 22

Qué es una pseudoclase para un selector? Qué sintaxis se usa? Nombra algunas pseudoclases

Answer 22

Es una palabra clave que se le añade a un selector para indicar un estado especial y de esta forma forma filtrar más el selector, indicándole otra característica:
La sintaxis es selector : pseudoclase → p:hover {color:red;)

• active → si el elemento seleccionado está activo
• hover → si se le pasa el ratón por encima
• visited
• invalid → cuando tienen expresiones regulares y si no los cumplen
• required
• first-child → el primer hijo
• nth-child → coincide con uno o más elementos en función de su posición entre un grupo de hijos.
• not (selector) → los que no cumplan el selector
• lang () → seleccionar en función del idioma que se le pase
• root → representa al elemento raíz (en HTML es el elemento html)

Question 23

Qué es una pseudoelementos para un selector? Qué sintaxis se usa? Nombra algunos pseudoelementos

Answer 23

Es una forma de referirse a elementos que no existen en el árbol DOM html, creándolos en CSS

La sintaxis es selector::pseudoelemento

• after → crea un pseudoelemento en el DOM después del elemento seleccionado por el selector, con el atributo content
  
  • por ej: a::after { content: “→”;}
• before→ similar a after, pero para antes
• first-line → toma como un pseudoelemento la primera línea de un elemento, y le puede aplicar estilo sólo a esa línea
  
  • por ej: p::first-line {color:red; size:10px;}
• first-letter → similar al anterior, para la primera letra

Question 24

Cómo sería la tabla de prioridades de la cascada de CSS aplicadas a nivel de navegador, usuario y autor

Answer 24

De menos a más:

ORIGEN + IMPORTANCIA

1. user agent (navegador) + normal
2. user + normal
3. author + normal
4. author + !important
5. user + !important
6. user agent (navegador) + !important

!important se pone detrás de la propiedad:valor dentro del estilo css

p {
background-color: red !important;
}

Question 25

Cómo afecta la palabra !important a la prioridad de dos estilos, que ambos son definidos por el author, y que tienen entre ellos tienen distinta especificidad?

Answer 25

Si se le pone !important al estilo con menos especificidad, aún así tiene mayor prioridad, porque es más importante Primero se resuelve la importancia. A igual importancia se aplica la especificidad. Pero como en este ejemplo no son igual de importantes, da igual la especificidad

Question 26

Cómo se resuelve la prioridad de los estilos CSS cuando se está en un mismo nivel de prioridad (por ejemplo en nivel author)? Cómo se llama este concepto? Qué niveles tiene de menos a más importantes?

Answer 26

Se resuelve con la ESPECIFIDAD 1. estilos inline 2. identificadores 3. clases, pseudoclases, atributos 4. elementos

Question 27

Cómo se resuelve un conflicto de estilos en el mismo nivel de prioridad, atendiendo a la especifidad?

Answer 27

Se suman los valores totales del selector, en función de un peso de cada una de sus partes. Estos pesos varían por cada nivel de especifidad 1. estilos inline → 1000 2. identificadores → 100 3. clases, pseudoclases, atributos → 10 4. elementos → 1

Question 28

Cómo se resuelve un conflicto de importancia en la cascada de estilos CSS, cuando es el mismo nivel de prioridad y además el mismo nivel (peso) de especifidad?

Answer 28

Por el orden. El navegador se queda con el ÚLTIMO que haya leído

Question 29

Qué es la herencia en CSS

Answer 29

Es la capacidad de que elementos hijos hereden el valor de ciertos atributos del padre que son heredables, siempre que el hijo no especifique ese atributo, en cuyo caso se aplica el del hijo y no el heredado Por ejemplo se heredan los atributos color, font-, text-, …

Question 30

Cómo se puede forzar la herencia de un atributo de CSS, que por sí mismo no es heredable de forma nativa?

Answer 30

con el valor inherit en el atributo del elemento que lo quiere heredar. En el siguiente ejemplo, los elementos p heredarán el background de su elemento padre p { background: inherit; }

Question 31

En qué se diferencia la propiedad display:none con visibilty:hidden de un elemento html?

Answer 31

display: none no renderiza nada, ni el hueco del elemento visibility: hidden sí deja el hueco

Question 32

Cuándo se espera la versión CSS4? Por qué?

Answer 32

No se espera, porque a partir de CSS3 la funcionalidad se amplía mediante modules, que agrupan funcionalidades. A su vez estos modules crecen con sus propias versiones

Question 33

Qué modelos de colocación se incluyen en CSS3?

Answer 33

FlexBox y Grid

Question 34

Cómo se activa el modelo de caja flexible en CSS3?

Answer 34

En el contenedor se pone el atributo display:flex al contenedor .container { display: flex; */\* or inline-flex \*/* }

Question 35

Qué properties principales se usan en flexbox para el contenedor flexbox?

Answer 35

* display: activa al contenedor como un flexblox, es decir, sus hijos se ordenaran de forma flexible * flex-direction: indica el eje y el sentido de la ordenación (row, row-reverse, column, column-reverse) * flex-wrap: cómo se trata cuando no caben los hijos en una sola línea (nowrap (todo en una línea), wrap (salto de línea), wrap-reverse * flex-flow: unifica el concepto flex-direction y flex-wrap * justify-content: (flex-start, flex-end, start, end, center, …) * align-items * align-content

Question 36

Qué properties principales se usan en flexbox para los item dentro del contenedor flexbox?

Answer 36

* order * flex-grow: permite crecer si hay espacio * flex-shrink * flex-basis * flex: las tres anteriores juntas * align-self: sobreescribe el alineamiento definido en el contenedor para un elemento

Question 37

Cómo se amplía la funcionalidad de CSS3?

Question 38

Qué significan las siguientes unidades relativas en CSS3? em ex ch rem % vw vh

Answer 38

em → proporción respecto al font-size del elemento (el font-size se hereda) Se suele poner al html un font-size:100% que son 16px, por lo que en sus hijos 1em = 16px ex → la mitad de em ch → el ancho del cero rem → como em, pero siempre respecto de root (html) Por tanto en cualquier elemento hijo a cualquier profunidad 1 rem = font-size de html, no a font-size del elemento % → Porcentaje respecto del contenedor padre vw → 1% respecto a la anchura del viewport en pixeles vh → 1% respecto a la altura del viewport en pixeles

Question 39

Qué significan en CSS3 las siguientes unidades absolutas? in cm pc mm pt px Q

Answer 39

in → pulgadas cm pc → pica (12 pt) mm pt → punto (0.35 mm) px Q → ¼ de mm

Question 40

Cómo se llaman en CSS los “recursos” a través de los cuales podemos determinar unos estilos diferentes en función del alto, ancho, … del dispositivo?

Answer 40

Media queries. Se usan para * Aplicar estilos condicionales con las [_reglas-at_](https://developer.mozilla.org/es/docs/Web/CSS/At-rule) [_@media_](https://developer.mozilla.org/es/docs/Web/CSS/@media) e [_@import_](https://developer.mozilla.org/es/docs/Web/CSS/@import) de [_CSS_](https://developer.mozilla.org/es/docs/Web/CSS). * Indicar medios específicos en los elementos , y otros elementos [_HTML_](https://developer.mozilla.org/es/docs/Web/HTML). * [Testear y monitorizar los estados de los medios](https://developer.mozilla.org/es/docs/Web/Guide/CSS/probando_media_queries) usando los métodos de javascript [_Window.matchMedia()_](https://developer.mozilla.org/es/docs/Web/API/Window/matchMedia) y [_MediaQueryList.addListener()_](https://developer.mozilla.org/es/docs/Web/API/MediaQueryList/addListener) Ejemplo media query @media only screen and (max-width: 414px) { .deviceWidth {width:280px!important; padding:0;} .center {text-align: center!important;} }

Question 41

En CSS3, cuando se ponen todos los tamaños de margen o de padding, de los cuatro lados en la misma propiedad, en qué orden se expresan?

Answer 41

**En sentido de las agujas del reloj desde TOP** **TOP** **RIGHT** **BOTTOM** **LEFT** {margin: 100px, 10px, 15px, 370px } → top, right, bottom, left Si solo ponen 3, es → top, right-left, bottom Si solo ponen, 2 es → top-bottom, right-left Si solo ponen 1 sin especificar cuál, es → para todos igual

Question 42

En qué orden de cercanía están el borde, el margen y el relleno del elemento en HTML/CSS?

Answer 42

Elemento → Padding → Borde → Margen

Question 43

Qué significa que en una propiedad de un selector de CSS3 tenga prefijo, como: - webkit-box-shadow:.. - moz-box-shadow:…

Answer 43

Que aplican según el navegador o motor de renderizado

Question 44

Qué mecanismo surgió ya en CSS2 para determinar estilos según el tipo de medio por el que se va a visualizar la información?

Answer 44

Los Media Types: @media print{….} @media screen{…]

Question 45

Qué mecanismo surgió ya en CSS3 para determinar estilos según el tipo y tamaño del dispositivo visualizar la información y hacerla responsive?

Answer 45

Media Query (responsive)

Question 46

Cómo se llama el tipo de programas que convierten el código de un “superlenguaje” como los preprocesadores de CSS (LESS, SASS, SYTLUS), a código CSS?

Answer 46

Transpiladores, o también se usa más en este mundo css **Compiladores**

Question 47

En las propiedades definidas en los selectores, es necesario poner punto y coma?

Answer 47

Es opcional, es una buena práctica p { valor: (es)**;** }

Question 48

En CSS3, qué cosas se expresan con @? “reglas at”

Answer 48

@media → para MediaQuery, para responsive en función del tamaño pantalla @page → definir los estilos/formatos de la pagina cuando vamos a imprimirla @import → Importar css desde otros ficheros css @charset → definir el charset @font-face → usar fuentes personalizadas @layer → Sirve para agrupar estilos y dar prioridades entre esos grupos

Question 49

En Javascript/DOM, ¿Conoces algun metodo para obtener un elemento(s) del DOM en base a su Id? ¿Y en base a un valor de algun atributo dado? Por ej. dame todos los nodos que tengan el valor true en su atributo aria-expanded

Answer 49

1. - document.getElementById('...') 2. - documento.querySelector('...')

Question 50

Cómo se definen en CSS3 variables personalizadas?

Answer 50

se declara y se le asigna valor: --variable:valor; Se usa: var(--variable)

Question 51

Qué atributos se heredan por defecto y cuáles no?

Answer 51

Principalmente se heredan los que tienen que ver con el texto y no se heredan los que tienen que ver con margenes, bordes, etc .. Sí heredan: color, font, font-family, font-size, font-weight, font-variant, font-style, line-height, letter-spacing, text-align, text-indent, text-transform,white-space, y word-spacing. No heredan: padding, border, margin, …

Question 52

Repasar los atributos típicos de CSS para el examen: background, color, text- ….