***********
CSS RESUMEN -> https://www.youtube.com/watch?v=OWKXEJN67FE
***********
**********
SELECTORES
**********
selector {
propiedades: valor;
}
Seleccionar por:
Universal: * selecciona todo
Tipo: por elemento (h2, button, p)
Clase: por clase (.clase1)
Id: por Id (#id1) los id deben ser únicos
Atributo: por atributo [horario="tarde"]
Descendente: .clase1 p (los p dentro de la clase1)
Pseudoclase: b:hover (los b al pasar por encima el ratón) active, hover
*************
ESPECIFICIDAD
*************
De mayor a menor jerarquía:
!important (color: blue !important;)
----------------
estilos en línea (el puesto en html)
----------------
Identificadores
----------------
clases
pseudoclases
atributos
----------------
elementos
pseudoelementos
En igual jerarquía el último es el que manda.
***************
METODOLOGÍA BEM
***************
Convención para nombrar las clases
nombreClase__nombreElemnto--nombreSubElemento
******************
MEDIDAS Y UNIDADES
******************
Fijas: px,cm,mm,pt
Relativas: em, vw, vh (viewport width - height), % (de la caja contenedora)
1em por defecto son 16 px pero valdrá lo que se ponga en la caja contenedora
100vw; -> el ancho de la pantalla entera
100vh; -> el alto de la pantalla entera
********************
PROPIEDADES DE TEXTO
********************
Google fonts -> https://fonts.google.com/
font-size: 1em; tamaño de fuente
font-family: Verdana; tipografía
line-height: 1; altura de línea
font-weight: 500; grosor
text-align: center;
*********
NORMALIZE
*********
Para resetear el estilo por defecto de los navegadores
https://necolas.github.io/normalize.css/
normalize.css
en local:
online:
editamos algunas cosas:
img {
border-style: none;
max-width: 100%;
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
*****
BOXES
*****
Elemento en bloque ocupa todo el ancho de la caja
display: block;
Elemento en linea ocupa lo que ocupa el contenido
display: inline;
Podemos cambiarlos:
h2 {
display: inline-block;
}
A los inline no se le pueden dar medidas, los block sí
Propiedades de cajas:
padding: distancia entre el texto y la caja (top, right, bottom, left)(y,x)(todo)
margin: distancia entre las cajas (top, right, bottom, left)(y,x)(todo)
margin: auto; para centrar
h2 {
background-color: red;
display: inline-block;
padding: 50px;
box-sizing: border-content;
text-align: center;
}
box model:
content -> line-height
padding
border
margin
box-sizing: content-box; cuenta los bordes por fuera de la caja
box-sizing: border-box; cuenta los bordes por dentro de la caja
**********
BACKGROUND
**********
background-color: color
background-image: url(https://...)
background-size: x, y, auto, cover, contain
background-position: top, right, bottom, left, center ++ top, right, bottom, left, center
background-attachment: scroll, fixed, inherit
background-clip: border-box, padding-box, content-box
background-origin - origen de la foto (valores de arriba)
background-repeat: no-repeat
******
BORDES
******
border-radius: 50%;
border: 4px solid blue (solid, dashed, double, groove, inset, outset, ridge)
*******
SOMBRAS
*******
box-shadow: (x,y, tamaño sombra, borde, color)
text-shadow (x,y, tamaño sombra, color)
opacity: .5; transparencia
********
ROTACIÓN
********
transform: rotate(-45deg);
*******
OUTLINE
*******
Propiedades acortadas
outline: 20px solid blue; es como border pero no ocupa espacio
********
POSITION
********
Posiciona los elementos:
position:
static (por defecto)
relative (conserva el espacio aunque se desplace)
absolute (no conserva el espacio), toma como referencia el viewport o el contenedor en caso de que esté posicionado, se autoajusta al contenido
fixed igual que absolute pero queda fijado (se utiliza para los nav, menús, etc)
sticky como un fixed pero se mueve
(top, left > right, bottom)
cuando los elementos están posicionados podemos especificar cual está por encima:
z-index: 100;
para poner al hijo por debajo del padre
padre:
position: relative;
hijo:
position: relative;
z-index: -1;
*******
DISPLAY
*******
Modifica el comportamiento de las cajas
display: block;
display: inline;
display: inline-block; podemos modificar las dimensiones
display: table
display: inline-table
display: list-item
display: table-cell
display: table-row
display: table-column
display: grid
display: flex
display: inline-flex
display: inline-grid
********
OVERFLOW
********
scroll con lo que sobra, en caso de que el contenido sobrepase la caja hace un scroll
overflow: auto; (auto, scroll) (x, y) hidden
*****
FLOAT
*****
El texto envuelve a la imagen
float: right;
***************
PSEUDOELEMENTOS
***************
no afectan al DOM
::first-line | block primera línea
::first-letter | block primera letra
.parrafo::first-letter{
color: blue;
}
::placeholder el texto de los inputs
.input::placeholder{
color: blue;
}
::selection para selección de texto
::after | hijos - content (necesario) - inline
::before | hijos - content (necesario) - inline
p::before{
content: "esto va al principio de p"
}
************
PSEUDOCLASES
************
:hover cuando el mouse está encima
transition nos permite cambiar la velocidad de las transiciones
transition: background 1s, height 1s, width 1s;
transition: all 1s; todo junto
:link enlace no visitado
:visited enlace visitado
:active al apretar un botón
:focus cunado tiene el foco
:lang para cambiar el estilo según el idioma
html:
hello
.caja p:lang(en){
}
**********
OBJECT-FIT
**********
se usa especialmente con imágenes
object-fit:
contain la imagen se ajusta con resolución real
cover la imagen se ajusta al contenido
.caja img{
object-fit: cover;
}
none usa la resolución por defecto de la imagen
scale-down se queda con el valor más bajo
object-position: muestra el lado de la imagen que queramos
left - right - top - bottom
px - em - % - etc
******
CURSOR
******
cambia el cursor cuando está encima de un elemento
cursor: pointer;
tipos de cursor:
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_cursor
*******
COLORES
*******
https://htmlcolorcodes.com/es/
rgb -> rojo, verde, azul
rgb(0,0,0) negro
rgb(255,0,0) rojo
rgba(255,255,255,.5) alfa -> opacidad
#fff el máximo rgb -> blanco
#ffff el máximo rgb -> blanco + opacidad máxima
#ffffff el máximo rgb -> blanco
#ffffffff el máximo rgb -> blanco + opacidad máxima
*****************
RESPONSIVE DESIGN
*****************
@media only screen and (max-width: 800px){
div {
display:block;
width:100%;
}
}
***************
MENÚ RESPONSIVE
***************
ICONOS
https://fontawesome.com/
*******
FLEXBOX
*******
display: flex;
eje x -> main-axis (main-start, main-end)
eje y -> cross-axis (cross-start, cross-end)
html:
css:
.flex-container {
display: flex;
}
.flex-item {
background-color: #248;
color: #fff;
margin: 5px;
height: 120px;
width: 120px;
}
*****************************
PROPIEDADES FLEX DE LAS CAJAS
*****************************
flex-direction: row, column, row-reverse. colum-reverse
flex-wrap: wrap, wrap-reverse, no-wrap
flex-flow: column wrap
justify-content: center, space-around, space-between, space-evenly (main axis)
align-items: strecht, flex-start, center, flex-end, baseline (cross axis)
align-content: para más de una línea
html:
flex box
flex box
flex box
flex box
flex box
flex box
flex box
flex box
css:
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
height: 100vh;
align-content: flex-start;
}
.flex-item {
background-color: #248;
color: #fff;
margin: 5px;
height: 120px;
min-width: 120px;
text-align: center;
}
.orange {
background-color: orange;
}
.green {
background-color: green;
}
*****************************
PROPIEDADES FLEX DE LOS ITEMS
*****************************
dentro de un flex podemos centrar con margin: auto;
align-self: center, flex-start, flex-end, baseline (posiciona en el eje y)
flex-grow: 1; (espacio asignado + sobrante / grows) main axes
flex-basis: es como el width pero de mayor especificidad
flex-shrink: (no empieza a ceder espacio hasta que todas tienen el especificado)
flex: (flex-grow, flex-basis, flex-shrink)
order: es como el z-index pero en el eje main axis
html:
flex box
flex box
flex box
css:
.flex-container {
display: flex;
height: 100vh;
flex-wrap: wrap;
}
.flex-item {
background-color: #248;
color: #fff;
margin: 5px;
text-align: center;
height: 100px;
width: 300px;
flex-grow: 1;
}
.orange {
background-color: orange;
}
.green {
background-color: green;
}
**************
GRID CONCEPTOS
**************
display: grid; se comporta como bloque con grilla
grid container es toda la caja
grid item cada elemento de una celda, hijos directos de grid container
grid cell cada celda
grid tracks (column y row)
grid area para definir areas consecutivas
grid line (column line y row line)
****************
PROPIEDADES GRID
****************
(grid-container)
grid-template-columns número de columnas
grid-template-rows número de filas
grid-gap (row column) es como un margin entre celdas
grid-row-gap
grid-column-gap
(grid-item)
grid-row -> grid-row: 3 / 5; va desde la fila 3 a la 5
grid-column -> grid-column: 3 / span 3; desde la fila 3 y ocupa 3
grid-row-start
grid-row-end
grid-column-start
grid-column-end
unidades auto y fr
repeat (cantidad, tamaño/s) repeat(3,150px) 1fr;
grid-template-columns: repeat(3,150px) 1fr;
para seleccionar items -> .grid-item:nth-child(2)
html:
1
2
3
4
5
6
7
8
9
10
11
12
css:
body {
background: radial-gradient(circle,#fff,#bbb);
padding: 15px;
}
.grid-container {
display: grid;
grid-template-columns: 150px 150px 150px 1fr;
grid-template-rows: 150px 150px 150px 150px;
border: 3px solid #000;
grid-gap: 10px;
background-color: #333;
}
.grid-item {
border: 1px solid #000;
background-color: #999;
}
.grid-item:first-child {
background: #f00;
grid-column: 1 / 3;
grid-row: 1 / 3;
}
.grid-item:nth-child(2) {
background: #0f0;
grid-column: 3 / span 2;
grid-row: 1 / 2;
}
**************************
GRID IMPLÍCITO Y EXPLÍCITO
**************************
Si un item se sale de la grilla se creará como grid implícito
(igual que grid-template)
grid-auto-rows
grid-auto-columns
grid-auto-flow row (default), column, dense -> rellena las celdas vacías
*************
GRID DINÁMICO
*************
generalmente se ponen en el repeat
minmax() cual es el mínimo y el máximo
grid-template-columns: repeat(3,minmax(100px,300px));
min-content contenido mínimo
max-content contenido máximo
grid-template-columns: repeat(3,minmax(min-content,max-content));
cantidad:
auto-fill si hay espacio agrega otra columna si no ensancha un fr
auto-fit rellena escalando
grid-template-columns: repeat(auto-fill,minmax(120px,1fr));
*****************************
ALINEACIÓN Y CONTROL DE FLUJO
*****************************
Diferencia con flex:
la alineación es dentro de cada celda y no
alineación total del flex container.
Cada celda sería un flex container
Propiedades del grid-container
justify-items (horizontalmente)
align-items (verticalmente)
strecht (default), start, center, end
place-items: align-items justify-items
justify-items: center;
align-items: center;
Alineación de filas y columnas
justify-content (horizontalmente)
align-content (verticalmente)
strecht (default), start, center, end
más las de flex:
space-around, space-between, space-evenly
Aplicado al grid item:
align-self
justify-self
place-self: align-self justify-self
strecht (default), start, center, end
order (igual que en flex)
**********
GRID ÁREAS
**********
grid-container
grid-template-areas: "nombres de áreas"
grid-item
grid-area: "nombre del área"
Nombre del las líneas
[line-name]
se puede reemplazar en grid-row y grid-column
shorthand:
grid-template: row / columns (grid-container)
grid-template: area unidad
*****************
RESPONSIVE DESIGN
*****************
Estructuras flexibles (contenedores, imágenes y videos flexibles)
media queries
@media se usa en consultas de medios para aplicar diferenres estilos
para diferentes tipos / dispositivos
ancho y alto de la ventana gráfica
ancho y alto del dispositivo
orientación la tablet - móvil en modo horizontal o vertical
resolución
all para todos los dispositivos
print para material impreso
screen para pantallas
speech sintetizadores de voz
Operadores AND | OR
orientación: landscape y portrait
.div-responsive {
background: #c59;
}
@media screen and (min-width: 400px) and (max-width: 650px) {
.div-responsive {
background: #f00;
}
}
**********
TRANSITION
**********
transition-property: property/ies - all - one
transition-duration: duration/s
transition-delay: delay/s
transition-timing-function: linear, ease, esase-in, ease-out,
step-start, step-end, steps(int, start|end),
initial, inherit
transition:
.caja {
transition-property: background;
transition-duration: 1s;
}
***********
ANIMACIONES
***********
animation-name: name
animation-duration: duration
animation-delay: delay
animation-timing-function: (transition values punto1 xy - punto2 xy)
animation-timing-function: cubic-bezier(0.4,0.23, 0.36, 1.51)
animation-iteration-count: number, infinite
animation-direction: normal, reverse, alternate, alternate-reverse
animation-fill-mode: none, forwards, backwards, both, initial, inherit
.caja {
animation-name: desplazarse;
animation-duration: 1s;
position: relative;
}
@keyframes desplazarse {
0% {
left: 0;
}
100% {
left: 80%;
}
}
*********
TRANSFORM
*********
transform: translateX(x) - translateY(y) translate(x - x,y)
si usamos porcentajes son relativos al elemento (recomendado para animaciones)
transform: scale(xy - x,y) - scaleX(x) - scaleY(y)
transorm: rotate(angleUnit) - rotateX(angleUnit) - rotateZ(angleUnit) - rotate3D(angleUnit) || angleUnit deg, grad, rad, turn
transform: skew(angleUnit)
https://www.w3schools.com/cssref/css3_pr_transform.asp
https://bennettfeely.com/clippy/
https://www.cssmatic.com/es/box-shadow
VARIABLES