CSS3 Flashcards
¿De qué se trata y que hace el siguiente código?
a:hover {
background: red;
color: white;
text-decoration: none;
}
Es una pseudo-clase, porque va con “:”. Lo que está haciendo, es que al pasar el ratón por encima de ese ancla de referencia (a), está aplicando que el fondo lo ponga en rojo, el color de las letras sea blanco y con text-decoration está quitando el subrayado que hay por defecto en los anclas de referencia.
Ejemplos de pseudo-clases
- :hover (pasar por encima del elemento con el cursor del ratón
- :active (cuando pinchamos)
- :focus (cuando tiene el foco)
- :required (atributo booleano que es obligatorio)
- : first-chile (el primer hijo del elemento)
Ejemplos de pseudo-elementos
- ::after
- ::before
(añadir por CSS información antes o después de un elemento) - ::first-line
- ::first-letter
(primera línea o primera letra dentro de un párrafo, por ejemplo)
¿Qué diferencia hay entre display:none y visibility:hidden?
- display:none (no renderiza ni el hueco)
- visibility:hidden (el contenido lo quita, y por lo tanto, no lo renderiza, pero el hueco sí
Diferencias entre display:inline, display:block y display:inline-block
- display:inline (elementos en horizontal si se puede)
- display:block (elementos uno debajo del otro)
display:inline-block (en filas y columnas)
Propiedades de posición
- position: static; (por defecto, no hace nada)
- position: relative; (posición relativa a la que debería ocupar en el flujo normal que marca el navegador)
- position: absolute; (posición absoluta respecto al contenedor padre o en su caso del documento)
- position fixed; (en base al documento)
- position sticky; (estilo para que los botones del menú se queden fijos en la parte del navegador cuando hacemos scroll)
¿Con qué propiedad se puede dar de alta fuentes de tamaño,?
Con @font-face
Unidades absolutas en fuentes
- in (pulgadas)
- cm (centímetros)
- px (pixel)
Unidades relativas en fuentes
- rem (relativo a la raíz, que es el html)
- em (tamaño relativo al padre)
Unidades relativas al Viewport. Unidades para el mundo responsive.
Viewport es la zona util del navegador, dando igual el tamaño del dispositivo que se está usando.
- vw (viewport width)
- vh (viewport height)
- vmax
- vmin
Cabecera para decirle al navegador, que todas las reglas de @media queries que pongamos sean relativas al viewport
<meta></meta>
¿Qué propiedades se heredan de padres a hijos por defecto?
Color, font, text- y line-height
¿Que valor habría que darle a una propiedad CSS para hacer que un hijo herede una propiedad de su padre que no se hereda por defecto?
inherit
Ejemplo:
p{
background:inherit;
}
Formatos conocidos que son soportados por los navegadores
- WOFF
- OTF
- TTF
Fichero que se enlaza dentro de @font-face
src : local();
url();
¿Qué elementos son llamados at-rules (declaraciones CSS?
- @charset (definir conjunto de caracteres usados en la hoja de estilos)
- @import (indica al motor CSS que incluya una hoja de estilos externa)
- @media ( mediante media query aplicar reglas si el dispositivo cumple los criterios definidos)
- @font-face (para instalar nuevos formatos de fuente)
- @page (para establecer estilos cuando queremos imprimir una página)
¿Cual es el orden de prioridades dentro de la importancia?
- User !important declaration
- Author !importan declaration
- Autor declaración
- Usuario declaración
- Navegador declaración por defecto
Si el autor de una página ha puesto en una etiqueta <p> un atributo style definiendo el color azul para esa etiqueta, y al principio del documento consta una etiqueta style en la que define que las etiquetas <p> tengan el color rojo. ¿Qué prevalecerá en ese conflicto?
En la etiqueta <p> en la cual ha indicado el color azul dentro del atributo style, dado que tiene más especificidad
¿Qué estilo tiene más prioridad? ¿El que está en un documento externo o el que está en el mismo documento?
Según el orden. El que aparece después en el documento. Si la declaración link rel… está después de la etiqueta style, tendría más prioridad lo definido en el documento externo
Si definimos:
margin: 10px 15 px 10 px 15 px
¿A qué pertenece cada valor?
T R B L. (trébol)
Top Right Bottom Left
Vale tanto para margin como para padding
¿De qué otra forma se puede especificar lo siguiente?
border-width: 2px;
border-color: red;
border-style: solid;
border: 2px red solid;
Qué tipo de selector es #1234
Es un selector de identificador
id=”identificador”
Qué tipo de selector es p {}
Se refiere a la etiqueta <p>
Que tipo de selector es .equipo {}
Se refiere a una clase definida llamada equipo
<h1>
</h1>
Para aplicar una clase de estilo referida sólo a una etiqueta, ¿Como se indicaría?
nombreetiqueta.clase {}
¿A cual de estos dos selectores de etiqueta se aplicarían las propiedades?
etiqueta1, etiqueta2 {}
A ambos por separado. Es como poner:
etiqueta1 {}
etiqueta2 {}
¿A cual selector de etiqueta se aplicarán las propiedades?
etiqueta1 etiqueta2 {}
A la etiqueta 2 que esté dentro de la etiqueta 1 (que sea hija de 1)
¿A cual selector de etiqueta se aplicarán los cambios?
etiqueta1 > etiqueta2 {}
A la etiqueta 2 que sea hijo directo de la etiqueta 1, pero a ese nivel
A cual se aplican las propiedades
a ~ b {}
Se aplica a B si es hermano de A
A cual se aplican las propiedades
a + b {}
Aplica a B si es hermano directo de A (si no hay nada entre medias y son hermanos)
Procesadores CSS
LESS, SASS, STYLUS
Frameworks CSS. ¿En que consisten?
Bootstrap, Fundation, Bulma, Materialize
Un framework es un conjunto de clases ya definidas
