36810031
Descripción
Mapa Mental por Aaron Chávez, actualizado hace más de 1 año
|
Creado por Aaron Chávez
hace más de 3 años
|
|
CSS
- Flexbox
- Variable
- Es un espacio en memoria del ordenador que va a almacenar un valor
- Scope
- Local: A nivel del DOM
- Estilos solo se aplicaran al elemento padre e hijos.
- Estilos solo se aplicaran al elemento padre e hijos.
- Global
- Aplicaran a todo el documento html
- html o pseudoclase: ":root"
- :root
- Hace referencia a la etiqueta html pero esta tiene mayor especificidad
- Ejemplo: :root{
--primary-color: red; }
- Ejemplo: :root{
--primary-color: red; }
- Hace referencia a la etiqueta html pero esta tiene mayor especificidad
- html
- Etiqueta raiz del documento html
- Ejemplo: html, body{--primary-color: red;}
- Ejemplo: html, body{--primary-color: red;}
- Etiqueta raiz del documento html
- :root
- Aplicaran a todo el documento html
- Local: A nivel del DOM
- Declaración
- .h1{--color: blue;}
- Ejemplo:
- Palabra reservada var es una función de css
Funcion -> var();
- Recibe como parametro el nombre de la variable
- .h1 p{ color: var(--color)}
- .h1 p{ color: var(--color)}
- Recibe como parametro el nombre de la variable
- Palabra reservada var es una función de css
Funcion -> var();
- Ejemplo:
- Doble guión "--" , nombre de la variable , valor que almacenará la variable
- .h1{--color: blue;}
- Es un espacio en memoria del ordenador que va a almacenar un valor
- Media
Queries
- pseudoclases
- pseudoelementos
- background
- posicionamiento
- metodologia bem
- grid
- Unidades de medida
- Relativas
- Em: Toma como referencia al tamaño de fuente del elemento padre
- Rem: Toma referencia de la etiqueta raiz del documento html -> es decir html o body
- ch: Toma como referencia los caracteres que tenga en html y se especifica en css
- Adaptan el contenido de la
caja
- Adaptan el contenido de la
caja
- Em: Toma como referencia al tamaño de fuente del elemento padre
- Absolutas
- (Su valor no cambia, son unidades del mundo real) Su valor es
fijo
- No recomendado utilizar
- No recomendado utilizar
- (Su valor no cambia, son unidades del mundo real) Su valor es
fijo
- %: Utilizada para el ancho y altura de las cajas
- El heigth depende del tamaño
del contenido pero depende
tambien de un elemento padre
- El heigth depende del tamaño
del contenido pero depende
tambien de un elemento padre
- Relativas
- Tamaño de Caja
- Reseteo de cajas para evitar el
desbordamiento cuando se
agrega padding y border
- Propiedad: box-sizing: border-box;
- Empieza a contar el tamaño de la caja desde el borde.
- Empieza a contar el tamaño de la caja desde el borde.
- Propiedad: box-sizing: border-box;
- Propuesto por Paul erish
- Reseteo de cajas para evitar el
desbordamiento cuando se
agrega padding y border
¿Quieres crear tus propios Mapas Mentales gratis con GoConqr? Más información.