b3t8 - CSS3 Flashcards
Cuándo se espera la versión CSS4? Por qué?
No se espera, ya que CSS se evoluciona desde la versión 3 mediante la adición de nuevos modules
Qué modelos de colocación se incluyen en CSS3?
FlexBox y Grid
Cómo se activa el modelo de caja flexible en CSS3?
Con la propiedad “display: flex” del contenedor
Qué properties principales se usan en flexbox?
Cómo se amplía la funcionalidad de CSS3?
Mediante la creación de nuevos modules, tematizados, que a su vez tienen versiones
css3-color
selectors-3
selectors-4
…
En CSS2, cómo es el modelo de posicionamiento?
Absoluto, relativo …
En qué versión de CSS se incluyen las capas y cómo se llama la propiedad para controlarlas
En CSS2, con la propiedad z-index
Cuál es el mime type de css?
text/css
Qué 3 principales preprocesadores CSS se usan? Qué son y para qué sirven
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
Cuál es la extensión de un archivo de lenguaje SASS
SCSS
Qué es Chocolatey? Y Brew?
Chocolatey: Es un gestor de paquetes para windows
Brew: Es un gestor de paquetes para mac y linux
Para qué sirve el concepto de mixin de los preprocesadores CSS?
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)”
Qué hace la sentencia “lessc styles.less styles.css”
Compila un fichero del preprocesador less a un fichero css
Qué 4 principales frameworks de CSS3 existen?
Bootstrap
Foundation
Bulma
Materialize
En Bootstrap, qué breakingpoints o prefijos para construir elementos responsive¿
(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
Qué tres formas hay de dar estilos a una página html con CSS?
- 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”
Qué tres tipos de selectores donde se especifican varias etiquetas hay?
- Agrupamiento: Para poner selectores independientes-→ p, div, i{…}
- 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
- 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
Qué 5 selectores básicos hay para aplicar estilos a un elemento
- * { 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
Qué significa este selector?
a ~ b
y este?
a + b
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
Cómo es el selector para seleccionar todos los elementos que tengan definido un atributo?
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)
Qué es el método querySelector?
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
Qué es una pseudoclase para un selector? Qué sintaxis se usa? Nombra algunas pseudoclases
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)
Qué es una pseudoelementos para un selector? Qué sintaxis se usa? Nombra algunos pseudoelementos
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
Cómo sería la tabla de prioridades de la cascada de CSS aplicadas a nivel de navegador, usuario y autor
De menos a más:
ORIGEN + IMPORTANCIA
- user agent (navegador) + normal
- user + normal
- author + normal
- author + !important
- user + !important
- user agent (navegador) + !important
!important se pone detrás de la propiedad:valor dentro del estilo css
p {
background-color: red !important;
}
