B3T8 CSS Flashcards
CSS
Propiedades que definen al “modelo de caja”
- margin (TRBL)
- border tamaño estilo color (ej 2px dashed red)
- padding
CSS
¿Como se define el selector para un elemento cuyo valor de atributo “id” es “abc”?
#abc {
estilos;
}CSS
¿Como podemos poner en color rojo todos los parrafos que haya directamente dentro de un div?
div > p {
color:red;
}CSS
¿En que consiste el mecanismo de la herencia?
Que los hijos heredan de forma automatica ciertas properties del padre
OPINION: font-size es de las properties mas importantes que se heredan (con esto se entiende bien “em”)
CSS
¿En que consiste el posicionamiento “sticky”?
Es un posicionamiento de un bloque que “sobrevive” al posible scroll de la pagina
CSS
¿Cual es la utilidad de un preprocesador CSS? ¿y de un framework CSS? –> ejemplos
1.- ayudar al desarrollador a confeccionar hojas de estilo con una sintaxis MAS POTENTE que CSS
NOTA: tenemos que realizar un proceso de “traduccion” a css porque el navegador estos lenguajes no los entiende
Ej. less/sass/stylus
2.- conjunto de clases de estilos predefinidas (posicionamiento, botones, componentes,…)
Ej. Bootstrap, TailWind, Material, Foundation, Bulma
NOTA: Bootstrap es de Twitter y Material de Google
CSS
¿Como se especifica en CSS que queremos en cursiva una fuente?
font-style:italic
CSS
¿Como podemos hacer para que los parrafos empiecen por mayuscula?
p {
text-transform:capitalize;
}
p::first-letter {
text-transform:uppercase;
}CSS
¿Podemos asignarle dos clases de estilos diferentes a un cierto elemento?
<elemento class="clase1 clase2"> ...
CSS
¿Podemos importar dentro de una css el contenido de otra?
@import url(“…../estilos.css”)
CSS
¿Como se podrian definir unos estilos que unicamente tengan efecto a partir de una cierta resolucion?
@media screen and (min-width: 900px) {
}CSS
¿Como se pueden aplicar estilos a los enlaces cuando pasas el raton por encima?
a:hover {
}CSS
Si tenemos dos selectores que afectan a un <button> (uno en estilos1.css y otro en estilos2.css) ¿Cual tendrá más preferencia?
Sin mas datos, tendria mas preferencia el ultimo que se haya “enlazado” (NOTA: <link rel=... href=...)
CSS
¿Para que usamos la declaracion !important?
Para aumentar la prioridad de ese estilo dentro de la “cascada”
CSS
Significado de las unidades rem,em,vw,vh
a) rem –> unidad relativa a la raiz (etiqueta <html>)
b) em –> unidad relativa al tamaño que heredas del padre
``` section {
font-size:40px;
}
p {
font-size:0.5em;
}
<div>
<section>
<p> <!-- el p tendria un tamaño de fuente efectivo de 20px -->
~~~
c) vw y vh --> unidad relativa al tamaño del "viewport"
