B3-T8_CSS Flashcards
(51 cards)
¿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é representa la propiedad z-index?
Con z-index, que acepta valores numéricos, podemos definir la altura/profundidad de nuestras capas (div por ej). Es decir, pasamos de ver una página en 2D a 3D.
¿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.
¿Qué son los Tipos Medio o Media QUERIES?
Con la filosofía RESPONSIVE, que quiere decir que se adaptan al medio (tamaño/resolución), definen el documento en función del dispositivo donde se vaya a visualizar:
@media mediatype {…}
@media print {define estilo de cara a imprimir}
@media screen {define estilos para salir por pantalla}
=> aplica estilo directamente a la etiqueta
(Párrafo)
HELLO freak
Parrafo1