B3-T8_CSS Flashcards
¿Qué tres parámetros (atributos) se relacionan con el “Modelo de Caja” ?
- margin
- border
- padding (relleno)
¿Qué tipo MIME representa a una hoja de estilos?
text/css
¿Para qué sirve el siguiente selector: a[title] { … }?
Selecciona todas las etiquetas “a” que tengan definido el atributo “title” o cualquier otro atributo entre los [].
¿Para qué sirve el siguiente selector: [lang] { … }?
Selecciona todas las etiquetas que tengan definido el atributo lang.
¿Cómo se definen reglas específicas para adaptarse a un dispositivo móvil por ej.?
@media only screen and (max-width:640px) { … }
¿Qué se toma como referencia cuando decimos position:fixed o position:absolute?
- position:fixed: la referencia es el DOCUMENTO siendo (0,0) la esquina superior izquierda
*position:absolute => La referencia es el CONTENEDOR en el que este definida la etiqueta afectada por este estilo.
Nombre 3 preprocesadores CSS y 3 FramWork CSS:
PREPROCESADORES:
* less
* sass
* stylus
FRAMEWORK:
* bootstrap
* foundation
* materialize
Nombre dos at-rules:
- @charset => para especificar el conjunto de caracteres en los que se codificara la hoja.
- @font-face => para trabajar con fuentes externas.
NOTA: Una regla-at es una declaración CSS que comienza con el símbolo @, seguido por un identificador, un nombre y entre llaves las reglas
EJEMPLO: La regla-at @keyframes se utiliza para definir una secuencia de fotogramas de una animación CSS.
@keyframes nombreAnimacion {
/*las reglas para nombreAnimacion */
}
¿Para qué sirve el siguiente selector: table , a { … } y table a { … }?
*table , a { … } => Se aplicarán los estilos sobre las etiquetas “table” y sobre “a”.
*table a { … } => Se aplicarán los estilos sobre las etiquetas “a” que estén dentro de una “table” (en cualquier nivel de profundidad).
¿Para qué sirve el siguiente selector: .texto { … }?
Se aplicarán los estilos sobre todas las etiquetas que hayan declarado su atributo “class” de esta forma:
‹etiqueta class=”texto”› …
¿Cuál es el selector que se refiere a un elemento en base a su identificador: #ID {…} o #identificador {…}?
identificador { … }
¿Para qué sirven estos selectores y como se le denominan: a:hover { … } y p::first-letter { … }?
*a:hover { … } => Se le denomina PSEUDO:CLASE y en este caso el significado es: se aplicarán estilos sobre los enlaces al pasar el ratón por encima.
*p::first-letter { … } => Se le denomina PSEUDO::ELEMENTO y en este caso el significado es: se aplicarán estilos sobre la primera letra de los párrafos.
¿Para qué sirve la siguiente declaración en un archivo css externo por ej: p { color:red !important; }?
Para forzar a que los párrafos tengan texto en color rojo aunque haya cualquier otra regla.
Es decir, con !important se modifica el orden de aplicar estilos con los selectores.
¿A qué elementos se le aplica la “especificidad”?
A los selectores.
NOTA: La especificidad es la manera mediante la cual los navegadores deciden qué valores de una propiedad CSS son más relevantes.
¿Qué propiedad(es) de las siguientes no se heredan entre etiquetas padre e hijos sin tener que forzarlo?
- color
- font-family
- margin
- text-align
El margin no se hereda por defecto, el resto si.
¿Cómo se fuerza a heredar de tu etiqueta padre el valor que tuviera su propiedad “float”?
Con “inherit”:
selector { float:inherit; }
¿Qué diferencia fundamental tienen estas dos declaraciones?
- display:none
- visibility:hidden
Aunque las dos provocan que se oculte el elemento, display:none no deja el hueco que ocuparía el elemento y visibility:hidden si deja ese espacio “en blanco”.
¿Con que etiqueta podríamos hacer uso de fuentes tipográficas externas?
@font-face
¿Qué tipo de unidad de medida es “em” y que significa?
Es una unidad de medida relativa respecto de la fuente actual (contando con la herencia !ojo! ).
¿Cuáles de las siguientes medidas son relativas?
- px
- cm
- rem
- pt
- em
*em => Es una unidad de medida relativa respecto de la fuente actual (contando con la herencia !ojo! ).
*rem => (ROOT em) es una unidad de medida relativa a la fuente definida en la raiz (etiqueta html).
¿Qué es una caja en CSS?
Prácticamente todo viene definido en cajas en CSS y tienen 3 partes: borde, margen, relleno (padding), además del contenido de su interior.
Se puede jugar con estos 3 espacios, x ejemplo para separar una columna de otra en una tabla.
EJEMPLO:
<style
border: 1 px solid;
padding: 10 px;
box-shadow: 5 px 10 px red;
</style
RESULTADO:
*borde: 1 pixel y línea sólida ( ______)
*relleno: 10 pixeles
*sombra o margen: 5 pixeles: parte anche, 10 parte larga y color rojo.
¿Cuál es el orden a la hora de aplicar un margen u otro?
El orden de un “margen” es como el orden LIFO de las Pilas => partiendo de que el orden es el de las agujas del reloj (top-right-bottom-left), si nos dan 3 medidas (ya sean en px, em o %), ya sabemos que no se aplica nada a la última (margin-left).
Si nos dan 2, sólo se aplican a margin-top y margin-right.
Dejando esto claro, que si nos dan sólo una medida, sólo se aplicaría a margin-top.
Define algunos atributos de la propiedad “position”:
menu1 {position:relative;} => desplaza “menu1” respecto su posición natural (la x defecto que establece el navegador)
Al igual que la propiedad “display”, servían para colocar los elementos en el documento antes de tener los módulos FLEX BOX o GRID.
{position:sticky} => (pegajoso) se puede desplazar, pero cuando llega arriba se queda fijado (fixed).
{position:static} => (x defecto) es el orden natural que tiene el navegador de colocar los elementos.
{position:relative} => desplaza el elemento respecto de su posición STATIC (natural) con la sintaxis “relative+top, left, right, …”.
{position:absolute} => movimiento referido en base al contenedor PADRE.
{position:fixed} => movimiento referido en base al DOCUMENTO, siendo 0,0 la esquina superior izquierda. Es una especie de bloqueo de una zona.
EJEMPLOS:
.elementoX {position:fixed;} => el elementoX queda fijado respecto al documento.
¿Cuáles son las medidas RELATIVAS de acuerdo al ViewPort (medida del dispositivo)?
vh (Viewport HEIGHT=altura) y vw (Viewport WIDTH=ancho).
1 vh = 1% => de la ALTURA de la Viewport.
1 vw = 1% => del ANCHO de la Viewport.
EJEMPLO:
*Cuando queremos tener una imagen de fondo que ocupe todo el ancho (vw) y el alto (vh) de la pantalla del dispositivo.
*Cuando queremos que nuestro texto varíe de acuerdo a las medidas del dispositivo.
También se usan para estos ajustes:
vmin (Viewport min): medidas PORCENTUALES de la dimensión MENOR de la ventana gráfica del dispositivo.
vmax (Viewport max): medidas PORCENTUALES de la dimensión MAYOR de la ventana gráfica del dispositivo.
