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 style 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
si el elemento seleccionado está activo
si se le pasa el ratón por encima
si se ha visitado ya
cuando tienen expresiones regulares y si no los cumplen
obligatorio
el primer hijo
coincide con uno o más elementos en función de su posición entre un grupo de hijos.
los que no cumplan el selector
seleccionar en función del idioma que se le pase
representa al elemento raíz (en HTML es el elemento html)
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;
}
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?
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
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?
Se resuelve con la ESPECIFIDAD
- estilos inline
- identificadores
- clases, pseudoclases, atributos
- elementos
Cómo se resuelve un conflicto de estilos en el mismo nivel de prioridad, atendiendo a la especifidad?
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
- estilos inline → 1000
- identificadores → 100
- clases, pseudoclases, atributos → 10
- elementos → 1
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?
Por el orden. El navegador se queda con el ÚLTIMO que haya leído
Qué es la herencia en CSS
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-, …
Cómo se puede forzar la herencia de un atributo de CSS, que por sí mismo no es heredable de forma nativa?
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;
}
En qué se diferencia la propiedad display:none con visibilty:hidden de un elemento html?
display: none no renderiza nada, ni el hueco del elemento
visibility: hidden sí deja el hueco
Cuándo se espera la versión CSS4? Por qué?
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
Qué modelos de colocación se incluyen en CSS3?
FlexBox y Grid
Cómo se activa el modelo de caja flexible en CSS3?
En el contenedor se pone el atributo display:flex al contenedor
.container { display: flex; /* or inline-flex */ }
Qué properties principales se usan en flexbox para el contenedor flexbox?
- 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: alinea en horizontal los elementos (flex-start, flex-end, start, end, center, …)
- align-items -> alinea en vertical los elementos
- align-content -> alinea en vertical las filas de elementos
https://www.yunbitsoftware.com/blog/2017/03/30/flexbox-css3-tutorial-des
Qué properties principales se usan en flexbox para los item dentro del contenedor flexbox?
- order: se le asigna un nº, por defecto todos tienen cero
- 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
https://www.yunbitsoftware.com/blog/2017/03/30/flexbox-css3-tutorial-des
Cómo se amplía la funcionalidad de CSS3?
Qué significan las siguientes unidades relativas en CSS3?
em
ex
ch
rem
%
vw
vh
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
Qué significan en CSS3 las siguientes unidades absolutas?
in
cm
pc
mm
pt
px
Q
in → pulgadas
cm
pc → pica (12 pt)
mm
pt → punto (0.35 mm)
px
Q → ¼ de mm
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?
Media queries. Se usan para
- Aplicar estilos condicionales con las reglas-at @media e @import de CSS.
- Indicar medios específicos en los elementos , y otros elementos HTML.
- Testear y monitorizar los estados de los medios usando los métodos de javascript Window.matchMedia() y MediaQueryList.addListener()
Ejemplo media query
@media only screen and (max-width: 414px) {
.deviceWidth {width:280px!important; padding:0;}
.center {text-align: center!important;}
}
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?
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
En qué orden de cercanía están el borde, el margen y el relleno del elemento en HTML/CSS?
Elemento → Padding → Borde → Margen
Qué significa que en una propiedad de un selector de CSS3 tenga prefijo, como:
- webkit-box-shadow:..
- moz-box-shadow:…
Que aplican según el navegador o motor de renderizado
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?
Los Media Types:
@media print{….}
@media screen{…]
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?
Media Query (responsive)
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?
Transpiladores, o también se usa más en este mundo css Compiladores
En las propiedades definidas en los selectores, es necesario poner punto y coma?
Es opcional, es una buena práctica
p {
valor: (es);
}
En CSS3, qué cosas se expresan con @? “reglas at”
para MediaQuery, para responsive en función del tamaño pantalla
definir los estilos/formatos de la pagina cuando vamos a imprimirla
Importar css desde otros ficheros css
definir el charset
usar fuentes personalizadas
Sirve para agrupar estilos y dar prioridades entre esos grupos
@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
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
- document.getElementById(‘…’)
- documento.querySelector(‘…’)
Cómo se definen en CSS3 variables personalizadas?
se declara y se le asigna valor: –variable:valor;
Se usa: var(–variable)
Qué atributos se heredan por defecto y cuáles no?
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, …
Repasar los atributos típicos de CSS para el examen: background, color, text- ….
Leer la guía css3 para estar al tanto de los atributos tipicos de cara al examen
https://zbrain-academy.es/pluginfile.php/76302/mod_resource/content/2/guia_css3_emezetapdf.pdf
